diff options
author | Volpeon <git@volpeon.ink> | 2021-05-12 08:58:19 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-05-12 08:58:19 +0200 |
commit | 87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627 (patch) | |
tree | a308dd87c95ba0cd2f2673fe833660f784c4f245 /assets/css/components/_post-list.scss | |
parent | Design update (diff) | |
download | volpeon.ink-87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627.tar.gz volpeon.ink-87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627.tar.bz2 volpeon.ink-87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627.zip |
Design
Diffstat (limited to 'assets/css/components/_post-list.scss')
-rw-r--r-- | assets/css/components/_post-list.scss | 36 |
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 | } |