From 0ec13ac695684181f855d42ea5768e82d194b44b Mon Sep 17 00:00:00 2001
From: Eric Bower <me@erock.io>
Date: Tue, 14 May 2024 00:23:49 -0400
Subject: [PATCH] style: plus page

---
 posts/plus.md       | 16 ++++++++++++++++
 static/main.css     |  5 +++++
 static/smol.css     | 10 ++++++++++
 tmpl/plus.page.tmpl | 46 ++++++++++++++++++++++-----------------------
 4 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/posts/plus.md b/posts/plus.md
index 79f6f48..3b18848 100644
--- a/posts/plus.md
+++ b/posts/plus.md
@@ -4,3 +4,19 @@ description: Become a pico+ member
 slug: plus
 template: plus.page.tmpl
 ---
+
+- [tuns](/tuns)
+  - full access
+- [pages](/pgs)
+  - full access
+  - per-site [analytics](/privacy#analytics)
+- [prose](/prose)
+  - increased storage limits
+  - blog [analytics](/privacy#analytics)
+- [docker registry](/imgs)
+  - full access
+
+<hr class="my-4" />
+
+Before signing up to `pico+`, please read our [privacy policy](/policy),
+[terms of service](/ops), and our [refund policy](/ops#refund-policy).
diff --git a/static/main.css b/static/main.css
index 720f409..321011e 100644
--- a/static/main.css
+++ b/static/main.css
@@ -17,6 +17,11 @@
   max-width: 700px;
 }
 
+.container-xs {
+  max-width: 20em;
+  width: 100%;
+}
+
 .post-container {
   display: flex;
   gap: 1rem;
diff --git a/static/smol.css b/static/smol.css
index f89bc8c..47bc3b8 100644
--- a/static/smol.css
+++ b/static/smol.css
@@ -521,6 +521,16 @@ figure {
   padding: 0;
 }
 
+.px-2 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-4 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .py {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
diff --git a/tmpl/plus.page.tmpl b/tmpl/plus.page.tmpl
index c2806f0..f164025 100644
--- a/tmpl/plus.page.tmpl
+++ b/tmpl/plus.page.tmpl
@@ -12,32 +12,32 @@
 {{template "nav" .}}
 
 <main>
-  <div class="flex items-center justify-center hero">
-    <div class="group items-center">
-      <h1 class="logo-header text-2xl">pico+</h1>
-      <div class="text-center">
-        <div class="text-2xl">
-          $2/month
+  <div class="flex justify-center">
+    <div class="container-xs">
+      <div class="border px-4 py-8 mt-4">
+        <div class="group items-center">
+          <h1 class="logo-header text-2xl">pico+</h1>
+          <div class="text-center">
+            <div class="text-2xl">$2/month</div>
+            <div class="text-sm">(billed yearly)</div>
+            <pre class="my inline-block"><span class="visited">ssh</span> pico.sh</pre>
+            <div class="text-sm">
+              Log into our SSH App to learn more and purchase a membership.
+            </div>
+          </div>
         </div>
-        <div class="text-sm">(billed yearly)</div>
-        <pre class="my inline-block"><span class="visited">ssh</span> pico.sh</pre>
-        <div class="text-sm">
-          Log into our SSH App to learn more and purchase a membership.
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <hr class="my-4" />
 
-  <article class="md">
-    {{.Data.Html}}
-  </article>
+        <hr class="my-4" />
 
-  {{template "pager" .}}
-
-  <hr class="my-4" />
+        <article class="md plus">
+          {{.Data.Html}}
+        </article>
+      </div>
 
-  {{template "footer" .}}
+      {{template "pager" .}}
+      <hr class="my-4" />
+      {{template "footer" .}}
+    </div>
+  </div>
 </main>
 {{end}}