summaryrefslogtreecommitdiffstats
path: root/assets/css/layouts
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-11 16:26:47 +0200
committerVolpeon <git@volpeon.ink>2022-06-11 16:26:47 +0200
commit604dcfe244ab8f6913db9dec3de5796ad32f43f5 (patch)
treefc56d5965f3e263937efd3d42196afe1359299cb /assets/css/layouts
parentRe-implemented design via iro-design (diff)
downloadvolpeon.ink-604dcfe244ab8f6913db9dec3de5796ad32f43f5.tar.gz
volpeon.ink-604dcfe244ab8f6913db9dec3de5796ad32f43f5.tar.bz2
volpeon.ink-604dcfe244ab8f6913db9dec3de5796ad32f43f5.zip
Removed private section, various improvements
Diffstat (limited to 'assets/css/layouts')
-rw-r--r--assets/css/layouts/_card-list.scss39
-rw-r--r--assets/css/layouts/_container.scss11
2 files changed, 36 insertions, 14 deletions
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}