summaryrefslogtreecommitdiffstats
path: root/assets/css
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
parentWIP: Redesign (diff)
downloadvolpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.tar.gz
volpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.tar.bz2
volpeon.ink-b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e.zip
WIP: Redesign
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss6
-rw-r--r--assets/css/_vars.scss42
-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
-rw-r--r--assets/css/layouts/_container.scss19
-rw-r--r--assets/css/layouts/_landing.scss60
-rw-r--r--assets/css/layouts/_site.scss46
-rw-r--r--assets/css/scopes/_body.scss7
-rw-r--r--assets/css/style.scss6
10 files changed, 173 insertions, 133 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 740b293..eee48f4 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -34,6 +34,12 @@ code {
34 font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; 34 font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
35} 35}
36 36
37html,
38body,
39main {
40 height: 100%;
41}
42
37html { 43html {
38 background-color: prop(--colors --bg); 44 background-color: prop(--colors --bg);
39 color: prop(--colors --fg); 45 color: prop(--colors --fg);
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 3461b81..0c6102d 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -1,9 +1,8 @@
1$iro-root-size: 16px;
2
3$breakpoints: ( 1$breakpoints: (
4 xs: 320px, 2 xs: 320px,
5 sm: 700px, 3 sm: 600px,
6 md: 1100px, 4 md: 900px,
5 lg: 1400px,
7); 6);
8 7
9$unit-intervals: ( 8$unit-intervals: (
@@ -18,28 +17,35 @@ $font-fam--large: 'Garet Variable', $font-fam--text;
18$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; 17$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
19$font-size: 16px; 18$font-size: 16px;
20$line-height: 1.7; 19$line-height: 1.7;
21$content--width: 56rem; 20$content--width: 42rem;
22$subcontent--indent: 2em; 21$subcontent--indent: 2em;
23 22
24$gray0: hsl(220, 0%, 7%); 23$gray0: hsl(220, 0%, 6%);
25$gray1: hsl(220, 0%, 10%); 24$gray1: hsl(220, 0%, 9%);
26$gray2: hsl(220, 0%, 29%); 25$gray2: hsl(220, 0%, 16%);
27$gray3: hsl(220, 0%, 54%); 26$gray3: hsl(220, 0%, 29%);
28$gray4: hsl(220, 0%, 73%); 27$gray4: hsl(220, 0%, 54%);
29$gray5: hsl(220, 0%, 100%); 28$gray5: hsl(220, 0%, 73%);
29$gray6: hsl(220, 0%, 100%);
30 30
31@include store(( 31@include store((
32 --colors: ( 32 --colors: (
33 --bg-hi: $gray0, // Lighter background 33 --bg-hi: $gray0, // Darker background
34 --bg: $gray1, // Background 34 --bg: $gray1, // Background
35 --bg-lo: $gray2, // Lighter background
35 36
36 --obj: $gray2, 37 --obj: $gray3,
37 38
38 --fg-hi: $gray3, // Faint text 39 --fg-hi: $gray4, // Faint text
39 --fg: $gray4, // Text 40 --fg: $gray5, // Text
40 --fg-lo: $gray5, // Strong text 41 --fg-lo: $gray6, // Strong text
41 42
42 --accent: hsl(354, 84%, 55%), 43 --accent: (
44 --h: 354,
45 --s: 84%,
46 --l: 55%,
47 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
48 )
43 ) 49 )
44)); 50));
45 51
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}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 2e102ee..0726950 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,10 +1,17 @@
1@include namespace('container') { 1@include namespace('container') {
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-x: 3rem,
5 --pad-y: $line-height * 3rem
6 )
7 ));
8
9 @include store((
10 --dims: (
4 --pad-x: 2rem, 11 --pad-x: 2rem,
5 --pad-y: $line-height * 2rem 12 --pad-y: $line-height * 2rem
6 ) 13 )
7 )); 14 ), 'md');
8 15
9 @include store(( 16 @include store((
10 --dims: ( 17 --dims: (
@@ -14,16 +21,18 @@
14 ), 'sm'); 21 ), 'sm');
15 22
16 @include layout(namespace()) { 23 @include layout(namespace()) {
17 padding-right: prop(--dims --pad-x);
18 padding-left: prop(--dims --pad-x);
19
20 @include modifier('content') { 24 @include modifier('content') {
21 max-width: $content--width; 25 max-width: $content--width;
22 margin-right: auto; 26 margin-right: auto;
23 margin-left: auto; 27 margin-left: auto;
24 } 28 }
25 29
26 @include modifier('pad-v') { 30 @include modifier('pad-x') {
31 padding-right: prop(--dims --pad-x);
32 padding-left: prop(--dims --pad-x);
33 }
34
35 @include modifier('pad-y') {
27 padding-top: prop(--dims --pad-y); 36 padding-top: prop(--dims --pad-y);
28 padding-bottom: prop(--dims --pad-y); 37 padding-bottom: prop(--dims --pad-y);
29 } 38 }
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
new file mode 100644
index 0000000..b824005
--- /dev/null
+++ b/assets/css/layouts/_landing.scss
@@ -0,0 +1,60 @@
1@include namespace('landing') {
2 @include store((
3 --dims: (
4 --banner-width: 30rem,
5 ),
6 --colors: (
7 --banner-bg: prop(--colors --bg, $global: true)
8 )
9 ));
10
11 @include layout(namespace()) {
12 display: flex;
13 flex-direction: row;
14 align-items: center;
15 min-height: 100%;
16
17 @include element('banner') {
18 flex-shrink: 1.2;
19 width: 100%;
20 max-width: prop(--dims --banner-width);
21 background-color: prop(--colors --banner-bg);
22 }
23
24 @include element('content') {
25 width: 100%;
26 min-width: 0;
27 }
28
29 @include iro-responsive-env(('md', 'lg')) {
30 @include element('banner') {
31 padding:
32 iro-responsive-set((2rem, 6rem))
33 iro-responsive-set((0, 6rem));
34 }
35
36 @include element('content') {
37 padding:
38 iro-responsive-set((2rem, 6rem))
39 iro-responsive-set((0, 6rem))
40 iro-responsive-set((2rem, 6rem))
41 0;
42 }
43 }
44
45 @include media('<=md') {
46 display: block;
47 height: auto;
48
49 @include element('banner', 'content') {
50 width: auto;
51 padding-right: 0;
52 padding-left: 0;
53 }
54
55 @include element('banner') {
56 max-width: none;
57 }
58 }
59 }
60}
diff --git a/assets/css/layouts/_site.scss b/assets/css/layouts/_site.scss
deleted file mode 100644
index 2c06606..0000000
--- a/assets/css/layouts/_site.scss
+++ /dev/null
@@ -1,46 +0,0 @@
1@include namespace('site') {
2 @include store((
3 --dims: (
4 --outer-pad-x: 6rem,
5 --inner-pad-x: 2rem,
6 --pad-y: 6rem,
7 )
8 ));
9
10 @include layout(namespace()) {
11 display: flex;
12 flex-direction: row;
13 justify-content: space-around;
14
15 @include element('col') {
16 box-sizing: border-box;
17 flex: 0 0 auto;
18 width: 100%;
19 min-width: 0;
20 max-width: 35rem;
21 height: 100%;
22 padding: prop(--dims --pad-y) prop(--dims --inner-pad-x) prop(--dims --pad-y) prop(--dims --outer-pad-x);
23
24 @include next-twin-element {
25 flex: 1 1 auto;
26 max-width: 45rem;
27 height: auto;
28 padding-right: prop(--dims --outer-pad-x);
29 padding-left: prop(--dims --inner-pad-x);
30 }
31 }
32
33 @include media('<=sm') {
34 display: block;
35
36 @include element('col') {
37 width: auto;
38 height: auto;
39
40 @include next-twin-element {
41 width: auto;
42 }
43 }
44 }
45 }
46}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
new file mode 100644
index 0000000..7adda03
--- /dev/null
+++ b/assets/css/scopes/_body.scss
@@ -0,0 +1,7 @@
1@include namespace('body') {
2 @include scope(namespace()) {
3 > :first-child {
4 margin-top: 0;
5 }
6 }
7}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index c8fd0c1..f4c6db7 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -9,12 +9,14 @@
9@import 'basics'; 9@import 'basics';
10 10
11@import 'components/nav'; 11@import 'components/nav';
12@import 'components/hero'; 12@import 'components/landing-banner';
13@import 'components/footer'; 13@import 'components/footer';
14 14
15@import 'layouts/site'; 15@import 'layouts/landing';
16@import 'layouts/container'; 16@import 'layouts/container';
17 17
18@import 'scopes/body';
19
18@import 'utils'; 20@import 'utils';
19 21
20:root { 22:root {
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 19:35:21 +0000