style: tweaks

picosh · Jan 11, 2024 · d2ebd06 · d2ebd06
1 parent 5d944cd
commit d2ebd06
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 61 deletions.
diff --git a/posts/custom-domains.md b/posts/custom-domains.md
@@ -15,7 +15,10 @@ Let's Encrypt. In order for this to work, 2 DNS records need to be created:
 `CNAME` for the domain to the pico service (subdomains or DNS hosting with CNAME
 flattening) or `A` record.
 
-## For prose.sh
+## prose.sh
+
+Setting up a custom domain for prose is the same as all the other services,
+except for pgs -- more on that later.
 
 ```
 CNAME subdomain.yourcustomdomain.com -> prose.sh
@@ -47,7 +50,7 @@ an endpoint to check whether or not custom domains are setup:
 curl -vvvv https://prose.sh/check?domain=xxx
 ```
 
-## For pgs.sh
+## pgs.sh
 
 [pgs.sh](https://pgs.sh) is a little different in that we allow the user to
 configure custom domains per project so it's a little different.
@@ -61,7 +64,7 @@ _pgs.subdomain.yourcustomdomain.com.    300     IN      TXT
 "{user}-{project}"
 ```
 
-### Example: top-level domain
+### Example: Top-Level Domain
 
 - Custom domain `erock.io`
 - User `erock`
@@ -74,7 +77,7 @@ erock.io.         300     IN      CNAME   pgs.sh.
 _pgs.erock.io.    300     IN      TXT     "erock-kittens"
 ```
 
-### Example: subdomain
+### Example: Subdomain
 
 - Custom domain `meow.erock.io`
 - User `erock`
@@ -92,5 +95,5 @@ _pgs.meow.erock.io.    300     IN      TXT     "erock-kittens"
 In that case, you need to get the IP address of the service you want to point to
 and then use that as an `A` record.
 
-> WARNING: We make no gaurentees that our IP addresses will stay the same. Use
-> at your own risk!
+> WARNING: We make **no** guarantees that our IP addresses will stay the same.
+> Use at your own risk!
diff --git a/posts/imgs.md b/posts/imgs.md
@@ -76,6 +76,9 @@ We have an API that allows users to resize images on-the-fly. Currently we only
 support downscaling.
 
 ```md
-[!profile](/profile/x500) # auto scale width [!profile](/profile/500x500) #
-scale width and height [!profile](/profile/500x) # auto scale height
+[!profile](/profile/x500) # auto scale width
+
+[!profile](/profile/500x500) # scale width and height
+
+[!profile](/profile/500x) # auto scale height
 ```
diff --git a/static/docs.js b/static/docs.js
@@ -20,12 +20,16 @@ function init() {
   scrollEl.addEventListener("scroll", updateNav, { passive: true });
   window.addEventListener("load", updateNav);
 
+  const docs = document.querySelector(".docs");
   const nav = document.querySelector(".toc");
+  const main = document.querySelector("main");
   const btns = document.querySelectorAll(".toc-btn");
   btns.forEach((btn) => {
     btn.addEventListener("click", (e) => {
       e.preventDefault();
-      nav.classList.toggle("nav-show");
+      docs.classList.toggle("navi");
+      // nav.classList.toggle("nav-show");
+      // main.classList.toggle("hidden");
     });
   });
 

diff --git a/static/post.css b/static/post.css
@@ -38,6 +38,10 @@
 
 /* ==== POST ==== */
 
+main {
+  overflow-y: scroll;
+}
+
 .text-hdr {
   color: var(--hover);
 }
@@ -48,16 +52,16 @@
 }
 
 .docs {
+  width: 100%;
   height: 100vh;
   overflow: hidden;
   margin: 0;
   display: grid;
   grid-template-columns: 300px 1fr;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: 1fr;
 }
 
 .toc {
-  padding: 0 1rem;
   overflow-y: auto;
 }
 
@@ -95,21 +99,38 @@
   color: var(--white);
 }
 
+.pager {
+  min-width: 150px;
+}
+
 @media only screen and (max-width: 600px) {
+  main {
+    overflow-y: inherit;
+  }
+
+  .docs {
+    height: 100%;
+    grid-template-columns: auto 1fr;
+  }
+
   .toc {
     width: 0px;
     padding: 0;
   }
 
-  .nav-show {
-    width: 95%;
+  .toc-btn {
+    display: flex;
   }
 
-  .toc-btn {
-    display: block;
+  .navi {
+    grid-template-columns: 1fr;
   }
 
-  .docs {
-    grid-template-columns: auto 1fr;
+  .navi nav {
+    width: 100%;
+  }
+
+  .navi main {
+    display: none;
   }
 }
diff --git a/static/smol.css b/static/smol.css
@@ -257,6 +257,7 @@ figure {
 
 .container {
   max-width: 900px;
+  width: 100%;
 }
 
 .container-center {
@@ -266,13 +267,6 @@ figure {
   justify-content: center;
 }
 
-.content {
-  height: 100%;
-  overflow-y: auto;
-  padding-bottom: 300px;
-  padding-right: 1rem;
-}
-
 .text-3xl {
   font-size: 3rem;
 }
@@ -326,6 +320,10 @@ figure {
   display: inline-block;
 }
 
+.max-w-half {
+  max-width: 50%;
+}
+
 .flex {
   display: flex;
 }
@@ -346,18 +344,38 @@ figure {
   margin-top: 0.5rem;
 }
 
+.mt-2 {
+  margin-top: 1rem;
+}
+
 .mt-4 {
-  margin-top: 1.5rem;
+  margin-top: 2rem;
 }
 
 .mt-8 {
-  margin-top: 3rem;
+  margin-top: 4rem;
 }
 
 .mb {
   margin-bottom: 0.5rem;
 }
 
+.mb-2 {
+  margin-bottom: 1rem;
+}
+
+.mb-4 {
+  margin-bottom: 2rem;
+}
+
+.mb-8 {
+  margin-bottom: 4rem;
+}
+
+.mb-16 {
+  margin-bottom: 8rem;
+}
+
 .mr {
   margin-right: 0.5rem;
 }
@@ -385,6 +403,11 @@ figure {
   margin-bottom: 2rem;
 }
 
+.my-8 {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
 .mx {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -431,6 +454,14 @@ figure {
   color: var(--grey-light);
 }
 
+.hidden {
+  display: none;
+}
+
+.align-right {
+  text-align: right;
+}
+
 /* ==== HELPERS ==== */
 
 .logo-header {
@@ -445,6 +476,16 @@ figure {
   box-shadow: 0px 5px 0px 0px var(--shadow);
 }
 
+.btn-icon {
+  border: 3px solid hsl(var(--main-hue), 92%, 66%);
+  background-color: hsl(var(--main-hue), 92%, 66%);
+  padding: 0.25rem 0.3rem;
+  border-radius: 0.25rem;
+  box-shadow: 0px 5px 0px 0px var(--shadow);
+  color: var(--white);
+  cursor: pointer;
+}
+
 .btn-link {
   border: 3px solid hsl(var(--main-hue), 92%, 66%);
   background-color: hsl(var(--main-hue), 92%, 66%);

diff --git a/tmpl/post.page.tmpl b/tmpl/post.page.tmpl
@@ -7,7 +7,7 @@
 <script src="/docs.js"></script>
 {{end}}
 
-{{define "attrs"}}class="container-center"{{end}}
+{{define "attrs"}}class="container"{{end}}
 
 {{define "body"}}
 <div class="docs">
@@ -17,39 +17,41 @@
   </nav>
 
   <main class="content">
-    <div class="container">
-      <button type="button" class="toc-btn">nav</button>
-
-      <h1 class="text-2xl text-underline-hdr text-hdr inline-block">{{.Data.Title}}</h1>
-      <p>{{.Data.Description}}</p>
-
-      <hr />
-
-      <article class="md">
-        {{.Data.Html}}
-      </article>
-
-      <div class="flex justify-between gap mt-8">
-        {{if .Prev}}
-          <a class="box flex items-center" href="{{.Prev.GenHref}}">
-            <div class="flex flex-col items-start">
-              <div class="text-sm font-grey-light">&lt;&lt; PREVIOUS</div>
-              <div class="text-xl">{{.Prev.Text}}</div>
-            </div>
-          </a>
-        {{end}}
-
-        {{if .Next}}
-          <a class="box flex items-center justify-end" href="{{.Next.GenHref}}">
-            <div class="flex flex-col items-end">
-              <div class="text-sm font-grey-light">
-                NEXT &gt;&gt;
-              </div>
-              <div class="text-xl">{{.Next.Text}}</div>
+    <button type="button" class="toc-btn btn-icon mt flex items-center justify-center">
+      <svg style="width:20px; height:20px" viewBox="0 0 20 20">
+        <path fill="currentColor" d="M1,4 H18 V6 H1 V4 M1,9 H18 V11 H1 V7 M3,14 H18 V16 H1 V14" />
+      </svg>
+    </button>
+
+    <h1 class="text-2xl text-underline-hdr text-hdr inline-block">{{.Data.Title}}</h1>
+    <h2 class="text-xl">{{.Data.Description}}</h2>
+
+    <hr />
+
+    <article class="md">
+      {{.Data.Html}}
+    </article>
+
+    <div class="flex justify-between gap mt-8 mb-16">
+      {{if .Prev}}
+        <a class="box pager max-w-half flex items-center" href="{{.Prev.GenHref}}">
+          <div class="flex flex-col items-start">
+            <div class="text-sm font-grey-light">&lt;&lt; PREVIOUS</div>
+            <div class="text-xl">{{.Prev.Text}}</div>
+          </div>
+        </a>
+      {{end}}
+
+      {{if .Next}}
+        <a class="box pager max-w-half flex items-center justify-end" href="{{.Next.GenHref}}">
+          <div class="flex flex-col items-end">
+            <div class="text-sm font-grey-light">
+              NEXT &gt;&gt;
             </div>
-          </a>
-        {{end}}
-      </div>
+            <div class="text-xl align-right">{{.Next.Text}}</div>
+          </div>
+        </a>
+      {{end}}
     </div>
   </main>
 </div>

diff --git a/tmpl/toc.partial.tmpl b/tmpl/toc.partial.tmpl
@@ -1,7 +1,11 @@
 {{define "toc"}}
-<button type="button" class="toc-btn">nav</button>
+<button type="button" class="toc-btn btn-icon mt flex items-center justify-center">
+  <svg style="width:20px; height:20px" viewBox="0 0 20 20">
+    <path fill="currentColor" d="M1,4 H18 V6 H1 V4 M1,9 H18 V11 H1 V7 M3,14 H18 V16 H1 V14" />
+  </svg>
+</button>
 
-<h1 class="logo-header text-2xl">pico</h1>
+<h1 class="logo-header text-2xl mt">pico</h1>
 
 <ol class="nav-list">
   {{range .Sitemap}}