summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-18 00:04:21 +0200
committerVolpeon <git@volpeon.ink>2022-06-18 00:04:21 +0200
commit26c099aa807d8e67944f72be04a325f37da305d5 (patch)
treef7781f003b95979d6a2e1c39d9491c26589ec91a /assets/css/components
parentMake some page elements wide (diff)
downloadvolpeon.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.scss38
-rw-r--r--assets/css/components/_header.scss38
-rw-r--r--assets/css/components/_main.scss15
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}