1commit 3840923ad5f1da285ace814d1764efe675fae544
2Author: Eric Bower <me@erock.io>
3Date: Sun Mar 3 10:59:10 2024 -0500
4
5 design: sidebar
6
7diff --git a/static/main.css b/static/main.css
8index f3c763a..9f3d3a3 100644
9--- a/static/main.css
10+++ b/static/main.css
11@@ -1,6 +1,15 @@
12 .sitemap {
13- -moz-column-count: 3;
14- column-count: 3;
15+ width: 150px;
16+}
17+
18+.post {
19+ max-width: 700px;
20+}
21+
22+.post-container {
23+ display: flex;
24+ gap: 1rem;
25+ flex-direction: row-reverse;
26 }
27
28 .link-alt-adj,
29@@ -77,10 +86,23 @@
30 min-width: 150px;
31 }
32
33+@media only screen and (max-width: 800px) {
34+ body {
35+ padding: 0 1rem;
36+ }
37+
38+ header {
39+ margin: 0;
40+ }
41+
42+ .post-container {
43+ display: block;
44+ }
45
46-@media only screen and (max-width: 600px) {
47 .sitemap {
48+ text-align: center;
49 -moz-column-count: 2;
50 column-count: 2;
51+ width: 100%;
52 }
53 }
54diff --git a/tmpl/join.page.tmpl b/tmpl/join.page.tmpl
55index e2c7912..8b2e73a 100644
56--- a/tmpl/join.page.tmpl
57+++ b/tmpl/join.page.tmpl
58@@ -4,117 +4,119 @@
59
60 {{define "meta"}}{{end}}
61
62-{{define "attrs"}}class="container-sm"{{end}}
63+{{define "attrs"}}class="container"{{end}}
64
65 {{define "body"}}
66 {{template "nav" .}}
67
68-<main class="post">
69- <h1 class="text-2xl text-underline-hdr text-hdr inline-block">{{.Data.Title}}</h1>
70- <h2 class="text-xl">{{.Data.Description}}</h2>
71+<div class="post-container">
72+ <main class="post flex-1">
73+ <h1 class="text-2xl text-underline-hdr text-hdr inline-block">{{.Data.Title}}</h1>
74+ <h2 class="text-xl">{{.Data.Description}}</h2>
75
76- <hr />
77+ <hr />
78
79- <div class="text-center text-2xl my-4">$20/year</div>
80+ <div class="text-center text-2xl my-4">$20/year</div>
81
82- <div class="group mb-4">
83- <div>
84- There are a few ways to purchase a membership. We try our best to
85- provide immediate access to <code>pico+</code> regardless of payment method.
86- However, after you pay, please message us via
87- <a href="mailto:hello@pico.sh">email</a> or <a href="/irc">IRC</a>
88- and we will grant you membership access asap.
89-
90- <p>
91- By joining <code>pico+</code> you agree to our <a href="/ops">terms of service</a> and <a href="/privacy">privacy policy</a>.
92- </p>
93-
94- <p>
95- Before giving us money, please make sure you have a pico account.
96- <a href="/getting-started">Create Account</a>
97- </p>
98-
99- <hr />
100- </div>
101+ <div class="group mb-4">
102+ <div>
103+ There are a few ways to purchase a membership. We try our best to
104+ provide immediate access to <code>pico+</code> regardless of payment method.
105+ However, after you pay, please message us via
106+ <a href="mailto:hello@pico.sh">email</a> or <a href="/irc">IRC</a>
107+ and we will grant you membership access asap.
108+
109+ <p>
110+ By joining <code>pico+</code> you agree to our <a href="/ops">terms of service</a> and <a href="/privacy">privacy policy</a>.
111+ </p>
112+
113+ <p>
114+ Before giving us money, please make sure you have a pico account.
115+ <a href="/getting-started">Create Account</a>
116+ </p>
117+
118+ <hr />
119+ </div>
120
121- <div class="box">
122- <h3 class="text-lg" id="stripe">Stripe</h3>
123- <div class="my-2">
124- <a href="https://buy.stripe.com/8wMeYLcVybTQgwwbIK" class="btn-link" target="_blank">
125- JOIN
126- </a>
127+ <div class="box">
128+ <h3 class="text-lg" id="stripe">Stripe</h3>
129+ <div class="my-2">
130+ <a href="https://buy.stripe.com/8wMeYLcVybTQgwwbIK" class="btn-link" target="_blank">
131+ JOIN
132+ </a>
133+ </div>
134+ <p>
135+ This is the quickest way to access <code>pico+</code>. The Stripe payment
136+ method requires an email address. We will never
137+ use your email for anything unless absolutely necessary.
138+ </p>
139 </div>
140- <p>
141- This is the quickest way to access <code>pico+</code>. The Stripe payment
142- method requires an email address. We will never
143- use your email for anything unless absolutely necessary.
144- </p>
145- </div>
146
147- <div class="box">
148- <h3 class="text-lg" id="snail">Snail Mail</h3>
149- <p>Send cash (USD) or check to:</p>
150- <div>
151- <div class="font-bold">pico.sh LLC</div>
152- <div>206 E Huron St STE 103</div>
153- <div>Ann Arbor MI 48104</div>
154+ <div class="box">
155+ <h3 class="text-lg" id="snail">Snail Mail</h3>
156+ <p>Send cash (USD) or check to:</p>
157+ <div>
158+ <div class="font-bold">pico.sh LLC</div>
159+ <div>206 E Huron St STE 103</div>
160+ <div>Ann Arbor MI 48104</div>
161+ </div>
162+ <p>
163+ Message us when payment is in transit and we will grant you temporary access to
164+ <code>pico+</code> that will be converted to a full year.
165+ </p>
166 </div>
167- <p>
168- Message us when payment is in transit and we will grant you temporary access to
169- <code>pico+</code> that will be converted to a full year.
170- </p>
171- </div>
172
173- <div class="box">
174- <h3 class="text-lg">Need higher limits?</h3>
175- <p>
176- We are more than happy to extend limits. Just message us and we can chat.
177- </p>
178- </div>
179+ <div class="box">
180+ <h3 class="text-lg">Need higher limits?</h3>
181+ <p>
182+ We are more than happy to extend limits. Just message us and we can chat.
183+ </p>
184+ </div>
185
186- <div class="box">
187- <h3 class="text-lg" id="membership-notifications">Membership Notifications</h3>
188+ <div class="box">
189+ <h3 class="text-lg" id="membership-notifications">Membership Notifications</h3>
190
191- <p>
192- We provide a special RSS feed for all pico users in order for us to send direct
193- notifications. This is where we will send you <code>pico+</code> expiration notifications.
194- To be clear, this is opt-in because we do not collect your email address.
195- </p>
196+ <p>
197+ We provide a special RSS feed for all pico users in order for us to send direct
198+ notifications. This is where we will send you <code>pico+</code> expiration notifications.
199+ To be clear, this is opt-in because we do not collect your email address.
200+ </p>
201
202- <p>
203- In order to subscribe to <code>pico+</code> rss feed you must
204- <a href="/api-token">generate an API token</a>. After that just add
205- the following RSS feed to any of your feed readers.
206- </p>
207+ <p>
208+ In order to subscribe to <code>pico+</code> rss feed you must
209+ <a href="/api-token">generate an API token</a>. After that just add
210+ the following RSS feed to any of your feed readers.
211+ </p>
212
213- <pre>https://auth.pico.sh/rss/:token</pre>
214+ <pre>https://auth.pico.sh/rss/:token</pre>
215
216- <p>
217- With <a href="https://pico.sh/feeds">feeds.sh</a>:
218- <code>rsync pico.txt feeds.sh:/</code>
219- </p>
220+ <p>
221+ With <a href="https://pico.sh/feeds">feeds.sh</a>:
222+ <code>rsync pico.txt feeds.sh:/</code>
223+ </p>
224
225- <pre>=: email rss@myemail.com
226-=: digest_interval 1day
227-=> https://auth.pico.sh/rss/:token</pre>
228- </div>
229+ <pre>=: email rss@myemail.com
230+ =: digest_interval 1day
231+ => https://auth.pico.sh/rss/:token</pre>
232+ </div>
233
234- <div class="box">
235- <h3 class="text-lg" id="notes">Notes</h3>
236+ <div class="box">
237+ <h3 class="text-lg" id="notes">Notes</h3>
238
239- <p>
240- We do not maintain active subscriptions for <code>pico+</code>. Every year you must pay
241- again. We do not take monthly payments, you must pay for a year up-front.
242- Pricing is subject to change because we plan on continuing to include more
243- services as we build them.
244- </p>
245+ <p>
246+ We do not maintain active subscriptions for <code>pico+</code>. Every year you must pay
247+ again. We do not take monthly payments, you must pay for a year up-front.
248+ Pricing is subject to change because we plan on continuing to include more
249+ services as we build them.
250+ </p>
251+ </div>
252 </div>
253- </div>
254
255- {{template "pager" .}}
256-</main>
257+ {{template "pager" .}}
258+ </main>
259
260-{{template "sitemap-footer" .}}
261+ {{template "sitemap-footer" .}}
262+</div>
263
264 {{template "footer" .}}
265 {{end}}
266diff --git a/tmpl/post.page.tmpl b/tmpl/post.page.tmpl
267index 848d3ed..475fdfb 100644
268--- a/tmpl/post.page.tmpl
269+++ b/tmpl/post.page.tmpl
270@@ -4,25 +4,28 @@
271
272 {{define "meta"}}{{end}}
273
274-{{define "attrs"}}class="container-sm"{{end}}
275+{{define "attrs"}}class="container"{{end}}
276
277 {{define "body"}}
278 {{template "nav" .}}
279
280-<main class="post">
281- <h1 class="text-2xl text-underline-hdr text-hdr inline-block">{{.Data.Title}}</h1>
282- <h2 class="text-xl">{{.Data.Description}}</h2>
283+<div class="post-container">
284+ <main class="post flex-1">
285+ <h1 class="text-2xl text-underline-hdr text-hdr inline-block">{{.Data.Title}}</h1>
286+ <h2 class="text-xl">{{.Data.Description}}</h2>
287
288- <hr />
289+ <hr />
290
291- <article class="md">
292- {{.Data.Html}}
293- </article>
294+ <article class="md">
295+ {{.Data.Html}}
296+ </article>
297
298- {{template "pager" .}}
299-</main>
300+ {{template "pager" .}}
301+ </main>
302+
303+ {{template "sitemap-footer" .}}
304+</div>
305
306-{{template "sitemap-footer" .}}
307
308 {{template "footer" .}}
309 {{end}}
310diff --git a/tmpl/sitemap-footer.partial.tmpl b/tmpl/sitemap-footer.partial.tmpl
311index 5da9092..8be52c4 100644
312--- a/tmpl/sitemap-footer.partial.tmpl
313+++ b/tmpl/sitemap-footer.partial.tmpl
314@@ -1,5 +1,5 @@
315 {{define "sitemap-footer"}}
316-<div class="sitemap text-sm mb-4 text-center">
317+<div class="sitemap text-sm mb-4">
318 {{range .Sitemap.Children -}}
319 <div>
320 {{- if (and $.Prev (eq $.Prev.GenHref .GenHref)) -}}