summaryrefslogtreecommitdiffstats
path: root/assets/css/layouts
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-11 09:44:04 +0200
committerVolpeon <git@volpeon.ink>2022-06-11 09:44:04 +0200
commit575278aba99139635adc3b1f9385befe57102541 (patch)
treed98a160167610717da37f6340b3884ba4224fe5d /assets/css/layouts
parentUpdate (diff)
downloadvolpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.gz
volpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.bz2
volpeon.ink-575278aba99139635adc3b1f9385befe57102541.zip
Re-implemented design via iro-design
Diffstat (limited to 'assets/css/layouts')
-rw-r--r--assets/css/layouts/_card-list.scss33
-rw-r--r--assets/css/layouts/_container.scss33
-rw-r--r--assets/css/layouts/_media.scss26
3 files changed, 43 insertions, 49 deletions
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index a53b771..96f9060 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -1,37 +1,38 @@
1@include namespace('card-list') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('card-list') {
5 @include iro.props-store((
3 --dims: ( 6 --dims: (
4 --col-width: 17em 7 --margin-top: fn.global-dim(--size --600),
8 --spacing: fn.global-dim(--size --200),
9 --col-width: 17em,
5 ) 10 )
6 )); 11 ), 'dims');
7 12
8 @include layout(namespace()) { 13 @include iro.bem-layout(iro.props-namespace()) {
9 margin-top: $line-height * 2rem; 14 margin-top: fn.dim(--margin-top);
10 font-size: 1rem; 15 font-size: 1rem;
11 16
12 @include element('cards') { 17 @include iro.bem-elem('cards') {
13 display: flex; 18 display: flex;
14 flex-direction: column; 19 flex-direction: column;
15 gap: 2px; 20 gap: 2px;
16 margin-top: $line-height * .625rem; 21 margin-top: fn.dim(--spacing);
17 22
18 @include modifier('grid', 'gallery') { 23 @include iro.bem-modifier('grid', 'gallery') {
19 display: grid; 24 display: grid;
20 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); 25 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--col-width), 1fr));
21 align-items: start; 26 align-items: start;
22 } 27 }
23 28
24 @include modifier('grid') { 29 @include iro.bem-modifier('grid') {
25 gap: 6px; 30 gap: 6px;
26 } 31 }
27 32
28 @include modifier('gallery') { 33 @include iro.bem-modifier('gallery') {
29 gap: 20px; 34 gap: 20px;
30 } 35 }
31
32 @media print {
33 filter: none;
34 }
35 } 36 }
36 } 37 }
37} 38}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
deleted file mode 100644
index ae23042..0000000
--- a/assets/css/layouts/_container.scss
+++ /dev/null
@@ -1,33 +0,0 @@
1@include namespace('container') {
2 @include store((
3 --dims: (
4 --pad-x: 2rem,
5 --pad-y: 4rem,
6 )
7 ));
8
9 @include store((
10 --dims: (
11 --pad-x: 1rem,
12 --pad-y: 3rem,
13 )
14 ), 'sm');
15
16 @include layout(namespace()) {
17 @include modifier('content') {
18 max-width: $content--width;
19 margin-right: auto;
20 margin-left: auto;
21 }
22
23 @include modifier('pad-x') {
24 padding-right: prop(--dims --pad-x);
25 padding-left: prop(--dims --pad-x);
26 }
27
28 @include modifier('pad-y') {
29 padding-top: prop(--dims --pad-y);
30 padding-bottom: prop(--dims --pad-y);
31 }
32 }
33}
diff --git a/assets/css/layouts/_media.scss b/assets/css/layouts/_media.scss
new file mode 100644
index 0000000..c4ad222
--- /dev/null
+++ b/assets/css/layouts/_media.scss
@@ -0,0 +1,26 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('media') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.global-dim(--size --200),
8 --pad-y: fn.global-dim(--size --150),
9
10 --75: (
11 --pad-x: fn.global-dim(--size --150),
12 --pad-y: fn.global-dim(--size --85),
13 ),
14
15 --200: (
16 --pad-x: fn.global-dim(--size --450),
17 --pad-y: fn.global-dim(--size --225),
18 ),
19
20 --300: (
21 --pad-x: fn.global-dim(--size --450),
22 --pad-y: fn.global-dim(--size --225),
23 )
24 )
25 ), 'dims');
26}