fix unstyled elements and small bugs

assets/styles/common/content.scss

@@ -94,7 +94,7 @@
 		background: var(--ui-overlay);
 		color: var(--ui-overlay-text);
 		padding: 1em;
-		line-height: 1.4;
+		line-height: 2;
 		overflow-x: auto;
 		white-space: pre;
 		display: grid;
@@ -149,27 +149,6 @@
 		border: 1px solid var(--ui-text);
 		padding: 0.5em;
 	}
-	/* {{<hint>}} shortcode */
-	.hint {
-		padding: 1em;
-		line-height: 2;
-	}
-	.hint,
-	.hint.info,
-	.hint.tip {
-		background: rgba(142, 226, 142, 0.2);
-		border-left: 4px solid rgb(142, 226, 142);
-	}
-	
-	.hint.warning {
-		background: rgba(218, 226, 142, 0.2);
-		border-left: 4px solid rgb(218, 226, 142);
-	}
-	
-	.hint.danger {
-		background: rgba(226, 142, 142, 0.2);
-		border-left: 4px solid rgb(226, 142, 142);
-	}
 	/* hugo-specific citation footnote */
 	cite sup {
 		position: inherit;

assets/styles/components/breadcrumbs.scss

@@ -1,9 +1,11 @@
 .breadcrumbs {
 	display: flex;
 	flex-flow: row wrap;
+	li {
+		margin-bottom: 1rem;
+	}
 	li:not(:first-child) {
 		margin-left: 1rem;
-		margin-bottom: 1rem;
 	}
 	li::marker {
 		content: "> ";

assets/styles/components/nav-section.scss

@@ -11,13 +11,14 @@
 		text-decoration: none;
 		background: var(--ui-overlay);
 		color: var(--ui-overlay-text);
+		box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
 		&:focus {
 			padding: 1em;
 			border: none;
 		}
 	}
-	.previous {
+	.previous, .next {
-		justify-content: start;
+		justify-content: space-between;
 	}
 	.arrow {
 		text-decoration: none;

assets/styles/components/single/page-header.scss

@@ -1,20 +0,0 @@
-.page {
-	.page-title {
-		font-size: 2em;
-		margin-bottom: 1rem;
-	}
-	.page-summary {
-		line-height: 1.5;
-		max-width: 80ch;
-	}
-	.lastmod {
-		margin-top: 1rem;
-		line-height: 1.5;
-		color: var(--ui-text-muted);
-	}
-	.language-list {
-		display: flex;
-		flex-flow: wrap;
-		list-style: none;
-	}
-}

assets/styles/components/site-footer.scss

@@ -32,4 +32,9 @@
 		margin-left: auto;
 	}
 	
+	.copyright a {
+		text-decoration: none;
+		color: var(--ui-text-bold);
+	}
+
 }

assets/styles/features/headings.scss

@@ -70,5 +70,11 @@ article[autonumbering] {
 	#TableOfContents li:before {
 		content: counters(item, ".") ". ";
 		counter-increment: item;
+		font-family: monospace;
+	}
+	#TableOfContents ol ol,
+	#TableOfContents ul ul
+	{
+		margin-left: 0;
 	}
 }

assets/styles/features/search.scss

@@ -45,6 +45,7 @@
 #search-input {
 	background: var(--ui-overlay);
 	color: var(--ui-overlay-text);
+	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.15));
 	border-radius: 100rem;
 	border: 0;
 	padding: 0.5rem 1rem;
@@ -61,4 +62,5 @@
 	color: var(--primary-accent-text);
 	border-radius: 4px;
 	height: 2rem;
+	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.15));
 }

assets/styles/features/syntax-highlighting.scss

@@ -6,19 +6,19 @@
 	--keyword: #3361a7;
 	--class: #f57900;
 	--variable: #c049dd;
-	--number: #53ca24;
+	--number: #32940b;
 	--operator: #5400c2;
-	--highlight: rgb(196, 196, 196);
+	--highlight: rgb(230, 230, 196);
 
 	@media (prefers-color-scheme: dark) {
 	
-		--error: #cc0000;
+		--error: #f85e5e;
 		--keyword: #e0d56e;
-		--class: #8700f5;
+		--class: #b872f1;
-		--variable: #008eb9;
+		--variable: #68aff1;
 		--number: #53ca24;
 		--operator: #fffd6f;
-		--highlight: #555;
+		--highlight: #444;
 	}
 
 }
@@ -42,7 +42,7 @@
 /* KeywordReserved */ .chroma .kr { color: var(--keyword); font-weight: bold }
 /* KeywordType */ .chroma .kt { color: var(--keyword); font-weight: bold }
 /* Name */ .chroma .n { color: var(--ui-text-bold) }
-/* NameAttribute */ .chroma .na { color: var(--ui-text-bold) }
+/* NameAttribute */ .chroma .na { color: var(--keyword) }
 /* NameBuiltin */ .chroma .nb { color: var(--name) }
 /* NameBuiltinPseudo */ .chroma .bp { color: #3465a4 }
 /* NameClass */ .chroma .nc { color: var(--ui-text-bold) }
@@ -54,7 +54,7 @@
 /* NameFunctionMagic */ .chroma .fm { color: var(--ui-text-bold) }
 /* NameLabel */ .chroma .nl { color: var(--name) }
 /* NameNamespace */ .chroma .nn { color: var(--ui-text-bold) }
-/* NameOther */ .chroma .nx { color: var(--ui-text-bold)}
+/* NameOther */ .chroma .nx { color: var(--class)}
 /* NameProperty */ .chroma .py { color: var(--ui-text-bold) }
 /* NameTag */ .chroma .nt { color: var(--keyword); font-weight: bold }
 /* NameVariable */ .chroma .nv { color: var(--variable) }
@@ -76,7 +76,7 @@
 /* LiteralStringInterpol */ .chroma .si { color: var(--variable) }
 /* LiteralStringOther */ .chroma .sx { color: var(--variable) }
 /* LiteralStringRegex */ .chroma .sr { color: var(--variable) }
-/* LiteralStringSingle */ .chroma .s1 { color: var(--variable) }
+/* LiteralStringSingle */ .chroma .s1 { color: var(--number) }
 /* LiteralStringSymbol */ .chroma .ss { color: var(--variable) }
 /* LiteralNumber */ .chroma .m { color: var(--number); font-weight: bold }
 /* LiteralNumberBin */ .chroma .mb { color: var(--number); font-weight: bold }
@@ -87,7 +87,7 @@
 /* LiteralNumberOct */ .chroma .mo { color: var(--number); font-weight: bold }
 /* Operator */ .chroma .o { color: var(--operator); font-weight: bold }
 /* OperatorWord */ .chroma .ow { color: var(--keyword); font-weight: bold }
-/* Punctuation */ .chroma .p { color: var(--ui-text-bold); font-weight: bold }
+/* Punctuation */ .chroma .p { color: var(--variable); font-weight: bold }
 /* Comment */ .chroma .c { color: var(--ui-text-muted); font-style: italic }
 /* CommentHashbang */ .chroma .ch { color: var(--ui-text-muted); font-style: italic }
 /* CommentMultiline */ .chroma .cm { color: var(--ui-text-muted); font-style: italic }
@@ -107,4 +107,4 @@
 /* GenericSubheading */ .chroma .gu { color: var(--ui-text-bold); font-weight: bold }
 /* GenericTraceback */ .chroma .gt { color: var(--error); font-weight: bold }
 /* GenericUnderline */ .chroma .gl { color: var(--ui-text-bold); text-decoration: underline }
-/* TextWhitespace */ .chroma .w { color: var(--ui-text-muted); text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: var(--ui-text-muted); }

assets/styles/layouts/list.scss

@@ -0,0 +1,19 @@
+.list .container {
+
+}
+
+.list-item {
+	margin-bottom: 2rem;
+	&__title {
+		display: inline-block;
+		margin-bottom: 0.5rem;
+		font-size: 1.25em;
+	}
+	&__summary {
+		margin-bottom: 0.5rem;
+		line-height: 1.5;
+	}
+	&__date {
+		color: var(--ui-text-muted);
+	}
+}

assets/styles/layouts/responsive.scss

@@ -118,7 +118,9 @@
 
 	/* also make the page header line up */
 
-	.page-header {
+	.page-header,
+	.list
+	{
 		display: grid;
 		grid-template-columns: minmax(0, 1fr) minmax(auto, 80ch) minmax(0, 1fr);
 		> .container {

assets/styles/layouts/single.scss

@@ -0,0 +1,21 @@
+.breadcrumbs {
+	margin-bottom: 1rem;
+}
+.page-title {
+	font-size: 2em;
+	margin-bottom: 1rem;
+}
+.page-summary {
+	line-height: 1.5;
+	max-width: 80ch;
+}
+.lastmod {
+	margin-top: 1rem;
+	line-height: 1.5;
+	color: var(--ui-text-muted);
+}
+.language-list {
+	display: flex;
+	flex-flow: wrap;
+	list-style: none;
+}

assets/styles/print.scss

@@ -4,10 +4,13 @@
 @import "common/content";
 
 @import "components/site-header";
-@import "components/single/page-header";
 @import "components/breadcrumbs";
 @import "components/table-of-contents";
 @import "features/headings";
+@import "shortcodes/hint";
+
+@import "layouts/list";
+@import "layouts/single";
 
 #search-form,
 .header-nav,

assets/styles/screen.scss

@@ -7,7 +7,6 @@
 @import "components/nav-docs";
 @import "components/site-footer";
 
-@import "components/single/page-header";
 @import "components/breadcrumbs";
 @import "components/table-of-contents";
 @import "components/nav-section";
@@ -15,6 +14,10 @@
 @import "features/headings";
 @import "features/syntax-highlighting";
 @import "features/search";
+@import "features/links";
 
-@import "screen/layout";
+@import "shortcodes/hint";
-@import "screen/links";
+
+@import "layouts/list";
+@import "layouts/single";
+@import "layouts/responsive";

assets/styles/shortcodes/hint.scss

@@ -0,0 +1,21 @@
+.hint {
+	padding: 1em;
+	line-height: 2;
+	margin: 1rem 0;
+}
+.hint,
+.hint.info,
+.hint.tip {
+	background: rgba(142, 226, 142, 0.2);
+	border-left: 4px solid rgb(142, 226, 142);
+}
+
+.hint.warning {
+	background: rgba(218, 226, 142, 0.2);
+	border-left: 4px solid rgb(218, 226, 142);
+}
+
+.hint.danger {
+	background: rgba(226, 142, 142, 0.2);
+	border-left: 4px solid rgb(226, 142, 142);
+}

layouts/partials/nav-footer.html

@@ -3,7 +3,7 @@
 			{{ $currentPage := . }}
 			{{ range .Site.Menus.footer }}
 			<li
-				class='{{ if or ($currentPage.IsMenuCurrent "footer" .) (eq $currentPage.Section .Identifier) }}active{{ end }}'>
+				class='{{ .Identifier }}{{ if or ($currentPage.IsMenuCurrent "footer" .) (eq $currentPage.Section .Identifier) }} active{{ end }}'>
 				<a href="{{ .URL | relLangURL }}">
 					{{ .Pre }}
 					<span>{{ .Name }}</span>

layouts/partials/nav-header.html

@@ -3,7 +3,7 @@
 		{{ $currentPage := . }}
 		{{ range .Site.Menus.main }}
 		<li
-			class='{{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}active{{ end }}'>
+			class='{{ .Identifier }}{{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}active{{ end }}'>
 			<a href="{{ .URL | relLangURL }}">
 				{{ .Pre }}
 				<span>{{ .Name }}</span>

layouts/partials/nav-section.html

@@ -1,10 +1,15 @@
 <nav class="section-nav">
 	<div class="container">
-	{{ with .PrevInSection }}
+	{{ $page := .Page }}
+	{{ with .Next }}
+	{{ if eq .FirstSection $page.FirstSection }}
 	<a class="previous" href="{{.Permalink}}"><span class="arrow">←</span><span class="text">Previous page:<br/>{{.Title}}</span></a>
 	{{ end }}
-	{{ with .NextInSection }}
+	{{ end }}
+	{{ with .Prev }}
+	{{ if eq .FirstSection $page.FirstSection }}
 	<a class="next" href="{{.Permalink}}"><span class="text">Next page:<br/>{{.Title}}</span><span class="arrow">→</span></a>
 	{{ end }}
+	{{ end }}
 	</div>
-</nav>
+</nav>