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