summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-03-22 20:52:20 +0100
committerVolpeon <git@volpeon.ink>2021-03-22 20:52:20 +0100
commitb292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e (patch)
tree95e6a5701c6686725f3fd4145881e3687f5228ee /assets/css/components
parentWIP: Redesign (diff)
downloadvolpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.tar.gz
volpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.tar.bz2
volpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.zip
WIP: Redesign
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_hero.scss53
-rw-r--r--assets/css/components/_landing-banner.scss40
-rw-r--r--assets/css/components/_nav.scss27
3 files changed, 58 insertions, 62 deletions
diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
deleted file mode 100644
index 3d8890e..0000000
--- a/assets/css/components/_hero.scss
+++ /dev/null
@@ -1,53 +0,0 @@
1@include namespace('hero') {
2 @include store((
3 --colors: (
4 --emph-fg: prop(--colors --accent, $global: true),
5 --back-fg: prop(--colors --bg-hi, $global: true)
6 )
7 ));
8
9 @include component(namespace()) {
10 display: flex;
11 position: relative;
12 align-items: center;
13 justify-content: center;
14 text-align: center;
15
16 @include element('title') {
17 margin-top: 0;
18 font-family: $font-fam--large;
19 text-transform: none;
20
21 @include modifier('front') {
22 max-width: 7em;
23 font-size: 2.5rem;
24 font-weight: 200;
25 }
26
27 @include modifier('back') {
28 position: absolute;
29 z-index: -10;
30 transform: translateY(-.08em);
31 color: prop(--colors --back-fg);
32 }
33 }
34
35 @include element('emph') {
36 color: prop(--colors --emph-fg);
37 font-weight: 500;
38 }
39
40 @include iro-responsive-env(('xs', 'sm', 'md')) {
41 @include element('title') {
42 @include modifier('front') {
43 padding: iro-responsive-set((7rem, 7rem, 10rem)) 0;
44 font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem));
45 }
46
47 @include modifier('back') {
48 font-size: iro-responsive-set((12rem, 14rem, 16rem));
49 }
50 }
51 }
52 }
53}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
new file mode 100644
index 0000000..ee5deab
--- /dev/null
+++ b/assets/css/components/_landing-banner.scss
@@ -0,0 +1,40 @@
1@include namespace('landing-banner') {
2 @include store((
3 --colors: (
4 --emph-fg: prop(--colors --accent --color, $global: true),
5 --emph-bg: prop(--colors --bg-hi, $global: true)
6 )
7 ));
8
9 @include component(namespace()) {
10 @include element('title') {
11 max-width: 7em;
12 margin-top: 0;
13 transform: translateX(-.04em);
14 font-family: $font-fam--large;
15 font-weight: 350;
16 text-transform: none;
17 }
18
19 @include element('title-inner') {
20 background-image: linear-gradient(
21 to top,
22 transparent .15em,
23 #{prop(--colors --emph-bg)} .15em,
24 #{prop(--colors --emph-bg)} .6em,
25 transparent .6em
26 );
27 }
28
29 @include element('emph') {
30 color: prop(--colors --emph-fg);
31 font-weight: 550;
32 }
33
34 @include iro-responsive-env(('md', 'lg')) {
35 @include element('title') {
36 font-size: iro-responsive-set((2.6rem, 3rem));
37 }
38 }
39 }
40}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 8fc4564..03118a9 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,16 +2,17 @@
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: .5rem,
6 --item: ( 6 --item: (
7 --pad-x: 1em, 7 --pad-x: 1rem,
8 --pad-y: 1em, 8 --pad-y: 1rem,
9 ), 9 ),
10 ), 10 ),
11 --colors: ( 11 --colors: (
12 --bg: prop(--colors --bg-hi, $global: true),
12 --logo: ( 13 --logo: (
13 --idle: ( 14 --idle: (
14 --fg: prop(--colors --fg-hi, $global: true), 15 --fg: prop(--colors --accent --color, $global: true),
15 ), 16 ),
16 --hover: ( 17 --hover: (
17 --fg: prop(--colors --fg-lo, $global: true), 18 --fg: prop(--colors --fg-lo, $global: true),
@@ -33,7 +34,6 @@
33 34
34 @include store(( 35 @include store((
35 --dims: ( 36 --dims: (
36 --pad-y: .5em,
37 --item: ( 37 --item: (
38 --pad-x: .75em, 38 --pad-x: .75em,
39 --pad-y: .75em, 39 --pad-y: .75em,
@@ -42,10 +42,15 @@
42 ), 'sm'); 42 ), 'sm');
43 43
44 @include component(namespace()) { 44 @include component(namespace()) {
45 display: flex; 45 display: flex;
46 align-items: center; 46 position: fixed;
47 padding: prop(--dims --pad-y) 0; 47 z-index: 10000;
48 font-size: prop(--dims --font-size); 48 top: 0;
49 left: 0;
50 align-items: center;
51 padding: prop(--dims --pad-y) 0;
52 background-color: prop(--colors --bg);
53 font-size: prop(--dims --font-size);
49 54
50 @include element('logo') { 55 @include element('logo') {
51 display: inline-block; 56 display: inline-block;
@@ -90,5 +95,9 @@
90 font-weight: bold; 95 font-weight: bold;
91 } 96 }
92 } 97 }
98
99 @include media('<=md') {
100 position: static;
101 }
93 } 102 }
94} 103}