krz/michelangelo
A Tumblr web client.
clone: git clone https://gitbay.org/krz/michelangelo.git
1/* ── Variables ───────────────────────────────────────────── */
2:root {
3 --bg: #f4f4f4;
4 --surface: #ffffff;
5 --text: #111111;
6 --muted: #666666;
7 --accent: #e0245e;
8 --nav-bg: #ffffff;
9 --border: #e0e0e0;
10 --overlay: rgba(0,0,0,0.85);
11 --gap: 8px;
12 --col-width: 280px;
13}
14
15@media (prefers-color-scheme: dark) {
16 :root {
17 --bg: #0f0f0f;
18 --surface: #1a1a1a;
19 --text: #f0f0f0;
20 --muted: #888888;
21 --accent: #ff4d80;
22 --nav-bg: #111111;
23 --border: #2a2a2a;
24 }
25}
26
27/* ── Reset / Base ────────────────────────────────────────── */
28*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
29
30html { font-size: 15px; }
31
32body {
33 background: var(--bg);
34 color: var(--text);
35 font-family: system-ui, -apple-system, sans-serif;
36 min-height: 100vh;
37}
38
39a { color: inherit; text-decoration: none; }
40a:hover { text-decoration: underline; }
41img, video { display: block; width: 100%; height: auto; }
42
43/* ── Nav ─────────────────────────────────────────────────── */
44nav {
45 position: sticky;
46 top: 0;
47 z-index: 100;
48 background: var(--nav-bg);
49 border-bottom: 1px solid var(--border);
50 display: flex;
51 align-items: center;
52 gap: 1rem;
53 padding: 0.6rem 1.2rem;
54 flex-wrap: wrap;
55}
56
57.brand {
58 font-weight: 700;
59 font-size: 1.1rem;
60 letter-spacing: -0.02em;
61 color: var(--accent);
62 flex-shrink: 0;
63}
64.brand:hover { text-decoration: none; }
65
66.nav-links {
67 display: flex;
68 align-items: center;
69 gap: 1rem;
70 flex-wrap: wrap;
71 margin-left: auto;
72}
73
74.nav-blogname {
75 font-size: 0.85rem;
76 color: var(--muted);
77}
78
79.type-filter { display: flex; gap: 0.4rem; }
80.type-filter a {
81 font-size: 0.8rem;
82 padding: 0.25rem 0.6rem;
83 border-radius: 999px;
84 border: 1px solid var(--border);
85 color: var(--muted);
86 transition: all 0.15s;
87}
88.type-filter a.active,
89.type-filter a:hover {
90 background: var(--accent);
91 border-color: var(--accent);
92 color: #fff;
93 text-decoration: none;
94}
95
96.search-form input {
97 background: var(--surface);
98 border: 1px solid var(--border);
99 border-radius: 999px;
100 color: var(--text);
101 font-size: 0.8rem;
102 padding: 0.25rem 0.75rem;
103 outline: none;
104 width: 160px;
105 transition: border-color 0.15s, width 0.2s;
106}
107.search-form input:focus {
108 border-color: var(--accent);
109 width: 200px;
110}
111
112.nav-logout {
113 font-size: 0.8rem;
114 color: var(--muted);
115}
116
117/* ── Main / Grid ─────────────────────────────────────────── */
118main { padding: var(--gap); }
119
120.page-header {
121 font-size: 1rem;
122 font-weight: 500;
123 color: var(--muted);
124 padding: 0.75rem 0.25rem 0.5rem;
125}
126
127/* True CSS masonry using column-count */
128.masonry-grid {
129 column-count: auto;
130 column-width: var(--col-width);
131 column-gap: var(--gap);
132}
133
134.post-card {
135 break-inside: avoid;
136 margin-bottom: var(--gap);
137 background: var(--surface);
138 border-radius: 4px;
139 overflow: hidden;
140 cursor: pointer;
141 position: relative;
142 transition: transform 0.15s, box-shadow 0.15s;
143}
144
145.post-card:hover {
146 transform: translateY(-2px);
147 box-shadow: 0 6px 20px rgba(0,0,0,0.15);
148}
149
150@media (prefers-color-scheme: dark) {
151 .post-card:hover {
152 box-shadow: 0 6px 20px rgba(0,0,0,0.5);
153 }
154}
155
156.post-card img,
157.post-card video {
158 width: 100%;
159 height: auto;
160 display: block;
161}
162
163.post-card .post-meta {
164 position: absolute;
165 bottom: 0;
166 left: 0;
167 right: 0;
168 padding: 0.4rem 0.6rem;
169 background: linear-gradient(transparent, rgba(0,0,0,0.6));
170 display: flex;
171 align-items: center;
172 justify-content: space-between;
173 opacity: 0;
174 transition: opacity 0.15s;
175}
176
177.post-card:hover .post-meta { opacity: 1; }
178
179.post-meta .blog-name {
180 font-size: 0.75rem;
181 color: #fff;
182 font-weight: 500;
183}
184
185.post-meta .note-count {
186 font-size: 0.7rem;
187 color: rgba(255,255,255,0.75);
188}
189
190/* ── Loader / Sentinel ───────────────────────────────────── */
191.loader {
192 display: flex;
193 justify-content: center;
194 gap: 6px;
195 padding: 2rem;
196}
197.loader span {
198 width: 8px; height: 8px;
199 border-radius: 50%;
200 background: var(--accent);
201 animation: bounce 0.9s infinite alternate;
202}
203.loader span:nth-child(2) { animation-delay: 0.2s; }
204.loader span:nth-child(3) { animation-delay: 0.4s; }
205
206@keyframes bounce {
207 from { opacity: 0.3; transform: translateY(0); }
208 to { opacity: 1; transform: translateY(-6px); }
209}
210
211.hidden { display: none !important; }
212
213.end-message {
214 text-align: center;
215 color: var(--muted);
216 font-size: 0.8rem;
217 padding: 2rem;
218}
219
220#sentinel { height: 100px; }
221
222/* ── Lightbox ────────────────────────────────────────────── */
223.lightbox {
224 position: fixed;
225 inset: 0;
226 z-index: 1000;
227 background: var(--overlay);
228 display: flex;
229 flex-direction: column;
230 align-items: center;
231 justify-content: center;
232}
233
234.lightbox-media {
235 max-width: 90vw;
236 max-height: 80vh;
237 display: flex;
238 align-items: center;
239 justify-content: center;
240}
241
242.lightbox-media img,
243.lightbox-media video {
244 max-width: 90vw;
245 max-height: 80vh;
246 width: auto;
247 height: auto;
248 object-fit: contain;
249 border-radius: 2px;
250}
251
252.lightbox-close {
253 position: absolute;
254 top: 1rem; right: 1rem;
255 background: none; border: none;
256 color: #fff; font-size: 1.5rem;
257 cursor: pointer; opacity: 0.7;
258 transition: opacity 0.15s;
259}
260.lightbox-close:hover { opacity: 1; }
261
262.lightbox-prev,
263.lightbox-next {
264 position: absolute;
265 top: 50%; transform: translateY(-50%);
266 background: rgba(255,255,255,0.1);
267 border: none; color: #fff;
268 font-size: 2rem; width: 2.5rem; height: 5rem;
269 cursor: pointer; border-radius: 4px;
270 transition: background 0.15s;
271 display: flex; align-items: center; justify-content: center;
272}
273.lightbox-prev { left: 1rem; }
274.lightbox-next { right: 1rem; }
275.lightbox-prev:hover,
276.lightbox-next:hover { background: rgba(255,255,255,0.2); }
277
278.lightbox-actions {
279 display: flex;
280 gap: 0.75rem;
281 margin-top: 1rem;
282}
283
284.lightbox-actions button,
285.lightbox-actions a {
286 background: rgba(255,255,255,0.1);
287 border: 1px solid rgba(255,255,255,0.2);
288 color: #fff;
289 padding: 0.35rem 0.9rem;
290 border-radius: 999px;
291 font-size: 0.8rem;
292 cursor: pointer;
293 transition: background 0.15s;
294 text-decoration: none;
295}
296.lightbox-actions button:hover,
297.lightbox-actions a:hover { background: rgba(255,255,255,0.25); }
298
299.btn-like.liked { color: var(--accent); border-color: var(--accent); }