adjust style

sass/_general.scss

@@ -0,0 +1,140 @@
+* {
+	box-sizing: border-box;
+}
+
+:root {
+	scroll-behavior: smooth;
+	scrollbar-color: var(--accent-color) transparent;
+	accent-color: var(--accent-color);
+	font-size: 16px;
+}
+
+body {
+	text-wrap: pretty;
+	display: grid; // Put footer at the bottom for short pages, such as the 404
+	grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer
+	grid-template-areas:
+		"nav"
+		"main"
+		"footer";
+	margin: 0;
+	background-color: var(--bg-color);
+	min-height: 100vh;
+	color: var(--fg-color);
+	line-height: 1.5;
+	font-family: var(--font-system-ui), var(--font-emoji);
+	overflow-wrap: break-word;
+
+	&:has(#sidebar) {
+		grid-template-columns: 1fr min(var(--container-width), 90%) 1fr;
+		grid-template-areas:
+			"nav nav nav"
+			"sidebar main ."
+			"footer footer footer";
+		@media only screen and (max-width: 1200px) {
+			grid-template-areas:
+			"nav nav nav"
+			". sidebar ."
+			". main ."
+			"footer footer footer";
+		}
+	}
+}
+
+// Style text selection to use accent color
+::selection {
+	background-color: var(--accent-color);
+	color: var(--contrast-color);
+}
+
+// Make focused anchor not get covered by nav,
+// and flash it with accent color when jumping to it
+:target:not(#main-content) {
+	transition:
+		all var(--transition),
+		scroll-margin-block-start 0s;
+	scroll-margin-block-start: 15vh;
+	color: var(--accent-color);
+	text-shadow: var(--text-shadow-glow);
+}
+
+// Custom focus indicator
+:focus-visible {
+	animation: focus-in var(--transition);
+	outline: 0.125rem solid var(--accent-color);
+	outline-offset: 0.125rem;
+}
+
+// Fallback for older browsers
+@supports not selector(:focus-visible) {
+	:focus {
+		animation: focus-in var(--transition);
+		outline: 0.125rem solid var(--accent-color);
+		outline-offset: 0.125rem;
+	}
+}
+
+@keyframes focus-in {
+	from {
+		outline: 0.5rem solid transparent;
+		outline-offset: 0.25rem;
+	}
+}
+
+main {
+	margin: 4.25rem auto 4rem;
+	width: min(var(--container-width), 90%);
+}
+
+#sidebar {
+	display: flex;
+	position: sticky;
+	top: 0;
+	grid-area: sidebar;
+	opacity: 0.2;
+	transition: var(--transition);
+	height: 100vh;
+
+	&:hover {
+		opacity: 1;
+	}
+
+	@media only screen and (max-width: 1200px) {
+		position: static;
+		opacity: 1;
+		margin-block-start: 4.25rem;
+		margin-block-end: -4.25rem;
+		padding: 0;
+		height: auto;
+	}
+
+	& > div {
+		--mask: linear-gradient(to bottom,
+				transparent,
+				black 1rem,
+				black calc(100% - 1rem),
+				transparent);
+		-webkit-mask-image: var(--mask);
+		mask-image: var(--mask);
+		padding: 1rem;
+		overflow: auto;
+	}
+
+	& + main {
+		grid-area: main;
+		margin: 0;
+		margin-block-start: 4.25rem;
+		margin-block-end: 4rem;
+		width: auto;
+	}
+}
+
+@media (prefers-reduced-motion) {
+
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0s !important;
+		transition-duration: 0s !important;
+	}
+}