summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-11 09:44:04 +0200
committerVolpeon <git@volpeon.ink>2022-06-11 09:44:04 +0200
commit575278aba99139635adc3b1f9385befe57102541 (patch)
treed98a160167610717da37f6340b3884ba4224fe5d /assets/css/components
parentUpdate (diff)
downloadvolpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.gz
volpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.bz2
volpeon.ink-575278aba99139635adc3b1f9385befe57102541.zip
Re-implemented design via iro-design
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_card.scss135
-rw-r--r--assets/css/components/_footer.scss37
-rw-r--r--assets/css/components/_header.scss77
-rw-r--r--assets/css/components/_hnav.scss31
-rw-r--r--assets/css/components/_lightbox.scss116
-rw-r--r--assets/css/components/_note.scss23
6 files changed, 140 insertions, 279 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 20614e7..f8f106d 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,41 +1,46 @@
1@include namespace('card') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3 --colors: ( 3@use '../functions' as fn2;
4 --bg: prop(--colors --bg-lo, $global: true), 4
5 --fg: prop(--colors --fg, $global: true), 5@include iro.props-namespace('card') {
6 --unread: prop(--colors --bg, $global: true), 6 @include iro.props-store((
7 --border: prop(--colors --obj-hi, $global: true),
8 --hover: (
9 --bg: prop(--colors --fg-lo, $global: true),
10 --fg: prop(--colors --bg-hi, $global: true),
11 ),
12 ),
13 --dims: ( 7 --dims: (
14 --pad-x: 1em, 8 --hover-offset: fn2.px-to-em(-5px),
15 --pad-y: px-to-em(12px),
16 --hover-offset: px-to-em(-5px),
17 --indicator: ( 9 --indicator: (
18 --width: 1em, 10 --width: 1em,
19 --height: 4px, 11 --height: 4px,
20 ), 12 ),
21 ) 13 )
22 )); 14 ), 'dims');
15
16 @include iro.props-store((
17 --colors: (
18 --bg: fn.global-color(--bg-hi2),
19 --fg: fn.global-color(--fg),
20 --unread: fn.global-color(--obj-hi),
21 --border: fn.global-color(--obj-hi),
22 --hover: (
23 --bg: fn.global-color(--fg-lo),
24 --fg: fn.global-color(--bg-hi2),
25 ),
26 )
27 ), 'colors');
23 28
24 @include store(( 29 @include iro.props-store((
25 --colors: ( 30 --colors: (
26 --bg: prop(--colors --bg-hi, $global: true), 31 --bg: fn.global-color(--obj-hi),
27 --unread: prop(--colors --bg-lo, $global: true), 32 --unread: fn.global-color(--bg),
28 --border: prop(--colors --bg-lo, $global: true), 33 --border: fn.global-color(--obj-hi),
29 ) 34 )
30 ), 'light'); 35 ), 'colors-dark');
31 36
32 @include component(namespace()) { 37 @include iro.bem-component(iro.props-namespace()) {
33 display: block; 38 display: block;
34 position: relative; 39 position: relative;
35 transform: translateY(0); 40 transform: translateY(0);
36 transition: transform .2s, background-color .2s, color .2s, border-color .2s; 41 transition: transform .2s, background-color .2s, color .2s, border-color .2s;
37 background-color: prop(--colors --bg); 42 background-color: fn.color(--bg);
38 color: prop(--colors --fg); 43 color: fn.color(--fg);
39 line-height: 1.4; 44 line-height: 1.4;
40 45
41 &::after { 46 &::after {
@@ -45,7 +50,7 @@
45 top: 100%; 50 top: 100%;
46 left: 0; 51 left: 0;
47 width: 100%; 52 width: 100%;
48 height: calc(-1 * #{prop(--dims --hover-offset)}); 53 height: calc(-1 * fn.dim(--hover-offset));
49 } 54 }
50 55
51 small, 56 small,
@@ -59,9 +64,9 @@
59 64
60 &:hover, 65 &:hover,
61 &:focus { 66 &:focus {
62 transform: translateY(#{prop(--dims --hover-offset)}); 67 transform: translateY(fn.dim(--hover-offset));
63 background-color: prop(--colors --hover --bg); 68 background-color: fn.color(--hover --bg);
64 color: prop(--colors --hover --fg); 69 color: fn.color(--hover --fg);
65 70
66 &::after { 71 &::after {
67 display: block; 72 display: block;
@@ -69,35 +74,31 @@
69 74
70 small, 75 small,
71 strong { 76 strong {
72 color: prop(--colors --hover --fg); 77 color: fn.color(--hover --fg);
73 } 78 }
74 79
75 @include element('row') { 80 @include iro.bem-elem('row') {
76 @include modifier('hidden') { 81 @include iro.bem-modifier('hidden') {
77 visibility: visible; 82 visibility: visible;
78 transition: opacity .2s; 83 transition: opacity .2s;
79 opacity: 1; 84 opacity: 1;
80 } 85 }
81 } 86 }
82 87
83 @include element('block') { 88 @include iro.bem-elem('indicator') {
84 @include modifier('indicator') { 89 color: fn.color(--hover --fg);
85 color: prop(--colors --hover --fg);
86 }
87 } 90 }
88 } 91 }
89 } 92 }
90 93
91 &:visited { 94 &:visited {
92 @include element('block') { 95 @include iro.bem-elem('indicator') {
93 @include modifier('indicator') { 96 color: fn.color(--bg);
94 color: prop(--colors --bg);
95 }
96 } 97 }
97 } 98 }
98 99
99 @include modifier('outline') { 100 @include iro.bem-modifier('outline') {
100 border: 1px solid prop(--colors --border); 101 border: 1px solid fn.color(--border);
101 background-color: transparent; 102 background-color: transparent;
102 103
103 &:link, 104 &:link,
@@ -109,17 +110,8 @@
109 } 110 }
110 } 111 }
111 112
112 @include element('row') { 113 @include iro.bem-elem('row') {
113 display: flex; 114 @include iro.bem-modifier('hidden') {
114 align-items: center;
115 padding: prop(--dims --pad-y) prop(--dims --pad-x);
116 gap: prop(--dims --pad-x);
117
118 @include modifier('flush') {
119 padding: 0;
120 }
121
122 @include modifier('hidden') {
123 visibility: hidden; 115 visibility: hidden;
124 position: absolute; 116 position: absolute;
125 z-index: 10; 117 z-index: 10;
@@ -128,7 +120,7 @@
128 left: 0; 120 left: 0;
129 transition: opacity .2s, visibility 0s .2s; 121 transition: opacity .2s, visibility 0s .2s;
130 opacity: 0; 122 opacity: 0;
131 background-color: prop(--colors --hover --bg); 123 background-color: fn.color(--hover --bg);
132 124
133 @media (hover: none) { 125 @media (hover: none) {
134 visibility: visible; 126 visibility: visible;
@@ -139,14 +131,14 @@
139 } 131 }
140 } 132 }
141 133
142 @include element('thumbnail') { 134 @include iro.bem-elem('thumbnail') {
143 position: relative; 135 position: relative;
144 width: 100%; 136 width: 100%;
145 height: 2em; 137 height: 2em;
146 padding-top: 46%; 138 padding-top: 46%;
147 } 139 }
148 140
149 @include element('thumbnail-img') { 141 @include iro.bem-elem('thumbnail-img') {
150 display: block; 142 display: block;
151 position: absolute; 143 position: absolute;
152 top: 0; 144 top: 0;
@@ -156,28 +148,17 @@
156 object-fit: cover; 148 object-fit: cover;
157 } 149 }
158 150
159 @include element('block') { 151 @include iro.bem-elem('indicator') {
160 flex: 0 0 auto; 152 transition: color .2s;
161 overflow: hidden; 153 color: fn.color(--unread);
162 text-overflow: ellipsis; 154
163 155 &::before {
164 @include modifier('main') { 156 content: '';
165 flex-shrink: 1; 157 display: block;
166 width: 100%; 158 width: fn.dim(--indicator --width);
167 } 159 height: fn.dim(--indicator --height);
168 160 border-radius: fn.dim(--indicator --height);
169 @include modifier('indicator') { 161 background-color: currentColor;
170 transition: color .2s;
171 color: prop(--colors --unread);
172
173 &::before {
174 content: '';
175 display: block;
176 width: prop(--dims --indicator --width);
177 height: prop(--dims --indicator --height);
178 border-radius: prop(--dims --indicator --height);
179 background-color: currentColor;
180 }
181 } 162 }
182 } 163 }
183 164
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 6b483ca..2cc63f5 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,30 +1,35 @@
1@include namespace('footer') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3@use 'iro-design/src/mixins' as mx;
4@use '../functions' as fn2;
5
6@include iro.props-namespace('footer') {
7 @include iro.props-store((
3 --colors: ( 8 --colors: (
4 --fg: prop(--colors --obj, $global: true), 9 --fg: fn.global-color(--obj-lo),
5 --ground: prop(--colors --obj, $global: true), 10 --ground: fn.global-color(--obj),
6 ) 11 )
7 )); 12 ), 'colors');
13
14 @include iro.bem-component(iro.props-namespace()) {
15 @include mx.set-font(--mono);
8 16
9 @include component(namespace()) { 17 position: sticky;
10 position: sticky; 18 top: 100vh;
11 top: 100vh; 19 overflow: hidden;
12 overflow: hidden; 20 color: fn.color(--fg);
13 color: prop(--colors --fg);
14 font-family: $font-fam--mono;
15 line-height: 1.4;
16 21
17 &::after { 22 &::after {
18 content: str-repeat('â–‘', 400); 23 content: fn2.str-repeat('â–‘', 400);
19 display: block; 24 display: block;
20 margin-top: 2px; 25 margin-top: 2px;
21 padding-top: 2px; 26 padding-top: 2px;
22 overflow: hidden; 27 overflow: hidden;
23 border-top: 1px solid prop(--colors --ground); 28 border-top: 1px solid fn.color(--ground);
24 color: prop(--colors --ground); 29 color: fn.color(--ground);
25 } 30 }
26 31
27 @include element('ascii') { 32 @include iro.bem-elem('ascii') {
28 display: inline-block; 33 display: inline-block;
29 position: relative; 34 position: relative;
30 left: 50%; 35 left: 50%;
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index ca85438..cf396ce 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,86 +1,93 @@
1@include namespace('header') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3@use 'include-media/dist/include-media' as media;
4
5@include iro.props-namespace('header') {
6 @include iro.props-store((
3 --colors: ( 7 --colors: (
4 --bg: prop(--colors --bg-lo, $global: true), 8 --bg: fn.global-color(--bg-hi),
5 --fg: prop(--colors --fg-lo, $global: true), 9 --fg: fn.global-color(--fg-lo),
6 --hover: ( 10 --hover: (
7 --bg: prop(--colors --fg-lo, $global: true), 11 --bg: fn.global-color(--fg-lo),
8 --fg: prop(--colors --bg-hi, $global: true), 12 --fg: fn.global-color(--bg-hi),
9 ), 13 ),
10 --active: ( 14 --active: (
11 --fg: prop(--colors --fg-lo, $global: true), 15 --fg: fn.global-color(--fg-lo),
12 ) 16 )
13 ), 17 )
18 ), 'colors');
19
20 @include iro.props-store((
14 --dims: ( 21 --dims: (
15 --height: 4rem, 22 --height: 4rem,
16 --icon: 1.5rem, 23 --icon: 1.5rem,
17 --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), 24 --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
18 --gap: 2px, 25 --gap: 2px,
19 ) 26 )
20 )); 27 ), 'dims');
21 28
22 @include store(( 29 @include iro.props-store((
23 --colors: ( 30 --colors: (
24 --bg: prop(--colors --bg-hi, $global: true), 31 --bg: fn.global-color(--obj-hi),
25 ) 32 )
26 ), 'light'); 33 ), 'colors-dark');
27 34
28 @include store(( 35 @include iro.props-store((
29 --dims: ( 36 --dims: (
30 --height: 3.4rem, 37 --height: 3.4rem,
31 ) 38 )
32 ), 'sm'); 39 ), 'sm');
33 40
34 @include component(namespace()) { 41 @include iro.bem-component(iro.props-namespace()) {
35 display: flex; 42 display: flex;
36 width: 0; 43 width: 0;
37 height: prop(--dims --height); 44 height: fn.dim(--height);
38 padding: prop(--dims --gap); 45 padding: fn.dim(--gap);
39 gap: prop(--dims --gap); 46 gap: fn.dim(--gap);
40 47
41 @include element('item') { 48 @include iro.bem-elem('item') {
42 padding: 0 prop(--dims --pad-x); 49 padding: 0 fn.dim(--pad-x);
43 transition: background-color .2s, color .2s, border-left-color .2s; 50 transition: background-color .2s, color .2s, border-left-color .2s;
44 background-color: prop(--colors --bg); 51 background-color: fn.color(--bg);
45 color: prop(--colors --fg); 52 color: fn.color(--fg);
46 line-height: prop(--dims --height); 53 line-height: fn.dim(--height);
47 text-decoration: none; 54 text-decoration: none;
48 55
49 &:hover, 56 &:hover,
50 &:focus { 57 &:focus {
51 border-left-color: prop(--colors --hover --bg); 58 border-left-color: fn.color(--hover --bg);
52 background-color: prop(--colors --hover --bg); 59 background-color: fn.color(--hover --bg);
53 color: prop(--colors --hover --fg); 60 color: fn.color(--hover --fg);
54 } 61 }
55 62
56 @include modifier('icon') { 63 @include iro.bem-modifier('icon') {
57 display: flex; 64 display: flex;
58 align-items: center; 65 align-items: center;
59 justify-content: center; 66 justify-content: center;
60 } 67 }
61 68
62 @include modifier('active') { 69 @include iro.bem-modifier('active') {
63 color: prop(--colors --active --fg); 70 color: fn.color(--active --fg);
64 font-weight: bold; 71 font-weight: bold;
65 } 72 }
66 } 73 }
67 74
68 @include element('icon') { 75 @include iro.bem-elem('icon') {
69 width: prop(--dims --icon); 76 width: fn.dim(--icon);
70 height: prop(--dims --icon); 77 height: fn.dim(--icon);
71 } 78 }
72 79
73 @include modifier('fixed') { 80 @include iro.bem-modifier('fixed') {
74 position: fixed; 81 position: fixed;
75 } 82 }
76 83
77 @include media('>=lg') { 84 @include media.media('>=lg') {
78 position: sticky; 85 position: sticky;
79 z-index: 100; 86 z-index: 100;
80 top: 0; 87 top: 0;
81 margin-bottom: calc(-.75 * #{prop(--dims --height)}); 88 margin-bottom: calc(-.75 * #{fn.dim(--height)});
82 89
83 @include modifier('fixed') { 90 @include iro.bem-modifier('fixed') {
84 position: fixed; 91 position: fixed;
85 } 92 }
86 } 93 }
diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss
index 220afde..4097373 100644
--- a/assets/css/components/_hnav.scss
+++ b/assets/css/components/_hnav.scss
@@ -1,22 +1,29 @@
1@include namespace('hnav') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('hnav') {
5 @include iro.props-store((
3 --colors: ( 6 --colors: (
4 --border: prop(--colors --obj-hi, $global: true) 7 --border: fn.global-color(--obj-hi)
5 ), 8 )
9 ), 'colors');
10
11 @include iro.props-store((
6 --dims: ( 12 --dims: (
7 --gap: 2em, 13 --margin-top: fn.global-dim(--size --600),
8 --pad-y: .5em 14 --gap: 2em,
15 --pad-y: .5em
9 ) 16 )
10 )); 17 ), 'dims');
11 18
12 @include component(namespace()) { 19 @include iro.bem-component(iro.props-namespace()) {
13 display: flex; 20 display: flex;
14 gap: prop(--dims --gap); 21 gap: fn.dim(--gap);
15 align-items: baseline; 22 align-items: baseline;
16 margin-top: $line-height * 2rem; 23 margin-top: fn.dim(--margin-top);
17 padding: prop(--dims --pad-y) 0 0; 24 padding: fn.dim(--pad-y) 0 0;
18 border-width: 1px 0 0; 25 border-width: 1px 0 0;
19 border-style: solid; 26 border-style: solid;
20 border-color: prop(--colors --border); 27 border-color: fn.color(--border);
21 } 28 }
22} 29}
diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
deleted file mode 100644
index f497a5e..0000000
--- a/assets/css/components/_lightbox.scss
+++ /dev/null
@@ -1,116 +0,0 @@
1@include namespace('lightbox') {
2 @include store((
3 --colors: (
4 --bg: prop(--colors --bg-hi, $global: true),
5 --button: (
6 --idle: prop(--colors --fg-hi, $global: true),
7 --hover: prop(--colors --fg-lo, $global: true),
8 --bg: prop(--colors --bg-hi, $global: true),
9 )
10 ),
11 --dims: (
12 --pad: 1rem,
13 ),
14 ));
15
16 @include component(namespace()) {
17 display: flex;
18 visibility: hidden;
19 position: fixed;
20 z-index: 5000;
21 top: 0;
22 left: 0;
23 box-sizing: border-box;
24 flex-direction: column;
25 align-items: center;
26 justify-content: center;
27 width: 100%;
28 height: 100%;
29 padding-bottom: 3vh;
30 transition: opacity .2s, visibility .2s;
31 opacity: 0;
32
33 @include element('bg') {
34 position: absolute;
35 z-index: -10;
36 top: 0;
37 left: 0;
38 width: 100%;
39 height: 100%;
40 opacity: .85;
41 background-color: prop(--colors --bg);
42 }
43
44 @include is('shown') {
45 visibility: visible;
46 transition: opacity .2s, visibility 0 .2s;
47 opacity: 1;
48 }
49
50 @include element('infobar') {
51 display: flex;
52 box-sizing: border-box;
53 flex: 0 0 auto;
54 align-items: center;
55 width: 100%;
56 padding: 0 prop(--dims --pad);
57 }
58
59 @include element('img') {
60 max-width: 100%;
61 min-height: 0;
62 max-height: 100%;
63 margin-top: auto;
64 margin-bottom: auto;
65 }
66
67 @include element('close', 'prev', 'next') {
68 margin: 0;
69 transition: color .2s;
70 border: 0;
71 background-color: transparent;
72 color: currentColor;
73
74 &:hover {
75 color: prop(--colors --button --hover);
76 }
77 }
78
79 @include element('close') {
80 margin: 0 calc(-1 * #{prop(--dims --pad)}) 0 auto;
81 padding: prop(--dims --pad);
82 font-size: 1.5em;
83 }
84
85 @include element('prev', 'next') {
86 position: absolute;
87 top: 50%;
88 padding: 2rem .5rem;
89 transform: translate(0, -50%);
90 font-size: 3em;
91 --icon-stroke-width: .75px;
92
93 &::before {
94 content: '';
95 display: block;
96 position: absolute;
97 z-index: -1;
98 top: 50%;
99 left: 50%;
100 width: 1.2em;
101 height: 1.2em;
102 transform: translate(-50%, -50%);
103 opacity: .25;
104 background-color: prop(--colors --button --bg);
105 }
106 }
107
108 @include element('prev') {
109 left: 0;
110 }
111
112 @include element('next') {
113 right: 0;
114 }
115 }
116}
diff --git a/assets/css/components/_note.scss b/assets/css/components/_note.scss
deleted file mode 100644
index 1879ea9..0000000
--- a/assets/css/components/_note.scss
+++ /dev/null
@@ -1,23 +0,0 @@
1@include namespace('note') {
2 @include store((
3 --colors: (
4 --fg: prop(--colors --accent --strong, $global: true),
5 --bg: prop(--colors --accent --faint, $global: true),
6 ),
7 --dims: (
8 --pad-x: 1em,
9 --pad-y: .7em
10 )
11 ));
12
13 @include component(namespace()) {
14 margin-top: $line-height * 1rem;
15 padding: prop(--dims --pad-y) prop(--dims --pad-x);
16 background-color: prop(--colors --bg);
17 color: prop(--colors --fg);
18
19 :first-child {
20 margin-top: 0;
21 }
22 }
23}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 18:32:39 +0000