Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: LinksGrid lock icons use muted color, shrink on mobile, keep images larger
All checks were successful
CI / update (push) Successful in 9s
Details

Browse Source 
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).
This commit is contained in:
Alexander Bocken
2026-02-17 13:06:28 +01:00
parent 13fd2143d9
commit 8db7ca6bcc
1 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/lib/components/LinksGrid.svelte
View File

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