summaryrefslogtreecommitdiffstats
path: root/assets/css/components/_post-list.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components/_post-list.scss')
-rw-r--r--assets/css/components/_post-list.scss36
1 files changed, 15 insertions, 21 deletions
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}