From 13d648511c8ce33ac8267e2dba8b948ce8a90db6 Mon Sep 17 00:00:00 2001
From: david-swift <haenerdavid@icloud.com>
Date: Tue, 25 Feb 2025 15:16:36 +0100
Subject: [PATCH] Simplify article list theme #1

---
 sass/_article-list.scss | 101 +++-------------------------------------
 sass/_variables.scss    |   2 +
 2 files changed, 9 insertions(+), 94 deletions(-)

diff --git a/sass/_article-list.scss b/sass/_article-list.scss
index 6a34b18..a56cd5d 100644
--- a/sass/_article-list.scss
+++ b/sass/_article-list.scss
@@ -8,16 +8,11 @@
 		--bg-overlay: var(--accent-color-alpha);
 		position: relative;
 		transition: var(--transition);
-		box-shadow: var(--edge-highlight), var(--shadow-glass);
 		border-radius: var(--rounded-corner);
-		border-start-end-radius: 2.125rem;
-		border-end-end-radius: 1.8125rem;
-		background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)),
-			linear-gradient(var(--glass-bg), var(--glass-bg)), var(--blurnail);
 		background-position: center;
 		background-size: cover;
-		background-color: var(--bg-overlay);
-		padding: 1rem;
+		background-color: var(--fg-contrast-soft);
+		padding: 1.5rem;
 		overflow: hidden;
 
 		&:hover {
@@ -59,7 +54,6 @@
 
 		h3 {
 			margin: 0;
-			color: var(--accent-color);
 			font-weight: bold;
 			line-height: 1;
 			font-family: var(--font-system-ui);
@@ -92,12 +86,11 @@
 			margin: 0;
 
 			a {
-				background-color: var(--accent-color-alpha);
-				color: var(--accent-color);
+				margin-top: 10px;
 
 				&:hover {
-					background-color: var(--accent-color);
-					color: var(--contrast-color);
+					background-color: var(--accent-color-alpha);
+					color: var(--accent-color);
 				}
 			}
 		}
@@ -166,16 +159,6 @@
 		&.archive {
 			--bg-overlay: var(--purple-bg);
 
-			&::before {
-				-webkit-mask-image: var(--icon-archive);
-				mask-image: var(--icon-archive);
-				background-color: var(--purple-bg);
-			}
-
-			h3 {
-				color: var(--purple-fg);
-			}
-
 			.badge {
 				background-color: var(--purple-bg);
 				color: var(--purple-fg);
@@ -185,27 +168,11 @@
 					mask-image: var(--icon-archive);
 				}
 			}
-
-			.tags a {
-				background-color: var(--purple-bg);
-				color: var(--purple-fg);
-
-				&:hover {
-					background-color: var(--purple-fg);
-					color: var(--fg-contrast);
-				}
-			}
 		}
 
 		&.featured {
 			--bg-overlay: var(--yellow-bg);
 
-			&::before {
-				-webkit-mask-image: var(--icon-star);
-				mask-image: var(--icon-star);
-				background-color: var(--yellow-bg);
-			}
-
 			&:hover {
 				&::before {
 					transform: translateY(-50%) rotate(62deg) scale(1.5);
@@ -216,44 +183,20 @@
 				}
 			}
 
-			h3 {
-				color: var(--yellow-fg);
-			}
-
 			.badge {
-				background-color: var(--yellow-bg);
-				color: var(--yellow-fg);
+				background-color: var(--accent-color-alpha);
+				color: var(--accent-color);
 
 				.icon {
 					-webkit-mask-image: var(--icon-star);
 					mask-image: var(--icon-star);
 				}
 			}
-
-			.tags a {
-				background-color: var(--yellow-bg);
-				color: var(--yellow-fg);
-
-				&:hover {
-					background-color: var(--yellow-fg);
-					color: var(--fg-contrast);
-				}
-			}
 		}
 
 		&.hot {
 			--bg-overlay: var(--red-bg);
 
-			&::before {
-				-webkit-mask-image: var(--icon-fire);
-				mask-image: var(--icon-fire);
-				background-color: var(--red-bg);
-			}
-
-			h3 {
-				color: var(--red-fg);
-			}
-
 			.badge {
 				background-color: var(--red-bg);
 				color: var(--red-fg);
@@ -263,31 +206,11 @@
 					mask-image: var(--icon-fire);
 				}
 			}
-
-			.tags a {
-				background-color: var(--red-bg);
-				color: var(--red-fg);
-
-				&:hover {
-					background-color: var(--red-fg);
-					color: var(--fg-contrast);
-				}
-			}
 		}
 
 		&.poor {
 			--bg-overlay: var(--brown-bg);
 
-			&::before {
-				-webkit-mask-image: var(--icon-poop);
-				mask-image: var(--icon-poop);
-				background-color: var(--brown-bg);
-			}
-
-			h3 {
-				color: var(--brown-fg);
-			}
-
 			.badge {
 				background-color: var(--brown-bg);
 				color: var(--brown-fg);
@@ -297,16 +220,6 @@
 					mask-image: var(--icon-poop);
 				}
 			}
-
-			.tags a {
-				background-color: var(--brown-bg);
-				color: var(--brown-fg);
-
-				&:hover {
-					background-color: var(--brown-fg);
-					color: var(--fg-contrast);
-				}
-			}
 		}
 
 		.badge {
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 823283b..97ba1b0 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -26,6 +26,7 @@
 		--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-soft: var(--fg-muted-1);
 		--glass-bg: rgb(25 25 25 / 0.7);
 		--blue-fg: rgb(153 193 241);
 		--brown-fg: rgb(205 171 143);
@@ -43,6 +44,7 @@
 		--bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
 		--fg-color: rgb(0 0 0 / 0.8);
 		--fg-contrast: rgb(255 255 255);
+		--fg-contrast-soft: rgb(255 255 255);
 		--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);