xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/morganwill.com.
morganwill.com
WIP fmllm
author
Morgan Williams
date
(Nov 26, 2025, 2:30 PM +0100)
commit
1892bdad
1892bdadfc03af9ceb85fb95eaf1b5396181abe6
parent
63b5509a
63b5509a49b41d4f19a5f66077d550078a15eadf
+94
-43
+94
-43
src/components/LinkIcons.svelte
+94
-43
src/components/LinkIcons.svelte
···
209
209
210
210
/* ===== QRS GRID MODE ===== */
211
211
.qrs-grid {
212
-
display: flex;
213
-
flex-wrap: wrap;
214
-
justify-content: center;
212
+
display: grid;
213
+
justify-items: center;
215
214
align-items: center;
215
+
justify-content: center;
216
216
align-content: center;
217
217
gap: 0.5rem;
218
218
padding: 0.5rem;
···
274
274
color: var(--highlight);
275
275
}
276
276
277
-
/* Desktop: Use CSS custom properties for sizing based on count */
278
-
/* Hero items (first 1-2) get --hero-size, others get --item-size */
277
+
/* Desktop: Optimal grid layouts for maximum QR size
278
+
Goal: distribute items evenly to maximize individual QR size
279
+
Using grid-template-columns/rows to create balanced layouts */
279
280
280
-
.qrs-grid[data-count="1"] { --hero-size: min(85vh, 85vw); }
281
-
.qrs-grid[data-count="1"] .qr-card { --qr-size: var(--hero-size); }
281
+
/* 1 item: 1x1 */
282
+
.qrs-grid[data-count="1"] {
283
+
grid-template-columns: 1fr;
284
+
--qr-size: min(80vh, 80vw);
285
+
}
286
+
287
+
/* 2 items: 2x1 */
288
+
.qrs-grid[data-count="2"] {
289
+
grid-template-columns: 1fr 1fr;
290
+
--qr-size: min(80vh, 45vw);
291
+
}
292
+
293
+
/* 3 items: 3x1 */
294
+
.qrs-grid[data-count="3"] {
295
+
grid-template-columns: repeat(3, 1fr);
296
+
--qr-size: min(80vh, 30vw);
297
+
}
298
+
299
+
/* 4 items: 2x2 */
300
+
.qrs-grid[data-count="4"] {
301
+
grid-template-columns: repeat(2, 1fr);
302
+
grid-template-rows: repeat(2, 1fr);
303
+
--qr-size: min(42vh, 45vw);
304
+
}
305
+
306
+
/* 5 items: 3x2 (one empty) */
307
+
.qrs-grid[data-count="5"] {
308
+
grid-template-columns: repeat(3, 1fr);
309
+
grid-template-rows: repeat(2, 1fr);
310
+
--qr-size: min(42vh, 30vw);
311
+
}
312
+
313
+
/* 6 items: 3x2 */
314
+
.qrs-grid[data-count="6"] {
315
+
grid-template-columns: repeat(3, 1fr);
316
+
grid-template-rows: repeat(2, 1fr);
317
+
--qr-size: min(42vh, 30vw);
318
+
}
319
+
320
+
/* 7 items: 4x2 (one empty) */
321
+
.qrs-grid[data-count="7"] {
322
+
grid-template-columns: repeat(4, 1fr);
323
+
grid-template-rows: repeat(2, 1fr);
324
+
--qr-size: min(42vh, 22vw);
325
+
}
326
+
327
+
/* 8 items: 4x2 */
328
+
.qrs-grid[data-count="8"] {
329
+
grid-template-columns: repeat(4, 1fr);
330
+
grid-template-rows: repeat(2, 1fr);
331
+
--qr-size: min(42vh, 22vw);
332
+
}
333
+
334
+
/* 9 items: 3x3 */
335
+
.qrs-grid[data-count="9"] {
336
+
grid-template-columns: repeat(3, 1fr);
337
+
grid-template-rows: repeat(3, 1fr);
338
+
--qr-size: min(28vh, 30vw);
339
+
}
282
340
283
-
.qrs-grid[data-count="2"] { --hero-size: min(80vh, 45vw); }
284
-
.qrs-grid[data-count="2"] .qr-card { --qr-size: var(--hero-size); }
341
+
/* 10 items: 4x3 (two empty) or 5x2 */
342
+
.qrs-grid[data-count="10"] {
343
+
grid-template-columns: repeat(5, 1fr);
344
+
grid-template-rows: repeat(2, 1fr);
345
+
--qr-size: min(42vh, 18vw);
346
+
}
285
347
286
-
.qrs-grid[data-count="3"] { --hero-size: min(80vh, 42vw); --item-size: min(42vh, 30vw); }
287
-
.qrs-grid[data-count="4"] { --hero-size: min(80vh, 38vw); --item-size: min(42vh, 26vw); }
288
-
.qrs-grid[data-count="5"] { --hero-size: min(80vh, 36vw); --item-size: min(42vh, 24vw); }
289
-
.qrs-grid[data-count="6"] { --hero-size: min(80vh, 32vw); --item-size: min(42vh, 22vw); }
290
-
.qrs-grid[data-count="7"] { --hero-size: min(80vh, 28vw); --item-size: min(42vh, 20vw); }
291
-
.qrs-grid[data-count="8"] { --hero-size: min(80vh, 26vw); --item-size: min(42vh, 18vw); }
292
-
.qrs-grid[data-count="9"] { --hero-size: min(80vh, 24vw); --item-size: min(42vh, 17vw); }
293
-
.qrs-grid[data-count="10"] { --hero-size: min(80vh, 22vw); --item-size: min(42vh, 16vw); }
294
-
.qrs-grid[data-count="11"] { --hero-size: min(80vh, 20vw); --item-size: min(42vh, 15vw); }
295
-
.qrs-grid[data-count="12"] { --hero-size: min(80vh, 18vw); --item-size: min(42vh, 14vw); }
348
+
/* 11 items: 4x3 (one empty) */
349
+
.qrs-grid[data-count="11"] {
350
+
grid-template-columns: repeat(4, 1fr);
351
+
grid-template-rows: repeat(3, 1fr);
352
+
--qr-size: min(28vh, 22vw);
353
+
}
296
354
297
-
/* First 1-2 items are heroes */
298
-
.qrs-grid .qr-card:nth-child(1) { --qr-size: var(--hero-size, min(70vh, 30vw)); }
299
-
.qrs-grid .qr-card:nth-child(2) { --qr-size: var(--hero-size, min(70vh, 30vw)); }
300
-
.qrs-grid .qr-card:nth-child(n+3) { --qr-size: var(--item-size, min(35vh, 18vw)); }
355
+
/* 12 items: 4x3 */
356
+
.qrs-grid[data-count="12"] {
357
+
grid-template-columns: repeat(4, 1fr);
358
+
grid-template-rows: repeat(3, 1fr);
359
+
--qr-size: min(28vh, 22vw);
360
+
}
301
361
302
-
/* Odd counts: only first item is hero */
303
-
.qrs-grid[data-count="3"] .qr-card:nth-child(2),
304
-
.qrs-grid[data-count="5"] .qr-card:nth-child(2),
305
-
.qrs-grid[data-count="7"] .qr-card:nth-child(2),
306
-
.qrs-grid[data-count="9"] .qr-card:nth-child(2),
307
-
.qrs-grid[data-count="11"] .qr-card:nth-child(2) {
308
-
--qr-size: var(--item-size);
362
+
.qr-card {
363
+
--qr-size: inherit;
309
364
}
310
365
311
366
/* ===== MOBILE ===== */
312
367
@media (max-width: 767px) {
313
368
.qrs-grid {
314
-
display: grid;
315
-
grid-template-columns: 1fr 1fr;
369
+
grid-template-columns: 1fr 1fr !important;
370
+
grid-template-rows: auto !important;
316
371
grid-auto-rows: auto;
317
372
height: auto;
318
373
min-height: 100vh;
319
374
overflow-y: auto;
320
375
align-content: start;
321
376
padding: 0.5rem;
322
-
gap: 0.5rem;
377
+
gap: 0.75rem;
323
378
}
324
379
325
380
.qr-card {
326
381
justify-self: center;
382
+
--qr-size: 44vw;
327
383
}
328
384
329
-
/* Reset desktop sizing - smaller items */
330
-
.qrs-grid .qr-card {
331
-
--qr-size: 42vw;
332
-
}
333
-
334
-
/* First item is bigger and spans full width */
385
+
/* First item spans full width and is bigger */
335
386
.qrs-grid .qr-card:nth-child(1) {
336
387
grid-column: 1 / -1;
337
-
--qr-size: 70vw;
388
+
--qr-size: 75vw;
338
389
}
339
390
340
-
/* Even counts ≥6: first 2 are big and span full width */
391
+
/* Even counts ≥6: first 2 span full width */
341
392
.qrs-grid[data-count="6"] .qr-card:nth-child(2),
342
393
.qrs-grid[data-count="8"] .qr-card:nth-child(2),
343
394
.qrs-grid[data-count="10"] .qr-card:nth-child(2),
344
395
.qrs-grid[data-count="12"] .qr-card:nth-child(2) {
345
396
grid-column: 1 / -1;
346
-
--qr-size: 70vw;
397
+
--qr-size: 75vw;
347
398
}
348
399
349
400
/* 4 or fewer: all span full width */
···
352
403
.qrs-grid[data-count="3"] .qr-card,
353
404
.qrs-grid[data-count="4"] .qr-card {
354
405
grid-column: 1 / -1;
355
-
--qr-size: 70vw;
406
+
--qr-size: 75vw;
356
407
}
357
408
358
409
.qr-card-url {