the home of serif.blue
feat: add basic site
+213
+24
site/favicon.svg
+24
site/favicon.svg
···
1
+
<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
2
+
<defs/>
3
+
<path d="M120.27,7.69 C117.89,5.31 114.72,4 111.36,4 C108,4 104.83,5.31 102.45,7.69 C97.54,12.61 97.54,20.61 102.45,25.53 C104.83,27.91 108,29.22 111.36,29.22 C114.73,29.22 117.89,27.91 120.28,25.53 C125.19,20.61 125.19,12.61 120.27,7.69 Z M106.38,11.63 C107.71,10.3 109.48,9.57 111.35,9.57 C113.22,9.57 115,10.3 116.33,11.63 C119.08,14.38 119.08,18.85 116.33,21.59 C115,22.92 113.23,23.65 111.35,23.65 C109.47,23.65 107.7,22.92 106.38,21.59 C103.64,18.85 103.64,14.38 106.38,11.63 Z" fill="#E2A610"/>
4
+
<path d="M105.51,30.95 L97.04,22.47 L103.08,16.42 C104.42,15.08 106.59,15.08 107.94,16.42 L111.56,20.04 C112.9,21.38 112.9,23.55 111.56,24.89 L105.51,30.95 Z" fill="#FFCA28"/>
5
+
<path d="M107.69,28.76 C107.69,28.76 109.02,26.09 105.45,22.52 C101.88,18.95 99.18,20.32 99.18,20.32 L97.04,22.47 L105.51,30.95 L107.69,28.76 Z" fill="#E2A610"/>
6
+
<path d="M120.7,65.63 A58.33 58.37 0 1 1 4.04,65.63 A58.33 58.37 0 1 1 120.7,65.63 Z" fill="#FFCA28"/>
7
+
<path d="M109.66,65.63 A47.29 47.32 0 1 1 15.08,65.63 A47.29 47.32 0 1 1 109.66,65.63 Z" fill="#FFFFFF"/>
8
+
<path d="M68.78,72.05 L62.37,99.76 L55.96,72.05 L28.26,65.63 L55.96,59.22 L62.37,31.5 L68.78,59.22 L96.48,65.63 Z" fill="#E0C3AB"/>
9
+
<path d="M71.43,65.63 L86.49,89.77 L62.37,74.7 L38.25,89.77 L53.31,65.63 L38.25,41.5 L62.37,56.56 L86.49,41.5 Z" fill="#B2947C"/>
10
+
<path d="M50.45,86.94 C50.45,86.94 63.27,77.85 68.13,72.99 C73,68.14 83.26,53.87 83.26,53.87 C86.01,50.82 89.1,43.11 89.96,40.87 C90.05,40.63 89.82,40.39 89.58,40.48 C87.62,41.23 81.41,43.68 77.08,46.44 C71.67,49.9 61.99,57.81 57.48,62.32 C52.97,66.83 47.11,75.52 43.78,80.25 C41,84.21 37.52,91.57 36.47,93.86 C36.35,94.11 36.61,94.37 36.86,94.26 C39.22,93.27 46.87,89.9 50.45,86.94 Z" fill="#212121" opacity="0.32"/>
11
+
<path d="M82.66,52.46 C85.52,48.81 88.23,41.62 89.03,39.39 C89.13,39.12 88.87,38.86 88.59,38.95 C86.36,39.75 79.18,42.47 75.53,45.33 C71.18,48.74 56.71,60.63 56.71,60.63 L67.36,71.29 C67.37,71.29 79.25,56.81 82.66,52.46 Z" fill="#F44336"/>
12
+
<path d="M41.41,79.48 C38.55,83.13 35.84,90.32 35.04,92.55 C34.94,92.82 35.2,93.08 35.48,92.99 C37.71,92.19 44.89,89.47 48.54,86.61 C52.89,83.2 67.36,71.31 67.36,71.31 L56.7,60.65 C56.7,60.65 44.82,75.12 41.41,79.48 Z" fill="#2F7889"/>
13
+
<path d="M69.59,65.98 A7.56 7.57 0 1 1 54.47,65.98 A7.56 7.57 0 1 1 69.59,65.98 Z" fill="#94D1E0"/>
14
+
<path d="M90.46,37.52 L90.46,37.52 C89.12,36.18 89.12,34 90.46,32.66 L94.02,29.1 L98.88,33.96 L95.33,37.52 C93.98,38.87 91.8,38.87 90.46,37.52 Z" fill="#F44336"/>
15
+
<path d="M34.28,93.74 L34.28,93.74 C35.62,95.08 35.62,97.26 34.28,98.6 L30.72,102.16 L25.86,97.3 L29.41,93.74 C30.76,92.4 32.94,92.4 34.28,93.74 Z" fill="#B2947C"/>
16
+
<path d="M102.1,65.63 L102.1,65.63 C102.1,63.73 103.64,62.19 105.54,62.19 L110.56,62.19 L110.56,69.07 L105.54,69.07 C103.64,69.07 102.1,67.53 102.1,65.63 Z" fill="#E0C3AB"/>
17
+
<path d="M22.65,65.63 L22.65,65.63 C22.65,67.53 21.11,69.07 19.21,69.07 L14.19,69.07 L14.19,62.19 L19.21,62.19 C21.11,62.19 22.65,63.73 22.65,65.63 Z" fill="#E0C3AB"/>
18
+
<path d="M90.46,93.74 L90.46,93.74 C91.8,92.4 93.98,92.4 95.32,93.74 L98.87,97.3 L94.01,102.16 L90.45,98.6 C89.12,97.26 89.12,95.09 90.46,93.74 Z" fill="#B2947C"/>
19
+
<path d="M34.28,37.52 L34.28,37.52 C32.94,38.86 30.76,38.86 29.42,37.52 L25.87,33.96 L30.73,29.1 L34.29,32.66 C35.62,34 35.62,36.18 34.28,37.52 Z" fill="#B2947C"/>
20
+
<path d="M62.37,105.38 L62.37,105.38 C64.27,105.38 65.81,106.92 65.81,108.82 L65.81,113.85 L58.94,113.85 L58.94,108.82 C58.93,106.92 60.47,105.38 62.37,105.38 Z" fill="#E0C3AB"/>
21
+
<path d="M62.37,25.88 L62.37,25.88 C60.47,25.88 58.93,24.34 58.93,22.44 L58.93,17.41 L65.8,17.41 L65.8,22.44 C65.81,24.34 64.27,25.88 62.37,25.88 Z" fill="#E0C3AB"/>
22
+
<path d="M111.16,65.63 Q111.16,85.852 96.87,100.151 Q82.58,114.45 62.37,114.45 Q42.16,114.45 27.87,100.151 Q13.58,85.852 13.58,65.63 Q13.58,45.408 27.87,31.109 Q42.16,16.81 62.37,16.81 Q82.58,16.81 96.87,31.109 Q111.16,45.408 111.16,65.63 Z M108.16,65.63 Q108.16,46.65 94.748,33.23 Q81.337,19.81 62.37,19.81 Q43.403,19.81 29.992,33.23 Q16.58,46.65 16.58,65.63 Q16.58,84.609 29.992,98.03 Q43.403,111.45 62.37,111.45 Q81.337,111.45 94.748,98.03 Q108.16,84.609 108.16,65.63 Z" fill="#E2A610"/>
23
+
<path d="M8.72,64.92 C8.72,64.92 6.6,54.18 12.25,40.88 C20.59,21.26 38.6,10.46 57.97,9.62 C72.5,8.99 80.88,13.78 80.88,13.78 C80.88,13.78 69.06,12.81 60.91,13.17 C41.25,14.04 27.59,23.01 18.23,38.35 C10.53,50.99 8.72,64.92 8.72,64.92 Z" fill="#FFF59D"/>
24
+
</svg>
+189
site/index.html
+189
site/index.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
7
+
<meta
8
+
name="description"
9
+
content="Serif.blue - Fancy projects by Kieran"
10
+
/>
11
+
<title>Serif.blue</title>
12
+
<style>
13
+
:root {
14
+
--alice-blue: #d9f0ffff;
15
+
--light-sky-blue: #a3d5ffff;
16
+
--light-sky-blue-2: #83c9f4ff;
17
+
--medium-slate-blue: #6f73d2ff;
18
+
--glaucous: #7681b3ff;
19
+
--bsky-blue: #0085ff;
20
+
}
21
+
22
+
html,
23
+
body {
24
+
height: 100%;
25
+
margin: 0;
26
+
padding: 0;
27
+
}
28
+
29
+
body {
30
+
font-family: "Georgia", serif;
31
+
background-color: var(--alice-blue);
32
+
color: #333;
33
+
line-height: 1.6;
34
+
max-width: 1200px;
35
+
margin: 0 auto;
36
+
display: flex;
37
+
flex-direction: column;
38
+
}
39
+
40
+
.container {
41
+
max-width: 800px;
42
+
margin: 0 auto;
43
+
padding: 20px;
44
+
flex: 1 0 auto;
45
+
}
46
+
47
+
header {
48
+
background-color: var(--medium-slate-blue);
49
+
color: white;
50
+
padding: 2rem 1rem;
51
+
text-align: center;
52
+
margin-bottom: 20px;
53
+
border-bottom: 1px solid var(--light-sky-blue);
54
+
}
55
+
56
+
header h1 {
57
+
margin: 0;
58
+
font-size: 2.5rem;
59
+
letter-spacing: 0.5px;
60
+
}
61
+
62
+
header p {
63
+
margin: 0.5rem 0 0;
64
+
font-style: italic;
65
+
opacity: 0.9;
66
+
}
67
+
68
+
main {
69
+
padding: 30px;
70
+
background-color: white;
71
+
border-radius: 5px;
72
+
margin-top: 20px;
73
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
74
+
}
75
+
76
+
main h2 {
77
+
color: var(--medium-slate-blue);
78
+
border-bottom: 2px solid var(--light-sky-blue);
79
+
padding-bottom: 10px;
80
+
margin-top: 0;
81
+
}
82
+
83
+
.card {
84
+
background-color: var(--alice-blue);
85
+
border-radius: 5px;
86
+
padding: 25px;
87
+
margin-bottom: 25px;
88
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
89
+
border-left: 4px solid var(--light-sky-blue);
90
+
}
91
+
92
+
.card h3 {
93
+
color: var(--glaucous);
94
+
margin-top: 0;
95
+
}
96
+
97
+
.btn {
98
+
display: inline-block;
99
+
background-color: var(--medium-slate-blue);
100
+
color: white;
101
+
padding: 8px 16px;
102
+
border-radius: 4px;
103
+
text-decoration: none;
104
+
transition: background-color 0.3s;
105
+
font-family: Arial, sans-serif;
106
+
font-size: 0.9rem;
107
+
letter-spacing: 0.5px;
108
+
margin-right: 10px;
109
+
margin-bottom: 10px;
110
+
}
111
+
112
+
.btn:hover {
113
+
background-color: var(--glaucous);
114
+
}
115
+
116
+
.btn-bsky {
117
+
background-color: var(--bsky-blue);
118
+
}
119
+
120
+
.btn-bsky:hover {
121
+
background-color: #0066cc;
122
+
}
123
+
124
+
footer {
125
+
text-align: center;
126
+
padding: 20px;
127
+
color: var(--glaucous);
128
+
font-size: 0.9rem;
129
+
border-top: 1px solid var(--light-sky-blue);
130
+
flex-shrink: 0;
131
+
}
132
+
</style>
133
+
</head>
134
+
<body>
135
+
<header>
136
+
<h1>Serif.blue</h1>
137
+
<p>Fancy projects by Kieran</p>
138
+
</header>
139
+
140
+
<div class="container">
141
+
<main>
142
+
<h2>Some fancy tools</h2>
143
+
<p>Hiiiii :)</p>
144
+
<p>
145
+
This is a random collection of tools and such that I have
146
+
made / collected. It's fairly empty rn but should fill up
147
+
quickly enough!
148
+
</p>
149
+
150
+
<div class="card">
151
+
<h3>Community Verifications</h3>
152
+
<p>
153
+
This tool allows you to designate trusted verifiers in
154
+
the Bluesky ecosystem. When these trusted accounts
155
+
verify other users, you'll see verification badges next
156
+
to those profiles while browsing Bluesky.
157
+
</p>
158
+
<a
159
+
href="https://tangled.sh/@dunkirk.sh/serif/raw/main/bluesky-community-verifications.user.js"
160
+
class="btn"
161
+
>Install with Tampermonkey</a
162
+
>
163
+
<a
164
+
href="https://bsky.app/profile/dunkirk.sh"
165
+
class="btn btn-bsky"
166
+
>Follow me on Bluesky</a
167
+
>
168
+
</div>
169
+
170
+
<div class="card">
171
+
<h3>More things soon?</h3>
172
+
<p>
173
+
Yeah probably lol; I just need to find the right next
174
+
project 🤔
175
+
</p>
176
+
</div>
177
+
</main>
178
+
</div>
179
+
180
+
<footer>
181
+
<p>
182
+
Made with 💙 by <a href="https://dunkirk.sh">Kieran Klukas</a> |
183
+
<a href="https://bsky.app/profile/dunkirk.sh">
184
+
@dunkirk.sh on Bluesky
185
+
</a>
186
+
</p>
187
+
</footer>
188
+
</body>
189
+
</html>