vielle.dev
[Archived] Archived WIP of vielle.dev
refactor palette injection to avoid the intermediate `--_(dark|light)-*`
+13
-57
src/pages/blog/[id].astro
+13
-57
src/pages/blog/[id].astro
···
511
511
512
512
<!-- page styles -->
513
513
<style>
514
-
:root {
515
-
color-scheme: light dark;
516
-
517
-
--bg-main: light-dark(var(--_light-bg-main), var(--_dark-bg-main));
518
-
519
-
--bg-secondary: light-dark(
520
-
var(--_light-bg-secondary),
521
-
var(--_dark-bg-secondary)
522
-
);
523
-
524
-
--bg-code: light-dark(var(--_light-bg-code), var(--_dark-bg-code));
525
-
526
-
--typo-body: light-dark(var(--_light-typo-body), var(--_dark-typo-body));
527
-
528
-
--typo-body-inv: light-dark(
529
-
var(--_dark-typo-body),
530
-
var(--_light-typo-body)
531
-
);
532
-
533
-
--typo-heading: light-dark(
534
-
var(--_light-typo-heading),
535
-
var(--_dark-typo-heading)
536
-
);
537
-
538
-
--typo-subheading: light-dark(
539
-
var(--_light-typo-subheading),
540
-
var(--_dark-typo-subheading)
541
-
);
542
-
543
-
--typo-url: light-dark(var(--_light-typo-url), var(--_dark-typo-url));
544
-
--typo-visited: light-dark(
545
-
var(--_light-typo-visited),
546
-
var(--_dark-typo-visited)
547
-
);
548
-
549
-
--typo-code: light-dark(var(--_light-typo-code), var(--_dark-typo-code));
550
-
}
551
-
552
514
header {
553
515
font-size: 1.6rem;
554
516
···
637
599
<style
638
600
set:html={`
639
601
:root {
640
-
--_light-bg-main: ${light.background.main};
641
-
--_light-bg-secondary: ${light.background.secondary};
642
-
--_light-bg-code: ${light.background.code};
643
-
--_light-typo-body: ${light.typography.body};
644
-
--_light-typo-heading: ${light.typography.heading};
645
-
--_light-typo-subheading: ${light.typography.subheading};
646
-
--_light-typo-url: ${light.typography.url};
647
-
--_light-typo-visited: ${light.typography.visited};
648
-
--_light-typo-code: ${light.typography.code};
649
-
650
-
--_dark-bg-main: ${dark.background.main};
651
-
--_dark-bg-secondary: ${dark.background.secondary};
652
-
--_dark-bg-code: ${dark.background.code};
653
-
--_dark-typo-body: ${dark.typography.body};
654
-
--_dark-typo-heading: ${dark.typography.heading};
655
-
--_dark-typo-subheading: ${dark.typography.subheading};
656
-
--_dark-typo-url: ${dark.typography.url};
657
-
--_dark-typo-visited: ${dark.typography.visited};
658
-
--_dark-typo-code: ${dark.typography.code};
602
+
color-scheme: light dark;
603
+
604
+
--bg-main: light-dark(${light.background.main}, ${dark.background.main});
605
+
--bg-secondary: light-dark(${light.background.secondary}, ${dark.background.secondary});
606
+
--bg-code: light-dark(${light.background.code}, ${dark.background.code});
659
607
608
+
--typo-body: light-dark(${light.typography.body}, ${dark.typography.body});
609
+
--typo-heading: light-dark(${light.typography.heading}, ${dark.typography.heading});
610
+
--typo-subheading: light-dark(${light.typography.subheading}, ${dark.typography.subheading});
611
+
--typo-code: light-dark(${light.typography.code}, ${dark.typography.code});
612
+
613
+
--typo-url: light-dark(${light.typography.url}, ${dark.typography.url});
614
+
--typo-visited: light-dark(${light.typography.visited}, ${dark.typography.visited});
615
+
660
616
--rainbow-0: ${rainbow[0]};
661
617
--rainbow-1: ${rainbow[1]};
662
618
--rainbow-2: ${rainbow[2]};