diff options
author | Volpeon <git@volpeon.ink> | 2022-06-11 16:26:47 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-06-11 16:26:47 +0200 |
commit | 604dcfe244ab8f6913db9dec3de5796ad32f43f5 (patch) | |
tree | fc56d5965f3e263937efd3d42196afe1359299cb /assets/css | |
parent | Re-implemented design via iro-design (diff) | |
download | volpeon.ink-604dcfe244ab8f6913db9dec3de5796ad32f43f5.tar.gz volpeon.ink-604dcfe244ab8f6913db9dec3de5796ad32f43f5.tar.bz2 volpeon.ink-604dcfe244ab8f6913db9dec3de5796ad32f43f5.zip |
Removed private section, various improvements
Diffstat (limited to 'assets/css')
-rw-r--r-- | assets/css/_base.scss | 1 | ||||
-rw-r--r-- | assets/css/components/_card.scss | 2 | ||||
-rw-r--r-- | assets/css/components/_hnav.scss | 20 | ||||
-rw-r--r-- | assets/css/layouts/_card-list.scss | 39 | ||||
-rw-r--r-- | assets/css/layouts/_container.scss | 11 | ||||
-rw-r--r-- | assets/css/style.scss | 1 |
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 | ||
10 | body { | 10 | body { |
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 | ||