Restructured some variables

author: Volpeon <git@volpeon.ink> 2021-06-14 14:04:35 +0200
committer: Volpeon <git@volpeon.ink> 2021-06-14 14:04:35 +0200
commit: 01d0b3af3c0d74ca4825c40d6900c2c5280d33c4 (patch)
tree: ffbe7a90d0e6ade9223d74e6d85876a7cbef6de0 /assets
parent: More distinctive appearance for unread posts (diff)
download: volpeon.ink-01d0b3af3c0d74ca4825c40d6900c2c5280d33c4.tar.gz
volpeon.ink-01d0b3af3c0d74ca4825c40d6900c2c5280d33c4.tar.bz2
volpeon.ink-01d0b3af3c0d74ca4825c40d6900c2c5280d33c4.zip
2 files changed, 63 insertions, 45 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ba2d1fa..832c410 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -73,22 +73,31 @@ $content--width:  42rem;
                ),
            ),
-            --secondary-accent: (
+            --themes: (
-                --h:      220,
+                --link: (
-                --s:      100%,
+                    --bg-hi:  $gray1,
-                --l:      80%,
+                    --bg:     $gray2,
-                --color:  hsl(var(--colors--secondary-accent--h), var(--colors--secondary-accent--s), var(--colors--secondary-accent--l)),
+                    --bg-lo:  $gray3,
-                --strong: hsl(
+                
-                    var(--colors--secondary-accent--h),
+                    --obj-hi: $gray4,
-                    calc(var(--colors--secondary-accent--s) * 1.2),
+                    --obj:    $gray5,
-                    calc(var(--colors--secondary-accent--l) * 1.2)
+                
-                ),
+                    --fg-hi:  $gray6,
-                --faint: hsla(
+                    --fg:     $gray7,
-                    var(--colors--secondary-accent--h),
+                    --fg-lo:  $gray7,
-                    var(--colors--secondary-accent--s),
-                    var(--colors--secondary-accent--l),
-                    .1
                ),
+                --invert: (
+                    --bg-hi:  $gray7,
+                    --bg:     $gray7,
+                    --bg-lo:  $gray7,
+                
+                    --obj-hi: $gray2,
+                    --obj:    $gray2,
+                
+                    --fg-hi:  $gray1,
+                    --fg:     $gray0,
+                    --fg-lo:  $gray0,
+                )
            ),
            --focus-ring: var(--colors--fg-lo),
@@ -102,7 +111,7 @@ $content--width:  42rem;
            --link: (
                --idle: var(--colors--fg-lo),
                --colored: (
-                    --idle:    var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), //
+                    --idle:    hsl(220, 100%, 80%), //hsl(var(--colors--accent--h), 100%, 66%), //
                    --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //
                )
            ),
@@ -124,6 +133,13 @@ $content--width:  42rem;
    $gray6: hsl(220, 7%, 16%);
    $gray7: hsl(220, 7%, 0%);
+    $link-idle: hsl(220, 60%, 40%);
+    $theme-link-bg:    change-color($link-idle, $lightness: 98.8%);
+    $theme-link-obj:   rgba($link-idle, .5);
+    $theme-link-fg-hi: mix($link-idle, $gray0, 75%);
+    $theme-link-fg:    $link-idle;
    @include store((
        --colors: (
            --bg-hi:  $gray0, // Darker background
@@ -150,15 +166,31 @@ $content--width:  42rem;
                ),
            ),
-            --secondary-accent: (
+            --themes: (
-                --h:      220,
+                --link: (
-                --s:      60%,
+                    --bg-hi:  $theme-link-bg,
-                --l:      40%,
+                    --bg:     $theme-link-bg,
-                --strong: hsl(
+                    --bg-lo:  $theme-link-bg,
-                    var(--colors--secondary-accent--h),
+                
-                    var(--colors--secondary-accent--s),
+                    --obj-hi: $theme-link-obj,
-                    calc(var(--colors--secondary-accent--l) * .8)
+                    --obj:    $theme-link-obj,
+                
+                    --fg-hi:  $theme-link-fg-hi,
+                    --fg:     $theme-link-fg,
+                    --fg-lo:  $theme-link-fg,
                ),
+                --invert: (
+                    --bg-hi:  $gray7,
+                    --bg:     $gray7,
+                    --bg-lo:  $gray7,
+                
+                    --obj-hi: $gray2,
+                    --obj:    $gray2,
+                
+                    --fg-hi:  $gray1,
+                    --fg:     $gray0,
+                    --fg-lo:  $gray0,
+                )
            ),
            --select: (
@@ -168,7 +200,7 @@ $content--width:  42rem;
            --link: (
                --colored: (
-                    --idle:    var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), //
+                    --idle:    $link-idle, //hsl(var(--colors--accent--h), 100%, 66%), //
                    --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
                )
            ),
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 1a7d1bd..6fdd874 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -9,13 +9,13 @@
            --bg: prop(--colors --bg-lo, $global: true),
            --fg: prop(--colors --fg, $global: true),
            --hover: (
-                --bg: prop(--colors --fg-lo, $global: true),
+                --bg: prop(--colors --themes --invert --bg, $global: true),
-                --fg: prop(--colors --bg-hi, $global: true),
+                --fg: prop(--colors --themes --invert --fg, $global: true),
            ),
            --link: (
-                --bg:       prop(--colors --obj-hi, $global: true),
+                --bg:    prop(--colors --themes --link --bg-lo, $global: true),
-                --fg:       prop(--colors --fg-lo, $global: true),
+                --fg:    prop(--colors --themes --link --fg, $global: true),
-                --fg-faint: prop(--colors --fg, $global: true),
+                --fg-hi: prop(--colors --themes --link --fg-hi, $global: true),
            )
        )
    ));
@@ -23,20 +23,6 @@
    @include store((
        --colors: (
            --bg: prop(--colors --bg-hi, $global: true),
-            --link: (
-                --bg:       hsl(
-                    prop(--colors --secondary-accent --h, $global: true),
-                    prop(--colors --secondary-accent --s, $global: true),
-                    98.8%,
-                ),
-                --fg:       prop(--colors --secondary-accent --color, $global: true),
-                --fg-faint: hsla(
-                    prop(--colors --secondary-accent --h, $global: true),
-                    prop(--colors --secondary-accent --s, $global: true),
-                    prop(--colors --secondary-accent --l, $global: true),
-                    .75
-                ),
-            )
        )
    ), 'light');
@@ -92,7 +78,7 @@
                color:            prop(--colors --link --fg);
                small {
-                    color: prop(--colors --link --fg-faint);
+                    color: prop(--colors --link --fg-hi);
                }
            }
        }
author	Volpeon <git@volpeon.ink>	2021-06-14 14:04:35 +0200
committer	Volpeon <git@volpeon.ink>	2021-06-14 14:04:35 +0200
commit	01d0b3af3c0d74ca4825c40d6900c2c5280d33c4 (patch)
tree	ffbe7a90d0e6ade9223d74e6d85876a7cbef6de0 /assets
parent	More distinctive appearance for unread posts (diff)
download	volpeon.ink-01d0b3af3c0d74ca4825c40d6900c2c5280d33c4.tar.gz volpeon.ink-01d0b3af3c0d74ca4825c40d6900c2c5280d33c4.tar.bz2 volpeon.ink-01d0b3af3c0d74ca4825c40d6900c2c5280d33c4.zip

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index ba2d1fa..832c410 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss
@@ -73,22 +73,31 @@ $content--width: 42rem;
73	),	73	),
74	),	74	),
75		75
76	--secondary-accent: (	76	--themes: (
77	--h: 220,	77	--link: (
78	--s: 100%,	78	--bg-hi: $gray1,
79	--l: 80%,	79	--bg: $gray2,
80	--color: hsl(var(--colors--secondary-accent--h), var(--colors--secondary-accent--s), var(--colors--secondary-accent--l)),	80	--bg-lo: $gray3,
81	--strong: hsl(	81
82	var(--colors--secondary-accent--h),	82	--obj-hi: $gray4,
83	calc(var(--colors--secondary-accent--s) * 1.2),	83	--obj: $gray5,
84	calc(var(--colors--secondary-accent--l) * 1.2)	84
85	),	85	--fg-hi: $gray6,
86	--faint: hsla(	86	--fg: $gray7,
87	var(--colors--secondary-accent--h),	87	--fg-lo: $gray7,
88	var(--colors--secondary-accent--s),
89	var(--colors--secondary-accent--l),
90	.1
91	),	88	),
		89	--invert: (
		90	--bg-hi: $gray7,
		91	--bg: $gray7,
		92	--bg-lo: $gray7,
		93
		94	--obj-hi: $gray2,
		95	--obj: $gray2,
		96
		97	--fg-hi: $gray1,
		98	--fg: $gray0,
		99	--fg-lo: $gray0,
		100	)
92	),	101	),
93		102
94	--focus-ring: var(--colors--fg-lo),	103	--focus-ring: var(--colors--fg-lo),
@@ -102,7 +111,7 @@ $content--width: 42rem;
102	--link: (	111	--link: (
103	--idle: var(--colors--fg-lo),	112	--idle: var(--colors--fg-lo),
104	--colored: (	113	--colored: (
105	--idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), //	114	--idle: hsl(220, 100%, 80%), //hsl(var(--colors--accent--h), 100%, 66%), //
106	--visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //	115	--visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //
107	)	116	)
108	),	117	),
@@ -124,6 +133,13 @@ $content--width: 42rem;
124	$gray6: hsl(220, 7%, 16%);	133	$gray6: hsl(220, 7%, 16%);
125	$gray7: hsl(220, 7%, 0%);	134	$gray7: hsl(220, 7%, 0%);
126		135
		136	$link-idle: hsl(220, 60%, 40%);
		137
		138	$theme-link-bg: change-color($link-idle, $lightness: 98.8%);
		139	$theme-link-obj: rgba($link-idle, .5);
		140	$theme-link-fg-hi: mix($link-idle, $gray0, 75%);
		141	$theme-link-fg: $link-idle;
		142
127	@include store((	143	@include store((
128	--colors: (	144	--colors: (
129	--bg-hi: $gray0, // Darker background	145	--bg-hi: $gray0, // Darker background
@@ -150,15 +166,31 @@ $content--width: 42rem;
150	),	166	),
151	),	167	),
152		168
153	--secondary-accent: (	169	--themes: (
154	--h: 220,	170	--link: (
155	--s: 60%,	171	--bg-hi: $theme-link-bg,
156	--l: 40%,	172	--bg: $theme-link-bg,
157	--strong: hsl(	173	--bg-lo: $theme-link-bg,
158	var(--colors--secondary-accent--h),	174
159	var(--colors--secondary-accent--s),	175	--obj-hi: $theme-link-obj,
160	calc(var(--colors--secondary-accent--l) * .8)	176	--obj: $theme-link-obj,
		177
		178	--fg-hi: $theme-link-fg-hi,
		179	--fg: $theme-link-fg,
		180	--fg-lo: $theme-link-fg,
161	),	181	),
		182	--invert: (
		183	--bg-hi: $gray7,
		184	--bg: $gray7,
		185	--bg-lo: $gray7,
		186
		187	--obj-hi: $gray2,
		188	--obj: $gray2,
		189
		190	--fg-hi: $gray1,
		191	--fg: $gray0,
		192	--fg-lo: $gray0,
		193	)
162	),	194	),
163		195
164	--select: (	196	--select: (
@@ -168,7 +200,7 @@ $content--width: 42rem;
168		200
169	--link: (	201	--link: (
170	--colored: (	202	--colored: (
171	--idle: var(--colors--secondary-accent--color), //hsl(var(--colors--accent--h), 100%, 66%), //	203	--idle: $link-idle, //hsl(var(--colors--accent--h), 100%, 66%), //
172	--visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //	204	--visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
173	)	205	)
174	),	206	),


diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 1a7d1bd..6fdd874 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss
@@ -9,13 +9,13 @@
9	--bg: prop(--colors --bg-lo, $global: true),	9	--bg: prop(--colors --bg-lo, $global: true),
10	--fg: prop(--colors --fg, $global: true),	10	--fg: prop(--colors --fg, $global: true),
11	--hover: (	11	--hover: (
12	--bg: prop(--colors --fg-lo, $global: true),	12	--bg: prop(--colors --themes --invert --bg, $global: true),
13	--fg: prop(--colors --bg-hi, $global: true),	13	--fg: prop(--colors --themes --invert --fg, $global: true),
14	),	14	),
15	--link: (	15	--link: (
16	--bg: prop(--colors --obj-hi, $global: true),	16	--bg: prop(--colors --themes --link --bg-lo, $global: true),
17	--fg: prop(--colors --fg-lo, $global: true),	17	--fg: prop(--colors --themes --link --fg, $global: true),
18	--fg-faint: prop(--colors --fg, $global: true),	18	--fg-hi: prop(--colors --themes --link --fg-hi, $global: true),
19	)	19	)
20	)	20	)
21	));	21	));
@@ -23,20 +23,6 @@
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: (
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	)
40	)	26	)
41	), 'light');	27	), 'light');
42		28
@@ -92,7 +78,7 @@
92	color: prop(--colors --link --fg);	78	color: prop(--colors --link --fg);
93		79
94	small {	80	small {
95	color: prop(--colors --link --fg-faint);	81	color: prop(--colors --link --fg-hi);
96	}	82	}
97	}	83	}
98	}	84	}