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>Automatic profile updates!</h3>
193 <p>
194 I made this inspired by
195 <a
196 href="https://bsky.app/profile/did:plc:gq4fo3u6tqzzdkjlwzpb23tj"
197 >@dame.is</a
198 >'s (dame.is's sounds hilarious lol) profile picture
199 which changes with a sky gradient every hour. I wanted
200 to do something similar but my profile picture has me in
201 the foreground so I had to do some masking shenanagins
202 to get it to work.
203 </p>
204 <p>
205 Anyway if you want to set this up for yourself then grab
206 a background removed version of your profile from
207 <a href="https://remove.bg">remove.bg</a> (low res
208 preview version is fine since this will just be a mask)
209 and then run
210 <code
211 >magick pfp-removebg-preview.png -alpha extract
212 pfp_matte.png</code
213 >. Now you can head over to the timeline site linked
214 below and customize your timeline! When you are done
215 simply download the zip and extract it wherever you want
216 it to live. Then <code>crontab -e</code> and add your
217 script (<code
218 >2 * * * * /home/usrname/pfp/bsky-profile-updates.sh
219 >/dev/null 2>&1</code
220 >
221 ) to run 2 minutes after the hour (or at really whatever
222 time you want)!
223 </p>
224 <a href="/pfp-updates" class="btn"
225 >Customize your gradients!</a
226 >
227 </div>
228
229 <div class="card">
230 <h3>More things soon?</h3>
231 <p>
232 Yeah probably lol; I just need to find the right next
233 project 🤔
234 </p>
235 </div>
236 </main>
237 </div>
238
239 <footer>
240 <p>
241 Made with 💙 by <a href="https://dunkirk.sh">Kieran Klukas</a> |
242 <a href="https://bsky.app/profile/dunkirk.sh">
243 @dunkirk.sh on Bluesky
244 </a>
245 </p>
246 </footer>
247 </body>
248</html>