From e1a138e4be2c5a0a33ff1d03e30b7c6302b1611e Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 17 Feb 2026 13:06:28 +0100
Subject: [PATCH] fix: LinksGrid lock icons use muted color, shrink on mobile,
 keep images larger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Decouple lock-icon fill from nth-child color cycling via :not(.lock-icon),
use subtle --nord3 fill in both themes, add responsive lock sizing, and
bump mobile image heights (72→90px, 48→64px).
---
 src/lib/components/LinksGrid.svelte | 33 ++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/LinksGrid.svelte b/src/lib/components/LinksGrid.svelte
index 0e502450..01727e32 100644
--- a/src/lib/components/LinksGrid.svelte
+++ b/src/lib/components/LinksGrid.svelte
@@ -1,12 +1,12 @@
 <style>
 
 :global(.links_grid a:nth-child(4n)),
-:global(.links_grid a:nth-child(4n) svg){
+:global(.links_grid a:nth-child(4n) svg:not(.lock-icon)){
 	background-color: var(--nord4);
 	fill: var(--nord11);
 }
 :global(.links_grid a:nth-child(4n+1)),
-:global(.links_grid a:nth-child(4n+1) svg){
+:global(.links_grid a:nth-child(4n+1) svg:not(.lock-icon)){
 	background-color: var(--nord6);
 	fill: var(--nord10);
 }
@@ -64,8 +64,8 @@
 	right: 0.5rem;
 	width: 1.5rem;
 	height: 1.5rem;
-	fill: var(--nord0);
-	opacity: 0.6;
+	fill: var(--nord3);
+	opacity: 0.5;
 }
 
 @media (max-width: 560px) {
@@ -74,7 +74,7 @@
 		padding: 1.5rem 0.75rem;
 	}
 	:global(.links_grid a :is(svg, img)) {
-		height: 72px;
+		height: 90px;
 	}
 	:global(.links_grid h3) {
 		font-size: 1.2rem;
@@ -82,6 +82,10 @@
 	:global(.links_grid a) {
 		padding: 0.75rem;
 	}
+	:global(.links_grid a .lock-icon) {
+		width: 1.2rem;
+		height: 1.2rem;
+	}
 }
 
 @media (max-width: 410px) {
@@ -90,7 +94,7 @@
 		padding: 1rem 0.5rem;
 	}
 	:global(.links_grid a :is(svg, img)) {
-		height: 48px;
+		height: 64px;
 	}
 	:global(.links_grid h3) {
 		font-size: 0.95rem;
@@ -98,6 +102,12 @@
 	:global(.links_grid a) {
 		padding: 0.5rem;
 	}
+	:global(.links_grid a .lock-icon) {
+		width: 1rem;
+		height: 1rem;
+		top: 0.3rem;
+		right: 0.3rem;
+	}
 }
 
 @media (prefers-color-scheme: dark){
@@ -105,26 +115,25 @@
 		color: white;
 	}
 	:global(.links_grid a .lock-icon){
-		fill: white;
+		fill: var(--nord3);
 	}
 	:global(.links_grid a:nth-child(4n)),
-	:global(.links_grid a:nth-child(4n) svg){
+	:global(.links_grid a:nth-child(4n) svg:not(.lock-icon)){
 		background-color: var(--nord6-dark);
 		fill: var(--nord11);
 	}
 	:global(.links_grid a:nth-child(4n+1)),
-	:global(.links_grid a:nth-child(4n+1) svg){
+	:global(.links_grid a:nth-child(4n+1) svg:not(.lock-icon)){
 		background-color: var(--accent-dark);
 		fill: var(--nord9);
 	}
 	:global(.links_grid a:nth-child(4n+2)),
-	:global(.links_grid a:nth-child(4n+2) svg){
+	:global(.links_grid a:nth-child(4n+2) svg:not(.lock-icon)){
 		background-color: var(--nord1);
 		fill: var(--nord8);
-
 	}
 	:global(.links_grid a:nth-child(4n+3)),
-	:global(.links_grid a:nth-child(4n+3) svg){
+	:global(.links_grid a:nth-child(4n+3) svg:not(.lock-icon)){
 		background-color: var(--background-dark);
 		fill: var(--nord7);
 	}