diff options
author | Volpeon <git@volpeon.ink> | 2022-06-18 00:04:21 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-06-18 00:04:21 +0200 |
commit | 26c099aa807d8e67944f72be04a325f37da305d5 (patch) | |
tree | f7781f003b95979d6a2e1c39d9491c26589ec91a /assets/css/components | |
parent | Make some page elements wide (diff) | |
download | volpeon.ink-26c099aa807d8e67944f72be04a325f37da305d5.tar.gz volpeon.ink-26c099aa807d8e67944f72be04a325f37da305d5.tar.bz2 volpeon.ink-26c099aa807d8e67944f72be04a325f37da305d5.zip |
Added page type for art pieces
Diffstat (limited to 'assets/css/components')
-rw-r--r-- | assets/css/components/_exhibit.scss | 38 | ||||
-rw-r--r-- | assets/css/components/_header.scss | 38 | ||||
-rw-r--r-- | assets/css/components/_main.scss | 15 |
3 files changed, 64 insertions, 27 deletions
diff --git a/assets/css/components/_exhibit.scss b/assets/css/components/_exhibit.scss new file mode 100644 index 0000000..96ed1ae --- /dev/null +++ b/assets/css/components/_exhibit.scss | |||
@@ -0,0 +1,38 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use 'iro-design/src/functions' as fn; | ||
3 | @use 'include-media/dist/include-media' as media; | ||
4 | |||
5 | @include iro.props-namespace('exhibit') { | ||
6 | @include iro.props-store(( | ||
7 | --dims: ( | ||
8 | --height: 100vh, | ||
9 | ) | ||
10 | ), 'dims'); | ||
11 | |||
12 | @include iro.props-store(( | ||
13 | --colors: ( | ||
14 | --footer: ( | ||
15 | --bg: fn.global-color(--bg-hi), | ||
16 | ), | ||
17 | ) | ||
18 | ), 'colors'); | ||
19 | |||
20 | @include iro.bem-component(iro.props-namespace()) { | ||
21 | display: grid; | ||
22 | grid-template-rows: 1fr auto; | ||
23 | grid-template-areas: 'content' 'footer'; | ||
24 | box-sizing: border-box; | ||
25 | height: fn.dim(--height); | ||
26 | |||
27 | @include iro.bem-elem('content') { | ||
28 | grid-area: content; | ||
29 | height: auto; | ||
30 | overflow: hidden; | ||
31 | } | ||
32 | |||
33 | @include iro.bem-elem('footer') { | ||
34 | grid-area: footer; | ||
35 | background-color: fn.color(--footer --bg); | ||
36 | } | ||
37 | } | ||
38 | } | ||
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index ce216ee..c8b50f8 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss | |||
@@ -19,10 +19,10 @@ | |||
19 | 19 | ||
20 | @include iro.props-store(( | 20 | @include iro.props-store(( |
21 | --dims: ( | 21 | --dims: ( |
22 | --height: 4rem, | 22 | --height: fn.global-dim(--header --height), |
23 | --icon: 1.5rem, | 23 | --icon: 1.5rem, |
24 | --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), | 24 | --pad-x: calc(.5 * (fn.dim(--height, null) - fn.dim(--icon, null))), |
25 | --gap: 2px, | 25 | --gap: fn.global-dim(--size --25), |
26 | ) | 26 | ) |
27 | ), 'dims'); | 27 | ), 'dims'); |
28 | 28 | ||
@@ -32,18 +32,14 @@ | |||
32 | ) | 32 | ) |
33 | ), 'colors-dark'); | 33 | ), 'colors-dark'); |
34 | 34 | ||
35 | @include iro.props-store(( | ||
36 | --dims: ( | ||
37 | --height: 3.4rem, | ||
38 | ) | ||
39 | ), 'sm'); | ||
40 | |||
41 | @include iro.bem-component(iro.props-namespace()) { | 35 | @include iro.bem-component(iro.props-namespace()) { |
42 | display: flex; | 36 | display: flex; |
43 | width: 0; | 37 | position: absolute; |
44 | height: fn.dim(--height); | 38 | z-index: 100; |
45 | padding: fn.dim(--gap); | 39 | top: 0; |
46 | gap: fn.dim(--gap); | 40 | left: 0; |
41 | height: fn.dim(--height); | ||
42 | gap: fn.dim(--gap); | ||
47 | 43 | ||
48 | @include iro.bem-elem('item') { | 44 | @include iro.bem-elem('item') { |
49 | padding: 0 fn.dim(--pad-x); | 45 | padding: 0 fn.dim(--pad-x); |
@@ -52,7 +48,6 @@ | |||
52 | color: fn.color(--fg); | 48 | color: fn.color(--fg); |
53 | line-height: fn.dim(--height); | 49 | line-height: fn.dim(--height); |
54 | text-decoration: none; | 50 | text-decoration: none; |
55 | white-space: nowrap; | ||
56 | 51 | ||
57 | &:hover, | 52 | &:hover, |
58 | &:focus { | 53 | &:focus { |
@@ -78,19 +73,8 @@ | |||
78 | height: fn.dim(--icon); | 73 | height: fn.dim(--icon); |
79 | } | 74 | } |
80 | 75 | ||
81 | @include iro.bem-modifier('fixed') { | ||
82 | position: fixed; | ||
83 | } | ||
84 | |||
85 | @include media.media('>=lg') { | 76 | @include media.media('>=lg') { |
86 | position: sticky; | 77 | position: fixed; |
87 | z-index: 100; | ||
88 | top: 0; | ||
89 | margin-bottom: calc(-.75 * #{fn.dim(--height)}); | ||
90 | |||
91 | @include iro.bem-modifier('fixed') { | ||
92 | position: fixed; | ||
93 | } | ||
94 | } | 78 | } |
95 | 79 | ||
96 | @media print { | 80 | @media print { |
diff --git a/assets/css/components/_main.scss b/assets/css/components/_main.scss new file mode 100644 index 0000000..f0a839e --- /dev/null +++ b/assets/css/components/_main.scss | |||
@@ -0,0 +1,15 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use 'iro-design/src/functions' as fn; | ||
3 | @use 'include-media/dist/include-media' as media; | ||
4 | |||
5 | @include iro.props-namespace('main') { | ||
6 | @include iro.props-store(( | ||
7 | --dims: ( | ||
8 | --pad-top: fn.global-dim(--header --height), | ||
9 | ) | ||
10 | ), 'dims'); | ||
11 | |||
12 | @include iro.bem-component(iro.props-namespace()) { | ||
13 | margin-top: fn.dim(--pad-top); | ||
14 | } | ||
15 | } | ||