summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-06-14 12:12:02 +0200
committerVolpeon <git@volpeon.ink>2021-06-14 12:12:02 +0200
commit2741a01ba1bf85ddcabd658c092ee0681d8b1142 (patch)
tree8d90f664cc5a9e64077d2eb89ad86e7b76332f21 /assets/css
parentLower contrast for fg-hi in light mode (diff)
downloadvolpeon.ink-2741a01ba1bf85ddcabd658c092ee0681d8b1142.tar.gz
volpeon.ink-2741a01ba1bf85ddcabd658c092ee0681d8b1142.tar.bz2
volpeon.ink-2741a01ba1bf85ddcabd658c092ee0681d8b1142.zip
More distinctive appearance for unread posts
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_vars.scss52
-rw-r--r--assets/css/components/_card.scss30
-rw-r--r--assets/css/components/_post-list.scss9
-rw-r--r--assets/css/scopes/_body.scss3
4 files changed, 78 insertions, 16 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 7a5ed5c..ba2d1fa 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -60,8 +60,35 @@ $content--width: 42rem;
60 --s: 84%, 60 --s: 84%,
61 --l: 55%, 61 --l: 55%,
62 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), 62 --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
63 --strong: hsl(var(--colors--accent--h), calc(var(--colors--accent--s) * 1.2), calc(var(--colors--accent--l) * 1.2)), 63 --strong: hsl(
64 --faint: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .1), 64 var(--colors--accent--h),
65 calc(var(--colors--accent--s) * 1.2),
66 calc(var(--colors--accent--l) * 1.2)
67 ),
68 --faint: hsla(
69 var(--colors--accent--h),
70 var(--colors--accent--s),
71 var(--colors--accent--l),
72 .1
73 ),
74 ),
75
76 --secondary-accent: (
77 --h: 220,
78 --s: 100%,
79 --l: 80%,
80 --color: hsl(var(--colors--secondary-accent--h), var(--colors--secondary-accent--s), var(--colors--secondary-accent--l)),
81 --strong: hsl(
82 var(--colors--secondary-accent--h),
83 calc(var(--colors--secondary-accent--s) * 1.2),
84 calc(var(--colors--secondary-accent--l) * 1.2)
85 ),
86 --faint: hsla(
87 var(--colors--secondary-accent--h),
88 var(--colors--secondary-accent--s),
89 var(--colors--secondary-accent--l),
90 .1
91 ),
65 ), 92 ),
66 93
67 --focus-ring: var(--colors--fg-lo), 94 --focus-ring: var(--colors--fg-lo),
@@ -75,7 +102,7 @@ $content--width: 42rem;
75 --link: ( 102 --link: (
76 --idle: var(--colors--fg-lo), 103 --idle: var(--colors--fg-lo),
77 --colored: ( 104 --colored: (
78 --idle: hsl(220, 100%, 80%), //hsl(var(--colors--accent--h), 100%, 66%), // 105 --idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), //
79 --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), // 106 --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //
80 ) 107 )
81 ), 108 ),
@@ -116,7 +143,22 @@ $content--width: 42rem;
116 --h: 354, 143 --h: 354,
117 --s: 74%, 144 --s: 74%,
118 --l: 48%, 145 --l: 48%,
119 --strong: hsl(var(--colors--accent--h), var(--colors--accent--s), calc(var(--colors--accent--l) * .8)), 146 --strong: hsl(
147 var(--colors--accent--h),
148 var(--colors--accent--s),
149 calc(var(--colors--accent--l) * .8)
150 ),
151 ),
152
153 --secondary-accent: (
154 --h: 220,
155 --s: 60%,
156 --l: 40%,
157 --strong: hsl(
158 var(--colors--secondary-accent--h),
159 var(--colors--secondary-accent--s),
160 calc(var(--colors--secondary-accent--l) * .8)
161 ),
120 ), 162 ),
121 163
122 --select: ( 164 --select: (
@@ -126,7 +168,7 @@ $content--width: 42rem;
126 168
127 --link: ( 169 --link: (
128 --colored: ( 170 --colored: (
129 --idle: hsl(220, 60%, 40%), //hsl(var(--colors--accent--h), 100%, 66%), // 171 --idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), //
130 --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), // 172 --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
131 ) 173 )
132 ), 174 ),
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;
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 3a552f9..46b829b 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -2,7 +2,7 @@
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --meta: ( 4 --meta: (
5 --fg: prop(--colors --fg, $global: true), 5 --fg: prop(--colors --fg-hi, $global: true),
6 --bg: prop(--colors --bg-lo, $global: true), 6 --bg: prop(--colors --bg-lo, $global: true),
7 ), 7 ),
8 --code: ( 8 --code: (
@@ -22,7 +22,6 @@
22 @include store(( 22 @include store((
23 --colors: ( 23 --colors: (
24 --meta: ( 24 --meta: (
25 --fg: prop(--colors --fg-hi, $global: true),
26 --bg: prop(--colors --bg, $global: true), 25 --bg: prop(--colors --bg, $global: true),
27 ), 26 ),
28 --code: ( 27 --code: (
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 19:37:37 +0000