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