From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 12:27:09 +0200
Subject: Paths

---
 src/layouts/_card-list.scss | 178 +++++++++++++++++++++++++-------------------
 1 file changed, 103 insertions(+), 75 deletions(-)

(limited to 'src/layouts/_card-list.scss')

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index f2a6ff5..c05b798 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,39 +1,44 @@
-@use 'sass:meta';
-@use 'pkg:include-media/dist/include-media' as media;
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:include-media/dist/include-media" as media;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@use '../objects/card.vars' as card;
+@use "../objects/card.vars" as card;
 
-@forward 'card-list.vars';
-@use 'card-list.vars' as vars;
+@forward "card-list.vars";
+@use "card-list.vars" as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables("vars"));
 
-	@include bem.layout('card-list') {
-		display:        flex;
+	@include bem.layout("card-list") {
+		display: flex;
 		flex-direction: column;
-		gap:            props.get(vars.$row-gap);
+		gap: props.get(vars.$row-gap);
 
-		@include bem.modifier('merge') {
-			position:      relative;
-			gap:           0;
+		@include bem.modifier("merge") {
+			position: relative;
+			gap: 0;
 			border-radius: props.get(card.$rounding);
 
-			@include bem.elem('card') {
-				border-color:    props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color);
+			@include bem.elem("card") {
+				border-color: props.get(card.$border-color) props.get(card.$border-color)
+					props.get(vars.$border-color);
 				background-clip: content-box;
-				box-shadow:      none;
+				box-shadow: none;
 
 				&:not(:last-child) {
-					position:                relative;
+					position: relative;
 					border-end-start-radius: 0;
-					border-end-end-radius:   0;
+					border-end-end-radius: 0;
 				}
 
-				@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+				@include bem.multi(
+					"&:link, &:visited, &:enabled",
+					"modifier" "interactive",
+					"modifier" "collapsible"
+				) {
 					&:hover,
 					&:active,
 					&:focus-visible {
@@ -46,19 +51,28 @@
 				}
 
 				@include bem.next-twin-elem {
-					margin-block-start:        calc(-1 * props.get(card.$border-width));
-					border-block-start-color:  transparent;
+					margin-block-start: calc(-1 * props.get(card.$border-width));
+					border-block-start-color: transparent;
 					border-start-start-radius: 0;
-					border-start-end-radius:   0;
+					border-start-end-radius: 0;
 
-					@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+					@include bem.multi(
+						"&:link, &:visited, &:enabled",
+						"modifier" "interactive",
+						"modifier" "collapsible"
+					) {
 						&:hover,
 						&:active {
 							border-block-start-color: props.get(card.$hover--border-color);
 						}
 
 						&:focus-visible {
-							margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
+							margin-block-start: calc(
+								-1 *
+									props.get(card.$border-width) - props.get(
+										card.$key-focus--border-width
+									)
+							);
 						}
 					}
 				}
@@ -67,7 +81,11 @@
 					border-block-end-color: props.get(card.$border-color);
 				}
 
-				@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+				@include bem.multi(
+					"&:link, &:visited, &:enabled",
+					"modifier" "interactive",
+					"modifier" "collapsible"
+				) {
 					&:hover,
 					&:active {
 						border-color: props.get(card.$hover--border-color);
@@ -75,17 +93,20 @@
 
 					&:focus-visible {
 						border-color: props.get(card.$hover--bg-color);
-						box-shadow:
-							0 0 0
-							calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width))
+						box-shadow: 0 0 0
+							calc(
+								props.get(card.$key-focus--border-width) +
+									props.get(card.$key-focus--outline-width)
+							)
 							props.get(card.$key-focus--outline-color);
 					}
 				}
 			}
 
-			@include bem.modifier('borderless') {
-				@include bem.elem('card') {
-					border-color: props.get(card.$bg-color) props.get(card.$bg-color) props.get(vars.$border-color);
+			@include bem.modifier("borderless") {
+				@include bem.elem("card") {
+					border-color: props.get(card.$bg-color) props.get(card.$bg-color)
+						props.get(vars.$border-color);
 
 					@include bem.next-twin-elem {
 						border-block-start-color: transparent;
@@ -95,7 +116,11 @@
 						border-block-end-color: props.get(card.$bg-color);
 					}
 
-					@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+					@include bem.multi(
+						"&:link, &:visited, &:enabled",
+						"modifier" "interactive",
+						"modifier" "collapsible"
+					) {
 						&:hover,
 						&:active {
 							border-color: props.get(card.$hover--border-color);
@@ -108,84 +133,87 @@
 				}
 			}
 
-			@include bem.modifier('shadow') {
-				box-shadow:
-					props.get(vars.$shadow-x)
-					props.get(vars.$shadow-y)
-					props.get(vars.$shadow-blur)
-					props.get(vars.$shadow-grow)
+			@include bem.modifier("shadow") {
+				box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
+					props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
 					props.get(card.$shadow-color);
 			}
 
-			@include bem.modifier('interactive') {
-				transition: transform .2s, box-shadow .2s;
+			@include bem.modifier("interactive") {
+				transition:
+					transform 0.2s,
+					box-shadow 0.2s;
 
 				&:hover,
 				&:active,
 				&:focus-within {
 					box-shadow: none;
-					transform:  translateY(props.get(card.$hover--offset-b));
+					transform: translateY(props.get(card.$hover--offset-b));
 				}
 			}
 		}
 
-		@include bem.modifier('quiet') {
+		@include bem.modifier("quiet") {
 			row-gap: props.get(vars.$quiet--row-gap);
 		}
 
-		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$grid-layouts {
+		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
+			$breakpoint in vars.$grid-layouts
+		{
 			@include bem.modifier($mod) {
-				display:               grid;
+				display: grid;
 				grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr));
-				gap:                   props.get($row-gap) props.get($col-gap);
+				gap: props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier('quiet') {
+				@include bem.modifier("quiet") {
 					row-gap: props.get($quiet--row-gap);
 				}
 
-				@include media.media('<=#{$breakpoint}') {
+				@include media.media("<=#{$breakpoint}") {
 					display: flex;
 				}
 			}
 		}
 
-		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$flex-layouts {
+		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
+			$breakpoint in vars.$flex-layouts
+		{
 			@include bem.modifier($mod) {
-				display:   flex;
+				display: flex;
 				flex-flow: row wrap;
-				gap:       props.get($row-gap) props.get($col-gap);
+				gap: props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier('quiet') {
+				@include bem.modifier("quiet") {
 					row-gap: props.get($quiet--row-gap);
 				}
 
-				@include bem.elem('card') {
-					flex:        0.1 0 auto;
+				@include bem.elem("card") {
+					flex: 0.1 0 auto;
 					inline-size: props.get($col-width);
 				}
 
-				@include media.media('<=#{$breakpoint}') {
+				@include media.media("<=#{$breakpoint}") {
 					flex-flow: column nowrap;
 
-					@include bem.elem('card') {
+					@include bem.elem("card") {
 						inline-size: auto;
 					}
 				}
 			}
 		}
 
-		@include bem.modifier('masonry') {
-			display:    block;
-			columns:    auto props.get(vars.$masonry--col-width);
+		@include bem.modifier("masonry") {
+			display: block;
+			columns: auto props.get(vars.$masonry--col-width);
 			column-gap: props.get(vars.$masonry--col-gap);
 
-			@include bem.elem('card') {
+			@include bem.elem("card") {
 				margin-block-end: props.get(vars.$masonry--row-gap);
-				break-inside:     avoid;
+				break-inside: avoid;
 			}
 
-			@include bem.modifier('quiet') {
-				@include bem.elem('card') {
+			@include bem.modifier("quiet") {
+				@include bem.elem("card") {
 					margin-block-end: props.get(vars.$masonry--quiet--row-gap);
 				}
 			}
@@ -194,34 +222,34 @@
 		@each $mod, $row-gap, $col-gap, $row-height, $quiet--row-gap in vars.$masonry-h-layouts {
 			@include bem.modifier($mod) {
 				flex-flow: row wrap;
-				gap:       props.get($row-gap) props.get($col-gap);
+				gap: props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier('no-flush') {
+				@include bem.modifier("no-flush") {
 					&::after {
-						display:     block;
-						flex:        1 0 auto;
+						display: block;
+						flex: 1 0 auto;
 						inline-size: props.get($row-height);
-						content:     '';
+						content: "";
 					}
 				}
 
-				@include bem.elem('card') {
-					flex:            1 0 auto;
+				@include bem.elem("card") {
+					flex: 1 0 auto;
 					max-inline-size: 100%;
 				}
 
-				@include bem.elem('card-image') {
+				@include bem.elem("card-image") {
 					block-size: props.get($row-height);
 				}
 
-				@include bem.modifier('quiet') {
+				@include bem.modifier("quiet") {
 					row-gap: props.get($quiet--row-gap);
 				}
 			}
 		}
 
-		@include bem.modifier('aspect-5\\/4') {
-			@include bem.elem('card-image') {
+		@include bem.modifier("aspect-5\\/4") {
+			@include bem.elem("card-image") {
 				aspect-ratio: 5 / 4;
 			}
 		}
-- 
cgit v1.3.1