style: docs

antoniomika · Nov 17, 2024 · 7fc7df9 · 7fc7df9
1 parent 9a8c22f
commit 7fc7df9
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 114 deletions.
diff --git a/Makefile b/Makefile
@@ -9,11 +9,11 @@ ssg:
 .PHONY: ssg
 
 docs: ssg
-	rsync -vr ./docs/public/ hey@pgs.sh:/sish-local
+	rsync -vr ./docs/public/ pgs.sh:/sish-local
 .PHONY: docs
 
 docs-prod: ssg
-	rsync -vr ./docs/public/ hey@pgs.sh:/sish-prod
+	rsync -vr ./docs/public/ pgs.sh:/sish-prod
 .PHONY: docs-prod
 
 dev:

diff --git a/docs/static/favicon-16x16.png b/docs/static/favicon-16x16.png
diff --git a/docs/static/favicon-32x32.png b/docs/static/favicon-32x32.png
diff --git a/docs/static/logo.png b/docs/static/logo.png
diff --git a/docs/static/logo.svg b/docs/static/logo.svg
diff --git a/docs/static/main.css b/docs/static/main.css
@@ -1,107 +1,80 @@
-.visited {
-  color: var(--visited);
+@media (prefers-color-scheme: light) {
+  .logo { stroke: #414558; fill: none; }
 }
-
-.sitemap {
-  width: 250px;
+@media (prefers-color-scheme: dark) {
+  .logo { stroke: #f2f2f2; fill: none; }
 }
 
-.post {
-  max-width: 700px;
+.logo-sm svg {
+  width: 10px;
+  height: 10px;
 }
 
-.container-xs {
-  max-width: 20em;
-  width: 100%;
+.logo-md svg {
+  width: 25px;
+  height: 25px;
 }
 
-.post-container {
-  display: flex;
-  gap: 1rem;
-  flex-direction: row-reverse;
+.logo-lg svg {
+  width: 50px;
+  height: 50px;
 }
 
-.hiw {
-  background-color: #282a36;
+.divider {
+  width: 1px;
+  height: auto;
+  background-color: var(--grey-light);
 }
 
-.link-alt-adj,
-.link-alt-adj:visited,
-.link-alt-adj:visited:hover,
-.link-alt-adj:hover {
-  color: var(--link-color);
-  text-decoration: none;
+.visited {
+  color: var(--visited);
 }
 
-.link-alt-adj:visited:hover,
-.link-alt-adj:hover {
-  text-decoration: underline;
+.sitemap {
+  width: 250px;
+  flex: 0 0 250px;
+  margin: 0;
+  padding-bottom: 2rem !important;
+  overflow-y: auto;
+  height: calc(100vh - 3px - (3 * var(--line-height)));
 }
 
-.link-alt-hover,
-.link-alt-hover:visited,
-.link-alt-hover:visited:hover,
-.link-alt-hover:hover {
-  color: var(--hover);
-  text-decoration: none;
+.post {
+  max-width: 600px;
+  height: calc(100vh - 3px - (3 * var(--line-height)));
+  overflow-y: auto;
+  padding-right: 20px;
 }
 
-.link-alt-hover:visited:hover,
-.link-alt-hover:hover {
-  text-decoration: underline;
+.post-container {
+  max-width: 60rem;
 }
 
-.link-alt,
-.link-alt:visited,
-.link-alt:visited:hover,
-.link-alt:hover {
-  color: var(--white);
-  text-decoration: none;
+.container-xs {
+  max-width: 20em;
+  width: 100%;
 }
 
-.link-alt:visited:hover,
-.link-alt:hover {
-  text-decoration: underline;
+.hero {
+  padding: calc(var(--line-height) * 3) 0 0 0;
 }
 
-.hero {
-  padding: 5rem 0;
+.home-features pre {
+  margin: 0;
 }
 
 .features {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
-  gap: 1rem;
+  gap: calc(var(--line-height) - 4px);
 }
 
 .features h3 {
   border: none;
 }
 
 .mk-nav {
-  padding: 1rem;
-}
-
-.text-hdr {
-  color: var(--hover);
-}
-
-.text-underline-hdr {
-  border-bottom: 3px solid var(--hover);
-  padding-bottom: 3px;
-}
-
-.current {
-  background-color: var(--blockquote-bg) !important;
-  border-right: 5px solid var(--blockquote);
-}
-
-.current a {
-  color: var(--white);
-}
-
-.current-page a {
-  color: var(--white);
+  padding: var(--line-height);
 }
 
 .pager {
@@ -115,11 +88,13 @@
 }
 
 .sidebar-list {
-  padding: 0 0 0 1rem;
+  padding: 0 0 0 var(--line-height);
 }
 
-.sidebar-list li {
-  margin: 0 0 0.5rem 0;
+.post-group {
+  display: flex;
+  gap: 1rem;
+  flex-direction: row-reverse;
 }
 
 @media only screen and (max-width: 800px) {
@@ -131,27 +106,31 @@
     margin: 0;
   }
 
-  .post-container {
+  .post-group {
     display: block;
   }
 
+  .post {
+    height: 100%;
+    overflow-y: unset;
+    padding-right: 0;
+  }
+
   .sitemap {
-    text-align: center;
-    -moz-column-count: 2;
     column-count: 2;
     width: 100%;
+    margin-bottom: calc(2 * var(--line-height));
   }
 
   .sitemap-grid {
     grid-template-columns: repeat(1, 1fr);
   }
 
   .mk-nav {
-    padding: 1rem 0;
+    padding: var(--line-height) 0;
   }
 
-  .sidebar-list {
-    padding: 0 0 0 0.6rem;
-    margin: 0;
+  .divider {
+    display: none;
   }
 }
diff --git a/docs/tmpl/base.layout.tmpl b/docs/tmpl/base.layout.tmpl
@@ -6,8 +6,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="keywords" content="ngrok, sish, ssh, tunnel, self-hosted" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link href="/logo.svg" rel="icon" type="image/svg+xml"/>
+    <link href="/logo.png" rel="icon" sizes="any" type="image/png"/>
     <link rel="stylesheet" href="https://pico.sh/syntax.css" />
     <link rel="stylesheet" href="https://pico.sh/smol.css" />
     <link rel="stylesheet" href="/main.css" />

diff --git a/docs/tmpl/home.page.tmpl b/docs/tmpl/home.page.tmpl
@@ -15,7 +15,7 @@
     <div class="flex items-center justify-center hero">
       <div class="flex flex-col items-center gap-2">
         <h1 class="logo-header text-2xl">sish</h1>
-        <div class="text-center text-lg">Access localhost using https</div>
+        <div class="text-center text-lg">Host public web services on localhost</div>
         <a href="/getting-started" class="btn-link">GET STARTED</a>
       </div>
     </div>
@@ -39,7 +39,7 @@
         <h2 class="m-0 p-0 text-lg">
           Fully managed service <a href="https://tuns.sh">tuns.sh</a>
         </h2>
-        <p>We also manage an instance of <code>sish</code> so users don't have to worry about managing it.</p>
+        <p>We also manage an instance of <code>sish</code> so you can start using it immediately.</p>
       </div>
     </article>
 

diff --git a/docs/tmpl/nav.partial.tmpl b/docs/tmpl/nav.partial.tmpl
@@ -1,6 +1,6 @@
 {{define "nav"}}
 <nav class="mk-nav">
-  <div class="flex items-center justify-center gap-2 text-md">
+  <div class="flex flex-wrap items-center justify-center gap-2">
     <a href="/" class="link-alt">
       sish
     </a>

diff --git a/docs/tmpl/post.page.tmpl b/docs/tmpl/post.page.tmpl
@@ -2,17 +2,21 @@
 
 {{define "title"}}{{.Data.Title}}{{end}}
 
-{{define "meta"}}{{end}}
+{{define "meta"}}
+<meta name="description" content="{{.Data.Description}}" />
+{{end}}
 
-{{define "attrs"}}class="container"{{end}}
+{{define "attrs"}}class="post-container"{{end}}
 
 {{define "body"}}
 {{template "nav" .}}
 
-<div class="post-container">
-  <main class="post flex-1">
-    <h1 class="text-2xl text-underline-hdr text-hdr inline-block">{{.Data.Title}}</h1>
-    <h2 class="text-xl">{{.Data.Description}}</h2>
+<div class="post-group">
+  <main class="post">
+    <h1 class="text-2xl text-hdr m-0 flex items-center">
+      {{.Data.Title}}
+    </h1>
+    <p class="m-0">{{.Data.Description}}</p>
 
     <hr />
 
@@ -21,10 +25,10 @@
     </article>
 
     {{template "pager" .}}
+    {{template "footer" .}}
   </main>
 
   {{template "sitemap-footer" .}}
 </div>
 
-{{template "footer" .}}
 {{end}}
diff --git a/docs/tmpl/sitemap-footer.partial.tmpl b/docs/tmpl/sitemap-footer.partial.tmpl
@@ -1,31 +1,32 @@
 {{define "sitemap-footer"}}
-<div class="sitemap text-sm mb-4">
-  <ul class="list-none sidebar-list">
+  <ul class="sitemap list-none sidebar-list">
   {{range .Sitemap.Children}}
     {{if .Href}}
-    <li class="text-md">
-      {{if (eq $.Href .GenHref)}}
-      <a href="{{.GenHref}}" class="link-alt-hover">{{.Text}}</a>
-      {{else}}
-      <a href="{{.GenHref}}" class="link-alt">{{.Text}}</a>
-      {{end}}
-    </li>
+    <li>
+      <span class="font-bold">
+        {{if (eq $.Href .GenHref)}}
+        <a href="{{.GenHref}}" class="link-alt-hover">{{.Text}}</a>
+        {{else}}
+        <a href="{{.GenHref}}" class="link-alt">{{.Text}}</a>
+        {{end}}
+      </span>
     {{else}}
-    <li class="text-md">{{.Text}}</li>
+    <li>
+      <span class="font-bold">{{.Text}}</span>
     {{end}}
 
-    {{range .Children}}
-      <ul class="list-none sidebar-list">
-        <li>
-          {{if (eq $.Href .GenHref)}}
-          <a href="{{.GenHref}}" class="link-alt-hover">{{.Text}}</a>
-          {{else}}
-          <a href="{{.GenHref}}" class="link-alt">{{.Text}}</a>
-          {{end}}
-        </li>
+      {{if .Children}}
+      <ul class="list-square sidebar-list">
+        {{range .Children}}
+          <li>
+            <a href="{{.GenHref}}" class="link-alt{{if (eq $.Href .GenHref)}}-hover{{end}}">
+              {{.Text}}
+            </a>
+          </li>
+        {{end}}
       </ul>
-    {{end}}
+      {{end}}
+    </li>
   {{end}}
   </ul>
-</div>
 {{end}}