summaryrefslogtreecommitdiffstats
path: root/assets
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
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')
-rw-r--r--assets/css/_declare-vars.scss8
-rw-r--r--assets/css/components/_exhibit.scss38
-rw-r--r--assets/css/components/_header.scss38
-rw-r--r--assets/css/components/_main.scss15
-rw-r--r--assets/css/layouts/_card-list.scss4
-rw-r--r--assets/css/scopes/_body.scss10
-rw-r--r--assets/css/style.scss3
7 files changed, 87 insertions, 29 deletions
diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss
index 3422588..38aaa21 100644
--- a/assets/css/_declare-vars.scss
+++ b/assets/css/_declare-vars.scss
@@ -19,6 +19,10 @@
19 --1000: iro.fn-px-to-rem(60px), 19 --1000: iro.fn-px-to-rem(60px),
20 --1100: iro.fn-px-to-rem(70px), 20 --1100: iro.fn-px-to-rem(70px),
21 ), 21 ),
22
23 --header: (
24 --height: fn.dim(--size --800),
25 ),
22 ) 26 )
23), 'dims'); 27), 'dims');
24 28
@@ -40,6 +44,10 @@
40 --1000: iro.fn-px-to-rem(45px), 44 --1000: iro.fn-px-to-rem(45px),
41 --1100: iro.fn-px-to-rem(50px), 45 --1100: iro.fn-px-to-rem(50px),
42 ), 46 ),
47
48 --header: (
49 --height: fn.dim(--size --700),
50 ),
43 ) 51 )
44), 'sm'); 52), 'sm');
45 53
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}
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index 2d9d58f..92c89b7 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -9,7 +9,7 @@
9 --gap: fn.global-dim(--size --25), 9 --gap: fn.global-dim(--size --25),
10 --grid-2: ( 10 --grid-2: (
11 --gap: fn.global-dim(--size --75), 11 --gap: fn.global-dim(--size --75),
12 --col-width: fn.global-dim(--size --3400), 12 --col-width: fn.global-dim(--size --3200),
13 ), 13 ),
14 --grid-3: ( 14 --grid-3: (
15 --gap: fn.global-dim(--size --75), 15 --gap: fn.global-dim(--size --75),
@@ -17,7 +17,7 @@
17 ), 17 ),
18 --gallery-2: ( 18 --gallery-2: (
19 --gap: fn.global-dim(--size --200), 19 --gap: fn.global-dim(--size --200),
20 --col-width: fn.global-dim(--size --3400), 20 --col-width: fn.global-dim(--size --3200),
21 ), 21 ),
22 --gallery-3: ( 22 --gallery-3: (
23 --gap: fn.global-dim(--size --200), 23 --gap: fn.global-dim(--size --200),
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
new file mode 100644
index 0000000..1c76843
--- /dev/null
+++ b/assets/css/scopes/_body.scss
@@ -0,0 +1,10 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('body') {
5 @include iro.bem-scope(iro.props-namespace()) {
6 > :first-child {
7 margin-top: 0;
8 }
9 }
10}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 3fce2f4..046210f 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -18,11 +18,13 @@
18@use 'iro-design/src/objects/alert' as iro-alert; 18@use 'iro-design/src/objects/alert' as iro-alert;
19@use 'iro-design/src/objects/lightbox' as iro-lightbox; 19@use 'iro-design/src/objects/lightbox' as iro-lightbox;
20 20
21@use 'components/main';
21@use 'components/footer'; 22@use 'components/footer';
22@use 'components/header'; 23@use 'components/header';
23@use 'components/hnav'; 24@use 'components/hnav';
24@use 'components/card'; 25@use 'components/card';
25@use 'components/figure'; 26@use 'components/figure';
27@use 'components/exhibit';
26 28
27@use 'iro-design/src/scopes/blockquotes' as iro-blockquotes; 29@use 'iro-design/src/scopes/blockquotes' as iro-blockquotes;
28@use 'iro-design/src/scopes/code' as iro-code; 30@use 'iro-design/src/scopes/code' as iro-code;
@@ -31,6 +33,7 @@
31@use 'iro-design/src/scopes/invisible-links' as iro-invisible-links; 33@use 'iro-design/src/scopes/invisible-links' as iro-invisible-links;
32@use 'iro-design/src/scopes/lists' as iro-lists; 34@use 'iro-design/src/scopes/lists' as iro-lists;
33@use 'iro-design/src/scopes/tables' as iro-tables; 35@use 'iro-design/src/scopes/tables' as iro-tables;
36@use 'scopes/body';
34@use 'scopes/small'; 37@use 'scopes/small';
35@use 'scopes/alerts'; 38@use 'scopes/alerts';
36 39