~elais/elais.codes: changed css and added lite sidebar

3 files changed, 59 insertions(+), 58 deletions(-)

M haunt.scm
R posts/how-i-deploy-this-site/{index.md => h-ipfs-and-scheme/index.md}
M static/css/main.css

M haunt.scm => haunt.scm +4 -6

@@ 69,13 69,13 @@
 (define %header-menu
   `(div (@ (class "sidebar"))
         (a (@ (href "/"))
-           "(home) pag3")
+           "(home) p493")
         (a (@ (href "https://git.sr.ht/~elais"))
-           "s0ftwar3 (repo)")
+           "50f7w423 (repo)")
         (a (@ (href "/feed.xml"))
            "(rss) f33d")
         (a (@ (href "/about.html"))
-           "ab0ut (me)")))
+           "480u7 (me)")))
 
 (define (site-layout site title body)
   `((doctype "html")


@@ 98,9 98,7 @@
                                     "Haunt")
                                  ", a static site generator written in "
                                  (a (@ (href "https://gnu.org/software/guile"))
-                                    "Guile Scheme")
-                                 ". Please find the RSS feed " (a (@ (href "/feed.xml"))
-                                                                           "here."))))))))
+                                    "Guile Scheme"))))))))
 
 
 (define (post-template post)

R posts/how-i-deploy-this-site/index.md => posts/deploying-this-site-with-ipfs-and-scheme/index.md +38 -42

@@ 1,45 1,44 @@
-title: How I Build And Deploy This Site
+title: Deploying This Site with IPFS and Scheme
 date: 2020-06-07 00:00
 author: Elais Player
 tags: web, devops
 ---
 
-I build and deploy this website using a slightly unorthodox set of tools:
+I build and deploy this website using a slightly unorthodox set of technologies:
 
-* The Guix package manager
-* The Haunt static site generator
-* IPFS
+* The [Guix package manager](https://guix.gnu.org)
+* The [Haunt static site generator](https://haunt.dthompson.us)
+* The [Interplanetary File System](https://ipfs.io) (IPFS)
 
 I chose these tools for what I believe to be practical reasons. Guix is the
 package manager for my distribution (also called guix) and has a lot of neat
-features built around building things in reproducible environments. Haunt is a
-static site generator written in guile scheme, which allows me to reuse tooling
-that I've set up to manage my guix system. I primarily use sourcehut to
-store my repositories, but it unfortunately does not include a
-static site hosting service, so I decided to deploy my site to IPFS because its
-shiny and I did not want to manage a server.
+features built around creating reproducible environments. Haunt is a static site
+generator written in guile scheme, which allows me to reuse tooling that I've
+set up to manage my guix system. I primarily use sourcehut to store my
+repositories, but it unfortunately does not include a static site hosting
+service, so I decided to deploy my site to IPFS because its shiny and I did not
+want to manage a server.
 
 ## Setting Up The Environment With Guix
 
 The three of you who read my inaugural post know that I nurture an unhealthy
-infatuation with this package manager. Briefly, it is like nix except written
-in guile scheme and committed to only adding free software to its official
-repositories. I personally believe it has a more intuitive interface than nix
-and feature parity where it matters most (yak-shaving).
-
-The first thing I created when starting this project was a manifest. The file is
-called `guix.scm` and I activate it using the command `guix environment --ad-hoc
--m guix.scm`. This is similar to creating a `shell.nix` file and running the
-command `nix-shell` in that `guix environment` spawns a subshell that includes
-the packages described in the manifest and does not pollute the user's package
-profile, like a generalized nvm. One can also activate these
+infatuation with the guix package manager. Briefly, it is like nix except
+written in guile scheme and committed to only adding free software to its
+official repositories. I personally believe it has a more intuitive interface
+than nix and feature parity where it matters most (yak-shaving).
+
+The first thing I created for this project was a guix manifest. The
+file is called *guix.scm* and I activate it using the command `guix environment
+--ad-hoc -m guix.scm`. This is similar to creating a *shell.nix* file and
+running the command `nix-shell` in that `guix environment` spawns a subshell
+that includes the packages described in the manifest and does not pollute the
+user's package profile, like a generalized nvm. One can also activate these
 shells automatically and export their environment to an editor of choice using
 direnv.
 
-```scheme
-;;; guix.scm
+```
+;; guix.scm
 (use-modules (gnu packages))
-
 (specifications->manifest
  '("gcc-toolchain"
    "guile"


@@ 54,19 53,16 @@ direnv.
 ## Building A Static Website With Haunt
 
 Haunt is a simple static site generator that allows authors to treat their
-websites as guile scheme programs. It includes a shell utility that only has two
+websites as guile scheme programs. It includes a shell utility with two
 commands: `haunt build` and `haunt serve`. The former converts markdown (and
 more) files to html and the latter sets up a server primarily for local
 development.
 
-
-### Using Scheme
-
 Haunt provides several procedures for declarative site generation. These include
 procedures for creating site metadata, feeds, post templates, and static
-resource loaders, standard shit really.
+resource loaders, standard shit.
 
-```scheme
+```
 ;;; a site declaration procedure
 (site #:title "Elais Codes"
       #:domain "elais.codes"


@@ 86,7 82,7 @@ Posts and pages are templated with SXML, which is an alternative syntax for XML
 that uses S-expressions. Since HTML is practically a subset of XML, this allows
 the site's templates to be embedded directly in scheme code using backquotes.
 
-```scheme
+```
 ;; the backquote (`) character signals that in the expression that
 ;; follows, every subexpression proceeded by a comma is to be
 ;; evaluated, and every subexpression not proceeded by a comma


@@ 107,16 103,16 @@ the site's templates to be embedded directly in scheme code using backquotes.
 
 ### Generating The Site
 
-At the time of writing this site's content is written in markdown for now. Each
-article is stored in the `${PWD}/posts` directory. Once its time to publish a
+At the time of writing, this site's content is written in markdown. Each
+article is stored in the *${PWD}/posts* directory. Once its time to publish a
 new version of this site I run `haunt build` and barring any errors this
-generates a static site that is stored in `${PWD}/site`. During development I
+generates a static site that is stored in *${PWD}/site*. During development I
 run `haunt serve -w` which serves the static content and adds a watcher for
-changes, it is very lightweight and serves the content in no time.
+changes, it is very lightweight and updates the content in no time.
 
 ## Deploying with IPFS
 
-[IPFS](https://ipfs.io/) is an adolescent peer-to-peer protocol for storing and sharing data in a
+IPFS is an adolescent peer-to-peer protocol for storing and sharing data in a
 distributed file system. I use it primarily because sourcehut does not host
 static websites like github or gitlab and I wanted to play with something new.
 Making an IPFS deployed site accessible to the world wide web requires two


@@ 140,7 136,7 @@ charge users until they reach 1 GB of pinned content. Since my site weighs in at
 ~90kb and won't be growing much anytime soon it's going to be a while before I
 hit that limit.
 
-```bash
+```
 # pinata's api environment variables that I store in a .env file
 IPFS_DEPLOY_PINATA__API_KEY=<api key>
 IPFS_DEPLOY_PINATA__SECRET_API_KEY=<secret api key>


@@ 153,7 149,7 @@ https://elais.codes). Cloudflare provides just that for IPFS users in the form
 of [cloudflare-ipfs.com](https://cloudflare-ipfs.com), a portal to content
 stored in ipfs nodes. To access this from my website's url, all I have to do is
 add a CNAME record for https://elais.codes that points to my site's hash on ipfs
-prefixed by cloudflare-ipfs.com and a TXT record for the `_dnslink`.
+prefixed by cloudflare-ipfs.com and a TXT record for the *_dnslink*.
 
 ```
 # partial DNS configuration


@@ 164,7 160,7 @@ TXT   __dnslink   <ipfs-CID>
 Once this propagates my site hosted on ipfs becomes available to users on the
 world wide web. Since I'm also using cloudflare, I can add SSL/TLS to my domain
 using their tools, which is something we should always do.
-```bash
+```
 # .env
 IPFS_DEPLOY_CLOUDFLARE__API_TOKEN=<api-token>
 ```


@@ 175,10 171,10 @@ IPFS_DEPLOY_CLOUDFLARE__API_TOKEN=<api-token>
 So far we have created, built, and set up hosting platforms
 for *elais.codes*. Now we need to deploy the damn thing. To do this we use a
 nodejs utility called ipfs-deploy, which has been hinted at in some of the
-previous code blocks. `ipfs-deploy` only requires a `.env` with the correct api
+previous code blocks. `ipfs-deploy` only requires a *.env* with the correct api
 tokens and credentials to work and is a one liner.
 
-```bash
+```
 # command to use ipfs-deploy
 npx ipfs-deploy -p pinata -d cloudflare -O site/
 ```

M static/css/main.css => static/css/main.css +17 -10

@@ 1,5 1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
 @font-face {
     font-family: "Planet Estyle";
     src: url(../fonts/planet_estyle.woff) format("woff");


@@ 29,7 29,7 @@ html {
     font-size: 62.5%;
 }
 body {
-    font-family: "Barlow", Sans-Serif;
+    font-family: "IBM Plex Serif", Serif;
     font-size: 14px;
     line-height: 1.5;
     color: #201d0e;


@@ 107,11 107,17 @@ ul, ol {
     margin: 0 0 20px;
 }
 code, pre {
-    font-family: "Space Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
-    font-s
+    font-family: "IBM Plex Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+    font-size: inherit;
 }
+
 code {
-    font-size: 13px;
+    color: #090909;
+}
+
+code::before, code::after {
+    content: "=";
+    color: #ccc
 }
 pre {
     display: block;


@@ 121,9 127,11 @@ pre {
     line-height: 28px;
     background-color: #f5f5f5;
     white-space: pre;
-    white-space: pre-wrap;
-    word-break: break-all;
-    word-wrap: break-word;
+    overflow: auto;
+
+}
+pre code::before, pre code::after{
+    content: "";
 }
 blockquote {
     padding: 0 0 0 20px;


@@ 256,7 264,6 @@ table th.right, table td.right {
 }
 .post ul > li:before {
     content: "- ";
-    margin-left: -1.25em;
     color: #090909;
 }
 .post ol {