summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-05-12 08:58:19 +0200
committerVolpeon <git@volpeon.ink>2021-05-12 08:58:19 +0200
commit87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627 (patch)
treea308dd87c95ba0cd2f2673fe833660f784c4f245 /assets/css
parentDesign update (diff)
downloadvolpeon.ink-87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627.tar.gz
volpeon.ink-87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627.tar.bz2
volpeon.ink-87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627.zip
Design
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/components/_card.scss15
-rw-r--r--assets/css/components/_post-list.scss36
2 files changed, 21 insertions, 30 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index f444daf..1b46373 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -14,13 +14,6 @@
14 ) 14 )
15 )); 15 ));
16 16
17 @include store((
18 --dims: (
19 --pad-x: 1em,
20 --pad-y: .7em
21 )
22 ), 'md');
23
24 @include component(namespace()) { 17 @include component(namespace()) {
25 display: flex; 18 display: flex;
26 position: relative; 19 position: relative;
@@ -42,7 +35,7 @@
42 35
43 small, 36 small,
44 strong { 37 strong {
45 transition: background-color .2s, color .2s; 38 transition: color .2s;
46 } 39 }
47 40
48 &:link, 41 &:link,
@@ -62,7 +55,7 @@
62 55
63 small, 56 small,
64 strong { 57 strong {
65 color: prop(--colors --hover --fg); 58 color: currentColor;
66 } 59 }
67 } 60 }
68 } 61 }
@@ -72,6 +65,10 @@
72 width: 100%; 65 width: 100%;
73 padding: prop(--dims --pad-y) prop(--dims --pad-x); 66 padding: prop(--dims --pad-y) prop(--dims --pad-x);
74 67
68 @include next-twin-element {
69 width: auto;
70 }
71
75 @include modifier('flip') { 72 @include modifier('flip') {
76 visibility: hidden; 73 visibility: hidden;
77 position: absolute; 74 position: absolute;
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index 5e9f520..9d4c956 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -7,16 +7,10 @@
7 --post: ( 7 --post: (
8 --idle-fg: prop(--colors --fg-lo, $global: true), 8 --idle-fg: prop(--colors --fg-lo, $global: true),
9 --visited-fg: prop(--colors --fg, $global: true), 9 --visited-fg: prop(--colors --fg, $global: true),
10 --bg: prop(--colors --bg-lo, $global: true),
11 --border: prop(--colors --obj-hi, $global: true),
12 ), 10 ),
13 --meta: ( 11 --meta: (
14 --fg: prop(--colors --fg-hi, $global: true), 12 --fg: prop(--colors --fg-hi, $global: true),
15 ) 13 )
16 ),
17 --dims: (
18 --pad-x: 1em,
19 --pad-y: .6em,
20 ) 14 )
21 )); 15 ));
22 16
@@ -33,15 +27,8 @@
33 } 27 }
34 28
35 @include element('post') { 29 @include element('post') {
36 display: flex;
37 align-items: baseline;
38 padding: prop(--dims --pad-y) prop(--dims --pad-x);
39 background-color: prop(--colors --post --bg);
40 color: currentColor;
41 text-decoration: none;
42
43 @include next-twin-element { 30 @include next-twin-element {
44 margin-top: 2px; 31 margin-top: .6rem;
45 } 32 }
46 33
47 &:visited { 34 &:visited {
@@ -49,19 +36,26 @@
49 color: prop(--colors --post --visited-fg); 36 color: prop(--colors --post --visited-fg);
50 } 37 }
51 } 38 }
39
40 &:hover,
41 &:focus {
42 @include element('post-date') {
43 color: currentColor;
44 }
45 }
52 } 46 }
53 47
54 @include element('post-title') { 48 @include element('post-title') {
55 margin-right: 1em; 49 color: prop(--colors --post --idle-fg);
56 color: prop(--colors --post --idle-fg); 50 font-size: 1 / 16 * 17em;
57 font-size: 1 / 16 * 17em; 51 font-weight: normal;
58 } 52 }
59 53
60 @include element('post-date') { 54 @include element('post-date') {
61 flex: 0 0 auto; 55 flex: 0 0 auto;
62 margin-left: auto; 56 transition: color .2s;
63 color: prop(--colors --meta --fg); 57 color: prop(--colors --meta --fg);
64 font-size: 1 / 16 * 14em; 58 font-size: 1 / 16 * 14em;
65 } 59 }
66 } 60 }
67} 61}