1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAYA TODAY // Заглавная</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet">
<link href="/output.css" rel="stylesheet">
</head>
<body data-theme="night" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-col">
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<div class="absolute star z-0">*</div>
<script>
function switchTheme(theme) {
if (theme == "" || typeof theme == "undefined") {
const currentTheme = document.body.getAttribute('data-theme');
switch (currentTheme) {
case "olive": theme = "lettuce"; break;
case "lettuce": theme = "night"; break;
case "night": theme = "olive"; break;
}
}
// localStorage.setItem('theme', theme);
document.body.setAttribute('data-theme', theme);
}
const savedTheme = 'night';
switchTheme(savedTheme);
</script>
<div class="p-4 w-6/12 h-4/12 z-1 rounded-4xl bg-background-dark flex flex-col mx-auto my-auto opacity-70">
<p class="font-patua mx-auto text-4xl mt-2 mb-4">saya.today</p>
<div class="w-10/12 grow bg-background-light flex flex-col mx-auto mb-4 overflow-y-auto opacity-100">
{{- range .BlogPages }}
<div class="m-2 min-h-16 flex flex-row justify-center justify-items-center gap-4">
<img style="flex-grow: 0;" class="flex-1 object-cover w-16 h-16 rounded-4xl select-none" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
<div class="flex-5 justify-self-center flex-col border-r-1 border-dashed border-opacity-50 border-main-medium">
<a href="/blog/{{ .Link }}" class="block font-extrabold">{{ .Title }}</a>
<a href="/blog/{{ .Link }}" class="block italic text-secondary">{{ .ActionDate }}</a>
<p>{{ .ShortDescription }}</p>
</div>
<div class="flex-3 justify-self-center flex flex-col text-right">
<p class="grow">
Тэги: {{ .Tags }}
</p>
<p class="italic text-secondary">
{{ .PublishedTime }}
</p>
</div>
</div>
{{- end }}
</div>
</div>
<script>
function generateStars() {
var clWidth = document.documentElement.clientWidth;
var clHeight = document.documentElement.clientHeight;
stars = document.getElementsByClassName("star");
for (let starIndex = 0; starIndex < stars.length; starIndex++) {
const star = stars[starIndex];
const x = Math.floor(Math.random() * clWidth);
const y = Math.floor(Math.random() * clHeight * 0.8);
const rot = Math.random() * 90;
const animDuration = (Math.random() * 10) + 3;
const sz = Math.floor(Math.random() * 8) + 12;
star.style.transform = `translateX(${x}px) translateY(${y}px) rotate(${rot}deg)`;
star.style.animationDuration = `${animDuration}s`;
star.style.fontSize = `${sz}px`;
}
}
document.addEventListener('DOMContentLoaded', generateStars);
let generateStarsTimer;
window.addEventListener("resize", () => {
clearTimeout(generateStarsTimer);
generateStarsTimer = setTimeout(() => {
generateStars();
}, 1000);
});
</script>
</body>
</html>
|
