diff options
author | Volpeon <git@volpeon.ink> | 2021-06-19 20:08:15 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-06-19 20:08:15 +0200 |
commit | 86251b230e1c3b91c941ff1bbed25d9a5c8021a9 (patch) | |
tree | dec1100c2f8f5c526ec07385f327d2732aae89fe | |
parent | Make sure page is not shorter than viewport; put card theme variables into ca... (diff) | |
download | volpeon.ink-86251b230e1c3b91c941ff1bbed25d9a5c8021a9.tar.gz volpeon.ink-86251b230e1c3b91c941ff1bbed25d9a5c8021a9.tar.bz2 volpeon.ink-86251b230e1c3b91c941ff1bbed25d9a5c8021a9.zip |
Color adjustments, improved cards
-rw-r--r-- | assets/css/_vars.scss | 32 | ||||
-rw-r--r-- | assets/css/components/_card.scss | 63 | ||||
-rw-r--r-- | assets/css/components/_post-list.scss | 2 | ||||
-rw-r--r-- | templates/layouts/categorized_list.html | 6 | ||||
-rw-r--r-- | templates/layouts/list.html | 6 |
5 files changed, 59 insertions, 50 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 2377b43..e47ab8e 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -25,14 +25,14 @@ $line-height: 1.7; | |||
25 | $content--width: 42rem; | 25 | $content--width: 42rem; |
26 | 26 | ||
27 | @include iro-execute { | 27 | @include iro-execute { |
28 | $gray0: hsl(220, 7%, 7%); | 28 | $gray0: hsl(220, 5%, 7%); |
29 | $gray1: hsl(220, 7%, 11%); | 29 | $gray1: hsl(220, 5%, 11%); |
30 | $gray2: hsl(220, 7%, 18%); | 30 | $gray2: hsl(220, 5%, 17%); |
31 | $gray3: hsl(220, 7%, 23%); | 31 | $gray3: hsl(220, 5%, 23%); |
32 | $gray4: hsl(220, 7%, 38%); | 32 | $gray4: hsl(220, 5%, 38%); |
33 | $gray5: hsl(220, 7%, 60%); | 33 | $gray5: hsl(220, 5%, 60%); |
34 | $gray6: hsl(220, 7%, 76%); | 34 | $gray6: hsl(220, 5%, 76%); |
35 | $gray7: hsl(220, 7%, 100%); | 35 | $gray7: hsl(220, 5%, 100%); |
36 | 36 | ||
37 | @include store(( | 37 | @include store(( |
38 | --dims: ( | 38 | --dims: ( |
@@ -104,14 +104,14 @@ $content--width: 42rem; | |||
104 | } | 104 | } |
105 | 105 | ||
106 | @include iro-execute { | 106 | @include iro-execute { |
107 | $gray0: hsl(220, 7%, 100%); | 107 | $gray0: hsl(220, 5%, 100%); |
108 | $gray1: hsl(220, 7%, 96%); | 108 | $gray1: hsl(220, 5%, 95%); |
109 | $gray2: hsl(220, 7%, 88%); | 109 | $gray2: hsl(220, 5%, 88%); |
110 | $gray3: hsl(220, 7%, 83%); | 110 | $gray3: hsl(220, 5%, 83%); |
111 | $gray4: hsl(220, 7%, 68%); | 111 | $gray4: hsl(220, 5%, 68%); |
112 | $gray5: hsl(220, 7%, 47%); | 112 | $gray5: hsl(220, 5%, 47%); |
113 | $gray6: hsl(220, 7%, 16%); | 113 | $gray6: hsl(220, 5%, 16%); |
114 | $gray7: hsl(220, 7%, 0%); | 114 | $gray7: hsl(220, 5%, 0%); |
115 | 115 | ||
116 | @include store(( | 116 | @include store(( |
117 | --colors: ( | 117 | --colors: ( |
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 9a49cfd..c153406 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
@@ -3,39 +3,27 @@ | |||
3 | --dims: ( | 3 | --dims: ( |
4 | --pad-x: 1.1em, | 4 | --pad-x: 1.1em, |
5 | --pad-y: .8em, | 5 | --pad-y: .8em, |
6 | --hover-offset: -.5rem, | 6 | --hover-offset: -.3rem, |
7 | --indicator: ( | ||
8 | --width: 4px, | ||
9 | --height: 1em, | ||
10 | ), | ||
7 | ), | 11 | ), |
8 | --colors: ( | 12 | --colors: ( |
9 | --bg: prop(--colors --bg-lo, $global: true), | 13 | --bg: prop(--colors --bg-lo, $global: true), |
10 | --fg: prop(--colors --fg, $global: true), | 14 | --fg: prop(--colors --fg, $global: true), |
15 | --unread: prop(--colors --bg, $global: true), | ||
11 | --hover: ( | 16 | --hover: ( |
12 | --bg: prop(--colors --fg-lo, $global: true), | 17 | --bg: prop(--colors --fg-lo, $global: true), |
13 | --fg: prop(--colors --bg-hi, $global: true), | 18 | --fg: prop(--colors --bg-hi, $global: true), |
14 | ), | 19 | ), |
15 | --link: ( | ||
16 | --bg: prop(--colors --obj-hi, $global: true), | ||
17 | --fg: prop(--colors --fg-lo, $global: true), | ||
18 | --fg-hi: prop(--colors --fg, $global: true), | ||
19 | ), | ||
20 | ) | 20 | ) |
21 | )); | 21 | )); |
22 | 22 | ||
23 | @include store(( | 23 | @include store(( |
24 | --colors: ( | 24 | --colors: ( |
25 | --bg: prop(--colors --bg-hi, $global: true), | 25 | --bg: prop(--colors --bg-hi, $global: true), |
26 | --link: ( | 26 | --unread: prop(--colors --bg-lo, $global: true), |
27 | --bg: hsl( | ||
28 | #{prop(--colors --link --colored --idle-h, $global: true)}, | ||
29 | #{prop(--colors --link --colored --idle-s, $global: true)}, | ||
30 | 98.8% | ||
31 | ), | ||
32 | --fg: prop(--colors --link --colored --idle, $global: true), | ||
33 | --fg-hi: hsl( | ||
34 | #{prop(--colors --link --colored --idle-h, $global: true)}, | ||
35 | calc(#{prop(--colors --link --colored --idle-s, $global: true)} * .7), | ||
36 | calc(#{prop(--colors --link --colored --idle-l, $global: true)} * 1.3) | ||
37 | ), | ||
38 | ), | ||
39 | ) | 27 | ) |
40 | ), 'light'); | 28 | ), 'light'); |
41 | 29 | ||
@@ -84,16 +72,19 @@ | |||
84 | * { | 72 | * { |
85 | color: currentColor; | 73 | color: currentColor; |
86 | } | 74 | } |
75 | |||
76 | @include element('block') { | ||
77 | @include modifier('indicator') { | ||
78 | color: prop(--colors --hover --bg); | ||
79 | } | ||
80 | } | ||
87 | } | 81 | } |
88 | } | 82 | } |
89 | 83 | ||
90 | @include modifier('mark-visited') { | 84 | &:visited { |
91 | &:link { | 85 | @include element('block') { |
92 | background-color: prop(--colors --link --bg); | 86 | @include modifier('indicator') { |
93 | color: prop(--colors --link --fg); | 87 | color: prop(--colors --unread); |
94 | |||
95 | small { | ||
96 | color: prop(--colors --link --fg-hi); | ||
97 | } | 88 | } |
98 | } | 89 | } |
99 | } | 90 | } |
@@ -106,6 +97,20 @@ | |||
106 | flex-shrink: 1; | 97 | flex-shrink: 1; |
107 | width: 100%; | 98 | width: 100%; |
108 | } | 99 | } |
100 | |||
101 | @include modifier('indicator') { | ||
102 | transition: color .2s; | ||
103 | color: prop(--colors --bg); | ||
104 | |||
105 | &::before { | ||
106 | content: ''; | ||
107 | display: block; | ||
108 | width: prop(--dims --indicator --width); | ||
109 | height: prop(--dims --indicator --height); | ||
110 | border-radius: prop(--dims --indicator --height); | ||
111 | background-color: currentColor; | ||
112 | } | ||
113 | } | ||
109 | } | 114 | } |
110 | } | 115 | } |
111 | } | 116 | } |
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss index 922cbd9..7a3b8a0 100644 --- a/assets/css/components/_post-list.scss +++ b/assets/css/components/_post-list.scss | |||
@@ -36,7 +36,7 @@ | |||
36 | box-shadow: none; | 36 | box-shadow: none; |
37 | 37 | ||
38 | @include next-twin-element { | 38 | @include next-twin-element { |
39 | margin-top: 4px; | 39 | margin-top: 1px; |
40 | } | 40 | } |
41 | } | 41 | } |
42 | } | 42 | } |
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 00ea383..1b9b293 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html | |||
@@ -15,7 +15,8 @@ $body$ | |||
15 | <div class="c-post-list__category-content"> | 15 | <div class="c-post-list__category-content"> |
16 | $if(pages.asc_title.show_dates)$ | 16 | $if(pages.asc_title.show_dates)$ |
17 | $for(it.pages.desc_date)$ | 17 | $for(it.pages.desc_date)$ |
18 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> | 18 | <a href="$it.url.rel$" class="c-post-list__post c-card"> |
19 | <div class="c-card__block c-card__block--indicator"></div> | ||
19 | <div class="c-card__block c-card__block--main"> | 20 | <div class="c-card__block c-card__block--main"> |
20 | $it.title$ | 21 | $it.title$ |
21 | </div> | 22 | </div> |
@@ -31,7 +32,8 @@ $body$ | |||
31 | $endfor$ | 32 | $endfor$ |
32 | $else$ | 33 | $else$ |
33 | $for(it.pages.asc_title)$ | 34 | $for(it.pages.asc_title)$ |
34 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> | 35 | <a href="$it.url.rel$" class="c-post-list__post c-card"> |
36 | <div class="c-card__block c-card__block--indicator"></div> | ||
35 | <div class="c-card__block c-card__block--main"> | 37 | <div class="c-card__block c-card__block--main"> |
36 | $it.title$ | 38 | $it.title$ |
37 | </div> | 39 | </div> |
diff --git a/templates/layouts/list.html b/templates/layouts/list.html index 9fc6ebe..8794c07 100644 --- a/templates/layouts/list.html +++ b/templates/layouts/list.html | |||
@@ -10,7 +10,8 @@ $body$ | |||
10 | <div class="c-post-list__category-content"> | 10 | <div class="c-post-list__category-content"> |
11 | $if(show_dates)$ | 11 | $if(show_dates)$ |
12 | $for(pages.desc_date)$ | 12 | $for(pages.desc_date)$ |
13 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> | 13 | <a href="$it.url.rel$" class="c-post-list__post c-card"> |
14 | <div class="c-card__block c-card__block--indicator"></div> | ||
14 | <div class="c-card__block c-card__block--main"> | 15 | <div class="c-card__block c-card__block--main"> |
15 | $it.title$ | 16 | $it.title$ |
16 | </div> | 17 | </div> |
@@ -26,7 +27,8 @@ $body$ | |||
26 | $endfor$ | 27 | $endfor$ |
27 | $else$ | 28 | $else$ |
28 | $for(pages.asc_title)$ | 29 | $for(pages.asc_title)$ |
29 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> | 30 | <a href="$it.url.rel$" class="c-post-list__post c-card"> |
31 | <div class="c-card__block c-card__block--indicator"></div> | ||
30 | <div class="c-card__block c-card__block--main"> | 32 | <div class="c-card__block c-card__block--main"> |
31 | $it.title$ | 33 | $it.title$ |
32 | </div> | 34 | </div> |