content/development/index.html

@@ -1,10 +1,11 @@
 ---
-layout: page
 title: Development
-permalink: /development/
+menu:
+    main:
+        name: "Development"
 ---
 <div class="wrapper">
-    <h1>Background<h1>
+    <h1>Background</h1>
     <p>I taught myself Java at about the age of thirteen, which I consider proof of what a truly wonderful resource the Internet can be. It probably also speaks to a certain ability I have for self-motivated learning, which I find to be as effective as formal tuition. I am however looking at formal tution as a way to reinforce and develop my understanding of core programming concepts. In the meantime, I am expanding my knowledge into Python through development of Django-based webapps. I am looking  to develop skills in C++ or similar next, likely through games development.</p>
     <h1>Langagues/Technologies:</h1>
     <ul>

content/posts/index.md

@@ -1,5 +1,8 @@
 ---
 title: Blog
+menu:
+    main:
+        name: "Blog"
 ---
 # Frenetic Scribblings
 

content/technical/index.html

@@ -1,7 +1,8 @@
 ---
-layout: page
 title: Event Technical
-permalink: /technical/
+menu:
+    main:
+        name: "Event Technical"
 ---
 <div class="wrapper">
     <h1>Background</h1>

content/writing/index.html

@@ -1,3 +1,9 @@
+---
+title: Writing
+menu:
+    main:
+        name: "Writing"
+---
 <div class="wrapper">
     <h1>Background</h1>
     <p>By all accounts, I have been an utterly voracious reader since I was able to read. This is translating into a growing love for writing, both fiction and non-fiction. My writing hero is Terry Pratchett - I hardly dare hope that my writing might one day might make people think with something approaching his level of wit and incisiveness. His work has had a huge impact on me personally, and reinforced my belief in the power of words.</p>

layouts/_default/single.html

@@ -5,11 +5,21 @@
     <div class="container">
         <header>
             <h3>{{ .Title }}</h3>
+            <nav id="main-nav">
+                <a href="/">Home</a>
+                {{ $currentNode := . }}
+                {{ range .Site.Menus.main }}
+                <a href="{{.URL}}">{{.Name}}</a>
+                {{ end }}
+		    </nav>
         </header>
         <main aria-label="Content">
             <article>
 				{{.Content}}
 			</article>
+            <aside>
+                {{ .TableOfContents }}
+            </aside>
         </main>
         {{ partial "footer.html" . }}
     </div>

static/css/custom.css

@@ -1,3 +1,7 @@
+*, *::before, *::after {
+    box-sizing: inherit;
+}
+
 /** Reset some basic elements */
 body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
 
@@ -30,10 +34,6 @@ a:visited { color: #1756a9; }
 
 a:hover { color: #111; text-decoration: underline; }
 
-.social-media-list a:hover { text-decoration: none; }
-
-.social-media-list a:hover .username { text-decoration: underline; }
-
 /** Blockquotes */
 blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
 
@@ -48,19 +48,6 @@ pre { padding: 8px 12px; overflow-x: auto; }
 
 pre > code { border: 0; padding-right: 0; padding-left: 0; }
 
-/** Wrapper */
-.wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }
-
-@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }
-
-/** Clearfix */
-.footer-col-wrapper:after, .wrapper:after { content: ""; display: table; clear: both; }
-
-/** Icons */
-.svg-icon { width: 16px; height: 16px; display: inline-block; fill: #828282; padding-right: 5px; vertical-align: text-top; }
-
-.social-media-list li + li { padding-top: 5px; }
-
 /** Tables */
 table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }
 
@@ -77,6 +64,8 @@ html, body {
     height: 100%;
     overflow-x: hidden;
     font-family: helvetica, arial;
+    font-size: 100%;
+    box-sizing: border-box;
 }
 header, footer {
     background: #202226;
@@ -190,3 +179,13 @@ a.button {
   margin-left: -50vw;
   margin-right: -50vw;
 }
+nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 70%;
+}
+nav > * {
+  padding-left: 2em;
+  padding-right: 2em;
+}