summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-03-23 18:14:39 +0100
committerVolpeon <git@volpeon.ink>2021-03-23 18:14:39 +0100
commit7531a7125c72227198f7605c6c129d15cd926857 (patch)
tree134015fc623a89cf9db620f675b396d67c5e503b /assets/css
parentWIP: Redesign (diff)
downloadvolpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.tar.gz
volpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.tar.bz2
volpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.zip
WIP: Redesign
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_basics.scss24
-rw-r--r--assets/css/_utils.scss4
-rw-r--r--assets/css/_vars.scss4
-rw-r--r--assets/css/components/_card.scss59
-rw-r--r--assets/css/components/_section-heading.scss28
-rw-r--r--assets/css/layouts/_card-grid.scss7
-rw-r--r--assets/css/objects/_icon.scss12
-rw-r--r--assets/css/style.scss5
8 files changed, 124 insertions, 19 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index eee48f4..64b11cf 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -76,6 +76,11 @@ strong {
76 font-weight: bold; 76 font-weight: bold;
77} 77}
78 78
79small {
80 color: prop(--colors --fg-hi);
81 font-size: 1 / 16 * 14em;
82}
83
79ul, 84ul,
80ol { 85ol {
81 margin: ($line-height * 1em) 0 0; 86 margin: ($line-height * 1em) 0 0;
@@ -175,27 +180,12 @@ h1 {
175} 180}
176 181
177p { 182p {
178 margin: ($line-height * 1em) 0 0; 183 margin: ($line-height * 1em) 0 0;
179 hyphens: auto;
180} 184}
181 185
182:link, 186:link,
183:visited { 187:visited {
184 position: relative; 188 color: var(--link--idle--fg);
185 z-index: 1;
186 margin: 0 -.3em;
187 padding: .2em .3em;
188 color: var(--link--idle--fg);
189
190 &:hover {
191 background-color: var(--link--hover--bg);
192 color: var(--link--hover--fg);
193 text-decoration: none;
194 }
195
196 strong {
197 color: currentColor;
198 }
199} 189}
200 190
201hr { 191hr {
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index bca50d8..3eff6fc 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -19,3 +19,7 @@
19@include utility('mt0') { 19@include utility('mt0') {
20 margin-top: 0; 20 margin-top: 0;
21} 21}
22
23@include utility('db') {
24 display: block;
25}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 0c6102d..1ef0c8a 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -2,7 +2,7 @@ $breakpoints: (
2 xs: 320px, 2 xs: 320px,
3 sm: 600px, 3 sm: 600px,
4 md: 900px, 4 md: 900px,
5 lg: 1400px, 5 lg: 1500px,
6); 6);
7 7
8$unit-intervals: ( 8$unit-intervals: (
@@ -22,7 +22,7 @@ $subcontent--indent: 2em;
22 22
23$gray0: hsl(220, 0%, 6%); 23$gray0: hsl(220, 0%, 6%);
24$gray1: hsl(220, 0%, 9%); 24$gray1: hsl(220, 0%, 9%);
25$gray2: hsl(220, 0%, 16%); 25$gray2: hsl(220, 0%, 15%);
26$gray3: hsl(220, 0%, 29%); 26$gray3: hsl(220, 0%, 29%);
27$gray4: hsl(220, 0%, 54%); 27$gray4: hsl(220, 0%, 54%);
28$gray5: hsl(220, 0%, 73%); 28$gray5: hsl(220, 0%, 73%);
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
new file mode 100644
index 0000000..4b3a094
--- /dev/null
+++ b/assets/css/components/_card.scss
@@ -0,0 +1,59 @@
1@include namespace('card') {
2 @include store((
3 --dims: (
4 --pad-x: 1.3em,
5 --pad-y: 1em
6 ),
7 --colors: (
8 --bg: prop(--colors --bg-lo, $global: true),
9 --flip: (
10 --bg: prop(--colors --bg-lo, $global: true),
11 )
12 )
13 ));
14
15 @include component(namespace()) {
16 display: block;
17 position: relative;
18 background-color: prop(--colors --bg);
19 line-height: 1.4;
20
21 &:hover {
22 @include element('content') {
23 @include modifier('flip') {
24 visibility: visible;
25 transition:
26 visibility 0s,
27 opacity .2s;
28 opacity: 1;
29 }
30 }
31 }
32
33 @include element('content') {
34 display: flex;
35 box-sizing: border-box;
36 flex-direction: row;
37 align-items: center;
38 padding: prop(--dims --pad-y) prop(--dims --pad-x);
39
40 @include modifier('flip') {
41 visibility: hidden;
42 position: absolute;
43 top: 0;
44 left: 0;
45 width: 100%;
46 height: 100%;
47 transition:
48 visibility 0s linear .2s,
49 opacity .2s;
50 opacity: 0;
51 background-color: prop(--colors --flip --bg);
52 }
53 }
54
55 @include element('icon') {
56 margin-left: auto;
57 }
58 }
59}
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
new file mode 100644
index 0000000..db75159
--- /dev/null
+++ b/assets/css/components/_section-heading.scss
@@ -0,0 +1,28 @@
1@include namespace('section-heading') {
2 @include store((
3 --dims: (
4 --pad-y: $line-height * 2rem
5 ),
6 --colors: (
7 --line: prop(--colors --accent --color, $global: true),
8 )
9 ));
10
11 @include component(namespace()) {
12 margin: 0 0 prop(--dims --pad-y);
13 font-size: .8em;
14 font-weight: 400;
15 letter-spacing: .2em;
16 text-transform: uppercase;
17
18 &::before {
19 content: '';
20 display: inline-block;
21 width: 3em;
22 height: 1px;
23 margin-right: 1.3em;
24 background-color: prop(--colors --line);
25 vertical-align: middle;
26 }
27 }
28}
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
new file mode 100644
index 0000000..7998952
--- /dev/null
+++ b/assets/css/layouts/_card-grid.scss
@@ -0,0 +1,7 @@
1@include namespace('card-grid') {
2 @include layout(namespace()) {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
5 gap: .7rem;
6 }
7}
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
new file mode 100644
index 0000000..cb966c8
--- /dev/null
+++ b/assets/css/objects/_icon.scss
@@ -0,0 +1,12 @@
1@include namespace('icon') {
2 @include object(namespace()) {
3 display: block;
4 width: 16px;
5 height: 16px;
6 stroke-width: 1.5px;
7 stroke-linecap: round;
8 stroke: currentColor;
9 stroke-linejoin: round;
10 fill: none;
11 }
12}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index f4c6db7..90cbe5d 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -8,12 +8,17 @@
8@import 'functions'; 8@import 'functions';
9@import 'basics'; 9@import 'basics';
10 10
11@import 'objects/icon';
12
11@import 'components/nav'; 13@import 'components/nav';
12@import 'components/landing-banner'; 14@import 'components/landing-banner';
15@import 'components/section-heading';
13@import 'components/footer'; 16@import 'components/footer';
17@import 'components/card';
14 18
15@import 'layouts/landing'; 19@import 'layouts/landing';
16@import 'layouts/container'; 20@import 'layouts/container';
21@import 'layouts/card-grid';
17 22
18@import 'scopes/body'; 23@import 'scopes/body';
19 24