prose/styles/main.scss

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

@mixin transition-all {
	transition: all 0.1s ease-in-out;
}

$ls: 1.4rem;

$bgColorLight: white;
$bodyColorLight: #555;
$strongColorLight: #333;
$fadeColorLight: #999;
$accentColorLight: #3498db;

$bgColorDark: #2b3d4f;
$bodyColorDark: #ccd;
$strongColorDark: #eaeaf5;
$fadeColorDark: #99b;
$accentColorDark: #3498db;

:root {
	--bgColor: #{$bgColorLight};
	--bodyColor: #{$bodyColorLight};
	--faintBodyColor: #{lighten($bodyColorLight, 15%)};
	--strongColor: #{$strongColorLight};
	--fadeColor: #{$fadeColorLight};
	--faintFadeColor: #{lighten($fadeColorLight, 15%)};
	--accentColor: #{$accentColorLight};
}

::selection {
	background-color: var(--accentColor);
}

html {
	font-size: 14pt;
	min-height: 100%;
	position: relative;
}

body {
	height: 100%;
	background-color: var(--bgColor);
	font-family: 'Nunito', sans-serif;
	margin: 0;
	color: var(--bodyColor);
}

.grid {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 5000;
	background-image: linear-gradient(transparent 93%, rgba(0,0,0,0.3) 93%, rgba(0,0,0,0.3));
	background-size: 1*$ls 1*$ls;
	pointer-events: none;
	
	&.hidden {
		display: none;
	}
}

button.grid-button {
	position: fixed;
	bottom: 0.5*$ls;
	right: 0.5*$ls;
	height: 2*$ls;
	padding: 0 1*$ls;
	margin: 0;
	border: 0;
	outline: none;
	font: inherit;
	font-size: 0.8rem;
	background: var(--accentColor);
	color: white;
	z-index: 6000;
	border-radius: 0.2*$ls;
	box-shadow: 0 0.1*$ls 0.1*$ls 0.0125*$ls rgba(0,0,0,0.3); 
}

header {
	height: 3*$ls;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 40*$ls;
	max-width: 100%;
	margin: 0 auto;
	
	h1.title {
		margin: 0;
		line-height: 3*$ls;
		color: var(--strongColor);
		font-size: 1.8rem;
		padding: 0 $ls;
	}
	
	img {
		height: 80%;
		margin: 0 0.5*$ls;
	}
	
	nav {
		display: flex;
		height: 100%;
		
		a {
			color: var(--strongColor);
			text-decoration: none;
			display: block;
			line-height: 3*$ls;
			padding: 0 $ls;
			position: relative;
			height: 100%;
			
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 0.15rem;
				background: white;
				opacity: 0;
				@include transition-all;
			}
			
			&:hover:before {
				opacity: 1;
			}
		}
	}
}

main {
	width: 40*$ls;
	max-width: 100%;
	margin: 4*$ls auto 2*$ls;
}

article {
	padding: 2*$ls;
	//background: white;
	//box-shadow: 0 0.05*$ls 0.1*$ls rgba(0,0,0,0.5);
	border-radius: 0.2*$ls;
	margin: 1*$ls 0 0;
	
	date {
		font-size: 0.9rem;
		height: $ls;
		line-height: $ls;
		display: block;
		font-weight: 400;
	}
	
	h1 {
		font-size: 2.6rem;
		margin: 1*$ls 0 0;
		line-height: 2*$ls;
		color: var(--strongColor);
	}
	
	h2 {
		font-size: 1.4rem;
		font-weight: 300;
		font-style: italic;
		color: var(--fadeColor);
		line-height: 1*$ls;
		margin: 1*$ls 0 0;
	}
	
	h3 {
		line-height: $ls;
		margin: $ls 0;
		font-size: 1.3rem;
		color: var(--strongColor);
	}
	
	h4 {
		line-height: $ls;
		margin: $ls 0;
		font-size: 1rem;
		color: var(--strongColor);
	}
	
	p {
		line-height: $ls;
		margin: $ls 0 0;
		color: var(--bodyColor);
	}


	blockquote {
		margin: $ls 0;
		padding: 0 $ls;
		border-left: 0.2rem solid var(--fadeColor);
		color: var(--fadeColor);
		font-style: italic;

		p {
			margin: 0;
		}
	}
	
	code {
		font-family: 'JetBrains Mono', monospace;
		font-size: 0.85em;
		color: var(--strongColor);
	}
	
	pre {
		font-size: 0.9em;
		margin: 2*$ls 0;
		line-height: $ls;
		max-width: 100%;
		overflow-x: auto;
		padding: 0 $ls;
		
		code {
			font-size: 1em;
			line-height: $ls;
			display: block;
		}
	}
	
	figure {
		margin: 2*$ls 0 0;
		
		img {
			width: 100%;
			display: block;
		}
		
		figcaption {
			margin: $ls 0;
			line-height: $ls;
			text-align: center;
			font-style: italic;
			color: var(--fadeColor);
			font-size: 0.8rem;
		}
	}
	
	section.content {		
		a {
			color: var(--strongColor);
			text-decoration: none;
			background-image: linear-gradient(
				transparent 80%, 
				var(--faintFadeColor) 80%,
				var(--faintFadeColor) 87.5%,
				transparent 87.5%
			);

			&:hover {
				background-image: linear-gradient(
					transparent 80%, 
					var(--faintBodyColor) 80%,
					var(--faintBodyColor) 87.5%,
					transparent 87.5%
				);
			}
		}
		
		ul, ol {
			color: var(--bodyColor);
			margin: $ls 0;
			padding: 0 0 0 $ls;
			line-height: $ls;
			
			ul, ol {
				margin: 0;
			}
		}
		
		ul {
			li {
				list-style: none;
				position: relative;
				
				&:before {
					content: '·';
					height: $ls;
					width: $ls;
					display: block;
					position: absolute;
					top: 0;
					left: -$ls;
					text-align: center;
					line-height: $ls;
					font-weight: bold;
					color: var(--strongColor);
				}
			}
		}
	}
	
	a.load-content {
		display: block;
		height: 3*$ls;
		line-height: 3*$ls;
		color: var(--accentColor);
		text-align: center;
		text-decoration: none;
	}
}

footer {
	text-align: center;
	padding: $ls 0;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bgColor: #{$bgColorDark};
		--bodyColor: #{$bodyColorDark};
		--faintBodyColor: #{darken($bodyColorDark, 15%)};
		--strongColor: #{$strongColorDark};
		--fadeColor: #{$fadeColorDark};
		--faintFadeColor: #{darken($fadeColorDark, 15%)};
		--accentColor: #{$accentColorDark};
	}

	pre {
		filter: invert(100%);
		background-color: invert($bgColorDark) !important;
		color: invert($strongColorDark);

		&::selection, ::selection {
			background-color: invert($accentColorDark);
		}
	}
}

@media(max-width: 500px) {
	header {
		height: 6*$ls;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		text-align: center;

		nav {
			justify-content: center;

			a {
				padding: 0 0.5*$ls;
				flex: 1;

				&:before {
					top: auto;
					bottom: 0;
				}
			}
		}
	}

	main {
		margin: $ls 0;
	}

	article {
		padding: $ls;

		date {
			font-size: 0.75rem;
		}

		h1 {
			font-size: 1.5rem;
			line-height: $ls;
			margin: $ls 0 0;
		}

		h2 {
			font-size: 1rem;
		}

		pre {
			margin: $ls 0;
			padding: 0;
		}
	}
}