summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-04-13 20:42:29 +0200
committerVolpeon <git@volpeon.ink>2021-04-13 20:42:29 +0200
commit0de5545dd4706d4dccdc8f843a98f5d9d5155bd0 (patch)
tree9169bbf51c232f6ed2c3d7f8761d3e996aeb76d9 /assets/css
parentUpdate (diff)
downloadvolpeon.ink-0de5545dd4706d4dccdc8f843a98f5d9d5155bd0.tar.gz
volpeon.ink-0de5545dd4706d4dccdc8f843a98f5d9d5155bd0.tar.bz2
volpeon.ink-0de5545dd4706d4dccdc8f843a98f5d9d5155bd0.zip
Update
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_utils.scss41
-rw-r--r--assets/css/_vars.scss13
-rw-r--r--assets/css/components/_card.scss11
-rw-r--r--assets/css/components/_landing-banner.scss2
-rw-r--r--assets/css/components/_outer-button.scss42
-rw-r--r--assets/css/layouts/_container.scss13
-rw-r--r--assets/css/layouts/_landing.scss10
-rw-r--r--assets/css/layouts/_section.scss24
8 files changed, 98 insertions, 58 deletions
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 5e07d6f..8f8170c 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -18,12 +18,49 @@
18 18
19@include utility('mt0') { 19@include utility('mt0') {
20 margin-top: 0; 20 margin-top: 0;
21
22 @each $breakpoint in map-keys($breakpoints) {
23 @include media('<=#{$breakpoint}') {
24 @include suffix('#{$breakpoint}-lo') {
25 margin-top: 0;
26 }
27 }
28
29 @include media('>#{$breakpoint}') {
30 @include suffix('#{$breakpoint}-hi') {
31 margin-top: 0;
32 }
33 }
34 }
35}
36
37@include utility('pt0') {
38 padding-top: 0;
39
40 @each $breakpoint in map-keys($breakpoints) {
41 @include media('<=#{$breakpoint}') {
42 @include suffix('#{$breakpoint}-lo') {
43 padding-top: 0;
44 }
45 }
46
47 @include media('>#{$breakpoint}') {
48 @include suffix('#{$breakpoint}-hi') {
49 padding-top: 0;
50 }
51 }
52 }
21} 53}
22 54
23@include utility('ml') { 55@include utility('my-auto') {
24 margin-left: auto; 56 margin-top: auto;
57 margin-bottom: auto;
25} 58}
26 59
27@include utility('db') { 60@include utility('db') {
28 display: block; 61 display: block;
29} 62}
63
64@include utility('ar') {
65 text-align: right;
66}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index b19ebee..9b5fe86 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -32,6 +32,7 @@ $gray6: hsl(220, 0%, 100%);
32 --dims: ( 32 --dims: (
33 --outer: 4rem, 33 --outer: 4rem,
34 --outer-spacing: 2rem, 34 --outer-spacing: 2rem,
35 --spacing-y: 3rem,
35 ), 36 ),
36 --colors: ( 37 --colors: (
37 --bg-hi: $gray0, // Darker background 38 --bg-hi: $gray0, // Darker background
@@ -69,7 +70,7 @@ $gray6: hsl(220, 0%, 100%);
69 70
70@include store(( 71@include store((
71 --dims: ( 72 --dims: (
72 --outer: 4rem 73 --outer: 4rem,
73 ), 74 ),
74), 'sm'); 75), 'sm');
75 76
@@ -84,16 +85,6 @@ $gray6: hsl(220, 0%, 100%);
84 --link--hover--bg: var(--link--idle--fg); 85 --link--hover--bg: var(--link--idle--fg);
85 --link--hover--fg: #000; 86 --link--hover--fg: #000;
86 87
87 --hero--back-fg: var(--colors--bg-hi);
88
89 --nav--bg: var(--colors--bg);
90 --nav--logo--fg: var(--colors--fg-hi);
91 --nav--item--idle--fg: var(--colors--fg);
92 --nav--item--hover--fg: var(--colors--fg-lo);
93 --nav--item--active--fg: var(--colors--fg-lo);
94
95 --footer--bg: var(--colors--bg);
96
97 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; 88 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
98 --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; 89 --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458;
99 --page--link--hover--bg: var(--page--link--idle--fg); 90 --page--link--hover--bg: var(--page--link--idle--fg);
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index bb8b4d2..09b03b0 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -14,7 +14,7 @@
14 14
15 @include store(( 15 @include store((
16 --dims: ( 16 --dims: (
17 --pad-x: .9em, 17 --pad-x: 1em,
18 --pad-y: .6em 18 --pad-y: .6em
19 ) 19 )
20 ), 'md'); 20 ), 'md');
@@ -69,5 +69,14 @@
69 flex: 0 0 auto; 69 flex: 0 0 auto;
70 padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x); 70 padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x);
71 } 71 }
72
73 @include element('image') {
74 display: block;
75 flex: 0 0 auto;
76 width: 4em;
77 height: 100%;
78 object-fit: cover;
79 object-position: center center;
80 }
72 } 81 }
73} 82}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 8f07c37..f6016c4 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -17,7 +17,7 @@
17 } 17 }
18 18
19 @include element('text') { 19 @include element('text') {
20 font-size: 1 / 16 * 17em; 20 font-size: 1 / 16 * 18em;
21 } 21 }
22 22
23 @include element('title-inner') { 23 @include element('title-inner') {
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 13614bb..b92dd9e 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -7,7 +7,7 @@
7 --bg: prop(--colors --accent --color, $global: true), 7 --bg: prop(--colors --accent --color, $global: true),
8 --fg: prop(--colors --bg-hi, $global: true), 8 --fg: prop(--colors --bg-hi, $global: true),
9 ), 9 ),
10 --logo: ( 10 --icon: (
11 --fg: prop(--colors --fg-lo, $global: true), 11 --fg: prop(--colors --fg-lo, $global: true),
12 --bg: prop(--colors --bg-hi, $global: true), 12 --bg: prop(--colors --bg-hi, $global: true),
13 --hover: ( 13 --hover: (
@@ -24,31 +24,34 @@
24 transition: background-color .2s, color .2s; 24 transition: background-color .2s, color .2s;
25 background-color: prop(--colors --bg); 25 background-color: prop(--colors --bg);
26 color: prop(--colors --fg); 26 color: prop(--colors --fg);
27 font-weight: 500; 27 font-weight: 450;
28 text-decoration: none; 28 text-decoration: none;
29 29
30 &:hover { 30 @include element('icon') {
31 background-color: prop(--colors --hover --bg); 31 display: flex;
32 color: prop(--colors --hover --fg); 32 position: relative;
33 flex: 0 0 auto;
34 align-items: center;
35 justify-content: center;
36 width: prop(--dims --outer, $global: true);
37 height: 100%;
38 transition: background-color .2s, color .2s;
39 background-color: prop(--colors --icon --bg);
40 color: prop(--colors --icon --fg);
33 } 41 }
34 42
35 @include modifier('logo') { 43 @include modifier('icon-only') {
36 background-color: prop(--colors --logo --bg); 44 @include element('icon') {
37 color: prop(--colors --logo --fg); 45 background-color: prop(--colors --bg);
38 46 color: prop(--colors --fg);
39 &:hover {
40 background-color: prop(--colors --logo --hover --bg);
41 color: prop(--colors --logo --hover --fg);
42 } 47 }
43 } 48 }
44 49
45 @include element('icon') { 50 &:hover {
46 display: flex; 51 @include multi('&', 'element' 'icon') {
47 position: relative; 52 background-color: prop(--colors --hover --bg);
48 align-items: center; 53 color: prop(--colors --hover --fg);
49 justify-content: center; 54 }
50 width: prop(--dims --outer, $global: true);
51 height: 100%;
52 } 55 }
53 56
54 @include element('icon-symbol') { 57 @include element('icon-symbol') {
@@ -62,6 +65,7 @@
62 padding-right: prop(--dims --outer-spacing, $global: true); 65 padding-right: prop(--dims --outer-spacing, $global: true);
63 padding-left: prop(--dims --outer-spacing, $global: true); 66 padding-left: prop(--dims --outer-spacing, $global: true);
64 line-height: prop(--dims --outer, $global: true); 67 line-height: prop(--dims --outer, $global: true);
68 white-space: nowrap;
65 } 69 }
66 } 70 }
67} 71}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index d63460b..0f569e4 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,22 +1,19 @@
1@include namespace('container') { 1@include namespace('container') {
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-x: 3rem, 4 --pad-x: 3rem
5 --pad-y: $line-height * 2rem
6 ) 5 )
7 )); 6 ));
8 7
9 @include store(( 8 @include store((
10 --dims: ( 9 --dims: (
11 --pad-x: 2rem, 10 --pad-x: 2rem
12 --pad-y: $line-height * 1.5rem
13 ) 11 )
14 ), 'md'); 12 ), 'md');
15 13
16 @include store(( 14 @include store((
17 --dims: ( 15 --dims: (
18 --pad-x: 4%, 16 --pad-x: 4%
19 --pad-y: $line-height * 1rem
20 ) 17 )
21 ), 'sm'); 18 ), 'sm');
22 19
@@ -33,8 +30,8 @@
33 } 30 }
34 31
35 @include modifier('pad-y') { 32 @include modifier('pad-y') {
36 padding-top: prop(--dims --pad-y); 33 padding-top: prop(--dims --spacing-y, $global: true);
37 padding-bottom: prop(--dims --pad-y); 34 padding-bottom: prop(--dims --spacing-y, $global: true);
38 } 35 }
39 } 36 }
40} 37}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index a332528..aa85679 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -25,16 +25,14 @@
25 } 25 }
26 26
27 @include iro-responsive-env(('md', 'lg')) { 27 @include iro-responsive-env(('md', 'lg')) {
28 padding-right: iro-responsive-set((0, 6rem)); 28 padding-right: iro-responsive-set((0, 3rem));
29 padding-left: iro-responsive-set((0, 6rem)); 29 padding-left: iro-responsive-set((0, 6rem));
30
31 @include element('banner') {
32 padding-right: iro-responsive-set((0, 6rem));
33 }
34 } 30 }
35 31
36 @include media('<=md') { 32 @include media('<=md') {
37 display: block; 33 flex-direction: column;
34 align-items: stretch;
35 justify-content: center;
38 36
39 @include element('side') { 37 @include element('side') {
40 display: none; 38 display: none;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 94a145b..38b20aa 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -1,17 +1,21 @@
1@include namespace('section') { 1@include namespace('section') {
2 @include layout(namespace()) { 2 @include layout(namespace()) {
3 display: flex; 3 display: flex;
4 flex-direction: column; 4 flex-direction: column;
5 align-items: flex-start; 5 align-items: stretch;
6 min-height: 100%; 6 justify-content: flex-start;
7 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); 7 min-height: 100%;
8 padding-bottom: prop(--dims --outer, $global: true); 8 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)});
9 padding-bottom: prop(--dims --outer, $global: true);
9 10
10 @include element('heading') { 11 @include element('heading') {
11 position: sticky; 12 display: flex;
12 z-index: 9000; 13 position: sticky;
13 top: 0; 14 z-index: 9000;
14 left: 0; 15 top: 0;
16 left: 0;
17 flex-direction: row;
18 justify-self: flex-start;
15 } 19 }
16 } 20 }
17} 21}