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 | |
parent | Design update (diff) | |
download | volpeon.ink-87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627.tar.gz volpeon.ink-87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627.tar.bz2 volpeon.ink-87fbb058af5d3f6d4cfc5bcb2da4fa9a99b3b627.zip |
Design
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/components/_card.scss | 15 | ||||
-rw-r--r-- | assets/css/components/_post-list.scss | 36 |
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 | } |