desertthunder.dev
learn and share notes on atproto (wip) 🦉
malfestio.stormlightlabs.org/
readability
solid
axum
atproto
srs
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Malfestio - Coming Soon</title>
8 <meta name="description"
9 content="Coming soon: Master complex topics with spaced repetition, linked notes, and active recall. Share your decks, notes, and discoveries with the community.">
10
11 <!-- Open Graph -->
12 <meta property="og:type" content="website">
13 <meta property="og:url" content="https://malfestio.stormlightlabs.org/">
14 <meta property="og:title" content="Malfestio — Learning on the AT Protocol">
15 <meta property="og:description"
16 content="Coming soon: Master complex topics with spaced repetition, linked notes, and active recall. Share your decks, notes, and discoveries with the community.">
17 <meta property="og:image" content="https://malfestio.stormlightlabs.org/og-image.png">
18
19 <!-- Twitter Card -->
20 <meta name="twitter:card" content="summary_large_image">
21 <meta name="twitter:url" content="https://malfestio.stormlightlabs.org/">
22 <meta name="twitter:title" content="Malfestio — Learning on the AT Protocol">
23 <meta name="twitter:description"
24 content="Coming soon: Master complex topics with spaced repetition, linked notes, and active recall. Share your decks, notes, and discoveries with the community.">
25 <meta name="twitter:image" content="https://malfestio.stormlightlabs.org/og-image.png">
26
27 <link rel="icon" type="image/svg+xml"
28 href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2em' height='2em' viewBox='0 0 24 24'><path fill='%232859c5' d='M12 14.327q2.394 0 4.197-1.445T18 9.173q0-.959-.348-1.795t-.975-1.474q-1.735.108-2.956 1.296Q12.5 8.389 12.5 10.116h-1q0-1.727-1.23-2.92Q9.038 6.004 7.294 5.93q-.599.638-.947 1.461T6 9.173q0 2.264 1.803 3.709T12 14.327M8.75 9.904q-.31 0-.52-.21t-.21-.52t.21-.521t.52-.21t.52.21t.21.52t-.21.52q-.209.21-.52.21m6.5 0q-.31 0-.52-.209q-.21-.21-.21-.52t.21-.521q.209-.21.52-.21t.52.21q.21.209.21.52q0 .31-.21.52q-.209.21-.52.21M12 21q-2.931 0-4.966-2.084Q5 16.83 5 13.885V9.173q0-2.69 2.092-4.431T12 3q2.68 0 4.84 1.696T19 9.173V20h-1q-1.558 0-2.664-1.106t-1.105-2.663v-1.212q-.25.074-.5.122l-.5.095v1q0 1.974 1.395 3.369T18 21z'/></svg>">
29 <link rel="preconnect" href="https://fonts.googleapis.com">
30 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
31 <link
32 href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600&family=Lora:wght@400;500;600&display=swap"
33 rel="stylesheet">
34 <style>
35 * {
36 margin: 0;
37 padding: 0;
38 box-sizing: border-box;
39 }
40
41 :root {
42 --layer-00: #161616;
43 --layer-01: #1e1e1e;
44 --layer-02: #262626;
45 --layer-03: #2c2c2c;
46 --duration-normal: 250ms;
47 --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
48 }
49
50 body {
51 font-family: 'Figtree', sans-serif;
52 font-weight: 300;
53 background: #000000;
54 min-height: 100vh;
55 display: flex;
56 align-items: center;
57 justify-content: center;
58 color: #ffffff;
59 padding: 2rem;
60 position: relative;
61 overflow: hidden;
62 }
63
64 .grid-pattern {
65 position: absolute;
66 inset: 0;
67 background-size: 32px 32px;
68 background-image:
69 linear-gradient(to right, rgba(85, 85, 85, 0.3) 1px, transparent 1px),
70 linear-gradient(to bottom, rgba(85, 85, 85, 0.3) 1px, transparent 1px);
71 pointer-events: none;
72 }
73
74 .gradient-overlay {
75 position: absolute;
76 inset: 0;
77 background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.3), #000000);
78 pointer-events: none;
79 }
80
81 .container {
82 max-width: 700px;
83 text-align: center;
84 animation: fadeIn 0.8s var(--easing-standard);
85 position: relative;
86 z-index: 1;
87 }
88
89 @keyframes fadeIn {
90 from {
91 opacity: 0;
92 transform: translateY(20px);
93 }
94
95 to {
96 opacity: 1;
97 transform: translateY(0);
98 }
99 }
100
101 h1 {
102 font-family: 'Lora', serif;
103 font-size: 5rem;
104 font-weight: 500;
105 margin-bottom: 1rem;
106 letter-spacing: -0.02em;
107 line-height: 1.1;
108 }
109
110 .tagline {
111 font-family: 'Lora', serif;
112 font-size: 1.75rem;
113 font-weight: 400;
114 margin-bottom: 3rem;
115 color: #a3a3a3;
116 }
117
118 .description {
119 font-size: 1.125rem;
120 line-height: 1.8;
121 margin-bottom: 3rem;
122 color: #a3a3a3;
123 font-weight: 300;
124 }
125
126 .status {
127 font-family: 'Figtree', sans-serif;
128 font-size: 0.75rem;
129 font-weight: 500;
130 text-transform: uppercase;
131 letter-spacing: 0.1em;
132 padding: 0.75rem 1.5rem;
133 background: var(--layer-02);
134 border: 1px solid var(--layer-03);
135 border-radius: 0.125rem;
136 display: inline-block;
137 transition: all var(--duration-normal) var(--easing-standard);
138 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
139 }
140
141 .bsky-link {
142 color: #3b82f6;
143 text-decoration: none;
144 transition: color var(--duration-normal) var(--easing-standard);
145 }
146
147 .bsky-link:hover {
148 color: #60a5fa;
149 }
150
151 .bsky-link:visited {
152 color: #60a5fa;
153 }
154
155 .footer {
156 margin-top: 4rem;
157 font-size: 0.875rem;
158 color: #737373;
159 font-weight: 300;
160 }
161
162 @media (max-width: 768px) {
163 h1 {
164 font-size: 3rem;
165 }
166
167 .tagline {
168 font-size: 1.25rem;
169 }
170
171 .description {
172 font-size: 1rem;
173 }
174 }
175 </style>
176</head>
177
178<body>
179 <div class="grid-pattern"></div>
180 <div class="gradient-overlay"></div>
181 <div class="container">
182 <h1>Malfestio</h1>
183 <div class="tagline">
184 Learning on the AT Protocol
185 </div>
186 <p class="description">
187 Coming Soon
188 </p>
189 <div class="footer">
190 Check out <a class="bsky-link" href="https://bsky.app/profile/desertthunder.dev">Bluesky</a> for updates
191 </div>
192 </div>
193</body>
194
195</html>