style: redesign site

Inspired by: https://github.com/owickstrom/the-monospace-web I really liked the design and structure of this css demo. The foundational metric in the mono lib is the `line-height` CSS property. As such, we created a variable and then built all vertical spacing around `line-height`: All margins, font sizes, padding, etc, are all based on it.
picosh · Sep 2, 2024 · f801f00 · f801f00
1 parent a61150f
commit f801f00
Show file tree

Hide file tree

Showing 20 changed files with 407 additions and 241 deletions.
diff --git a/posts/analytics.md b/posts/analytics.md
diff --git a/posts/getting-started.md b/posts/getting-started.md
@@ -21,8 +21,8 @@ To get started, simply use SSH:
 ssh pico.sh
 ```
 
-Getting an error? Read our FAQ,
-[why can't I login to pico?](faq#why-cant-i-login-to-pico).
+> Getting an error? Read our FAQ,
+> [why can't I login to pico?](faq#why-cant-i-login-to-pico).
 
 All we need to create an account is your username. This username will be used
 for all of your service domains. For example, if your username is `glossy`, we

diff --git a/posts/imgs.md b/posts/imgs.md
@@ -93,8 +93,7 @@ jobs:
         tags: localhost:5000/image:latest
 ```
 
-Ready to join pico?
-
+<hr />
 <div class="flex flex-col items-center justify-center">
   <p>Create an account using only your SSH key.</p>
   <a href="/getting-started" class="btn-link">Get Started</a>

diff --git a/posts/pastes.md b/posts/pastes.md
@@ -60,8 +60,7 @@ pipe command.
 echo "foobar" | ssh pastes.sh FILENAME hidden=true
 ```
 
-Ready to join pico?
-
+<hr />
 <div class="flex flex-col items-center justify-center">
   <p>Create an account using only your SSH key.</p>
   <a href="/getting-started" class="btn-link">Get Started</a>

diff --git a/posts/pgs.md b/posts/pgs.md
@@ -30,7 +30,7 @@ The easiest way to deploy static sites on the web.
 
 ## Demo
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/sdbQpD2jV0k?si=B0yoV25XIaDqnTvk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/sdbQpD2jV0k?si=B0yoV25XIaDqnTvk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 > [pgs demo](https://www.youtube.com/watch?v=sdbQpD2jV0k)
 
@@ -420,8 +420,7 @@ If you accidentally remove a site you will be stuck in a limbo state. The folder
 will still exist using `sftp` or `sshfs` then you can properly clean it up by
 running the [rm command](#removing-a-project)
 
-Ready to join pico?
-
+<hr />
 <div class="flex flex-col items-center justify-center">
   <p>Create an account using only your SSH key.</p>
   <a href="/getting-started" class="btn-link">Get Started</a>

diff --git a/posts/plain-text-lists.md b/posts/plain-text-lists.md
@@ -5,9 +5,11 @@ keywords: [pico, lists, spec, plain, text]
 toc: 1
 ---
 
-- Version: **2022.08.05.dev**
-- Status: **Draft**
-- Author: **Eric Bower**
+Version: **2022.08.05.dev**
+
+Status: **Draft**
+
+Author: **Eric Bower**
 
 The goal of this specification is to understand how we render plain text lists.
 The overall design of this format is to be easy to parse and render.

diff --git a/posts/prose.md b/posts/prose.md
@@ -315,8 +315,7 @@ description: Where are you going?
 This page doesn't exist.
 ```
 
-Ready to join pico?
-
+<hr />
 <div class="flex flex-col items-center justify-center">
   <p>Create an account using only your SSH key.</p>
   <a href="/getting-started" class="btn-link">Get Started</a>

diff --git a/posts/tunnels.md b/posts/tunnels.md
@@ -3,7 +3,9 @@ title: Web Tunnels
 description: Passwordless authentication for the web
 ---
 
-[What are Webtunnels?](https://youtu.be/mgc5Ux1Srbc)
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/mgc5Ux1Srbc?si=7sILn0hEH8W5XqSk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+> [What are Webtunnels?](https://youtu.be/mgc5Ux1Srbc)
 
 By leveraging SSH tunnels, we can use pubkey cryptography to authenticate users
 on the web. No passwords, no JWTs, no bearer tokens, no complicated webauthn,

diff --git a/posts/tuns.md b/posts/tuns.md
@@ -1,6 +1,6 @@
 ---
 title: tuns
-description: Access localhost using https
+description: Host public web services on localhost
 keywords: [pico, tuns]
 ---
 
@@ -10,11 +10,11 @@ An `ngrok` alternative using just SSH.
 
 # Features
 
-- Managed [sish](https://docs.ssi.sh) service
 - A zero-install developer tool
-- Host publicly available web services on `localhost`
-- Host publicly available TCP services on `localhost`
+- Host public web services on `localhost`
+- Host public tcp services on `localhost`
 - Share your local webserver privately with another user
+- Managed [sish](https://docs.ssi.sh) service
 
 Using SSH tunnels, we can forward requests to your localhost from https, wss,
 and tcp.
@@ -23,7 +23,7 @@ and tcp.
 
 ## Demo
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/wZHiuR9RqGw?si=AJLBbg5jc8ET0lvB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/wZHiuR9RqGw?si=AJLBbg5jc8ET0lvB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 > [tuns demo](https://www.youtube.com/watch?v=wZHiuR9RqGw)
 
@@ -34,9 +34,7 @@ who is looking to prototype, demo, or otherwise deploy services without the
 overhead of managing a production environment with TLS, HTTP reverse proxy, and
 provisioning cloud infrastructure.
 
-Our tuns service can be used as a developer tool wherever https is required.
-Need TLS in order to run something properly in a development environment? Use
-tuns to get automatic TLS.
+By using tuns you get automatic and public https for local web services.
 
 Want to prototype a web service without fully deploying it in the cloud? You can
 go from starting a local web service to sharing it with the world using a single
@@ -58,8 +56,45 @@ ssh -R dev:80:localhost:8000 tuns.sh
 # now anyone can access it at https://{user}-dev.tuns.sh
 ```
 
-Ready to join pico?
+# tunmgr
+
+A tunnel manager for docker services.
+
+tunmgr automatically set's up tunnels for docker services. It utilizes `Expose`
+ports as well as DNSNames (and the container name/id) to setup different
+permutations of tunnels.
+
+> [source code](https://github.com/picosh/tunmgr)
+
+```yml
+services:
+  tunmgr:
+    image: ghcr.io/picosh/tunmgr:latest
+    restart: always
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+      - $HOME/.ssh/id_ed25519:/key:ro
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8080/health"]
+      interval: 2s
+      timeout: 5s
+      retries: 5
+      start_period: 1s
+  httpbin:
+    image: kennethreitz/httpbin
+    depends_on:
+      tunmgr:
+        condition: service_healthy
+    # labels: # or provide tunnel names and ports explicitly
+    #   tunmgr.names: httpbin # Comma separated list of names. Can be an empty
+    #   tunmgr.ports: 80:80 $ Comma separated list of port maps. (remote:local)
+    command: gunicorn -b 0.0.0.0:80 httpbin:app -k gevent --access-logfile -
+```
+
+With that docker compose file `httpbin` will be exposed as a public service on
+tuns.
 
+<hr />
 <div class="flex flex-col items-center justify-center">
   <p>Create an account using only your SSH key.</p>
   <a href="/getting-started" class="btn-link">Get Started</a>

diff --git a/static/main.css b/static/main.css
@@ -10,7 +10,8 @@
 }
 
 .sitemap {
-  width: 250px;
+  width: 200px;
+  flex: 0 0 200px;
 }
 
 .post {
@@ -29,7 +30,7 @@
 }
 
 .hero {
-  padding: 5rem 0 0 0;
+  padding: calc(var(--line-height) * 3) 0 0 0;
 }
 
 .home-features pre {
@@ -39,15 +40,15 @@
 .features {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
-  gap: 1rem;
+  gap: var(--line-height);
 }
 
 .features h3 {
   border: none;
 }
 
 .mk-nav {
-  padding: 1rem;
+  padding: var(--line-height);
 }
 
 .current {
@@ -74,11 +75,7 @@
 }
 
 .sidebar-list {
-  padding: 0 0 0 1rem;
-}
-
-.sidebar-list li {
-  margin: 0 0 0.5rem 0;
+  padding: 0 0 0 var(--line-height);
 }
 
 @media only screen and (max-width: 800px) {
@@ -95,8 +92,6 @@
   }
 
   .sitemap {
-    text-align: center;
-    -moz-column-count: 2;
     column-count: 2;
     width: 100%;
   }
@@ -106,11 +101,6 @@
   }
 
   .mk-nav {
-    padding: 1rem 0;
-  }
-
-  .sidebar-list {
-    padding: 0 0 0 0.6rem;
-    margin: 0;
+    padding: var(--line-height) 0;
   }
 }