summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-03-26 22:48:01 +0100
committerVolpeon <git@volpeon.ink>2021-03-26 22:48:01 +0100
commitef58809a37a7ad95c9bdef8e9f465adb3904ffdf (patch)
treea13c113552197dd3dbbd3c511a3cdef95d9d45b5 /assets/css
parentWIP: Redesign (diff)
downloadvolpeon.ink-ef58809a37a7ad95c9bdef8e9f465adb3904ffdf.tar.gz
volpeon.ink-ef58809a37a7ad95c9bdef8e9f465adb3904ffdf.tar.bz2
volpeon.ink-ef58809a37a7ad95c9bdef8e9f465adb3904ffdf.zip
WIP: Redesign
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss30
-rw-r--r--assets/css/_fonts.scss27
-rw-r--r--assets/css/_vars.scss21
-rw-r--r--assets/css/components/_card.scss6
-rw-r--r--assets/css/components/_landing-banner.scss2
-rw-r--r--assets/css/components/_nav.scss29
-rw-r--r--assets/css/components/_section-heading.scss8
-rw-r--r--assets/css/layouts/_container.scss6
-rw-r--r--assets/css/layouts/_landing.scss20
-rw-r--r--assets/css/objects/_button.scss23
-rw-r--r--assets/css/style.scss10
11 files changed, 117 insertions, 65 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 64b11cf..d05bc36 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,24 +1,3 @@
1@font-face {
2 font-family: 'IBM Plex Sans';
3 font-style: normal;
4 font-weight: normal;
5 src: url('/IBMPlexSans-Regular.woff2') format('woff2');
6}
7
8@font-face {
9 font-family: 'IBM Plex Sans';
10 font-style: normal;
11 font-weight: bold;
12 src: url('/IBMPlexSans-Bold.woff2') format('woff2');
13}
14
15@font-face {
16 font-family: 'Garet Variable';
17 font-style: normal;
18 font-weight: 50 950;
19 src: url('/GaretVariable.woff2') format('woff2-variations');
20}
21
22::selection { 1::selection {
23 background-color: var(--select--bg); 2 background-color: var(--select--bg);
24 color: var(--select--fg); 3 color: var(--select--fg);
@@ -37,20 +16,21 @@ code {
37html, 16html,
38body, 17body,
39main { 18main {
40 height: 100%; 19 box-sizing: border-box;
20 height: 100%;
41} 21}
42 22
43html { 23html {
44 background-color: prop(--colors --bg); 24 background-color: prop(--colors --bg);
45 color: prop(--colors --fg); 25 color: prop(--colors --fg);
46 font-family: $font-fam--text; 26 font-family: $font-fam--text;
47 font-size: px-to-em($font-size, 16px); 27 font-size: 1em / 16px * $font-size;
48 line-height: $line-height; 28 line-height: $line-height;
49} 29}
50 30
51body { 31body {
52 margin: 0; 32 margin: 0;
53 padding: 0; 33 padding: prop(--dims --nav --height, $global: true) 0 0;
54} 34}
55 35
56pre, 36pre,
@@ -180,7 +160,7 @@ h1 {
180} 160}
181 161
182p { 162p {
183 margin: ($line-height * 1em) 0 0; 163 margin: ($line-height * 1rem) 0 0;
184} 164}
185 165
186:link, 166:link,
diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss
new file mode 100644
index 0000000..9e57600
--- /dev/null
+++ b/assets/css/_fonts.scss
@@ -0,0 +1,27 @@
1@font-face {
2 font-family: 'IBM Plex Sans';
3 font-style: normal;
4 font-weight: normal;
5 src: url('/IBMPlexSans-Regular.woff2') format('woff2');
6}
7
8@font-face {
9 font-family: 'IBM Plex Sans';
10 font-style: normal;
11 font-weight: 500;
12 src: url('/IBMPlexSans-Medium.woff2') format('woff2');
13}
14
15@font-face {
16 font-family: 'IBM Plex Sans';
17 font-style: normal;
18 font-weight: bold;
19 src: url('/IBMPlexSans-Bold.woff2') format('woff2');
20}
21
22@font-face {
23 font-family: 'Garet';
24 font-style: normal;
25 font-weight: 50 950;
26 src: url('/GaretVariable.woff2') format('woff2-variations');
27}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 1ef0c8a..18cebc6 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -1,8 +1,8 @@
1$breakpoints: ( 1$breakpoints: (
2 xs: 320px,
3 sm: 600px,
4 md: 900px,
5 lg: 1500px, 2 lg: 1500px,
3 md: 900px,
4 sm: 600px,
5 xs: 320px,
6); 6);
7 7
8$unit-intervals: ( 8$unit-intervals: (
@@ -13,7 +13,7 @@ $unit-intervals: (
13); 13);
14 14
15$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; 15$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
16$font-fam--large: 'Garet Variable', $font-fam--text; 16$font-fam--large: 'Garet', $font-fam--text;
17$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;
18$font-size: 16px; 18$font-size: 16px;
19$line-height: 1.7; 19$line-height: 1.7;
@@ -29,6 +29,11 @@ $gray5: hsl(220, 0%, 73%);
29$gray6: hsl(220, 0%, 100%); 29$gray6: hsl(220, 0%, 100%);
30 30
31@include store(( 31@include store((
32 --dims: (
33 --nav: (
34 --height: 4.5rem
35 )
36 ),
32 --colors: ( 37 --colors: (
33 --bg-hi: $gray0, // Darker background 38 --bg-hi: $gray0, // Darker background
34 --bg: $gray1, // Background 39 --bg: $gray1, // Background
@@ -57,6 +62,14 @@ $gray6: hsl(220, 0%, 100%);
57 } 62 }
58} 63}
59 64
65@include store((
66 --dims: (
67 --nav: (
68 --height: 3.5rem
69 )
70 ),
71), 'sm');
72
60:root { 73:root {
61 --heading--fg: var(--colors--fg-lo); 74 --heading--fg: var(--colors--fg-lo);
62 75
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 4b3a094..21eeb9f 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -18,6 +18,12 @@
18 background-color: prop(--colors --bg); 18 background-color: prop(--colors --bg);
19 line-height: 1.4; 19 line-height: 1.4;
20 20
21 &:link,
22 &:visited {
23 color: currentColor;
24 text-decoration: none;
25 }
26
21 &:hover { 27 &:hover {
22 @include element('content') { 28 @include element('content') {
23 @include modifier('flip') { 29 @include modifier('flip') {
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index ee5deab..412ca8a 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -7,6 +7,8 @@
7 )); 7 ));
8 8
9 @include component(namespace()) { 9 @include component(namespace()) {
10 font-size: 1 / 16 * 17em;
11
10 @include element('title') { 12 @include element('title') {
11 max-width: 7em; 13 max-width: 7em;
12 margin-top: 0; 14 margin-top: 0;
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 03118a9..900b4f2 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,10 +2,10 @@
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --font-size: 15px, 4 --font-size: 15px,
5 --pad-y: .5rem, 5 --height: prop(--dims --nav --height, $global: true),
6 --pad-x: 2.5rem,
6 --item: ( 7 --item: (
7 --pad-x: 1rem, 8 --pad-x: 1rem,
8 --pad-y: 1rem,
9 ), 9 ),
10 ), 10 ),
11 --colors: ( 11 --colors: (
@@ -34,9 +34,14 @@
34 34
35 @include store(( 35 @include store((
36 --dims: ( 36 --dims: (
37 --pad-x: prop(--container --dims --pad-x, $global: true),
38 )
39 ), 'md');
40
41 @include store((
42 --dims: (
37 --item: ( 43 --item: (
38 --pad-x: .75em, 44 --pad-x: .75em,
39 --pad-y: .75em,
40 ), 45 ),
41 ) 46 )
42 ), 'sm'); 47 ), 'sm');
@@ -47,15 +52,18 @@
47 z-index: 10000; 52 z-index: 10000;
48 top: 0; 53 top: 0;
49 left: 0; 54 left: 0;
50 align-items: center; 55 height: prop(--dims --height);
51 padding: prop(--dims --pad-y) 0; 56 padding: 0 prop(--dims --pad-x);
52 background-color: prop(--colors --bg); 57 background-color: prop(--colors --bg);
53 font-size: prop(--dims --font-size); 58 font-size: prop(--dims --font-size);
54 59
60 @include element('logo', 'item') {
61 display: flex;
62 align-items: center;
63 height: 100%;
64 }
65
55 @include element('logo') { 66 @include element('logo') {
56 display: inline-block;
57 margin: 0;
58 padding: prop(--dims --item --pad-y) 0;
59 color: prop(--colors --logo --idle --fg); 67 color: prop(--colors --logo --idle --fg);
60 font-family: $font-fam--mono; 68 font-family: $font-fam--mono;
61 text-decoration: none; 69 text-decoration: none;
@@ -76,9 +84,8 @@
76 } 84 }
77 85
78 @include element('item') { 86 @include element('item') {
79 display: inline-block;
80 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x); 87 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
81 padding: prop(--dims --item --pad-y) prop(--dims --item --pad-x); 88 padding: 0 prop(--dims --item --pad-x);
82 color: prop(--colors --item --idle --fg); 89 color: prop(--colors --item --idle --fg);
83 text-decoration: none; 90 text-decoration: none;
84 text-transform: uppercase; 91 text-transform: uppercase;
@@ -97,7 +104,7 @@
97 } 104 }
98 105
99 @include media('<=md') { 106 @include media('<=md') {
100 position: static; 107 width: 100%;
101 } 108 }
102 } 109 }
103} 110}
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
index db75159..e904943 100644
--- a/assets/css/components/_section-heading.scss
+++ b/assets/css/components/_section-heading.scss
@@ -1,7 +1,7 @@
1@include namespace('section-heading') { 1@include namespace('section-heading') {
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-y: $line-height * 2rem 4 --pad-y: $line-height * 1rem
5 ), 5 ),
6 --colors: ( 6 --colors: (
7 --line: prop(--colors --accent --color, $global: true), 7 --line: prop(--colors --accent --color, $global: true),
@@ -10,8 +10,8 @@
10 10
11 @include component(namespace()) { 11 @include component(namespace()) {
12 margin: 0 0 prop(--dims --pad-y); 12 margin: 0 0 prop(--dims --pad-y);
13 font-size: .8em; 13 font-size: 1 / 16 * 12em;
14 font-weight: 400; 14 font-weight: 550;
15 letter-spacing: .2em; 15 letter-spacing: .2em;
16 text-transform: uppercase; 16 text-transform: uppercase;
17 17
@@ -19,7 +19,7 @@
19 content: ''; 19 content: '';
20 display: inline-block; 20 display: inline-block;
21 width: 3em; 21 width: 3em;
22 height: 1px; 22 height: 2px;
23 margin-right: 1.3em; 23 margin-right: 1.3em;
24 background-color: prop(--colors --line); 24 background-color: prop(--colors --line);
25 vertical-align: middle; 25 vertical-align: middle;
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 0726950..218841d 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -2,20 +2,20 @@
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-x: 3rem, 4 --pad-x: 3rem,
5 --pad-y: $line-height * 3rem 5 --pad-y: $line-height * 2rem
6 ) 6 )
7 )); 7 ));
8 8
9 @include store(( 9 @include store((
10 --dims: ( 10 --dims: (
11 --pad-x: 2rem, 11 --pad-x: 2rem,
12 --pad-y: $line-height * 2rem 12 --pad-y: $line-height * 1.5rem
13 ) 13 )
14 ), 'md'); 14 ), 'md');
15 15
16 @include store(( 16 @include store((
17 --dims: ( 17 --dims: (
18 --pad-x: 1rem, 18 --pad-x: 5%,
19 --pad-y: $line-height * 1rem 19 --pad-y: $line-height * 1rem
20 ) 20 )
21 ), 'sm'); 21 ), 'sm');
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index b824005..7683d44 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -27,18 +27,11 @@
27 } 27 }
28 28
29 @include iro-responsive-env(('md', 'lg')) { 29 @include iro-responsive-env(('md', 'lg')) {
30 padding-right: iro-responsive-set((0, 6rem));
31 padding-left: iro-responsive-set((0, 6rem));
32
30 @include element('banner') { 33 @include element('banner') {
31 padding: 34 padding-right: iro-responsive-set((0, 6rem));
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 } 35 }
43 } 36 }
44 37
@@ -47,9 +40,8 @@
47 height: auto; 40 height: auto;
48 41
49 @include element('banner', 'content') { 42 @include element('banner', 'content') {
50 width: auto; 43 width: auto;
51 padding-right: 0; 44 padding: 0;
52 padding-left: 0;
53 } 45 }
54 46
55 @include element('banner') { 47 @include element('banner') {
diff --git a/assets/css/objects/_button.scss b/assets/css/objects/_button.scss
new file mode 100644
index 0000000..d97ca2d
--- /dev/null
+++ b/assets/css/objects/_button.scss
@@ -0,0 +1,23 @@
1@include namespace('button') {
2 @include store((
3 --dims: (
4 --pad-x: 1.4em,
5 --pad-y: .5em
6 ),
7 --colors: (
8 --bg: prop(--colors --fg-lo, $global: true),
9 --fg: prop(--colors --bg, $global: true),
10 )
11 ));
12
13 @include object(namespace()) {
14 display: inline-block;
15 padding: prop(--dims --pad-y) prop(--dims --pad-x);
16 border-radius: 10em;
17 background-color: prop(--colors --bg);
18 color: prop(--colors --fg);
19 font-size: 1 / 16 * 14em;
20 font-weight: 500;
21 text-decoration: none;
22 }
23}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 90cbe5d..89b7837 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -6,9 +6,15 @@
6 6
7@import 'vars'; 7@import 'vars';
8@import 'functions'; 8@import 'functions';
9@import 'fonts';
9@import 'basics'; 10@import 'basics';
10 11
12@import 'layouts/container';
13@import 'layouts/landing';
14@import 'layouts/card-grid';
15
11@import 'objects/icon'; 16@import 'objects/icon';
17@import 'objects/button';
12 18
13@import 'components/nav'; 19@import 'components/nav';
14@import 'components/landing-banner'; 20@import 'components/landing-banner';
@@ -16,10 +22,6 @@
16@import 'components/footer'; 22@import 'components/footer';
17@import 'components/card'; 23@import 'components/card';
18 24
19@import 'layouts/landing';
20@import 'layouts/container';
21@import 'layouts/card-grid';
22
23@import 'scopes/body'; 25@import 'scopes/body';
24 26
25@import 'utils'; 27@import 'utils';