nekomimi.pet
wisp-redesign
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 <title>wisp.place</title>
7 <link rel="preconnect" href="https://fonts.googleapis.com" />
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9 <link
10 href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap"
11 rel="stylesheet"
12 />
13 <style>
14 * {
15 margin: 0;
16 padding: 0;
17 box-sizing: border-box;
18 }
19
20 :root {
21 --bg: #ffffff;
22 --text: #1a1a1a;
23 --text-muted: #666;
24 --link: #0066cc;
25 --link-hover: #0052a3;
26 --terminal-bg: #1a1a1a;
27 --terminal-text: #e0e0e0;
28 --terminal-cyan: #5fdfdf;
29 }
30
31 @media (prefers-color-scheme: dark) {
32 :root {
33 --bg: #121212;
34 --text: #e0e0e0;
35 --text-muted: #888;
36 --link: #5fdfdf;
37 --link-hover: #7fffff;
38 --terminal-bg: #0a0a0a;
39 --terminal-text: #e0e0e0;
40 }
41 }
42
43 body {
44 font-family: "Fira Mono", monospace;
45 font-weight: 400;
46 font-style: normal;
47 font-size: 18px;
48 line-height: 1.6;
49 padding: 60px 40px;
50 max-width: 80%;
51 color: var(--text);
52 background: var(--bg);
53 transition:
54 background 0.2s,
55 color 0.2s;
56 }
57
58 h1 {
59 font-size: 1.1em;
60 font-weight: normal;
61 margin-bottom: 2em;
62 }
63
64 .cursor {
65 display: inline-block;
66 width: 2px;
67 height: 1.1em;
68 background: var(--text);
69 margin-left: 2px;
70 vertical-align: text-bottom;
71 animation: blink 1s step-end infinite;
72 }
73
74 @keyframes blink {
75 0%,
76 100% {
77 opacity: 1;
78 }
79 50% {
80 opacity: 0;
81 }
82 }
83
84 p {
85 margin-bottom: 0.3em;
86 }
87
88 section {
89 margin-bottom: 2.5em;
90 }
91
92 a {
93 color: var(--link);
94 text-decoration: underline;
95 text-underline-offset: 2px;
96 }
97
98 a:hover {
99 color: var(--link-hover);
100 }
101
102 .click-hint {
103 color: var(--link);
104 margin-left: 0.5em;
105 display: inline-flex;
106 align-items: center;
107 }
108
109 .click-hint .arrow {
110 display: inline-block;
111 width: 1.2em;
112 text-align: center;
113 animation: nudge 1.2s ease-in-out infinite;
114 }
115
116 @keyframes nudge {
117 0%,
118 100% {
119 transform: translateX(0);
120 }
121 50% {
122 transform: translateX(-4px);
123 }
124 }
125
126 .terminal-section {
127 margin-top: 2em;
128 }
129
130 .terminal-label {
131 margin-bottom: 0.8em;
132 }
133
134 .cmd {
135 font-family:
136 ui-monospace, "SF Mono", "Cascadia Code", "Source Code Pro",
137 Menlo, Consolas, monospace;
138 font-size: 0.85em;
139 background: var(--terminal-bg);
140 color: var(--terminal-text);
141 border-radius: 4px;
142 padding: 12px 16px;
143 display: table;
144 white-space: nowrap;
145 margin-bottom: 0.5em;
146 }
147
148 .cmd .highlight {
149 color: var(--terminal-cyan);
150 }
151
152 .hosting-options {
153 margin-top: 2.5em;
154 }
155
156 .hosting-options p {
157 margin-bottom: 0.2em;
158 }
159 </style>
160 </head>
161 <body>
162 <h1>wisp.place<span class="cursor"></span></h1>
163
164 <section>
165 <p>the easiest way to get static html going</p>
166 <p>
167 just drag n' drop into the dashboard with your
168 <a href="#">AT Protocol account</a>.
169 <span class="click-hint"
170 ><span class="arrow">←</span> click me!</span
171 >
172 </p>
173 </section>
174
175 <section class="terminal-section">
176 <p class="terminal-label">are you a terminal nerd?</p>
177 <code class="cmd"
178 >curl
179 <span class="highlight"
180 >https://sites.wisp.place/nekomimi.pet/wisp-cli-binaries/wisp-cli-x86_64-linux</span
181 >
182 -o wisp-cli</code
183 >
184 <code class="cmd"
185 >wisp-cli
186 <span class="highlight">alice.bsky.social</span> --site
187 MyBlog</code
188 >
189 </section>
190
191 <div class="hosting-options">
192 <p>host on our infrastructure for free</p>
193 <p>
194 or use wisp-cli to host on your own infra with seamless
195 deployments
196 </p>
197 <p>need docs? <a href="https://docs.wisp.place">docs.wisp.place</p></a>
198 </div>
199 </body>
200</html>