summaryrefslogtreecommitdiffstats
path: root/assets/css/components
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/components
parentWIP: Redesign (diff)
downloadvolpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.tar.gz
volpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.tar.bz2
volpeon.ink-7531a7125c72227198f7605c6c129d15cd926857.zip
WIP: Redesign
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_card.scss59
-rw-r--r--assets/css/components/_section-heading.scss28
2 files changed, 87 insertions, 0 deletions
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}