Monorepo for Aesthetic.Computer
aesthetic.computer
jeffrey-platter: auto-switching light theme via prefers-color-scheme
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+17
-5
+17
-5
system/public/papers.aesthetic.computer/platter/jeffrey/index.html
+17
-5
system/public/papers.aesthetic.computer/platter/jeffrey/index.html
···
9
9
<link rel="stylesheet" href="https://aesthetic.computer/type/webfonts/berkeley-mono-variable.css">
10
10
<style>
11
11
:root {
12
+
color-scheme: dark light;
12
13
--bg: #111; --bg2: #1a1a1a; --fg: #ddd; --fg2: #888;
13
14
--accent: #ff6b9d; --accent2: #4ecdc4; --gold: #ffd93d;
14
15
--border: #333; --hover: #222;
16
+
--img-bg: #000; --img-placeholder: #222;
17
+
--lightbox-bg: rgba(0,0,0,0.95);
18
+
}
19
+
@media (prefers-color-scheme: light) {
20
+
:root {
21
+
--bg: #fafafa; --bg2: #fff; --fg: #222; --fg2: #666;
22
+
--accent: #d63384; --accent2: #0a8a82; --gold: #b8860b;
23
+
--border: #ddd; --hover: #f0f0f0;
24
+
--img-bg: #eee; --img-placeholder: #ddd;
25
+
--lightbox-bg: rgba(250,250,250,0.96);
26
+
}
15
27
}
16
28
* { margin: 0; padding: 0; box-sizing: border-box; }
17
29
html, body { background: var(--bg); color: var(--fg); }
···
66
78
.card:hover { border-color: var(--accent2); }
67
79
.card:active { transform: scale(0.99); }
68
80
.thumb-wrap {
69
-
width: 100%; aspect-ratio: 1; background: #000;
81
+
width: 100%; aspect-ratio: 1; background: var(--img-bg);
70
82
overflow: hidden; position: relative;
71
83
}
72
84
.thumb-wrap img {
73
85
width: 100%; height: 100%; object-fit: cover; display: block;
74
-
background: #222;
86
+
background: var(--img-placeholder);
75
87
}
76
88
.thumb-wrap .sim {
77
89
position: absolute; top: 4px; right: 4px;
78
90
font-size: 10px; padding: 2px 5px;
79
-
background: rgba(0,0,0,0.7); color: var(--accent2);
91
+
background: rgba(0,0,0,0.7); color: #fff;
80
92
font-variant-numeric: tabular-nums;
81
93
}
82
94
.meta {
···
97
109
/* lightbox */
98
110
#lightbox {
99
111
display: none; position: fixed; inset: 0;
100
-
background: rgba(0,0,0,0.95); z-index: 100;
112
+
background: var(--lightbox-bg); z-index: 100;
101
113
padding: 20px; overflow-y: auto;
102
114
}
103
115
#lightbox.open { display: flex; align-items: flex-start; justify-content: center; }
···
109
121
.lb-inner { grid-template-columns: minmax(0, 1fr) 360px; }
110
122
}
111
123
.lb-img {
112
-
background: #000;
124
+
background: var(--img-bg);
113
125
width: 100%;
114
126
max-height: calc(100vh - 80px);
115
127
display: flex; align-items: center; justify-content: center;