5 files changed, 70 insertions(+), 202 deletions(-)

M layouts/_default/baseof.html
M layouts/partials/head.html
D layouts/partials/header.html
M layouts/partials/navi.html
M static/css/common.css

@@ 6,7 6,6 @@
     {{ partial "navi.html" . }}
   </div>
   <main>
-    {{ partial "header.html" . }}
     {{ block "main" . }}{{ end }}
   </main>
   <div id="footer">

@@ 25,24 25,14 @@
   {{ if .Params.lightbox }} <script src="/js/lightbox-2.11.3.min.js"></script> {{ end }}
   <script>
 $(document).ready(function() {
-  $(".trigger").on("click keypress", function(event) {
-    if (event.type === "keypress") {
-      //jQuery's `which` normalizes `keyCode` and `charCode`
-      if (event.which !== 13) {
-        return;
-      }
-    }
-
-    // Add `selection` class to this element
-    $(this).toggleClass("selection");
-
-    // Add `shown` class to children elements
-    let all_classes = this.className.split(/\s+/);
-    let classes = all_classes.filter(c => c.startsWith("target-"));
-    for (let c = 0; c < classes.length; c++) {
-      let target = "." + classes[c].split(/\-/)[1];
-      $(target).toggleClass("shown");
+  $("nav button#navi").on("click", function(event) {
+    $("nav ul#naviList").toggleClass("hide");
+  });
+  $("nav button#navi p").on("keypress", function(event) {
+    if (event.which !== 13) {
+      return;
     }
+    $("nav ul#naviList").toggleClass("hide");
   });
 });
   </script>

@@ 1,6 0,0 @@
-<table id="header">
-  <tbody>
-    <tr><td class="main">Dominic Ricottone</td></tr>
-    <tr><td class="sub">Personal Blog and CV</td></tr>
-  </tbody>
-</table>

@@ 1,28 1,13 @@
-<!-- Navigation
-      + Either `#menu-navi` or `#list-navi` will be visible
-      + Default is to show `#menu-navi` but a media query overrides this
-  -->
-<select id="menu-navi" required onchange="window.open(this.value, '_self')">
-  <option value="#" selected>Navigate to...</option>
-  <option value="/">Home</option>
-  <option value="/about">About</option>
-  <option value="/posts">Blog</option>
-  <option value="/cv">CV</option>
-  <option value="https://git.dominic-ricottone.com/~dricottone/">Personal Repository</option>
-  <option value="https://www.github.com/dricottone">GitHub</option>
-  <option value="https://wiki.dominic-ricottone.com/DominicRicottone">Wiki</option>
-  <option value="/chat">Live Chat</option>
-  <option value="/sitemap.xml">Site Map</option>
-</select>
-<ul id="list-navi">
-  <li class="shown"><a href="/"/>Home</a></li>
-  <li class="shown"><a href="/about">About</a></li>
-  <li class="shown"><a href="/posts">Blog</a></li>
-  <li class="shown"><a href="/cv">CV</a></li>
-  <li class="trigger shown target-code" tabindex="0">Code</li>
-  <li class="code"><a href="https://git.dominic-ricottone.com/~dricottone/">Personal</a></li>
-  <li class="code"><a href="https://www.github.com/dricottone">GitHub</a></li>
-  <li class="shown"><a href="https://wiki.dominic-ricottone.com/DominicRicottone">Wiki</a></li>
-  <li class="shown"><a href="/chat">Live Chat</a></li>
-  <li class="shown"><a href="/sitemap.xml">Site Map</a></li>
+<nav>
+<button id="navi"><p>Toggle Menu</p></button>
+<ul id="naviList" class="hide">
+  <li><a href="/"/>Home</a></li>
+  <li><a href="/about">About Me</a></li>
+  <li><a href="/posts">Blog</a></li>
+  <li><a href="/cv">CV</a></li>
+  <li><a href="https://git.dominic-ricottone.com/~dricottone/">Git Repository</a></li>
+  <li><a href="https://wiki.dominic-ricottone.com/DominicRicottone">Wiki</a></li>
+  <li><a href="/chat">Live Chat</a></li>
 </ul>
+</nav>
+

@@ 107,172 107,72 @@ td {
   padding: 0;
 }
 
-/* navigation by sidebar (for desktop screens) */
-main {
-  margin: 0 0 0 calc(100px + 1em);
-}
-div#navi {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 100px;
-  overflow-x: hidden;
-  /* overflow-y: scroll; */
-  background-color: #303030;
-  scrollbar-color: #808080 #303030;
+/* navigation */
+nav button {
+  display: none;
 }
-ul#list-navi {
-  width: 100px;
+
+nav ul#naviList {
+  list-style: none;
+  display: flex;
+  flex-direction: row;
   margin: 0;
-  list-style-type: none;
+  padding: 0;
 }
-select#menu-navi {
-  /* hide by default */
-  display: none;
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
 
-  background: url('/files/arrow_down.png') no-repeat right #303030;
-  background-origin: content-box;
-  border: none;
-  color: #fff;
-  outline: none;
+nav ul#naviList li a {
+  padding: 0 .5rem;
 }
 
-/* on small screens...
- *  + turn sidebar into topbar
- *  + revert positioning of the navbar (fixed->relative)
- *  + hide list navigation (display: (implicit) block->none)
- *  + show menu navigation (display: none->block)
- */
-@media (max-width: 800px) {
-  main {
-    margin: 0;
+@media (max-width: 500px) {
+  nav {
+    padding: .5rem;
+    background-color: #f1f1f1;
+    border-radius: 1rem;
   }
-  div#navi {
-    position: relative;
+
+  nav button {
+    display: block;
+    line-height: 100%;
+    background-color: #e1e1e1;
+    padding: 0;
     width: 100%;
+    border: 0 none;
+    border-radius: 1rem;
   }
-  ul#list-navi {
-    display: none;
+  nav button:hover, nav button:focus {
+    background-color: #d1d1d1;
   }
-  select#menu-navi {
+
+  nav button p {
     display: block;
+    margin: .25rem 0;
+    padding: .25rem 0;
   }
-}
 
-/* list items */
-ul#list-navi li {
-  display: block;
-  height: 0;
-  margin: 0;
-  color: #fff;
-  opacity: 0;
-  font-size: 1em;
-  line-height: 2em;
-  text-align: center;
-  transition: all 0.4s ease-out;
-}
-ul#list-navi li a {
-  display: none;
-  color: #fff;
-  text-decoration: none;
-}
-ul#list-navi li a:focus {
-  outline: none;
-  text-decoration: underline solid #fff;
-  text-decoration-thickness: 0.3em;
-  text-underline-offset: 0.3em;
-}
-
-/* when `shown` class is attached...
- *  + transition in the list items (height 0->2em, opacity 0->1, margin-bottom 0->.5em)
- *  + show text immediately (display none->block)
- */
-ul#list-navi li.shown {
-  height: 2em;
-  margin: 0 0 0.5em 0;
-  opacity: 1;
-}
-ul#list-navi li.shown a {
-  display: block;
-}
-
-/* on hover, list items light up (color #303030->#444) */
-ul#list-navi li.shown:hover {
-  background-color: #444;
-}
-
-/* for trigger items, draw an arrow beside the text */
-ul#list-navi li.shown.trigger {
-  padding: 0 1em 0 0;
-  background: url('/files/arrow_down.png') no-repeat right;
-  background-origin: content-box;
-  text-decoration: underline;
-}
-ul#list-navi li.shown.trigger:focus {
-  outline: none;
-  text-decoration: underline solid #fff;
-  text-decoration-thickness: 0.3em;
-  text-underline-offset: 0.3em;
-}
-ul#list-navi li.shown.trigger.selection {
-  padding: 0 1em 0 0;
-  background: url('/files/arrow_up.png') no-repeat right #444;
-  background-origin: content-box;
-}
-
-/* center horizontal rules */
-ul#list-navi hr {
-  width: 80%;
-  margin: 0 auto 0.5em auto;
-  color: #fff;
-}
-
-/* menu items */
-select#menu-navi:focus {
-  padding: 0 0.5em 0 0;
+  nav ul#naviList {
+    display: block;
+    margin: 0;
+  }
 
-  background: url('/files/arrow_up.png') no-repeat right #000;
-  background-origin: content-box;
-}
-select#menu-navi option {
-  height: 2em;
-  margin: 0;
-  width: 12em;
-}
+  nav ul#naviList li {
+    background-color: #e1e1e1;
+    width: 100%;
+    margin: .25rem 0;
+    padding: .25rem 0;
+    border-radius: 1rem;
+  }
+  nav ul#naviList.hide {
+    display: none;
+  }
+  nav ul#naviList li:hover, nav ul#naviList li:focus {
+    background-color: #d1d1d1;
+  }
 
-/* Header content */
-table#header {
-  border-collapse: collapse;
-  margin-bottom: 1em;
-  width: 100%;
-}
-table#header td.main {
-  color: #000;
-  font-size: 2.5em;
-  padding: 0 0 0 10px;
-  white-space: nowrap;
-}
-table#header td.main a {
-  color: #000;
-  text-decoration: none;
-}
-table#header td.sub {
-  color: #777;
-  border-top: solid 1px #ccc;
-  font-size: 1em;
-  padding: 0 0 0 10px;
-}
-table#header td.sub a {
-  color: #777;
-}
-/* Header logos */
-table#header td.logo {
-  width: 96px;
-  vertical-align: top;
+  nav ul#naviList li a {
+    display: block;
+    border-radius: 1rem;
+  }
 }
 
 /* Footer */