Add hot/poor article types, move article list to a partial (fixes #58 and #53)

Among other things introduce new --fg-contrast color variable.

content/blog/dolor/index.ar.md

@@ -0,0 +1 @@
+index.md

content/blog/dolor/index.md

@@ -0,0 +1,16 @@
++++
+authors = ["John Dolor"]
+title = "Dolor"
+description = "Lorem ipsum dolor sit amet."
+date = 1970-01-03
+[taxonomies]
+tags = ["Lorem", "Ipsum", "Dolor"]
+[extra]
+archive = true
++++
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.

content/blog/dolor/index.ru.md

@@ -0,0 +1 @@
+index.md

content/blog/drafted-post/index.md

@@ -6,8 +6,6 @@ date = 2024-04-29
 draft = true
 [taxonomies]
 tags = ["Draft"]
-[extra]
-toc = false
 +++
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.

content/blog/ipsum/index.md

@@ -6,7 +6,7 @@ date = 1970-01-02
 [taxonomies]
 tags = ["Lorem", "Ipsum"]
 [extra]
-toc = false
+hot = true
 +++
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.

content/blog/long-long-man/index.md

@@ -6,8 +6,7 @@ date = 2017-01-01
 [taxonomies]
 tags = ["Honorificabilitudinitatibus"]
 [extra]
-toc = false
+featured = true
-archive = "This page is, in fact, not archived."
 +++
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.

content/blog/lorem/index.md

@@ -4,9 +4,9 @@ title = "Lorem"
 description = "Lorem ipsum dolor sit amet."
 date = 1970-01-01
 [taxonomies]
-tags = ["Lorem", "Ipsum"]
+tags = ["Lorem"]
 [extra]
-archive = true
+poor = true
 +++
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.

content/blog/the-quill-of-duck/index.md

@@ -16,7 +16,6 @@ disclaimer = """
 - Don't take party escort submission position.
 - Don't interact with asbestos and moon rocks.
 """
-featured = true
 [extra.comments]
 host = "toot.community"
 user = "sungsphinx"

content/demo/index.md

@@ -411,7 +411,7 @@ The <abbr title="American Standard Code for Information Interchange">ASCII</abbr
 
 <aside>
 Quill and a parchment
-<img class="transparent no-hover" style="margin-bottom: 0; border-radius: 0;" alt="Quill and a parchment" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg/326px-%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg" />
+<img class="transparent no-hover" style="margin-block-end: 0; border-radius: 0;" alt="Quill and a parchment" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg/326px-%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg" />
 </aside>
 
 A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen.

content/tricks/index.md

@@ -31,7 +31,7 @@ You can make navbar have more classic look:
 ```scss
 #site-nav {
     top: 0;
-    margin-top: 0;
+    margin-block-start: 0;
     box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
     border-radius: 0;
     width: 100%;
@@ -68,7 +68,7 @@ Or you can make it sticked to top but not full-width:
 ```scss
 #site-nav {
     top: 0;
-    margin-top: 0;
+    margin-block-start: 0;
     box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
     border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem);
 
@@ -167,7 +167,7 @@ Don't like that fancy horizontal rule? Let's make it more modern:
 
 ```scss
 hr {
-    border-top: 0.25rem solid var(--fg-muted-2);
+    border-block-start: 0.25rem solid var(--fg-muted-2);
     width: 50%;
 
     &::after {

sass/_alerts.scss

@@ -75,7 +75,7 @@ blockquote {
 	}
 
 	.alert-title {
-		margin-bottom: -0.75rem;
+		margin-block-end: -0.75rem;
 		font-weight: bold;
 
 		.icon {

sass/_article-list.scss

@@ -1,66 +1,229 @@
 #article-list {
-	margin-top: 2rem;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin-block-start: 2rem;
 
 	article {
+		position: relative;
+		transition: var(--transition-longer);
+		outline-color: transparent;
+		outline-style: dashed;
+		outline-width: 0.125rem;
+		box-shadow: var(--edge-highlight);
+		border-radius: var(--rounded-corner);
+		border-start-end-radius: 2.125rem;
+		border-end-end-radius: 1.8125rem;
+		background-color: var(--primary-color-alpha);
+		padding: 1rem;
+		overflow: hidden;
 
-		&.draft,
+		&:hover {
-		&.archive,
+			outline-color: var(--primary-color);
-		&.featured {
+			outline-offset: 0.5rem;
-			position: relative;
+		}
 
-			h3 {
+		.heading {
-				margin-inline-end: 8rem;
+			display: flex;
+			justify-content: space-between;
+		}
+
+		h3 {
+			margin: 0;
+		}
+
+		.tags a {
+			background-color: var(--primary-color-alpha);
+			color: var(--primary-color);
+
+			&:hover {
+				background-color: var(--primary-color);
+				color: var(--contrast-color);
 			}
 		}
 
 		&.draft {
+			background-color: var(--fg-muted-1);
+
+			&::before {
+				$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M12.277.832c-.578.008-1.168.23-1.691.754l-9 9A2 2 0 0 0 1 12v3h3c.531 0 1.04-.21 1.414-.586l9-9c1.79-1.789.082-4.39-1.89-4.57-.083-.012-.165-.012-.247-.012M10.5 4.437 11.563 5.5 4.5 12.563 3.438 11.5zm0 0'/%3E%3C/svg%3E");
+				-webkit-mask-image: $icon;
+				mask-image: $icon;
+				background-color: var(--fg-muted-1);
+			}
+
+			&:hover {
+				outline-color: var(--fg-muted-4);
+
+				&::before {
+					transform: translateY(-50%) rotate(-10deg) scale(1.5);
+				}
+			}
+
 			h3 a {
 				color: var(--fg-muted-4);
 			}
 
-			.tags a:hover {
+			.tags a {
 				background-color: var(--fg-muted-1);
 				color: var(--fg-muted-4);
+
+				&:hover {
+					background-color: var(--fg-muted-4);
+					color: var(--fg-contrast);
+				}
 			}
 		}
 
 		&.archive {
+			background-color: var(--purple-bg);
+
+			&::before {
+				// $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0'/%3E%3C/svg%3E");
+				$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 1C.89 1 0 1.89 0 3v2c0 .751.41 1.402 1.018 1.744A2 2 0 0 0 1 7v7c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2V7a2 2 0 0 0-.018-.256A2 2 0 0 0 16 5V3c0-1.11-.89-2-2-2zm0 2h12v2H2zm1 4h10v7H3zm3 1v1h4V8z'/%3E%3C/svg%3E");
+				-webkit-mask-image: $icon;
+				mask-image: $icon;
+				background-color: var(--purple-bg);
+			}
+
+			&:hover {
+				outline-color: var(--purple-fg);
+
+				&::before {
+					transform: translateY(-50%) rotate(-10deg) scale(1.5);
+				}
+			}
+
 			h3 a {
 				color: var(--purple-fg);
 			}
 
-			.tags a:hover {
+			.tags a {
 				background-color: var(--purple-bg);
 				color: var(--purple-fg);
+
+				&:hover {
+					background-color: var(--purple-fg);
+					color: var(--fg-contrast);
+				}
 			}
 		}
 
 		&.featured {
-			transition: var(--transition-longer);
-			outline: 0.125rem dashed transparent;
-			outline-offset: 0;
-			box-shadow: var(--edge-highlight);
-			border-radius: var(--rounded-corner);
-			border-start-end-radius: 2.125rem;
-			border-end-end-radius: 1.8125rem;
 			background-color: var(--yellow-bg);
-			padding: 1rem;
-			overflow: hidden;
 
 			&::before {
 				$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
 				-webkit-mask-image: $icon;
+				mask-image: $icon;
+				background-color: var(--yellow-bg);
+			}
+
+			&:hover {
+				outline-color: var(--yellow-fg);
+
+				&::before {
+					transform: translateY(-50%) rotate(72deg) scale(1.5);
+				}
+			}
+
+			h3 a {
+				color: var(--yellow-fg);
+			}
+
+			.tags a {
+				background-color: var(--yellow-bg);
+				color: var(--yellow-fg);
+
+				&:hover {
+					background-color: var(--yellow-fg);
+					color: var(--fg-contrast);
+				}
+			}
+		}
+
+		&.hot {
+			background-color: var(--red-bg);
+
+			&::before {
+				$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M9.184.973C4.957 3.113 5.586 6.273 7 9 5.762 7.36 5.016 5.48 5 4 3.375 5 2 7 2 9a6.005 6.005 0 0 0 3.969 5.648c-.492-.84-.367-1.96.703-3.015 2.14-2.11 1.558-2.735 1.558-2.735 2.266 1.149-.32 3.137.418 3.88.563.558 1.758-1.391 1.77-2.184.848.96 1.246 1.676 1.246 2.75q0 .273-.035.52c2.512-1.805 3.273-5.41.46-8.184C8.095 1.742 9.185.973 9.185.973m0 0'/%3E%3C/svg%3E");
+				// $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M9.184.973C4.957 3.113 5.586 6.273 7 9 5.762 7.36 5.016 5.48 5 4 3.375 5 2 7 2 9c0 3.313 2.688 6 6 6 5 0 8-5.465 4.09-9.32C8.094 1.742 9.184.973 9.184.973m0 0'/%3E%3C/svg%3E");
+				-webkit-mask-image: $icon;
+				mask-image: $icon;
+				background-color: var(--red-bg);
+			}
+
+			&:hover {
+				outline-color: var(--red-fg);
+
+				&::before {
+					transform: translateY(-50%) rotate(-10deg) scale(1.5);
+				}
+			}
+
+			h3 a {
+				color: var(--red-fg);
+			}
+
+			.tags a {
+				background-color: var(--red-bg);
+				color: var(--red-fg);
+
+				&:hover {
+					background-color: var(--red-fg);
+					color: var(--fg-contrast);
+				}
+			}
+		}
+
+		&.poor {
+			background-color: var(--brown-bg);
+
+			&::before {
+				$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8.963 1.514A4 4 0 0 1 5 5H4c-1.108 0-2 .892-2 2s.892 2 2 2H3c-1.662 0-3 1.338-3 3s1.338 3 3 3h10c1.662 0 3-1.338 3-3s-1.338-3-3-3h-1c1.108 0 2-.892 2-2s-.892-2-2-2h-1a4 4 0 0 0-2.037-3.486'/%3E%3C/svg%3E");
+				-webkit-mask-image: $icon;
+				mask-image: $icon;
+				background-color: var(--brown-bg);
+			}
+
+			&:hover {
+				outline-color: var(--brown-fg);
+
+				&::before {
+					transform: translateY(-50%) rotate(-10deg) scale(1.5);
+				}
+			}
+
+			h3 a {
+				color: var(--brown-fg);
+			}
+
+			.tags a {
+				background-color: var(--brown-bg);
+				color: var(--brown-fg);
+
+				&:hover {
+					background-color: var(--brown-fg);
+					color: var(--fg-contrast);
+				}
+			}
+		}
+
+		&.draft,
+		&.archive,
+		&.featured,
+		&.hot,
+		&.poor {
+			&::before {
 				-webkit-mask-size: cover;
 				position: absolute;
 				top: 50%;
 				right: -3rem;
-				transform: translateY(-50%) rotate(-10deg);
+				transform: translateY(-50%);
 				opacity: 0.5;
 				z-index: -1;
-				mask-image: $icon;
 				mask-size: cover;
 				transition: var(--transition-longer);
-				background-color: var(--star-featured);
 				width: 12rem;
 				height: 12rem;
 				content: "";
@@ -68,42 +231,9 @@
 				:root[dir*="rtl"] & {
 					right: unset;
 					left: -3rem;
-					transform: translateY(-50%) rotate(10deg);
 				}
 			}
 
-			&:hover {
-				outline: 0.125rem dashed var(--yellow-fg);
-				outline-offset: 0.5rem;
-
-				&::before {
-					transform: translateY(-50%) rotate(62deg) scale(1.5);
-				}
-			}
-
-			h3 {
-				margin-top: 0;
-
-				a {
-					color: var(--yellow-fg);
-				}
-			}
-
-			.featured-badge {
-				top: 1rem;
-				right: 1rem;
-
-				:root[dir*="rtl"] & {
-					right: unset;
-					left: 1rem;
-				}
-			}
-
-			.tags a:hover {
-				background-color: var(--yellow-bg);
-				color: var(--yellow-fg);
-			}
-
 			:root[dir*="rtl"] &:hover::before {
 				transform: translateY(-50%) rotate(-62deg) scale(1.5);
 			}
@@ -111,15 +241,17 @@
 
 		.draft-badge,
 		.archive-badge,
-		.featured-badge {
+		.featured-badge,
-			position: absolute;
+		.hot-badge,
-			top: 0;
+		.poor-badge {
-			right: 0;
+			display: block;
 			box-shadow: var(--edge-highlight);
 			border-radius: 999px;
 			padding: 0.5rem 0.75rem;
+			height: fit-content;
 			font-weight: bold;
 			line-height: 1.25;
+			white-space: nowrap;
 
 			.icon {
 				vertical-align: -0.125em;
@@ -171,15 +303,36 @@
 			}
 		}
 
-		div {
+		.hot-badge {
+			background-color: var(--red-bg);
+			color: var(--red-fg);
+
+			.icon {
+				$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M9.184.973C4.957 3.113 5.586 6.273 7 9 5.762 7.36 5.016 5.48 5 4 3.375 5 2 7 2 9a6.005 6.005 0 0 0 3.969 5.648c-.492-.84-.367-1.96.703-3.015 2.14-2.11 1.558-2.735 1.558-2.735 2.266 1.149-.32 3.137.418 3.88.563.558 1.758-1.391 1.77-2.184.848.96 1.246 1.676 1.246 2.75q0 .273-.035.52c2.512-1.805 3.273-5.41.46-8.184C8.095 1.742 9.185.973 9.185.973m0 0'/%3E%3C/svg%3E");
+				// $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M9.184.973C4.957 3.113 5.586 6.273 7 9 5.762 7.36 5.016 5.48 5 4 3.375 5 2 7 2 9c0 3.313 2.688 6 6 6 5 0 8-5.465 4.09-9.32C8.094 1.742 9.184.973 9.184.973m0 0'/%3E%3C/svg%3E");
+				-webkit-mask-image: $icon;
+				mask-image: $icon;
+				background-color: var(--red-fg);
+			}
+		}
+
+		.poor-badge {
+			background-color: var(--brown-bg);
+			color: var(--brown-fg);
+
+			.icon {
+				$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8.963 1.514A4 4 0 0 1 5 5H4c-1.108 0-2 .892-2 2s.892 2 2 2H3c-1.662 0-3 1.338-3 3s1.338 3 3 3h10c1.662 0 3-1.338 3-3s-1.338-3-3-3h-1c1.108 0 2-.892 2-2s-.892-2-2-2h-1a4 4 0 0 0-2.037-3.486'/%3E%3C/svg%3E");
+				-webkit-mask-image: $icon;
+				mask-image: $icon;
+				background-color: var(--brown-fg);
+			}
+		}
+
+		.details {
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: space-between;
 			gap: 0.25rem;
 		}
 	}
-
-	hr:last-of-type {
-		display: none;
-	}
 }

sass/_buttons.scss

@@ -3,7 +3,7 @@
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: baseline;
-	margin-top: 4rem;
+	margin-block-start: 4rem;
 }
 
 .inline-button {

sass/_comments.scss

@@ -21,14 +21,14 @@
 	.dialog-buttons {
 		justify-content: start;
 		gap: 0.25rem;
-		margin-top: 2rem;
+		margin-block-start: 2rem;
 	}
 
 	#comments-wrapper {
 		display: flex;
 		flex-direction: column;
 		gap: 2rem;
-		margin-top: 2rem;
+		margin-block-start: 2rem;
 
 		#comments-status {
 			margin-block-start: 0;
@@ -156,14 +156,14 @@
 
 			main {
 				grid-area: post;
-				margin-top: 1rem;
+				margin-block-start: 1rem;
 
 				:first-child {
-					margin-top: 0;
+					margin-block-start: 0;
 				}
 
 				:last-child {
-					margin-bottom: 0;
+					margin-block-end: 0;
 				}
 			}
 
@@ -184,7 +184,7 @@
 				display: flex;
 				grid-area: interactions;
 				gap: 0.25rem;
-				margin-top: 1rem;
+				margin-block-start: 1rem;
 
 				.boosts,
 				.faves {

sass/_footer.scss

@@ -1,5 +1,5 @@
 #site-footer {
-	margin-top: 4rem;
+	margin-block-start: 4rem;
 	padding: 2rem 0;
 	text-align: center;
 

sass/_general.scss

@@ -49,8 +49,8 @@ body {
 // Make focused anchor not get covered by nav,
 // and flash it with primary color when jumping to it
 :target:not(#main) {
-	transition: all var(--transition-longer), scroll-margin-top 0s;
+	transition: all var(--transition-longer), scroll-margin-block-start 0s;
-	scroll-margin-top: 20vh;
+	scroll-margin-block-start: 20vh;
 	color: var(--primary-color);
 	text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem;
 }

sass/_media.scss

@@ -14,8 +14,8 @@ video {
 
 	&.full-bleed,
 	&[src*="#full-bleed"] {
-		margin-right: calc((-100vw + 100%) / 2);
+		margin-inline-start: calc((-100vw + 100%) / 2);
-		margin-left: calc((-100vw + 100%) / 2);
+		margin-inline-end: calc((-100vw + 100%) / 2);
 		width: 100vw;
 		max-width: 100vw;
 	}

sass/_nav.scss

@@ -444,9 +444,9 @@
 				}
 
 				div {
-					margin-top: 0.5rem;
+					margin-block-start: 0.5rem;
-					border-top: max(1px, 0.0625rem) solid var(--fg-muted-2);
+					border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
-					padding-top: 0.25rem;
+					padding-block-start: 0.25rem;
 					color: var(--fg-muted-5);
 
 					strong {

sass/_post-nav.scss

@@ -47,7 +47,7 @@
 		}
 
 		.nav-arrow {
-			margin-bottom: 0.5rem;
+			margin-block-end: 0.5rem;
 			color: var(--fg-muted-5);
 			font-weight: normal;
 			line-height: 1.25;

sass/_tags.scss

@@ -22,7 +22,7 @@
 		border-radius: 999px;
 		background-color: var(--fg-muted-1);
 		padding: 0.375rem 0.75rem;
-		color: var(--fg-color);
+		color: var(--fg-muted-4);
 		font-size: 0.875rem;
 		text-decoration: none;
 
@@ -45,10 +45,6 @@
 			display: inline-block;
 			padding: 0.375rem 0.5rem 0.375rem 0.75rem;
 
-			&::before {
-				content: "#";
-			}
-
 			:root[dir*="rtl"] & {
 				padding: 0.25rem 0.75rem 0.25rem 0.5rem;
 			}
@@ -60,7 +56,6 @@
 			border-radius: 0 999px 999px 0;
 			background-color: var(--fg-muted-1);
 			padding: 0.375rem 0.625rem 0.375rem 0.5rem;
-			color: var(--fg-muted-4);
 			font-variant-numeric: tabular-nums;
 
 			:root[dir*="rtl"] & {

sass/_typography.scss

@@ -165,7 +165,7 @@ a {
 hr {
 	margin: 2rem auto;
 	border: none;
-	border-top: 0.1875rem double var(--fg-muted-2);
+	border-block-start: 0.1875rem double var(--fg-muted-2);
 	overflow: visible;
 	text-align: center;
 
@@ -188,7 +188,7 @@ dt {
 }
 
 dd {
-	margin-bottom: 1rem;
+	margin-block-end: 1rem;
 }
 
 aside {

sass/_variables.scss

@@ -1,5 +1,5 @@
 @mixin theme-variables($theme) {
-	@if $theme == "dark" {
+	@if $theme =="dark" {
 		--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
 		--fg-color: rgb(255 255 255);
 		--fg-muted-1: rgb(255 255 255 / 0.05);
@@ -7,9 +7,12 @@
 		--fg-muted-3: rgb(255 255 255 / 0.2);
 		--fg-muted-4: rgb(255 255 255 / 0.5);
 		--fg-muted-5: rgb(255 255 255 / 0.6);
+		--fg-contrast: rgb(0 0 0 / 0.8);
 		--nav-bg: rgb(25 25 25 / 0.7);
 		--blue-bg: rgb(153 193 241 / 0.1);
 		--blue-fg: rgb(153 193 241);
+		--brown-bg: rgb(205 171 143 / 0.1);
+		--brown-fg: rgb(205 171 143);
 		--green-bg: rgb(143 240 164 / 0.1);
 		--green-fg: rgb(143 240 164);
 		--purple-bg: rgb(220 138 221 / 0.1);
@@ -18,22 +21,23 @@
 		--red-fg: rgb(246 97 81);
 		--yellow-bg: rgb(248 228 92 / 0.1);
 		--yellow-fg: rgb(248 228 92);
-		--star-featured: rgb(248 228 92 / 0.05);
 		color-scheme: dark;
-	} @else {
+	}
-		--bg-color: linear-gradient(
+
-			rgb(255 255 255 / 0.8),
+	@else {
-			rgb(255 255 255 / 0.8)
+		--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
-		);
 		--fg-color: rgb(0 0 0 / 0.8);
 		--fg-muted-1: rgb(0 0 0 / 0.05);
 		--fg-muted-2: rgb(0 0 0 / 0.1);
 		--fg-muted-3: rgb(0 0 0 / 0.2);
 		--fg-muted-4: rgb(0 0 0 / 0.5);
 		--fg-muted-5: rgb(0 0 0 / 0.6);
+		--fg-contrast: rgb(255 255 255);
 		--nav-bg: rgb(242 242 242 / 0.7);
 		--blue-bg: rgb(53 132 228 / 0.1);
 		--blue-fg: rgb(53 132 228);
+		--brown-bg: rgb(99 69 44 / 0.1);
+		--brown-fg: rgb(99 69 44);
 		--green-bg: rgb(38 162 105 / 0.1);
 		--green-fg: rgb(38 162 105);
 		--purple-bg: rgb(145 65 172 / 0.1);
@@ -42,7 +46,6 @@
 		--red-fg: rgb(224 27 36);
 		--yellow-bg: rgb(156 110 3 / 0.1);
 		--yellow-fg: rgb(156 110 3);
-		--star-featured: rgb(156 110 3 / 0.15);
 	}
 }
 
@@ -56,48 +59,29 @@
 	--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
 	--rounded-corner-small: 0.5rem;
 	--rounded-corner: 0.75rem;
-	--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06),
+	--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14), 0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
-		0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
+	--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03), 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
-		0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
-	--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03),
-		0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07),
-		0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
 	--transition-long: 0.8s;
 	--transition-longer: 0.4s;
 	--transition: 0.2s;
 
 	// FONTS
 	--font-system-ui: system-ui, sans-serif;
-	--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
+	--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
-		serif;
+	--font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
-	--font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
+	--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
-		P052, serif;
+	--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
-	--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
+	--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
-		source-sans-pro, sans-serif;
+	--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
-	--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
-		source-sans-pro, sans-serif;
-	--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
-		sans-serif;
-	--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
-		"Nimbus Sans", Arial, sans-serif;
 	--font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
-	--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro",
+	--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
-		Menlo, Consolas, "DejaVu Sans Mono", monospace;
+	--font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
-	--font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
+	--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif;
-		"Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
+	--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;
-	--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
+	--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", "Georgia Pro", Georgia, serif;
-		Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
+	--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif;
-		source-sans-pro, sans-serif;
+	--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
-	--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif",
+	--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-		"Sitka Small", serif;
-	--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
-		"URW Bookman L", "Georgia Pro", Georgia, serif;
-	--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L",
-		P052, Sylfaen, serif;
-	--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
-		casual, cursive;
-	--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-		"Noto Color Emoji";
 }
 
 [data-theme="dark"] {

templates/article_list.html

@@ -15,60 +15,5 @@
 	{{ macros_translate::translate(key="newest_to_oldest", default="From newest to oldest", language_strings=language_strings) }} ↓
 </small>
 
-<div id="article-list">
+{% include "partials/articles.html" %}
-	{%- for page in section.pages %}
-		<article class="
-			{% if page.draft %}draft{% endif %}
-			{% if page.extra.archive %}archive{% endif %}
-			{% if page.extra.featured %}featured{% endif %}">
-			<h3><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
-			{%- if page.draft %}
-				<span class="draft-badge">
-					<i class="icon"></i>
-					{{- macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -}}
-				</span>
-			{%- endif -%}
-			{%- if page.extra.archive %}
-				<span class="archive-badge">
-					<i class="icon"></i>
-					{{- macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -}}
-				</span>
-			{%- endif %}
-			{%- if page.extra.featured %}
-				<span class="featured-badge">
-					<i class="icon"></i>
-					{{- macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -}}
-				</span>
-			{%- endif %}
-			{%- if page.description %}
-				{{ page.description | markdown | safe }}
-			{%- endif %}
-			{%- if page.date -%}
-				<div>
-					<small>
-						<time datetime="{{ page.date | date(format='%+') }}" pubdate>
-							{{- page.date | date(format=date_format, locale=date_locale) -}}
-						</time>
-						{%- if page.authors -%}
-							<span> • {% include "partials/authors.html" -%}</span>
-						{%- endif -%}
-					</small>
-					{%- if page.taxonomies -%}
-						{%- for name, taxon in page.taxonomies %}
-							<small>
-								<ul class="tags">
-									{%-for item in taxon -%}
-										<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
-									{%- endfor %}
-								</ul>
-							</small>
-						{%- endfor -%}
-					{%- endif %}
-					</small>
-				</div>
-			{%- endif -%}
-		</article>
-		<hr>
-	{%- endfor %}
-</div>
 {% endblock content %}

templates/partials/articles.html

@@ -0,0 +1,77 @@
+{%- if section.pages -%}
+    {%- set pages = section.pages -%}
+{%- else -%}
+    {%- set pages = term.pages -%}
+{%- endif -%}
+
+<div id="article-list">
+	{%- for page in pages %}
+		<article class="
+			{% if page.draft %}draft{% endif %}
+			{% if page.extra.archive %}archive{% endif %}
+			{% if page.extra.featured %}featured{% endif %}
+			{% if page.extra.hot %}hot{% endif %}
+			{% if page.extra.poor %}poor{% endif %}">
+			<div class="heading">
+				<h3><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
+				{%- if page.draft %}
+					<span class="draft-badge">
+						<i class="icon"></i>
+						{{- macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -}}
+					</span>
+				{%- endif -%}
+				{%- if page.extra.archive %}
+					<span class="archive-badge">
+						<i class="icon"></i>
+						{{- macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -}}
+					</span>
+				{%- endif %}
+				{%- if page.extra.poor %}
+					<span class="poor-badge">
+						<i class="icon"></i>
+						{{- macros_translate::translate(key="poor", default="Poor", language_strings=language_strings) -}}
+					</span>
+				{%- endif %}
+				{%- if page.extra.hot %}
+					<span class="hot-badge">
+						<i class="icon"></i>
+						{{- macros_translate::translate(key="hot", default="Hot", language_strings=language_strings) -}}
+					</span>
+				{%- endif %}
+				{%- if page.extra.featured %}
+					<span class="featured-badge">
+						<i class="icon"></i>
+						{{- macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -}}
+					</span>
+				{%- endif %}
+			</div>
+			{%- if page.description %}
+				{{ page.description | markdown | safe }}
+			{%- endif %}
+			{%- if page.date -%}
+				<div class="details">
+					<small>
+						<time datetime="{{ page.date | date(format='%+') }}" pubdate>
+							{{- page.date | date(format=date_format, locale=date_locale) -}}
+						</time>
+						{%- if page.authors -%}
+							<span> • {% include "partials/authors.html" -%}</span>
+						{%- endif -%}
+					</small>
+					{%- if page.taxonomies -%}
+						{%- for name, taxon in page.taxonomies %}
+							<small>
+								<ul class="tags">
+									{%-for item in taxon -%}
+										<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
+									{%- endfor %}
+								</ul>
+							</small>
+						{%- endfor -%}
+					{%- endif %}
+					</small>
+				</div>
+			{%- endif -%}
+		</article>
+	{%- endfor %}
+</div>

templates/taxonomy_single.html

@@ -14,60 +14,5 @@
 	{{ macros_translate::translate(key="posts", number=number_of_posts, default="$NUMBER posts", language_strings=language_strings) }}
 </small>
 
-<div id="article-list">
+{% include "partials/articles.html" %}
-	{%- for page in term.pages %}
-		<article class="
-			{% if page.draft %}draft{% endif %}
-			{% if page.extra.archive %}archive{% endif %}
-			{% if page.extra.featured %}featured{% endif %}">
-			<h3><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
-			{%- if page.draft %}
-				<span class="draft-badge">
-					<i class="icon"></i>
-					{{ macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) }}
-				</span>
-			{%- endif -%}
-			{%- if page.extra.archive %}
-				<span class="archive-badge">
-					<i class="icon"></i>
-					{{ macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) }}
-				</span>
-			{%- endif %}
-			{%- if page.extra.featured %}
-				<span class="featured-badge">
-					<i class="icon"></i>
-					{{ macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) }}
-				</span>
-			{%- endif %}
-			{%- if page.description %}
-				{{ page.description | markdown | safe }}
-			{%- endif %}
-			{%- if page.date -%}
-				<div>
-					<small>
-						<time datetime="{{ page.date | date(format='%+') }}" pubdate>
-							{{- page.date | date(format=date_format, locale=date_locale) -}}
-						</time>
-						{%- if page.authors -%}
-							<span> • {% include "partials/authors.html" -%}</span>
-						{%- endif -%}
-					</small>
-					{%- if page.taxonomies -%}
-						{%- for name, taxon in page.taxonomies %}
-							<small>
-								<ul class="tags">
-									{%-for item in taxon -%}
-										<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
-									{%- endfor %}
-								</ul>
-							</small>
-						{%- endfor -%}
-					{%- endif %}
-					</small>
-				</div>
-			{%- endif -%}
-		</article>
-		<hr>
-	{%- endfor %}
-</div>
 {% endblock content %}