summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-04-12 20:39:04 +0200
committerVolpeon <git@volpeon.ink>2021-04-12 20:39:04 +0200
commit6b2c6c4260b2af2adad37dc1f8c50a904e04f13d (patch)
tree46db61ecffa196c31f19b7f437b554ad1c2a193c /assets/css
parentWIP: Redesign (diff)
downloadvolpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.tar.gz
volpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.tar.bz2
volpeon.ink-6b2c6c4260b2af2adad37dc1f8c50a904e04f13d.zip
Update
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss7
-rw-r--r--assets/css/_vars.scss37
-rw-r--r--assets/css/components/_card.scss15
-rw-r--r--assets/css/components/_footer.scss24
-rw-r--r--assets/css/components/_landing-banner.scss16
-rw-r--r--assets/css/components/_logo.scss19
-rw-r--r--assets/css/components/_nav.scss109
-rw-r--r--assets/css/components/_outer-button.scss67
-rw-r--r--assets/css/layouts/_card-grid.scss10
-rw-r--r--assets/css/layouts/_landing.scss20
-rw-r--r--assets/css/layouts/_section.scss17
-rw-r--r--assets/css/scopes/_body.scss2
-rw-r--r--assets/css/style.scss4
13 files changed, 187 insertions, 160 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 3e67b76..b739d2a 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,10 +1,10 @@
1::selection { 1::selection {
2 background-color: var(--select--bg); 2 background-color: prop(--colors --select --bg);
3 color: var(--select--fg); 3 color: prop(--colors --select --fg);
4} 4}
5 5
6img::selection { 6img::selection {
7 background-color: var(--select--img-bg); 7 background-color: prop(--colors --select --img-bg);
8} 8}
9 9
10html, 10html,
@@ -26,6 +26,7 @@ html {
26 font-family: $font-fam--text; 26 font-family: $font-fam--text;
27 font-size: 1em / 16px * $font-size; 27 font-size: 1em / 16px * $font-size;
28 line-height: $line-height; 28 line-height: $line-height;
29 scroll-behavior: smooth;
29} 30}
30 31
31body { 32body {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 1063dc8..b19ebee 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -30,7 +30,8 @@ $gray6: hsl(220, 0%, 100%);
30 30
31@include store(( 31@include store((
32 --dims: ( 32 --dims: (
33 --outer: 4.5rem, 33 --outer: 4rem,
34 --outer-spacing: 2rem,
34 ), 35 ),
35 --colors: ( 36 --colors: (
36 --bg-hi: $gray0, // Darker background 37 --bg-hi: $gray0, // Darker background
@@ -44,11 +45,17 @@ $gray6: hsl(220, 0%, 100%);
44 --fg-lo: $gray6, // Strong text 45 --fg-lo: $gray6, // Strong text
45 46
46 --accent: ( 47 --accent: (
47 --h: 354, 48 --h: 354,
48 --s: 84%, 49 --s: 84%,
49 --l: 55%, 50 --l: 55%,
50 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), 51 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
51 ) 52 ),
53
54 --select: (
55 --bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996),
56 --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5),
57 --fg: var(--colors--bg-hi),
58 ),
52 ) 59 )
53)); 60));
54 61
@@ -69,30 +76,26 @@ $gray6: hsl(220, 0%, 100%);
69:root { 76:root {
70 --heading--fg: var(--colors--fg-lo); 77 --heading--fg: var(--colors--fg-lo);
71 78
72 --select--bg: hsla(270, 2%, 100%, .996);
73 --select--img-bg: hsla(270, 2%, 100%, .5);
74 --select--fg: var(--colors--bg-hi);
75
76 --code--fg: var(--colors--fg-hi); 79 --code--fg: var(--colors--fg-hi);
77 80
78 --code-block--fg: var(--colors--fg-hi); 81 --code-block--fg: var(--colors--fg-hi);
79 82
80 --link--idle--fg: var(--colors--fg-lo); 83 --link--idle--fg: var(--colors--fg-lo);
81 --link--hover--bg: var(--link--idle--fg); 84 --link--hover--bg: var(--link--idle--fg);
82 --link--hover--fg: #000; 85 --link--hover--fg: #000;
83 86
84 --hero--back-fg: var(--colors--bg-hi); 87 --hero--back-fg: var(--colors--bg-hi);
85 88
86 --nav--bg: var(--colors--bg); 89 --nav--bg: var(--colors--bg);
87 --nav--logo--fg: var(--colors--fg-hi); 90 --nav--logo--fg: var(--colors--fg-hi);
88 --nav--item--idle--fg: var(--colors--fg); 91 --nav--item--idle--fg: var(--colors--fg);
89 --nav--item--hover--fg: var(--colors--fg-lo); 92 --nav--item--hover--fg: var(--colors--fg-lo);
90 --nav--item--active--fg: var(--colors--fg-lo); 93 --nav--item--active--fg: var(--colors--fg-lo);
91 94
92 --footer--bg: var(--colors--bg); 95 --footer--bg: var(--colors--bg);
93 96
94 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; 97 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
95 --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; 98 --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458;
96 --page--link--hover--bg: var(--page--link--idle--fg); 99 --page--link--hover--bg: var(--page--link--idle--fg);
97 --page--link--hover--fg: #000; 100 --page--link--hover--fg: #000;
98} 101}
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 6260518..bb8b4d2 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -12,6 +12,13 @@
12 ) 12 )
13 )); 13 ));
14 14
15 @include store((
16 --dims: (
17 --pad-x: .9em,
18 --pad-y: .6em
19 )
20 ), 'md');
21
15 @include component(namespace()) { 22 @include component(namespace()) {
16 display: flex; 23 display: flex;
17 position: relative; 24 position: relative;
@@ -29,9 +36,7 @@
29 @include element('content') { 36 @include element('content') {
30 @include modifier('flip') { 37 @include modifier('flip') {
31 visibility: visible; 38 visibility: visible;
32 transition: 39 transition: visibility 0s, opacity .2s;
33 visibility 0s,
34 opacity .2s;
35 opacity: 1; 40 opacity: 1;
36 } 41 }
37 } 42 }
@@ -48,9 +53,7 @@
48 top: 0; 53 top: 0;
49 left: 0; 54 left: 0;
50 height: 100%; 55 height: 100%;
51 transition: 56 transition: visibility 0s linear .2s, opacity .2s;
52 visibility 0s linear .2s,
53 opacity .2s;
54 opacity: 0; 57 opacity: 0;
55 background-color: prop(--colors --flip --bg); 58 background-color: prop(--colors --flip --bg);
56 } 59 }
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index db30fcd..c20bc22 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,17 +1,25 @@
1@include namespace('footer') { 1@include namespace('footer') {
2 @include store(( 2 @include store((
3 --dims: (
4 --pad-y: .8em
5 ),
6 --colors: ( 3 --colors: (
7 --fg: prop(--colors --obj, $global: true) 4 --fg: prop(--colors --obj, $global: true),
5 --border: prop(--colors --bg-lo, $global: true),
8 ) 6 )
9 )); 7 ));
10 8
11 @include component(namespace()) { 9 @include component(namespace()) {
12 padding-top: prop(--dims --pad-y); 10 display: flex;
13 padding-bottom: prop(--dims --pad-y); 11 align-items: center;
14 color: prop(--colors --fg); 12 justify-content: space-between;
15 text-align: right; 13 height: prop(--dims --outer, $global: true);
14
15 @include element('content') {
16 width: 100%;
17 height: 100%;
18 margin-right: prop(--dims --outer-spacing, $global: true);
19 margin-left: prop(--dims --outer-spacing, $global: true);
20 border-top: 1px solid prop(--colors --border);
21 color: prop(--colors --fg);
22 line-height: prop(--dims --outer, $global: true);
23 }
16 } 24 }
17} 25}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 412ca8a..8f07c37 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -7,17 +7,19 @@
7 )); 7 ));
8 8
9 @include component(namespace()) { 9 @include component(namespace()) {
10 font-size: 1 / 16 * 17em;
11
12 @include element('title') { 10 @include element('title') {
13 max-width: 7em; 11 max-width: 7em;
14 margin-top: 0; 12 margin-top: 0;
15 transform: translateX(-.04em); 13 transform: translateX(-.05em);
16 font-family: $font-fam--large; 14 font-family: $font-fam--large;
17 font-weight: 350; 15 font-weight: 350;
18 text-transform: none; 16 text-transform: none;
19 } 17 }
20 18
19 @include element('text') {
20 font-size: 1 / 16 * 17em;
21 }
22
21 @include element('title-inner') { 23 @include element('title-inner') {
22 background-image: linear-gradient( 24 background-image: linear-gradient(
23 to top, 25 to top,
@@ -33,9 +35,15 @@
33 font-weight: 550; 35 font-weight: 550;
34 } 36 }
35 37
38 @include media('<=md') {
39 @include element('title') {
40 max-width: none;
41 }
42 }
43
36 @include iro-responsive-env(('md', 'lg')) { 44 @include iro-responsive-env(('md', 'lg')) {
37 @include element('title') { 45 @include element('title') {
38 font-size: iro-responsive-set((2.6rem, 3rem)); 46 font-size: iro-responsive-set((2.6rem, 3.4rem));
39 } 47 }
40 } 48 }
41 } 49 }
diff --git a/assets/css/components/_logo.scss b/assets/css/components/_logo.scss
new file mode 100644
index 0000000..13587c8
--- /dev/null
+++ b/assets/css/components/_logo.scss
@@ -0,0 +1,19 @@
1@include namespace('logo') {
2 @include store((
3 --colors: (
4 --fg: prop(--colors --fg-lo, $global: true),
5 --bg: prop(--colors --bg-hi, $global: true),
6 --hover: (
7 --fg: prop(--colors --bg-hi, $global: true),
8 --bg: prop(--colors --accent --color, $global: true),
9 )
10 )
11 ));
12
13 @include component(namespace()) {
14 position: fixed;
15 z-index: 10000;
16 top: 0;
17 left: 0;
18 }
19}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
deleted file mode 100644
index d0a255e..0000000
--- a/assets/css/components/_nav.scss
+++ /dev/null
@@ -1,109 +0,0 @@
1@include namespace('nav') {
2 @include store((
3 --dims: (
4 --font-size: 15px,
5 --pad-x: 2.5rem,
6 --item: (
7 --pad-x: 1rem,
8 ),
9 ),
10 --colors: (
11 --bg: prop(--colors --bg-hi, $global: true),
12 --logo: (
13 --idle: (
14 --fg: prop(--colors --accent --color, $global: true),
15 ),
16 --hover: (
17 --fg: prop(--colors --fg-lo, $global: true),
18 )
19 ),
20 --item: (
21 --idle: (
22 --fg: prop(--colors --fg, $global: true),
23 ),
24 --hover: (
25 --fg: prop(--colors --fg-lo, $global: true),
26 ),
27 --active: (
28 --fg: prop(--colors --fg-lo, $global: true),
29 )
30 )
31 )
32 ));
33
34 @include store((
35 --dims: (
36 --pad-x: prop(--container --dims --pad-x, $global: true),
37 )
38 ), 'md');
39
40 @include store((
41 --dims: (
42 --item: (
43 --pad-x: .75em,
44 ),
45 )
46 ), 'sm');
47
48 @include component(namespace()) {
49 display: flex;
50 position: fixed;
51 z-index: 10000;
52 top: 0;
53 left: 0;
54 height: prop(--dims --outer, $global: true);
55 padding: 0 prop(--dims --pad-x);
56 background-color: prop(--colors --bg);
57 font-size: prop(--dims --font-size);
58
59 @include element('logo', 'item') {
60 display: flex;
61 align-items: center;
62 height: 100%;
63 }
64
65 @include element('logo') {
66 color: prop(--colors --logo --idle --fg);
67 font-family: $font-fam--mono;
68 text-decoration: none;
69
70 &:link,
71 &:visited {
72 &:hover {
73 background-color: transparent;
74 color: prop(--colors --logo --hover --fg);
75 }
76 }
77 }
78
79 @include element('logo-symbol') {
80 display: block;
81 width: $line-height * .9em;
82 height: $line-height * 1em;
83 }
84
85 @include element('item') {
86 margin: 0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
87 padding: 0 prop(--dims --item --pad-x);
88 color: prop(--colors --item --idle --fg);
89 text-decoration: none;
90 text-transform: uppercase;
91
92 &:hover {
93 background-color: transparent;
94 color: prop(--colors --item --hover --fg);
95 text-decoration: underline;
96 }
97
98 @include modifier('active') {
99 border-color: prop(--colors --item --active --fg);
100 color: prop(--colors --item --active --fg);
101 font-weight: bold;
102 }
103 }
104
105 @include media('<=md') {
106 width: 100%;
107 }
108 }
109}
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
new file mode 100644
index 0000000..13614bb
--- /dev/null
+++ b/assets/css/components/_outer-button.scss
@@ -0,0 +1,67 @@
1@include namespace('outer-button') {
2 @include store((
3 --colors: (
4 --fg: prop(--colors --bg-hi, $global: true),
5 --bg: prop(--colors --fg-lo, $global: true),
6 --hover: (
7 --bg: prop(--colors --accent --color, $global: true),
8 --fg: prop(--colors --bg-hi, $global: true),
9 ),
10 --logo: (
11 --fg: prop(--colors --fg-lo, $global: true),
12 --bg: prop(--colors --bg-hi, $global: true),
13 --hover: (
14 --fg: prop(--colors --bg-hi, $global: true),
15 --bg: prop(--colors --accent --color, $global: true),
16 )
17 )
18 )
19 ));
20
21 @include component(namespace()) {
22 display: flex;
23 height: prop(--dims --outer, $global: true);
24 transition: background-color .2s, color .2s;
25 background-color: prop(--colors --bg);
26 color: prop(--colors --fg);
27 font-weight: 500;
28 text-decoration: none;
29
30 &:hover {
31 background-color: prop(--colors --hover --bg);
32 color: prop(--colors --hover --fg);
33 }
34
35 @include modifier('logo') {
36 background-color: prop(--colors --logo --bg);
37 color: prop(--colors --logo --fg);
38
39 &:hover {
40 background-color: prop(--colors --logo --hover --bg);
41 color: prop(--colors --logo --hover --fg);
42 }
43 }
44
45 @include element('icon') {
46 display: flex;
47 position: relative;
48 align-items: center;
49 justify-content: center;
50 width: prop(--dims --outer, $global: true);
51 height: 100%;
52 }
53
54 @include element('icon-symbol') {
55 display: block;
56 width: 1.5em;
57 height: 1.5em;
58 }
59
60 @include element('content') {
61 height: 100%;
62 padding-right: prop(--dims --outer-spacing, $global: true);
63 padding-left: prop(--dims --outer-spacing, $global: true);
64 line-height: prop(--dims --outer, $global: true);
65 }
66 }
67}
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
index 8e9091a..cbc4388 100644
--- a/assets/css/layouts/_card-grid.scss
+++ b/assets/css/layouts/_card-grid.scss
@@ -1,7 +1,13 @@
1@include namespace('card-grid') { 1@include namespace('card-grid') {
2 @include store((
3 --dims: (
4 --card-width: 17em
5 )
6 ));
7
2 @include layout(namespace()) { 8 @include layout(namespace()) {
3 display: grid; 9 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); 10 grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr));
5 gap: .7rem; 11 gap: .6rem;
6 } 12 }
7} 13}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 03af39f..a332528 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -13,19 +13,15 @@
13 box-sizing: border-box; 13 box-sizing: border-box;
14 flex-direction: row; 14 flex-direction: row;
15 align-items: center; 15 align-items: center;
16 min-height: 100%;
17 padding-bottom: prop(--dims --outer, $global: true);
18 16
19 @include element('banner') { 17 @include element('banner') {
20 flex-shrink: 1.2; 18 width: 70%;
21 width: 100%;
22 max-width: prop(--dims --banner-width); 19 max-width: prop(--dims --banner-width);
23 background-color: prop(--colors --banner-bg); 20 background-color: prop(--colors --banner-bg);
24 } 21 }
25 22
26 @include element('content') { 23 @include element('content') {
27 width: 100%; 24 width: 100%;
28 min-width: 0;
29 } 25 }
30 26
31 @include iro-responsive-env(('md', 'lg')) { 27 @include iro-responsive-env(('md', 'lg')) {
@@ -38,9 +34,15 @@
38 } 34 }
39 35
40 @include media('<=md') { 36 @include media('<=md') {
41 display: block; 37 display: block;
42 height: auto; 38
43 padding-bottom: 0; 39 @include element('side') {
40 display: none;
41
42 @include sibling-element('side') {
43 display: block;
44 }
45 }
44 46
45 @include element('banner', 'content') { 47 @include element('banner', 'content') {
46 width: auto; 48 width: auto;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
new file mode 100644
index 0000000..94a145b
--- /dev/null
+++ b/assets/css/layouts/_section.scss
@@ -0,0 +1,17 @@
1@include namespace('section') {
2 @include layout(namespace()) {
3 display: flex;
4 flex-direction: column;
5 align-items: flex-start;
6 min-height: 100%;
7 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)});
8 padding-bottom: prop(--dims --outer, $global: true);
9
10 @include element('heading') {
11 position: sticky;
12 z-index: 9000;
13 top: 0;
14 left: 0;
15 }
16 }
17}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 7adda03..6fbacff 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,7 +1,7 @@
1@include namespace('body') { 1@include namespace('body') {
2 @include scope(namespace()) { 2 @include scope(namespace()) {
3 > :first-child { 3 > :first-child {
4 margin-top: 0; 4 //margin-top: 0;
5 } 5 }
6 } 6 }
7} 7}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 89b7837..d095dec 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -10,13 +10,15 @@
10@import 'basics'; 10@import 'basics';
11 11
12@import 'layouts/container'; 12@import 'layouts/container';
13@import 'layouts/section';
13@import 'layouts/landing'; 14@import 'layouts/landing';
14@import 'layouts/card-grid'; 15@import 'layouts/card-grid';
15 16
16@import 'objects/icon'; 17@import 'objects/icon';
17@import 'objects/button'; 18@import 'objects/button';
18 19
19@import 'components/nav'; 20@import 'components/outer-button';
21@import 'components/logo';
20@import 'components/landing-banner'; 22@import 'components/landing-banner';
21@import 'components/section-heading'; 23@import 'components/section-heading';
22@import 'components/footer'; 24@import 'components/footer';