summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_base.scss1
-rw-r--r--assets/css/components/_card.scss2
-rw-r--r--assets/css/components/_hnav.scss20
-rw-r--r--assets/css/layouts/_card-list.scss39
-rw-r--r--assets/css/layouts/_container.scss11
-rw-r--r--assets/css/style.scss1
6 files changed, 48 insertions, 26 deletions
diff --git a/assets/css/_base.scss b/assets/css/_base.scss
index dd24fed..ac6b989 100644
--- a/assets/css/_base.scss
+++ b/assets/css/_base.scss
@@ -9,6 +9,7 @@ code {
9 9
10body { 10body {
11 box-sizing: border-box; 11 box-sizing: border-box;
12 height: auto;
12 min-height: 100%; 13 min-height: 100%;
13} 14}
14 15
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index f8f106d..6c15145 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -135,7 +135,7 @@
135 position: relative; 135 position: relative;
136 width: 100%; 136 width: 100%;
137 height: 2em; 137 height: 2em;
138 padding-top: 46%; 138 padding-top: 50%;
139 } 139 }
140 140
141 @include iro.bem-elem('thumbnail-img') { 141 @include iro.bem-elem('thumbnail-img') {
diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss
index 4097373..6eea345 100644
--- a/assets/css/components/_hnav.scss
+++ b/assets/css/components/_hnav.scss
@@ -10,20 +10,18 @@
10 10
11 @include iro.props-store(( 11 @include iro.props-store((
12 --dims: ( 12 --dims: (
13 --margin-top: fn.global-dim(--size --600), 13 --gap: 1.5em,
14 --gap: 2em, 14 --margin-top: fn.global-dim(--paragraph --margin-top),
15 --pad-y: .5em 15 --margin-bottom: fn.global-dim(--size --900),
16 ) 16 )
17 ), 'dims'); 17 ), 'dims');
18 18
19 @include iro.bem-component(iro.props-namespace()) { 19 @include iro.bem-component(iro.props-namespace()) {
20 display: flex; 20 display: flex;
21 gap: fn.dim(--gap); 21 gap: fn.dim(--gap);
22 align-items: baseline; 22 align-items: baseline;
23 margin-top: fn.dim(--margin-top); 23 margin: fn.dim(--margin-top) 0 fn.dim(--margin-bottom);
24 padding: fn.dim(--pad-y) 0 0; 24 padding-top: fn.dim(--margin-top);
25 border-width: 1px 0 0; 25 border-top: 1px solid fn.color(--border);
26 border-style: solid;
27 border-color: fn.color(--border);
28 } 26 }
29} 27}
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index 96f9060..6d388e6 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -6,7 +6,19 @@
6 --dims: ( 6 --dims: (
7 --margin-top: fn.global-dim(--size --600), 7 --margin-top: fn.global-dim(--size --600),
8 --spacing: fn.global-dim(--size --200), 8 --spacing: fn.global-dim(--size --200),
9 --col-width: 17em, 9 --gap: fn.global-dim(--size --25),
10 --grid: (
11 --gap: fn.global-dim(--size --75),
12 --col-width: fn.global-dim(--size --3400),
13 ),
14 --small-gallery: (
15 --gap: fn.global-dim(--size --250),
16 --col-width: fn.global-dim(--size --2800),
17 ),
18 --gallery: (
19 --gap: fn.global-dim(--size --250),
20 --col-width: fn.global-dim(--size --3400),
21 )
10 ) 22 )
11 ), 'dims'); 23 ), 'dims');
12 24
@@ -14,24 +26,23 @@
14 margin-top: fn.dim(--margin-top); 26 margin-top: fn.dim(--margin-top);
15 font-size: 1rem; 27 font-size: 1rem;
16 28
29 @include iro.bem-elem('header') {
30 margin-top: fn.dim(--margin-top);
31 }
32
17 @include iro.bem-elem('cards') { 33 @include iro.bem-elem('cards') {
18 display: flex; 34 display: flex;
19 flex-direction: column; 35 flex-direction: column;
20 gap: 2px; 36 gap: fn.dim(--gap);
21 margin-top: fn.dim(--spacing); 37 margin-top: fn.dim(--spacing);
22 38
23 @include iro.bem-modifier('grid', 'gallery') { 39 @each $mode in 'grid' 'small-gallery' 'gallery' {
24 display: grid; 40 @include iro.bem-modifier($mode) {
25 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--col-width), 1fr)); 41 display: grid;
26 align-items: start; 42 align-items: start;
27 } 43 grid-template-columns: repeat(auto-fill, minmax(fn.dim('--#{$mode}' --col-width), 1fr));
28 44 gap: fn.dim('--#{$mode}' --gap);
29 @include iro.bem-modifier('grid') { 45 }
30 gap: 6px;
31 }
32
33 @include iro.bem-modifier('gallery') {
34 gap: 20px;
35 } 46 }
36 } 47 }
37 } 48 }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
new file mode 100644
index 0000000..10d6832
--- /dev/null
+++ b/assets/css/layouts/_container.scss
@@ -0,0 +1,11 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('container') {
5 @include iro.props-store((
6 --dims: (
7 --width: iro.fn-px-to-rem(730px),
8 --width-50: iro.fn-px-to-rem(380px),
9 )
10 ), 'dims');
11}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 1184bb2..e160f91 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -7,6 +7,7 @@
7@use 'base'; 7@use 'base';
8 8
9@use 'iro-design/src/layouts'; 9@use 'iro-design/src/layouts';
10@use 'layouts/container';
10@use 'layouts/media'; 11@use 'layouts/media';
11@use 'layouts/card-list'; 12@use 'layouts/card-list';
12 13