diff options
Diffstat (limited to 'assets/css/components')
| -rw-r--r-- | assets/css/components/_card.scss | 30 | ||||
| -rw-r--r-- | assets/css/components/_post-list.scss | 9 |
2 files changed, 30 insertions, 9 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index eeaa7c1..1a7d1bd 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
| @@ -11,6 +11,11 @@ | |||
| 11 | --hover: ( | 11 | --hover: ( |
| 12 | --bg: prop(--colors --fg-lo, $global: true), | 12 | --bg: prop(--colors --fg-lo, $global: true), |
| 13 | --fg: prop(--colors --bg-hi, $global: true), | 13 | --fg: prop(--colors --bg-hi, $global: true), |
| 14 | ), | ||
| 15 | --link: ( | ||
| 16 | --bg: prop(--colors --obj-hi, $global: true), | ||
| 17 | --fg: prop(--colors --fg-lo, $global: true), | ||
| 18 | --fg-faint: prop(--colors --fg, $global: true), | ||
| 14 | ) | 19 | ) |
| 15 | ) | 20 | ) |
| 16 | )); | 21 | )); |
| @@ -18,6 +23,20 @@ | |||
| 18 | @include store(( | 23 | @include store(( |
| 19 | --colors: ( | 24 | --colors: ( |
| 20 | --bg: prop(--colors --bg-hi, $global: true), | 25 | --bg: prop(--colors --bg-hi, $global: true), |
| 26 | --link: ( | ||
| 27 | --bg: hsl( | ||
| 28 | prop(--colors --secondary-accent --h, $global: true), | ||
| 29 | prop(--colors --secondary-accent --s, $global: true), | ||
| 30 | 98.8%, | ||
| 31 | ), | ||
| 32 | --fg: prop(--colors --secondary-accent --color, $global: true), | ||
| 33 | --fg-faint: hsla( | ||
| 34 | prop(--colors --secondary-accent --h, $global: true), | ||
| 35 | prop(--colors --secondary-accent --s, $global: true), | ||
| 36 | prop(--colors --secondary-accent --l, $global: true), | ||
| 37 | .75 | ||
| 38 | ), | ||
| 39 | ) | ||
| 21 | ) | 40 | ) |
| 22 | ), 'light'); | 41 | ), 'light'); |
| 23 | 42 | ||
| @@ -67,6 +86,17 @@ | |||
| 67 | } | 86 | } |
| 68 | } | 87 | } |
| 69 | 88 | ||
| 89 | @include modifier('mark-visited') { | ||
| 90 | &:link { | ||
| 91 | background-color: prop(--colors --link --bg); | ||
| 92 | color: prop(--colors --link --fg); | ||
| 93 | |||
| 94 | small { | ||
| 95 | color: prop(--colors --link --fg-faint); | ||
| 96 | } | ||
| 97 | } | ||
| 98 | } | ||
| 99 | |||
| 70 | @include element('content') { | 100 | @include element('content') { |
| 71 | box-sizing: border-box; | 101 | box-sizing: border-box; |
| 72 | width: 100%; | 102 | width: 100%; |
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss index 9220d1c..922cbd9 100644 --- a/assets/css/components/_post-list.scss +++ b/assets/css/components/_post-list.scss | |||
| @@ -4,10 +4,6 @@ | |||
| 4 | --cat: ( | 4 | --cat: ( |
| 5 | --fg: prop(--colors --fg-lo, $global: true), | 5 | --fg: prop(--colors --fg-lo, $global: true), |
| 6 | ), | 6 | ), |
| 7 | --post: ( | ||
| 8 | --idle-fg: prop(--colors --fg-lo, $global: true), | ||
| 9 | --visited-fg: prop(--colors --fg, $global: true), | ||
| 10 | ), | ||
| 11 | --meta: ( | 7 | --meta: ( |
| 12 | --fg: prop(--colors --fg-hi, $global: true), | 8 | --fg: prop(--colors --fg-hi, $global: true), |
| 13 | ) | 9 | ) |
| @@ -38,11 +34,6 @@ | |||
| 38 | 34 | ||
| 39 | @include element('post') { | 35 | @include element('post') { |
| 40 | box-shadow: none; | 36 | box-shadow: none; |
| 41 | color: prop(--colors --post --idle-fg); | ||
| 42 | |||
| 43 | &:visited { | ||
| 44 | color: prop(--colors --post --visited-fg); | ||
| 45 | } | ||
| 46 | 37 | ||
| 47 | @include next-twin-element { | 38 | @include next-twin-element { |
| 48 | margin-top: 4px; | 39 | margin-top: 4px; |
