summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-03-27 22:03:08 +0100
committerVolpeon <git@volpeon.ink>2021-03-27 22:03:08 +0100
commit7588b3b71d01093507a2776e36ede1e6550dedd7 (patch)
treec148e797f64f0c0d41e6f0d6bef45b91661c1713 /assets/css/components
parentWIP: Redesign (diff)
downloadvolpeon.ink-7588b3b71d01093507a2776e36ede1e6550dedd7.tar.gz
volpeon.ink-7588b3b71d01093507a2776e36ede1e6550dedd7.tar.bz2
volpeon.ink-7588b3b71d01093507a2776e36ede1e6550dedd7.zip
WIP: Redesign
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_card.scss25
-rw-r--r--assets/css/components/_section-heading.scss5
2 files changed, 18 insertions, 12 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 21eeb9f..6260518 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,8 +1,8 @@
1@include namespace('card') { 1@include namespace('card') {
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-x: 1.3em, 4 --pad-x: 1.1em,
5 --pad-y: 1em 5 --pad-y: .8em
6 ), 6 ),
7 --colors: ( 7 --colors: (
8 --bg: prop(--colors --bg-lo, $global: true), 8 --bg: prop(--colors --bg-lo, $global: true),
@@ -13,8 +13,9 @@
13 )); 13 ));
14 14
15 @include component(namespace()) { 15 @include component(namespace()) {
16 display: block; 16 display: flex;
17 position: relative; 17 position: relative;
18 align-items: center;
18 background-color: prop(--colors --bg); 19 background-color: prop(--colors --bg);
19 line-height: 1.4; 20 line-height: 1.4;
20 21
@@ -37,18 +38,15 @@
37 } 38 }
38 39
39 @include element('content') { 40 @include element('content') {
40 display: flex; 41 box-sizing: border-box;
41 box-sizing: border-box; 42 width: 100%;
42 flex-direction: row; 43 padding: prop(--dims --pad-y) prop(--dims --pad-x);
43 align-items: center;
44 padding: prop(--dims --pad-y) prop(--dims --pad-x);
45 44
46 @include modifier('flip') { 45 @include modifier('flip') {
47 visibility: hidden; 46 visibility: hidden;
48 position: absolute; 47 position: absolute;
49 top: 0; 48 top: 0;
50 left: 0; 49 left: 0;
51 width: 100%;
52 height: 100%; 50 height: 100%;
53 transition: 51 transition:
54 visibility 0s linear .2s, 52 visibility 0s linear .2s,
@@ -56,10 +54,17 @@
56 opacity: 0; 54 opacity: 0;
57 background-color: prop(--colors --flip --bg); 55 background-color: prop(--colors --flip --bg);
58 } 56 }
57
58 @include sibling-element('icon') {
59 padding-right: prop(--dims --pad-x);
60 padding-left: 0;
61 }
59 } 62 }
60 63
61 @include element('icon') { 64 @include element('icon') {
62 margin-left: auto; 65 display: block;
66 flex: 0 0 auto;
67 padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x);
63 } 68 }
64 } 69 }
65} 70}
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
index e904943..717442b 100644
--- a/assets/css/components/_section-heading.scss
+++ b/assets/css/components/_section-heading.scss
@@ -10,8 +10,9 @@
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: 1 / 16 * 12em; 13 font-family: $font-fam--text;
14 font-weight: 550; 14 font-size: 1 / 16 * 13em;
15 font-weight: bold;
15 letter-spacing: .2em; 16 letter-spacing: .2em;
16 text-transform: uppercase; 17 text-transform: uppercase;
17 18