the home of serif.blue
dunkirk.sh
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
7 <link
8 rel="icon"
9 type="image/png"
10 href="/favicon/favicon-96x96.png"
11 sizes="96x96"
12 />
13 <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
14 <link rel="shortcut icon" href="/favicon/favicon.ico" />
15 <link
16 rel="apple-touch-icon"
17 sizes="180x180"
18 href="/favicon/apple-touch-icon.png"
19 />
20 <meta name="apple-mobile-web-app-title" content="Serif.blue" />
21 <link rel="manifest" href="/favicon/site.webmanifest" />
22
23 <meta
24 name="description"
25 content="Serif.blue - Fancy projects by Kieran"
26 />
27 <meta name="color-scheme" content="light" />
28
29 <meta property="og:title" content="Serif.blue" />
30 <meta property="og:type" content="website" />
31 <meta property="og:url" content="https://serif.blue/" />
32 <meta property="og:image" content="/og.png" />
33
34 <link rel="me" href="https://dunkirk.sh" />
35 <link rel="me" href="https://bsky.app/profile/dunkirk.sh" />
36 <link rel="me" href="https://github.com/taciturnaxolotl" />
37
38 <title>Serif.blue</title>
39 <style>
40 :root {
41 --alice-blue: #d9f0ffff;
42 --light-sky-blue: #a3d5ffff;
43 --light-sky-blue-2: #83c9f4ff;
44 --medium-slate-blue: #6f73d2ff;
45 --glaucous: #7681b3ff;
46 }
47
48 html,
49 body {
50 height: 100%;
51 margin: 0;
52 padding: 0;
53 }
54
55 body {
56 font-family: "Georgia", serif;
57 background-color: var(--alice-blue);
58 color: #333;
59 line-height: 1.6;
60 max-width: 1200px;
61 margin: 0 auto;
62 display: flex;
63 flex-direction: column;
64 }
65
66 .container {
67 max-width: 800px;
68 margin: 0 auto;
69 padding: 20px;
70 flex: 1 0 auto;
71 }
72
73 header {
74 background-color: var(--medium-slate-blue);
75 color: white;
76 padding: 2rem 1rem;
77 text-align: center;
78 margin-bottom: 20px;
79 border-bottom: 1px solid var(--light-sky-blue);
80 }
81
82 header h1 {
83 margin: 0;
84 font-size: 2.5rem;
85 letter-spacing: 0.5px;
86 }
87
88 header p {
89 margin: 0.5rem 0 0;
90 font-style: italic;
91 opacity: 0.9;
92 }
93
94 main {
95 padding: 30px;
96 background-color: white;
97 border-radius: 5px;
98 margin-top: 20px;
99 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
100 }
101
102 main h2 {
103 color: var(--medium-slate-blue);
104 border-bottom: 2px solid var(--light-sky-blue);
105 padding-bottom: 10px;
106 margin-top: 0;
107 }
108
109 .card {
110 background-color: var(--alice-blue);
111 border-radius: 5px;
112 padding: 25px;
113 margin-bottom: 25px;
114 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
115 border-left: 4px solid var(--light-sky-blue);
116 }
117
118 .card h3 {
119 color: var(--glaucous);
120 margin-top: 0;
121 }
122
123 .btn {
124 display: inline-block;
125 background-color: var(--medium-slate-blue);
126 color: white;
127 padding: 8px 16px;
128 border-radius: 4px;
129 text-decoration: none;
130 transition: background-color 0.3s;
131 font-family: Arial, sans-serif;
132 font-size: 0.9rem;
133 letter-spacing: 0.5px;
134 margin-right: 10px;
135 margin-bottom: 10px;
136 }
137
138 .btn:hover {
139 background-color: var(--glaucous);
140 }
141
142 .btn-bsky {
143 background-color: var(--bsky-blue);
144 }
145
146 .btn-bsky:hover {
147 background-color: #0066cc;
148 }
149
150 footer {
151 text-align: center;
152 padding: 20px;
153 color: var(--glaucous);
154 font-size: 0.9rem;
155 border-top: 1px solid var(--light-sky-blue);
156 flex-shrink: 0;
157 }
158 </style>
159 </head>
160 <body>
161 <header>
162 <h1>Serif.blue</h1>
163 <p>Fancy projects by Kieran</p>
164 </header>
165
166 <div class="container">
167 <main>
168 <h2>Some fancy tools</h2>
169 <p>Hiiiii :)</p>
170 <p>
171 This is a random collection of tools and such that I have
172 made / collected. It's fairly empty rn but should fill up
173 quickly enough!
174 </p>
175
176 <div class="card">
177 <h3>Community Verifications</h3>
178 <p>
179 This tool allows you to designate trusted verifiers in
180 the Bluesky ecosystem. When these trusted accounts
181 verify other users, you'll see verification badges next
182 to those profiles while browsing Bluesky.
183 </p>
184 <a
185 href="https://tangled.sh/@dunkirk.sh/serif/raw/main/bluesky-community-verifications.user.js"
186 class="btn"
187 >Install with Tampermonkey</a
188 >
189 </div>
190
191 <div class="card">
192 <h3>More things soon?</h3>
193 <p>
194 Yeah probably lol; I just need to find the right next
195 project 🤔
196 </p>
197 </div>
198 </main>
199 </div>
200
201 <footer>
202 <p>
203 Made with 💙 by <a href="https://dunkirk.sh">Kieran Klukas</a> |
204 <a href="https://bsky.app/profile/dunkirk.sh">
205 @dunkirk.sh on Bluesky
206 </a>
207 </p>
208 </footer>
209 </body>
210</html>