Indieroad/assets/css/style.scss

@import 'custom.scss';

/* Themes */
$colors: (
	body-background: #f7f7f7,
	container-background: #fff,
	contrast-text: #fff,
	contrast-background: #263238,
	headline: #000,
	strong-text: #000,
	light-background: #f5f5f5,
	border: #ebebeb,
	border-hover: #aaa,
	meta: #666,
	hr: #dadada,
	body-background-dark: #263238,
	container-background-dark:#000a12,
	contrast-text-dark:#fff,
	contrast-background-dark:#4f5b62,
	headline-dark:#fff,
	strong-text-dark:#000,
	light-background-dark:#4f5b62,
	border-dark:#ebebeb,
	border-hover-dark:#aaa,
	meta-dark:#666,
	hr-dark:#dadada,
	main-color: $mainColor
);

@mixin color($property, $varName) {
	#{$property}: map-get($colors, $varName);
	#{$property}: var(--#{$varName}, map-get($colors, $varName));
}

@mixin color-border($property, $val1, $val2, $varName) {
	#{$property}: #{$val1} #{$val2} map-get($colors, $varName);
	#{$property}: #{$val1} #{$val2} var(--#{$varName}, map-get($colors, $varName));
}

@mixin lightmode {
	--body-background: #{map-get($colors, body-background)};
	--container-background: #{map-get($colors, container-background)};
	--contrast-text: #{map-get($colors, contrast-text)};
	--contrast-background: #{map-get($colors, contrast-background)};
	--headline: #{map-get($colors, headline)};
	--strong-text: #{map-get($colors, strong-text)};
	--light-background: #{map-get($colors, light-background)};
	--border: #{map-get($colors, border)};
	--border-hover: #{map-get($colors, border-hover)};
	--meta: #{map-get($colors, meta)};
	--hr: #{map-get($colors, hr)};
	--main-color: #{map-get($colors, main-color)};
	color: #000;
}

@mixin darkmode {
	--body-background: #{map-get($colors, body-background-dark)};
	--container-background: #{map-get($colors, container-background-dark)};
	--contrast-text: #{map-get($colors, contrast-text-dark)};
	--contrast-background: #{map-get($colors, contrast-background-dark)};
	--headline: #{map-get($colors, headline-dark)};
	--strong-text: #{map-get($colors, strong-text-dark)};
	--light-background: #{map-get($colors, light-background-dark)};
	--border: #{map-get($colors, border-dark)};
	--border-hover: #{map-get($colors, border-hover-dark)};
	--meta: #{map-get($colors, meta-dark)};
	--hr: #{map-get($colors, hr-dark)};
	--main-color: #{map-get($colors, main-color)};
	color: #fff;
}

* {
	@include lightmode;
	@media (prefers-color-scheme: dark) {
		@include darkmode;
	}
}

/* Structure */

$break1: 620px;
$break2: 767px;
$break3: 900px;
$break4: 1475px;

*,
*::before,
*::after {
	box-sizing: border-box;
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
	display: block;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1rem;
	line-height: 1.5;
	word-wrap: break-word;
	@include color(background, body-background);
}

.container {
	position: relative;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}

.body-container {
	@extend .container;
	margin: 25px auto;
	@media screen and (max-width: $break4) {
		width: 95%;
	}
	@media screen and (max-width: $break3) {
		width: 100%;
		margin: 0 auto;
	}
}

.wrapper {
	padding: 25px;
	@include color(background, container-background);
	@media screen and (max-width: $break3) {
		padding: 20px;
	}
	@media screen and (max-width: $break2) {
		display: block;
	}
}

.flex {
	display: flex;
}

.primary {
	flex: 1 0 65.83%;
	order: 1;
	min-width: 0;
}

@mixin clearfix {
	display: block;
	&::after {
		display: block;
		height: 0;
		padding: 0;
		margin: 0;
		clear: both;
		line-height: 0;
		visibility: hidden;
		content: "";
	}
}

input,
button,
select,
optgroup,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Button */
@mixin btn {
	padding: 5px 10px;
	font-weight: 700;
	white-space: pre-line;
	@include color(color, contrast-text);
	@include color(background, contrast-background);
	&:hover {
		* {
			@include color(color, contrast-text);
		}
		@include color(background, main-color);
	}
	* {
		@include color(color, contrast-text);
	}
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 20px;
	font-weight: 700;
	line-height: 1.3;
	@include color(color, headline);
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.25rem;
}

h4 {
	font-size: 1.125rem;
}

h5,
h6 {
	font-size: 1rem;
}

a {
	text-decoration: none;
	&:hover {
		@include color(color, main-color);
	}
}

hr {
	margin: 0 0 20px;
	border: 0;
	@include color-border(border-top, 1px, solid, hr);
}

p {
	margin: 0 0 20px;
}

b,
strong {
	font: inherit;
	font-weight: 700;
}

i,
em {
	font: inherit;
	font-style: italic;
}

ol,
ul {
	padding: 0;
	margin: 0;
}

small {
	font-size: .75rem;
}

figure {
	margin: 0 0 20px;
}

figcaption {
	margin-top: 4px;
	@include color(color, meta);
	h4 {
		margin: 0;
		color: inherit;
	}
}

pre,
code,
kbd,
samp {
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: inherit;
}

pre,
code {
	@include color(background, light-background);
	@include color-border(border, 1px, solid, border);
	white-space: pre-wrap;
}

code {
	padding: 0 5px;
}

pre {
	display: block;
	padding: 20px;
	margin-bottom: 20px;
	@include color(color, strong-text);
	code {
		padding: 0;
		color: inherit;
		white-space: inherit;
		background: inherit;
		border: 0;
	}
}

blockquote {
	display: block;
	padding: 5px 0 5px 15px;
	margin: 0 0 20px;
	line-height: 1.6;
	@include color-border(border-left, 5px, solid, main-color);
	p:last-child {
		margin: 0;
	}
	footer {
		text-align: right;
	}
}

sup,
sub {
	font-size: .625rem;
	font-style: normal;
}

sup {
	vertical-align: super;
}

sub {
	vertical-align: sub;
}

abbr[title] {
	text-decoration: none;
	cursor: help;
	border-bottom: 1px dotted;
}

q {
	font-style: italic;
}

dl {
	margin: 0 0 10px 20px;
}

dt,
dd {
	display: list-item;
}

dt {
	font-weight: bold;
	list-style-type: square;
}

dd {
	margin-left: 20px;
	list-style-type: circle;
}

select {
	max-width: 100%;
}

.warning {
	padding: 20px 10px;
	text-align: center;
}

/* Header */
.header {
	@include color(background, container-background);
	.logo {
		padding: 25px;
		@media screen and (max-width: $break3) {
			padding: 20px;
		}
		@media screen and (max-width: $break2) {
			text-align: center;
		}
		.link {
			display: inline-block;
			line-height: 1;
			font-weight: 700;
			.title {
				font-size: 2rem;
				@include color(color, headline);
			}
			.tagline {
				padding-top: 10px;
				margin-top: 10px;
				font-size: .875rem;
				@include color(color, main-color);
				@include color-border(border-top, 1px, solid, border);
			}
		}
	}
}

/* Main menu */
.menu {
	.expand {
		display: block;
		width: 100%;
		@include color(background, contrast-background);
		border: 0;
		cursor: pointer;
		@media screen and (min-width: $break2) {
			display: none;
		}
		.title {
			font-size: .9375rem;
			@include color(color, contrast-text);
			display: block;
			padding: 10px 15px;
			font-weight: 700;
			text-align: right;
			text-transform: uppercase;
		}
	}
	#menu-toggle {
		display: none;
	}
	#menu-list {
		list-style: none;
		@include color(background, contrast-background);
		position: absolute;
		width: 100%;
		visibility: hidden;
		transform: scaleY(0);
		transform-origin: top;
		@media screen and (min-width: $break2) {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			visibility: visible;
			transform: none;
		}
		.item {
			.link {
				display: block;
				padding: 10px 15px;
				font-weight: 700;
				font-size: .9375rem;
				@include color(color, contrast-text);
				text-transform: uppercase;
				&:hover {
					@include color(color, contrast-text);
					@include color(background, main-color);
				}
			}
		}
	}
	#menu-toggle:checked + #menu-list {
		position: relative;
		visibility: visible;
		transform: scaleY(1);
	}
}

.divider {
	height: 5px;
	margin: 0;
	@include color(background, main-color);
	border: 0;
}

/* Posts/Pages */

.main-header {
	margin-bottom: 20px;
	.main-title {
		font-size: 1.75rem;
	}
	.post-title {
		margin: 0;
		margin-bottom: 10px;
	}
}

@mixin meta {
	font-size: .8125rem;
	vertical-align: baseline;
	@include color(color, meta);
	.item {
		display: inline;
		margin-left: 15px;
		@media screen and (max-width: $break1) {
			display: block;
			margin-left: 0;
		}
		&:first-child {
			margin-left: 0;
		}
		&:hover {
			cursor: pointer;
		}
	}
}

.post-meta {
	@include meta;
	padding: 5px 0;
	@include color-border(border-top, 1px, dotted, border);
	@include color-border(border-bottom, 1px, dotted, border);
}

.main-content {
	@extend .content;
	@include clearfix;
	margin-bottom: 20px;
}

.oldcontent {
	padding: 5px;
	@include color-border(border, 1px, solid, border);
}

.content {
	@include clearfix;
	a {
		font-weight: 700;
		text-decoration: underline;
		&:hover {
			@include color(color, main-color);
		}
	}
	ul {
		list-style: square;
	}
	ol {
		list-style: decimal;
	}
	ul, ol {
		margin: 0 0 20px 40px;
		@media screen and (max-width: $break1) {
			margin: 0 0 20px 20px;
		}
	}
	ul ul, ol ol, ol ul, ul ol {
		margin: 0 0 0 40px;
		@media screen and (max-width: $break1) {
			margin: 0 0 0 20px;
		}
	}
	li {
		margin-bottom: 5px;
	}
}

.tags {
	@include clearfix;
	margin-bottom: 20px;
	font-size: .75rem;
	line-height: 1;
	&-list {
		list-style: none;
	}
	&-item {
		@include btn;
		float: left;
		margin: 0 6px 6px 0;
		text-transform: uppercase;
		display: block;
		padding: 10px 15px;
	}
}

.actions {
	@include clearfix;
	margin-top: 15px;
	margin-bottom: 15px;
	font-size: .75rem;
	line-height: 1;
	@include color(color, contrast-text);
	.action-item {
		float: left;
		margin: 0 6px 6px 0;
		text-transform: uppercase;
		@include color(background, contrast-background);
		&:hover {
			@include color(background, main-color);
		}
		.action-link {
			@include btn;
			display: block;
			padding: 10px 15px;
		}
	}
}

@mixin subarticle-element {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	@include color-border(border-top, 1px, dotted, border);
	@include color-border(border-bottom, 1px, dotted, border);
}

/* Authorbox */
.authorbox {
	@include subarticle-element;
	@include clearfix;
	line-height: 1.5;
	display: block;
	@media screen and (max-width: $break1) {
		text-align: center;
	}
	.author-avatar {
		float: left;
		margin: 0 25px 0 0;
		height: 90px;
		width: 90px;
		@media screen and (max-width: $break1) {
			display: inline-block;
			float: none;
			margin: 0 0 20px;
		}
	}
	.author-header {
		margin-bottom: 10px;
	}
	.author-name {
		text-transform: uppercase;
		font-size: 1rem;
		font-weight: 700;
	}
}

/* Promo */
.promo {
	@include subarticle-element;
	font-weight: bold;
	a {
		text-decoration: underline;
	}
}

/* Webmentionform */
.wm-form {
	@include subarticle-element;
	line-height: 1.5;
	#wm-form {
		display: flex;
		#wm-source {
			flex-grow: 1;
		}
		.action {
			@include btn;
			margin-left: 6px;
		}
		@media screen and (max-width: $break1) {
			display: block;
			text-align: center;
			.action {
				margin-left: inherit;
				margin-top: 10px;
				width: 100%;
			}
		}
	}
	#anon-comment {
		margin-top: 10px;
		margin-bottom: 0px;
		a {
			text-decoration: underline;
		}
	}
}

/* List content */
.list {
	&-item {
		padding-bottom: 20px;
		margin-bottom: 20px;
		@include color-border(border-bottom, 1px, solid, border);
	}
	&-header {
		margin-bottom: 10px;
	}
	&-title {
		margin: 0;
		&:hover {
			@include color(color, main-color);
		}
	}
	&-meta {
		@include meta;
		margin-top: 5px;
	}
	&-excerpt {
		@extend .content;
		@include clearfix;
	}
	&-footer {
		@include clearfix;
	}
	.read-more {
		@include btn;
		float: right;
		margin-top: 10px;
	}
}

/* Pagination */
.pagination {
	margin-top: 20px;
	&-item {
		display: inline-block;
		padding: 10px 15px;
		font-weight: 700;
		@include color(color, strong-text);
		@include color(background, light-background);
	}
	&-item:hover, .current {
		@include color(color, contrast-text);
		@include color(background, main-color);
	}
}

/* Post Navigation */
.post-nav {
	@include subarticle-element;
	justify-content: space-between;
	display: flex;
	@media screen and (max-width: $break1) {
		display: block;
	}
	.item {
		flex: 1 1 50%;
		max-width: 100%;
		text-align: center;
		@media screen and (max-width: $break1) {
			&:last-of-type:not(:first-of-type) {
				padding-top: 10px;
			}
		}
		@media screen and (min-width: $break1) {
			max-width: 48%;
			&:only-child {
				max-width: 100%;
			}
			&--prev {
				text-align: left;
			}
			&--next {
				text-align: right;
			}
		}
		.link {
			display: block;
			.post-title {
				margin-bottom: 0;
				overflow: hidden;
				font-size: .8125rem;
				margin-top: 5px;
			}
			.caption {
				display: block;
				font-weight: 700;
				line-height: 1;
				text-transform: uppercase;
			}
		}
	}
}

/* Related articles and webmentions */
.related, .mentions {
	@include subarticle-element;
	@media screen and (max-width: $break1) {
		min-width: 100%;
		text-align: center;
	}
	&-caption {
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;
	}
	&-list {
		margin-top: 5px;
		list-style: none;
	}
}

/* Images / Video */
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

iframe,
embed,
object,
video {
	max-width: 100%;
}

/* Table */
table {
	width: 100%;
	margin-bottom: 20px;
	border-spacing: 0;
	border-collapse: collapse;
	@include color-border(border-top, 1px, solid, border);
	@include color-border(border-left, 1px, solid, border);
}

td,
th {
	padding: 5px 10px;
	@include color-border(border-right, 1px, solid, border);
	@include color-border(border-bottom, 1px, solid, border);
}

th {
	font-weight: 700;
}

/* Forms */
input {
	padding: 5px;
	vertical-align: middle;
	@include color(background, light-background);
	@include color-border(border, 1px, solid, border);
	&[type=text], &[type=email], &[type=tel], &[type=url] {
		width: 100%;
	}
	&[type=submit], &[type=reset] {
		@include btn;
		min-width: 100px;
		border: 0;
		text-transform: uppercase;
		cursor: pointer;
	}
}

textarea {
	width: 100%;
	padding: 5px;
	overflow: auto;
	line-height: 1.5;
	resize: vertical;
	@include color(background, light-background);
	@include color-border(border, 1px, solid, border);
}

/* Footer */
.footer {
	padding: 10px 25px;
	font-size: .75rem;
	@include color(background, contrast-background);
	*, *:hover {
		@include color(color, contrast-text);
	}
	.container {
		@extend .flex;
		flex-flow: row wrap;
		justify-content: space-between;
		@media screen and (max-width: $break3) {
			display: block;
		}
	}
	.copyright {
		order: 1;
		@media screen and (max-width: $break3) {
			padding-bottom: 8px;
			text-align: center;
		}
	}
	.links {
		order: 2;
		a {
			margin-left: 15px;
			&:first-child {
				margin-left: 0;
			}
			&:hover {
				cursor: pointer;
			}
		}
		@media screen and (max-width: $break3) {
			padding-bottom: 8px;
			text-align: center;
		}
	}
}

/* Lightbox */
.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.8);
	img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		max-width: 100%;
		max-height: 100%;
	}
	&:target {
		outline: none;
		display: block;
	}
}