summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-03-21 12:52:39 +0100
committerVolpeon <git@volpeon.ink>2021-03-21 12:52:39 +0100
commit8e1e42fcb54c33816d00b26a949753e6c3c9a904 (patch)
tree934f5193c9b6b956a9f982c8b9956a4e8c2c7270 /assets/css/components
parentWIP: Redesign (diff)
downloadvolpeon.ink-8e1e42fcb54c33816d00b26a949753e6c3c9a904.tar.gz
volpeon.ink-8e1e42fcb54c33816d00b26a949753e6c3c9a904.tar.bz2
volpeon.ink-8e1e42fcb54c33816d00b26a949753e6c3c9a904.zip
WIP: Redesign
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_footer.scss6
-rw-r--r--assets/css/components/_hero.scss45
-rw-r--r--assets/css/components/_nav.scss71
-rw-r--r--assets/css/components/_page.scss3
4 files changed, 58 insertions, 67 deletions
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 8fcbc98..db30fcd 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -9,9 +9,9 @@
9 )); 9 ));
10 10
11 @include component(namespace()) { 11 @include component(namespace()) {
12 padding-top: prop(--dims --pad-y); 12 padding-top: prop(--dims --pad-y);
13 padding-bottom: prop(--dims --pad-y); 13 padding-bottom: prop(--dims --pad-y);
14 color: prop(--colors --fg); 14 color: prop(--colors --fg);
15 text-align: right; 15 text-align: right;
16 } 16 }
17} 17}
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
index 6c497a1..3d8890e 100644
--- a/assets/css/components/_hero.scss
+++ b/assets/css/components/_hero.scss
@@ -1,6 +1,7 @@
1@include namespace('hero') { 1@include namespace('hero') {
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --emph-fg: prop(--colors --accent, $global: true),
4 --back-fg: prop(--colors --bg-hi, $global: true) 5 --back-fg: prop(--colors --bg-hi, $global: true)
5 ) 6 )
6 )); 7 ));
@@ -8,42 +9,44 @@
8 @include component(namespace()) { 9 @include component(namespace()) {
9 display: flex; 10 display: flex;
10 position: relative; 11 position: relative;
11 flex-direction: column;
12 align-items: center; 12 align-items: center;
13 justify-content: center; 13 justify-content: center;
14 text-align: center; 14 text-align: center;
15 15
16 @include element('title', 'backtitle') { 16 @include element('title') {
17 margin: 0 auto; 17 margin-top: 0;
18 font-family: $font-fam--large; 18 font-family: $font-fam--large;
19 text-transform: none; 19 text-transform: none;
20 }
21 20
22 @include element('emph') { 21 @include modifier('front') {
23 color: prop(--colors --accent, $global: true); 22 max-width: 7em;
24 font-weight: 500; 23 font-size: 2.5rem;
25 } 24 font-weight: 200;
25 }
26 26
27 @include element('title') { 27 @include modifier('back') {
28 max-width: 11em; 28 position: absolute;
29 font-weight: 200; 29 z-index: -10;
30 transform: translateY(-.08em);
31 color: prop(--colors --back-fg);
32 }
30 } 33 }
31 34
32 @include element('backtitle') { 35 @include element('emph') {
33 position: absolute; 36 color: prop(--colors --emph-fg);
34 z-index: -10; 37 font-weight: 500;
35 transform: translateY(-.08em);
36 color: prop(--colors --back-fg);
37 } 38 }
38 39
39 @include iro-responsive-env(('xs', 'sm', 'md')) { 40 @include iro-responsive-env(('xs', 'sm', 'md')) {
40 @include element('title') { 41 @include element('title') {
41 padding: iro-responsive-set((7rem, 7rem, 10rem)) 0; 42 @include modifier('front') {
42 font-size: iro-responsive-set((1.8rem, 2.8rem, 3.3rem)); 43 padding: iro-responsive-set((7rem, 7rem, 10rem)) 0;
43 } 44 font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem));
45 }
44 46
45 @include element('backtitle') { 47 @include modifier('back') {
46 font-size: iro-responsive-set((12rem, 14rem, 16rem)); 48 font-size: iro-responsive-set((12rem, 14rem, 16rem));
49 }
47 } 50 }
48 } 51 }
49 } 52 }
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 2472706..8fc4564 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,13 +2,10 @@
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --font-size: 15px, 4 --font-size: 15px,
5 --pad-y: 1em, 5 --pad-y: 1em,
6 --pad-y-sm: .5em,
7 --item: ( 6 --item: (
8 --pad-x: 1em, 7 --pad-x: 1em,
9 --pad-x-sm: .75em,
10 --pad-y: 1em, 8 --pad-y: 1em,
11 --pad-y-sm: .75em,
12 ), 9 ),
13 ), 10 ),
14 --colors: ( 11 --colors: (
@@ -34,69 +31,63 @@
34 ) 31 )
35 )); 32 ));
36 33
34 @include store((
35 --dims: (
36 --pad-y: .5em,
37 --item: (
38 --pad-x: .75em,
39 --pad-y: .75em,
40 ),
41 )
42 ), 'sm');
43
37 @include component(namespace()) { 44 @include component(namespace()) {
38 display: flex; 45 display: flex;
39 align-items: center; 46 align-items: center;
40 padding: prop(--dims --pad-y) 0; 47 padding: prop(--dims --pad-y) 0;
41 font-size: prop(--dims --font-size); 48 font-size: prop(--dims --font-size);
42 49
43 @include element('logo') { 50 @include element('logo') {
44 display: inline-block; 51 display: inline-block;
45 margin: 0; 52 margin: 0;
46 padding: prop(--dims --item --pad-y) 0; 53 padding: prop(--dims --item --pad-y) 0;
47 color: prop(--colors --logo --idle --fg); 54 color: prop(--colors --logo --idle --fg);
48 font-family: $font-fam--mono; 55 font-family: $font-fam--mono;
49 text-decoration: none; 56 text-decoration: none;
50 57
51 &:link, 58 &:link,
52 &:visited { 59 &:visited {
53 &:hover { 60 &:hover {
54 background-color: transparent; 61 background-color: transparent;
55 color: prop(--colors --logo --hover --fg); 62 color: prop(--colors --logo --hover --fg);
56 } 63 }
57 } 64 }
58 } 65 }
59 66
60 @include element('logo-symbol') { 67 @include element('logo-symbol') {
61 display: block; 68 display: block;
62 width: $line-height * .9em; 69 width: $line-height * .9em;
63 height: $line-height * 1em; 70 height: $line-height * 1em;
64 } 71 }
65 72
66 @include element('item') { 73 @include element('item') {
67 display: inline-block; 74 display: inline-block;
68 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); 75 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
69 padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); 76 padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x);
70 color: prop(--colors --item --idle --fg); 77 color: prop(--colors --item --idle --fg);
71 text-decoration: none; 78 text-decoration: none;
72 text-transform: uppercase; 79 text-transform: uppercase;
73 80
74 &:hover { 81 &:hover {
75 background-color: transparent; 82 background-color: transparent;
76 color: prop(--colors --item --hover --fg); 83 color: prop(--colors --item --hover --fg);
77 text-decoration: underline; 84 text-decoration: underline;
78 } 85 }
79 86
80 @include modifier('active') { 87 @include modifier('active') {
81 border-color: prop(--colors --item --active --fg); 88 border-color: prop(--colors --item --active --fg);
82 color: prop(--colors --item --active --fg); 89 color: prop(--colors --item --active --fg);
83 font-weight: bold; 90 font-weight: bold;
84 }
85 }
86
87 @include media('<=sm') {
88 padding: prop(--dims --pad-y-sm) 0;
89
90 @include element('logo', 'item') {
91 padding-top: prop(--dims --item --pad-y-sm);
92 padding-bottom: prop(--dims --item --pad-y-sm);
93 }
94
95 @include element('item') {
96 margin-right: calc(-1 * #{prop(--dims --item --pad-x-sm)});
97 margin-left: prop(--dims --item --pad-x-sm);
98 padding-right: prop(--dims --item --pad-x-sm);
99 padding-left: prop(--dims --item --pad-x-sm);
100 } 91 }
101 } 92 }
102 } 93 }
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
deleted file mode 100644
index ef39061..0000000
--- a/assets/css/components/_page.scss
+++ /dev/null
@@ -1,3 +0,0 @@
1@include component('page') {
2 //
3}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-26 17:30:10 +0000