use CSS variables for colors
Hunter
Sunday, October 19th, 2025 at 10:14 PM
6 <title>memori</title>
7 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✂️</text></svg>">
8 <style>
9 + :root {
10 + --color-bg-body: #f5f5f0;
11 + --color-bg-page: #fafaf8;
12 + --color-grid-line: #d0d0d0;
13 + --color-accent: #4a90e2;
14 + --color-white: white;
15 + }
16 +
17 * {
18 margin: 0;
19 padding: 0;
21 }
22
23 body {
- background: #f5f5f0;
24 + background: var(--color-bg-body);
25 display: flex;
26 justify-content: center;
27 align-items: flex-start;
32 .page {
33 width: 8.5in;
34 height: 11in;
- background: #fafaf8;
35 + background: var(--color-bg-page);
36 position: relative;
37 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
38 transform-origin: top center;
53 width: 4mm;
54 height: 4mm;
55 box-sizing: border-box;
- border-right: 1px dashed #d0d0d0;
- border-bottom: 1px dashed #d0d0d0;
56 + border-right: 1px dashed var(--color-grid-line);
57 + border-bottom: 1px dashed var(--color-grid-line);
58 margin: 0;
59 padding: 0;
60 display: block;
61 }
62
63 .grid-cell:nth-child(-n+50) {
- border-top: 1px dashed #d0d0d0;
64 + border-top: 1px dashed var(--color-grid-line);
65 }
66
67 .grid-cell:nth-child(50n+1) {
- border-left: 1px dashed #d0d0d0;
68 + border-left: 1px dashed var(--color-grid-line);
69 }
70
71 .image-container {
74 outline: 2px solid transparent;
75 outline-offset: -2px;
76 transition: outline-color 0.2s;
- background: #fafaf8;
77 + background: var(--color-bg-page);
78 }
79
80 .image-container:hover {
- outline-color: #4a90e2;
81 + outline-color: var(--color-accent);
82 }
83
84 .image-container.dragging {
85 opacity: 0.7;
- outline-color: #4a90e2;
86 + outline-color: var(--color-accent);
87 }
88
89 .image-container.resizing {
- outline-color: #4a90e2;
90 + outline-color: var(--color-accent);
91 }
92
93 body.resizing *,
105
106 .resize-handle {
107 position: absolute;
- background: #4a90e2;
108 + background: var(--color-accent);
109 opacity: 0;
110 transition: opacity 0.2s;
111 }
127 left: 0;
128 width: 100%;
129 height: 100%;
- background: #4a90e2;
130 + background: var(--color-accent);
131 border-radius: 50%;
132 }
133
151 }
152
153 body {
- background: white;
154 + background: var(--color-white);
155 padding: 0;
156 margin: 0;
157 + display: block;
158 + align-items: initial;
159 + justify-content: initial;
160 }
161
162 .page {
165 box-shadow: none;
166 margin: 0;
167 padding: 0;
- background: white;
168 + background: var(--color-white);
169 transform: none !important;
170 + position: relative;
171 }
172
173 .grid {
174 position: absolute;
175 top: calc((11in - 264mm) / 2);
176 left: calc((8.5in - 200mm) / 2);
177 + display: grid;
178 + grid-template-columns: repeat(50, 4mm);
179 + grid-template-rows: repeat(66, 4mm);
180 }
181
182 .grid-cell {
- border-right: 1px solid #d0d0d0 !important;
- border-bottom: 1px solid #d0d0d0 !important;
183 + border-right: 1px dashed var(--color-grid-line) !important;
184 + border-bottom: 1px dashed var(--color-grid-line) !important;
185 box-sizing: border-box !important;
186 width: 4mm !important;
187 height: 4mm !important;
190 }
191
192 .grid-cell:nth-child(-n+50) {
- border-top: 1px solid #d0d0d0 !important;
193 + border-top: 1px dashed var(--color-grid-line) !important;
194 }
195
196 .grid-cell:nth-child(50n+1) {
- border-left: 1px solid #d0d0d0 !important;
197 + border-left: 1px dashed var(--color-grid-line) !important;
198 }
199
200 .image-container {
201 outline: none !important;
202 position: absolute !important;
- background: white !important;
203 + background: var(--color-white) !important;
204 }
205
206 .image-container img {