Website for the Lede browser extension.
Dark mode tokens, theme-color meta, summarizer logo
+67
-7
+2
src/layouts/BaseLayout.astro
+2
src/layouts/BaseLayout.astro
···
25
25
<head>
26
26
<meta charset="UTF-8" />
27
27
<meta name="viewport" content="width=device-width, initial-scale=1" />
28
+
<meta name="theme-color" content="#f4f1eb" media="(prefers-color-scheme: light)" />
29
+
<meta name="theme-color" content="#1c1b19" media="(prefers-color-scheme: dark)" />
28
30
<meta name="generator" content={Astro.generator} />
29
31
<title>{title}</title>
30
32
<meta name="description" content={description} />
+47
-7
src/styles/global.css
+47
-7
src/styles/global.css
···
75
75
76
76
--focus-ring: 2px solid var(--color-brand);
77
77
--focus-offset: 2px;
78
+
79
+
/* Elevation (neutral black/alpha — not tied to --color-ink, so shadows work in dark mode) */
80
+
--shadow-card-edge: oklch(0% 0 0 / 0.07);
81
+
--shadow-card-soft: oklch(0% 0 0 / 0.11);
82
+
--shadow-popup:
83
+
0 0 0 1px oklch(0% 0 0 / 0.07), 0 10px 24px oklch(0% 0 0 / 0.07), 0 28px 70px oklch(0% 0 0 / 0.11);
84
+
}
85
+
86
+
@media (prefers-color-scheme: dark) {
87
+
:root {
88
+
--color-canvas: oklch(17.2% 0.014 var(--hue-brand));
89
+
--color-subtle: oklch(20.8% 0.016 var(--hue-brand));
90
+
--color-border: oklch(28% 0.018 var(--hue-brand));
91
+
--color-border-hover: oklch(36% 0.02 var(--hue-brand));
92
+
--color-ink: oklch(95.5% 0.012 85);
93
+
--color-ink-secondary: oklch(83% 0.014 78);
94
+
--color-ink-muted: oklch(56% 0.022 70);
95
+
--color-surface: oklch(21.2% 0.014 var(--hue-brand));
96
+
97
+
--color-brand: oklch(69% 0.19 38);
98
+
--color-brand-hover: oklch(75% 0.195 40);
99
+
--color-brand-active: oklch(61% 0.17 38);
100
+
--color-on-brand: oklch(14% 0.02 42);
101
+
102
+
--color-link: oklch(78% 0.04 72);
103
+
--color-link-hover: oklch(82% 0.12 48);
104
+
105
+
/* Privacy band: slightly lifted warm slab vs page canvas */
106
+
--color-dark-canvas: oklch(23.5% 0.017 var(--hue-ink));
107
+
--color-dark-subtle: oklch(27% 0.016 var(--hue-ink));
108
+
--color-dark-border: oklch(35% 0.015 var(--hue-ink));
109
+
--color-dark-ink: oklch(96.5% 0.01 85);
110
+
--color-dark-ink-secondary: oklch(87% 0.016 78);
111
+
112
+
--shadow-card-edge: oklch(100% 0 0 / 0.08);
113
+
--shadow-card-soft: oklch(0% 0 0 / 0.42);
114
+
--shadow-popup:
115
+
0 0 0 1px oklch(100% 0 0 / 0.1), 0 12px 28px oklch(0% 0 0 / 0.42),
116
+
0 28px 72px oklch(0% 0 0 / 0.52);
117
+
}
118
+
119
+
.section--dark .eyebrow {
120
+
color: oklch(76% 0.055 55);
121
+
}
78
122
}
79
123
80
124
*,
···
85
129
86
130
html {
87
131
scroll-behavior: smooth;
132
+
color-scheme: light dark;
88
133
}
89
134
90
135
@media (prefers-reduced-motion: reduce) {
···
684
729
border: 1px solid var(--color-border);
685
730
background: var(--color-surface);
686
731
overflow: hidden;
687
-
box-shadow:
688
-
0 1px 0 color-mix(in oklch, var(--color-ink) 5%, transparent),
689
-
0 18px 48px color-mix(in oklch, var(--color-ink) 6%, transparent);
732
+
box-shadow: 0 1px 0 var(--shadow-card-edge), 0 18px 48px var(--shadow-card-soft);
690
733
}
691
734
692
735
.hero-proof__frame img {
···
718
761
border: 0;
719
762
border-radius: 12px;
720
763
color-scheme: light dark;
721
-
box-shadow:
722
-
0 0 0 1px color-mix(in oklch, var(--color-ink) 7%, transparent),
723
-
0 10px 24px color-mix(in oklch, var(--color-ink) 8%, transparent),
724
-
0 28px 70px color-mix(in oklch, var(--color-ink) 12%, transparent);
764
+
box-shadow: var(--shadow-popup);
725
765
}
726
766
727
767
@media (max-width: 440px) {
+18
summarizer-logo.svg
+18
summarizer-logo.svg
···
1
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
+
<svg width="100%" height="100%" viewBox="0 0 977 991" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
4
+
<g transform="matrix(1,0,0,1,-11.519101,-4.302677)">
5
+
<g transform="matrix(2.027972,-0.74918,1.054507,2.854468,-1603.42661,-924.299392)">
6
+
<path d="M663.298,595.273L530.287,595.273C513.571,595.273 500,585.631 500,573.755C500,561.879 513.571,552.237 530.287,552.237L747.548,552.237L663.298,595.273ZM831.392,552.237L844.443,552.237C861.159,552.237 874.731,561.879 874.731,573.755C874.731,585.631 861.159,595.273 844.443,595.273L786.277,595.273L827.495,557.238C829.179,555.684 830.476,553.997 831.392,552.237Z" style="fill:rgb(169,180,196);"/>
7
+
</g>
8
+
<g transform="matrix(2.027972,-0.74918,1.054507,2.854468,-1498.98627,-641.587531)">
9
+
<path d="M626.413,595.273L530.287,595.273C513.571,595.273 500,585.631 500,573.755C500,561.879 513.571,552.237 530.287,552.237L556.32,552.237C552.553,556.112 550.878,560.915 551.846,565.73C553.255,572.737 560.026,578.608 569.419,580.966L626.413,595.273ZM789.57,552.237L844.443,552.237C861.159,552.237 874.731,561.879 874.731,573.755C874.731,585.631 861.159,595.273 844.443,595.273L836.848,595.273C839.697,593.698 842.531,592.114 845.35,590.522C853.685,585.814 857.297,578.042 854.548,570.734C851.798,563.425 843.21,557.971 832.68,556.845L789.57,552.237Z" style="fill:rgb(169,180,196);"/>
10
+
</g>
11
+
<g transform="matrix(2.027972,-0.74918,1.054507,2.854468,-1394.54593,-358.87567)">
12
+
<path d="M504.708,585.276C501.727,581.944 500,577.992 500,573.755C500,561.879 513.571,552.237 530.287,552.237L553.945,552.237L504.708,585.276ZM720.969,552.237L844.443,552.237C861.159,552.237 874.731,561.879 874.731,573.755C874.731,585.631 861.159,595.273 844.443,595.273L606.723,595.273C646.502,581.938 684.62,567.613 720.969,552.237Z" style="fill:rgb(169,180,196);"/>
13
+
</g>
14
+
<g transform="matrix(2.061595,0.357455,-0.357455,2.061595,-342.211752,-730.395512)">
15
+
<path d="M520.828,281.713L496.332,468.258L618.867,419.852C623.264,418.115 628.272,419.151 631.619,422.489C634.966,425.827 636.015,430.832 634.29,435.233C591.046,545.573 527.57,652.425 447.165,756.331C443.667,760.853 437.444,762.24 432.356,759.633C427.268,757.027 424.759,751.165 426.385,745.684L487.827,538.566L392.453,556.504C388.107,557.321 383.666,555.656 380.929,552.182C378.192,548.709 377.611,544.002 379.422,539.967L498.215,275.303C500.629,269.926 506.62,267.132 512.291,268.739C517.961,270.347 521.595,275.869 520.828,281.713Z" style="fill:rgb(241,91,47);"/>
16
+
</g>
17
+
</g>
18
+
</svg>
