use headings more

assets/css/style.css

@@ -31,6 +31,13 @@ body {
   flex-direction: column;
 }
 
+h1 { font-size: 2em; }
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.17em; }
+h4 { font-size: 1.12em; }
+h5 { font-size: .83em; }
+h6 { font-size: .75em; }
+
 #content {
   background-color: white;
   /*min-height: calc(100vh - 8.5em);*/
@@ -372,10 +379,6 @@ a.white:focus,
   padding-top: .5em;
 }
 
-#content .page-title:first-of-type {
-  margin-top: -.08em;
-}
-
 .tile>.full-bleed,
 .card>.full-bleed {
   display: block;
@@ -465,11 +468,17 @@ img.with-border {
 
 .tile .page-title,
 .card .page-title {
-  font-size: 1.65em;
   margin: 0 auto;
+  margin-top: -.1em;
   text-align: center;
+  line-height: 1.2;
+}
+.tile p.page-title,
+.card p.page-title{
+  font-size: 1.65em;
   line-height: 1.3;
 }
+
 .tile .title, 
 .card .title {
   font-size: 130%;

content/about.md

@@ -4,7 +4,7 @@ type: misc
 title: About
 ---
 <div class="tile">
-    <p class="page-title">About</p>
+    <h1 class="page-title">About</h1>
     <hr class="full-bleed">
     <p class="">I finished my B.S. in Computer Science at
     <a href="http://www.gatech.edu/">Georgia Tech</a> in the Spring of 2017 with

content/kubelife.md

@@ -4,7 +4,7 @@ type: misc
 title: KubeLife
 ---
 <div class="tile">
-    <p class="page-title">KubeLife</p>
+    <h1 class="page-title">KubeLife</h1>
     <div class="full-bleed" style="margin-top: 0;margin-bottom: 0.25em; padding: 0">
     <canvas id="kubelife-canvas" height="1632" width="1632" class="full-bleed" style="width: 100%">
     <div class="centered-text title white" style="background-color: black; padding: 1em">This automaton requires that you <a href="http://www.enable-javascript.com/">enable JavaScript</a>.</div>

content/posts/automata.md

@@ -14,13 +14,13 @@ categories:
   <p></p>
   <hr class="clear"/>
   <p></p>
-### Cellular Automata
+## Cellular Automata
   <a href="https://en.wikipedia.org/wiki/Cellular_automaton">Cellular automata</a> are a simple class of automata consisting of a grid of cells where each cell represents some state that is updated every iteration. While not-necessarily particularly useful, some cellular automata display fascinating repetitive patterns or are even <a href="https://en.wikipedia.org/wiki/Turing-complete">Turing-complete</a>. It is also worth noting that some patterns in nature have been observed that appear to be generated by natural cellular automata. In particular the <a href="https://en.wikipedia.org/wiki/Conus_textile">Conus textile sea snail</a>'s shells display pigment patterns similar to a cellular automaton.
   <p></p><br/>
   <p class="no-margin">Below are some examples of cellular automata with live JavaScript demos using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">HTML5 Canvas</a>.</p>
   <p></p>
   <hr/>
-### Conway's Game of Life
+## Conway's Game of Life
   <p><a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Conway's Game of Life</a> is a cellular automata created by <a href="https://en.wikipedia.org/wiki/John_Horton_Conway">John Conway</a> where all cells are `live` or `dead`. Conway's Game of Life updates with the following rules:</p>
 
   1) A `live` cell with less than two `live` neighbours dies (as if by loneliness)\
@@ -51,7 +51,7 @@ NOTE: The colors in this demo are inverted from the standard style for
  aesthetic purposes.
 
 <hr/>
-### Wireworld
+## Wireworld
 
   <a href="https://en.wikipedia.org/wiki/Wireworld">Wireworld</a> is a cellular automata created by <a href="hhttps://en.wikipedia.org/wiki/Brian_Silverman">Brian Silverman</a>.
 While relatively simple, it is easy to construct logic circuits in and
@@ -90,7 +90,7 @@ At the top left and just below are two clocks, circles of `Conductor` around
  and <a href="http://karlscherer.com/Wireworld.html">karlscherer.com</a>.
 
 <hr/>
-### Rule 110
+## Rule 110
 
   <p><a href="https://en.wikipedia.org/wiki/Rule_110">Rule 110</a> is an
  <a href="https://en.wikipedia.org/wiki/Elementary_cellular_automaton">elementary cellular automata</a>, meaning that it is a one-dimensional / single-row ceullar automata. With only two states (`0` and `1`) and eight rules, this simple automata is interesting because it because it produces intricate patterns and is the only Turing-complete elementary cellular automata. Cells in Rule 110 update based on their current value and that of their left and right neighbors according to the following rules:</p>
@@ -118,7 +118,7 @@ For more on elementary cellular automata visit
  <a href="http://mathworld.wolfram.com/ElementaryCellularAutomaton.html">The Wolfram Mathworld Entry</a>.
 
 <hr/>
-### Other Automata
+## Other Automata
 There are many, many other automata - there are 256 elementary cellular automata
  alone (!) Some other notable automata include:
 

content/posts/brewing-with-kubernetes.md

@@ -18,14 +18,14 @@ I've set up a public <a href="/projects/coffee">live status page</a>* displaying
 \* As of September 2018 I've migrated to static site hosting and taken this page down for the moment.
 <hr>
 
-### Background
+## Background
 
 This might look a little ridiculous, but deploying (and debugging!) software updates to my coffeepot with `kubectl` has been *fantastic*.
 
 If you know me then you know that I'm not a morning person and that I tend to sleep in more on the weekends, so a simple same-time-every-day alarm clock type coffee maker simply wasn't cutting it. When I needed to build a "smart device" for a college course (CS 3651 *Prototyping Intelligence Appliances*) I created the original incarnation of this based around an [Mbed](https://www.mbed.com/en/) and an old Android phone I had on hand. The phone since died, so I finally decided to fix this up and upgrade to a full Linux box, and here we are.
 
 
-### Getting the Raspberry Pi Into my Cluster
+## Getting the Raspberry Pi Into my Cluster
 
 Installing Kubernetes / `kubeadm` was straightforward enough, I just followed [the official instructions](https://kubernetes.io/docs/setup/independent/install-kubeadm/). However I hit a few small roadblocks related to multi-architecture support:
 
@@ -39,7 +39,7 @@ I solved this by editing the existing DaemonSet to have a `nodeSelector` for `be
 
 These two rough spots are definitely not ideal, but also weren't particularly difficult to work around. Hopefully [we'll fix #2 in particular](https://github.com/kubernetes/kubeadm/issues/51) by publishing all of the core components with multi-architecture images.
 
-### Leveraging Kubernetes
+## Leveraging Kubernetes
 
 I use Kubernetes to:
 
@@ -52,7 +52,7 @@ I use Kubernetes to:
 - conveniently and securely access the service(s) from anywhere with `kubectl proxy`
 
 
-### Safety ⚠️
+## Safety ⚠️
 
 It's worth noting that I did take a number of safety precautions when connecting an electric heater to the internet, Kubernetes powered or otherwise:
 
@@ -68,7 +68,7 @@ Similarly the heater is explicitly disabled on boot, and every time one second p
 
 5) The original power switch is still part of the circuit, which can be shut off manually and has a visible light when power is flowing.
 
-### Conclusion
+## Conclusion
 
 Using Kubernetes standardizes deploying software, managing network services, and monitoring applications. It turns out all of these things are very handy for over-re-engineering your $18 coffee maker.
 

content/posts/creaturebox.md

@@ -13,7 +13,7 @@ categories:
 I wanted to build something similar for fun and try out golang's [Go mobile](https://github.com/golang/mobile)
  project as well, so over the break between semsters I took a little time to write one.
 
-### gomobile
+## gomobile
 
 The first thing I did was get gomobile up and running, and create a basic main loop to handle events and draw a
  quad to the screen during paint events.
@@ -33,7 +33,7 @@ One interesting effect of using gomobile is that CreatureBox should work on Wind
 \
 
 
-### The Simulation
+## The Simulation
 The next thing I did was layout the project structure, divided into the application layer, the simulation, and the
  simulation further divided into the simulation logic and the "Brain" logic.
 
@@ -45,15 +45,15 @@ The simulation uses <a href="https://github.com/llgcode">llgcode</a>'s awesome [
  touch a wall or a moving obstacle.
 
 
-### "Brains"
+## "Brains"
 I then implemented the "brains" for the creatures, mimicing the design described in the studio otoro blog post.
 Each creature has a fully connected two layer (input and output) neural network. Most of the outputs are recurrent like
  the studio otoro demo. Each creature receives a number of "distance to edge or obstacle" inputs in
  evenly distributed directions about them as well as the previous output for the recurrent nodes, and produces a turn
  and move output used for turning left/right and moving forward/backwards every frame. These are then scaled, and applied.
  You can see which way a creature is facing by the white dot drawn on them towards their current "forward" direction.
 
-### Evolution
+## Evolution
 Lastly I implemented the key component (evolution) by adding logic to track the number of frames each creature has been
  "alive" for, storing the weights of the best creatures. I also performed a finalpass over the logic to optimize things
  a little bit (mainly minimizing un-necessary allocations).\
@@ -66,7 +66,7 @@ Every n-th frame a number of new creatures are spawned, some of which have brain
 \
 The color of each creature is based on the average of their brain weights divided into 3 chunks for the RGB channels allowing some limited visualization of similarity between creatures ("clones" will be the same color for example).
 
-### Wrap-Up:
+## Wrap-Up
 All told, this project was pretty fun to work on.\
 Here's two a gifs of the result running on my laptop (the second gif has more evolved creatures):
 

content/posts/mapping-appalachia.md

@@ -44,7 +44,7 @@ After the B.E.T.A. my interest fell off quickly as the locations and quests fail
     <div id="map" style="margin: 0 auto;"></div>
 </div>
 
-<p class="title" style="font-weight: bold">October 30th <a href="https://bethesda.net/en/article/XUtJrgiCgU6WqMASW8w0I/fallout-76-our-future-begins-together-in-beta">B.E.T.A.</a>  (Break-It Early Test Application)</p>
+## October 30th [B.E.T.A.](https://bethesda.net/en/article/XUtJrgiCgU6WqMASW8w0I/fallout-76-our-future-begins-together-in-beta) (Break-It Early Test Application)
 <hr>
 
 During the first B.E.T.A. some places I discovered along my travels were:
@@ -127,7 +127,7 @@ to the previous crash.
 </div>
 
 
-<p class="title" style="font-weight: bold; margin-top: .25em;">November 1st B.E.T.A.</p>
+## November 1st B.E.T.A.
 
 <hr>
 
@@ -168,7 +168,7 @@ station, with two cars there.
 </div>
 
 
-<p class="title" style="font-weight: bold; margin-top: .25em;">Notes</p>
+## Notes
 <hr>
 
 - Crashed planes are definitely a thing in Appalachia, there are a _lot_ of
@@ -188,7 +188,7 @@ Proximity voice chat also led to some ... interesting moments, including a
 ringing iPhone and a McDonalds order placed from the wastelands of West 
 Virginia <span class="emoji" style="background-image:url(/images/emoji/emoji_u1f914.png)" title=":thinking:">:thinking:</span>
 
-<p class="title">Acknowledgements</p>
+## Acknowledgements
 <hr>
 
 - Interactive map built with [Leaflet](https://leafletjs.com) and [Leaflet.fullscreen](https://github.com/Leaflet/Leaflet.fullscreen).

content/posts/rust-hotswap.md

@@ -21,7 +21,7 @@ If not, you should probably start with the rust [book](http://doc.rust-lang.org/
 
 __________________________________________________________________________
 
-### Project setup
+## Project Setup
 
 
 First we'll set up a folder to develop from:
@@ -60,7 +60,7 @@ dynamic library.
 
 __________________________________________________________________________
 
-### Code
+## Code
 
 
 Next we'll need our library source, this is the part we will swap out at runtime.
@@ -114,7 +114,7 @@ In anycase, it's a cool trick.
 <br>
 
 ----------------------
-### Full Source
+## Full Source
 
 <div class="tile no-padding sourceCode"><div class="details">src/main.rs <span style="float: right">Rust</span></div></div>
 

content/projects.md

@@ -4,7 +4,7 @@ type: misc
 title: Projects
 ---
 <div class="tile">
-    <p class="page-title">Projects</p>
+    <h1 class="page-title">Projects</h1>
     <hr class="full-bleed">
     <p class="big bold section-title centered-text" style="">This list is incomplete, see also <span class="inline-block"><a href="http://github.com/BenTheElder">my GitHub profile</a> <span class="emoji" style="background-image:url(/images/GitHub-Mark-120px-plus.png)" title=":github:">:github:</span></span></p>
     <hr>

layouts/posts/list.html

@@ -2,7 +2,7 @@
 {{ partial "navbar.html" . }}
   <div id="content">
     <div class="tile">
-      <p class="page-title">Posts</p>
+      <h1 class="page-title">Posts</h1>
       <hr class="full-bleed" />
       {{ range $i, $post := .Pages.ByDate.Reverse }}
       {{ if .Params.prerelease }}{{ else }}

layouts/posts/single.html

@@ -2,7 +2,7 @@
 {{ partial "navbar.html" . }}
   <div id="content">
     <div class="tile blog-content">
-      <p class="page-title">{{if .Params.htmlTitle}}{{.Params.htmlTitle | safeHTML}}{{else}}{{.Title}}{{end}}{{if .Params.subtitle }}<span class="inline-block not-bold">:</span> <span class="inline not-bold"> {{.Params.subtitle}} </span>{{end}}</p>{{range .Params.Categories}}<span class="category">{{. | safeHTML}}</span>{{end}}
+      <h1 class="page-title">{{if .Params.htmlTitle}}{{.Params.htmlTitle | safeHTML}}{{else}}{{.Title}}{{end}}{{if .Params.subtitle }}<span class="inline-block not-bold">:</span> <span class="inline not-bold"> {{.Params.subtitle}} </span>{{end}}</h1>{{range .Params.Categories}}<span class="category">{{. | safeHTML}}</span>{{end}}
         {{ $date := .Date.Format "January 2SUFFIX, 2006" }}
         {{ $day := .Date.Format "2" }}
         {{ $suffix := "th" }}