summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-06-19 20:08:15 +0200
committerVolpeon <git@volpeon.ink>2021-06-19 20:08:15 +0200
commit86251b230e1c3b91c941ff1bbed25d9a5c8021a9 (patch)
treedec1100c2f8f5c526ec07385f327d2732aae89fe
parentMake sure page is not shorter than viewport; put card theme variables into ca... (diff)
downloadvolpeon.ink-86251b230e1c3b91c941ff1bbed25d9a5c8021a9.tar.gz
volpeon.ink-86251b230e1c3b91c941ff1bbed25d9a5c8021a9.tar.bz2
volpeon.ink-86251b230e1c3b91c941ff1bbed25d9a5c8021a9.zip
Color adjustments, improved cards
Diffstat
-rw-r--r--assets/css/_vars.scss32
-rw-r--r--assets/css/components/_card.scss63
-rw-r--r--assets/css/components/_post-list.scss2
-rw-r--r--templates/layouts/categorized_list.html6
-rw-r--r--templates/layouts/list.html6
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>
generated by cgit v1.2.3-54-g00ecf (git 2.44.0) at 2024-07-01 11:12:25 +0000