this repo has no description
fix: Youtube rendering and colors
+101
-25
+91
-3
internal/assets/css/screen.css
+91
-3
internal/assets/css/screen.css
···
18
18
--img-placeholder: #bbb;
19
19
--author-color: #aaa;
20
20
--link-color: #2c6e2f;
21
-
--quote-color: #d5b;
21
+
--quote-color: #d65a00;
22
22
--header-color: #aaa;
23
23
24
24
/* OG Preview (Cards) */
···
64
64
--img-placeholder: #333;
65
65
--author-color: #888;
66
66
--link-color: #66bb6a;
67
-
--quote-color: #e6c;
67
+
--quote-color: #ffb74d;
68
68
--header-color: #888;
69
69
70
70
/* OG Preview (Cards) */
···
377
377
position: relative;
378
378
/* Match OG Card properties */
379
379
max-width: 600px;
380
+
width: 100%;
380
381
margin-top: 8px;
381
382
background: #000;
382
383
···
423
424
width: 100%;
424
425
text-align: left;
425
426
padding-bottom: 20px;
427
+
}
428
+
429
+
#navigation a {
430
+
color: var(--text-main);
431
+
text-decoration: none;
432
+
transition: color 0.2s;
433
+
}
434
+
435
+
#navigation a:hover {
436
+
color: var(--link-color);
426
437
}
427
438
428
439
/* Slack-like Link Preview Styles */
···
483
494
484
495
.og-image {
485
496
position: relative; /* For absolute positioning of play button */
486
-
display: inline-block;
497
+
display: block;
487
498
}
488
499
489
500
.og-image.is-video {
···
553
564
text-decoration: underline;
554
565
color: #666;
555
566
}
567
+
568
+
/* Material Symbols Sizing */
569
+
.material-symbols-rounded {
570
+
font-variation-settings:
571
+
'FILL' 0,
572
+
'wght' 400,
573
+
'GRAD' 0,
574
+
'opsz' 24;
575
+
font-size: 20px; /* Default matches previous SVG size */
576
+
}
577
+
578
+
/* Mobile Responsiveness */
579
+
@media (max-width: 768px) {
580
+
#page {
581
+
display: block; /* Stack everything */
582
+
padding: 15px; /* Reduce padding */
583
+
width: 100%;
584
+
max-width: 100%;
585
+
}
586
+
587
+
#masthead {
588
+
font-size: 48px; /* Smaller title */
589
+
line-height: 1.1;
590
+
flex-direction: column;
591
+
align-items: flex-start;
592
+
}
593
+
594
+
#theme-toggle {
595
+
position: absolute;
596
+
top: 0;
597
+
right: 0;
598
+
margin-top: 0;
599
+
}
600
+
601
+
#sidebar {
602
+
margin-bottom: 40px;
603
+
}
604
+
605
+
/* Date Widget Reset for Mobile */
606
+
.date-icon {
607
+
margin-top: 0;
608
+
margin-left: 0;
609
+
float: none;
610
+
width: 100%;
611
+
text-align: left;
612
+
margin-bottom: 15px;
613
+
display: flex;
614
+
align-items: center;
615
+
gap: 10px;
616
+
}
617
+
618
+
.date-meta {
619
+
position: static;
620
+
transform: none;
621
+
display: inline-block;
622
+
width: auto;
623
+
}
624
+
625
+
.date-date {
626
+
display: inline-block;
627
+
font-size: 24px; /* Smaller date number */
628
+
}
629
+
630
+
.date-day, .date-month, .date-year {
631
+
display: inline-block;
632
+
font-size: 14px;
633
+
margin-left: 5px;
634
+
}
635
+
636
+
.quote {
637
+
padding-left: 15px; /* Reduce quote padding */
638
+
}
639
+
640
+
.youtube-embed-wrapper {
641
+
max-width: 100%;
642
+
}
643
+
}
+3
-3
internal/handler/handlers.go
+3
-3
internal/handler/handlers.go
···
329
329
}
330
330
331
331
if iParam != "" || i > 1 {
332
-
navP = fmt.Sprintf(`<a href="?i=%d%s"><img src="/img/prev.png" border="0" alt="" /></a>`, i+1, posterParam)
333
-
navN = fmt.Sprintf(` <a href="?i=%d%s"><img src="/img/next.png" border="0" alt="" /></a>`, i-1, posterParam)
332
+
navP = fmt.Sprintf(`<a href="?i=%d%s" style="text-decoration:none;"><span class="material-symbols-rounded" style="font-size: 36px; vertical-align: middle;">chevron_left</span></a>`, i+1, posterParam)
333
+
navN = fmt.Sprintf(` <a href="?i=%d%s" style="text-decoration:none;"><span class="material-symbols-rounded" style="font-size: 36px; vertical-align: middle;">chevron_right</span></a>`, i-1, posterParam)
334
334
} else {
335
-
navP = fmt.Sprintf(`<a href="?i=2%s"><img src="/img/prev.png" border="0" alt="" /></a>`, posterParam)
335
+
navP = fmt.Sprintf(`<a href="?i=2%s" style="text-decoration:none;"><span class="material-symbols-rounded" style="font-size: 36px; vertical-align: middle;">chevron_left</span></a>`, posterParam)
336
336
}
337
337
if i == 1 {
338
338
navN = ""
+2
internal/handler/preview.go
+2
internal/handler/preview.go
+5
-19
internal/templates/views/index.html
+5
-19
internal/templates/views/index.html
···
5
5
<link
6
6
rel="stylesheet"
7
7
href="/css/screen.css"
8
-
type="text/css"
9
8
media="screen"
10
9
/>
10
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
11
11
12
12
<!-- Theme Init -->
13
13
<script>
···
50
50
return;
51
51
}
52
52
53
-
// Skip OG preview for YouTube links (they're embedded directly)
54
-
if (url.match(/youtube\.com|youtu\.be/i)) {
55
-
return;
56
-
}
53
+
57
54
58
55
// Ensure URL has protocol
59
56
if (!url.match(/^https?:\/\//)) {
···
212
209
<div id="masthead">
213
210
<a href="/">tumblefish.</a>
214
211
<button id="theme-toggle" aria-label="Toggle Dark Mode">
215
-
<svg
216
-
width="20"
217
-
height="20"
218
-
viewBox="0 0 24 24"
219
-
fill="none"
220
-
stroke="currentColor"
221
-
stroke-width="2"
222
-
stroke-linecap="round"
223
-
stroke-linejoin="round"
224
-
>
225
-
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
226
-
</svg>
212
+
<span class="material-symbols-rounded">contrast</span>
227
213
</button>
228
214
</div>
229
215
···
285
271
<path
286
272
fill-rule="evenodd"
287
273
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
288
-
></path></svg
289
-
>. {{if .GitCommit}} Revision:
274
+
></path></svg>
275
+
{{if .GitCommit}} Revision:
290
276
<a href="{{.GitCommitURL}}">{{.GitCommit}}</a>{{end}}
291
277
</div>
292
278