~dricottone/blog

044b76380a50084ea9d7252cfc50b93a98b1227f — Dominic Ricottone 2 years ago 5e6902d 
Refactor head partial

Switch commented-out resources to conditional resources. Now these CSS
and JS files can be sourced on a per-page basis. Simply set e.g.
`lightbox = true` in the header of a Markdown file.

Removed outdated `navi.css`.

Added helpful comments and reorganized resources by type rather than
source.

Added logic to JS inline script so that the list navigation can be
tabbed through and the focused item will trigger on hitting Enter.
patch browse .tar.gz 
2 files changed, 28 insertions(+), 139 deletions(-)

M layouts/partials/head.html
D static/css/navi.css

M layouts/partials/head.html => layouts/partials/head.html +28 -16
@@ 1,7 1,13 @@

<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">

  <!-- Page titles
        + Use "MyFileTitle | Dominic Ricottone"
        + Exceptions for...
           + site homepage
           + if "site_title = true" is set in the file
          ... in which case use just "Dominic Ricottone"
    -->
  {{ $title := print .Title " | " .Site.Title }}
  {{ if or (.IsHome) (.Params.site_title) }}{{ $title = .Site.Title }}{{ end }}
  <title>{{ $title }}</title>


@@ 9,30 15,36 @@
  <!--Stylesheets-->
  <link rel="stylesheet" type="text/css" href="/css/common.css" />
  <link rel="stylesheet" type="text/css" href="/css/header.css" />
  <link rel="stylesheet" type="text/css" href="/css/navi.css" />
  <link rel="stylesheet" type="text/css" href="/css/blog.css" />
  <!--<link rel="stylesheet" type="text/css" href="/css/cgit.css" />-->
  <!--<link rel="stylesheet" type="text/css" href="/css/gallery.css" />-->

  <!--External Dependencies-->
  <script src="/js/jquery-3.5.1.min.js"></script>
  <!--<link rel="stylesheet" type="text/css" href="/css/lightbox-2.11.3.min.css" />-->
  <!--<script src="/js/lightbox-2.11.3.min.js"></script>-->
  {{ if .Params.cgit }}     <link rel="stylesheet" type="text/css" href="/css/cgit.css" /> {{ end }}
  {{ if .Params.lightbox }} <link rel="stylesheet" type="text/css" href="/css/gallery.css" /> {{ end }}
  {{ if .Params.lightbox }} <link rel="stylesheet" type="text/css" href="/css/lightbox-2.11.3.min.css" /> {{ end }}

  <!--JavaScript-->
  <script src="/js/jquery-3.5.1.min.js"></script>
  {{ if .Params.chat }}     <script src="/js/chat.js"></script> {{ end }}
  {{ if .Params.lightbox }} <script src="/js/lightbox-2.11.3.min.js"></script> {{ end }}
  <script>
$(document).ready(function() {
  $(".trigger").on("click", 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");
    var classes = this.className.split(/\s+/);
    var target_classes = classes.filter(c => c.startsWith("target-"));
    for (var c=0; c<target_classes.length; c++) {
      var target = "." + target_classes[c].split(/\-/)[1];

    // 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++) {
      var target = "." + classes[c].split(/\-/)[1];
      $(target).toggleClass("shown");
    }
  });
});
  </script>

</head>



D static/css/navi.css => static/css/navi.css +0 -123
@@ 1,123 0,0 @@
/* Navigation */
div#navi {
  height: 100%;
  left: 0;
  margin: 0;
  overflow-x: hidden;
  padding: 0 0.5em 0.5em 0.5em;
  position: fixed;
  top: calc(3em + 2px); /* should match height of vertical line in header */
}
@media (max-width: 800px) {
  div#navi {
    height: auto;
    margin: 0;
    position: static;
    width: 100%;
  }
}

/* Navigation - list-style (for desktop screens) */
ul#list-navi {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100px;
}
@media (max-width: 800px) {
  ul#list-navi {
    display: none;
  }
}
ul#list-navi li {
  background-color: #000;
  color: #fff;
  display: block;
  font-size: 1em;
  height: 0;
  line-height: 2em;
  margin: 0;
  opacity: 0;
  padding: 0 0.5em 0 0;
  text-align: center;
  transition: all 0.4s ease-out;
}
ul#list-navi li a {
  color: #fff;
  display: none;
  text-decoration: none;
}
ul#list-navi li.shown {
  height: 2em;
  margin: 0 0 0.5em 0;
  opacity: 1;
}
ul#list-navi li.shown a {
  display: block;
}
ul#list-navi li.shown:hover {
  background-color: #333;
}
ul#list-navi li.shown.trigger {
  background: url('/files/arrow_down.png') no-repeat right #000;
  background-origin: content-box;
  padding: 0 0.5em 0 0;
}
ul#list-navi li.shown.trigger.selection {
  background: url('/files/arrow_up.png') no-repeat right #999;
  background-origin: content-box;
  color: #000;
  padding: 0 0.5em 0 0;
}

/* Navigation - menu-style (for mobile screens) */
select#menu-navi {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: url('arrow_down.png') no-repeat right #000;
  background-origin: content-box;
  border: 0;
  color: #fff;
  display: none;
  font-size: 1em;
  height: 2em;
  margin: 0;
  outline: 0;
  padding: 0 0.5em 0 0;
  width: 12em;
}
@media (max-width: 800px) {
  select#menu-navi {
    display: inline-block;
  }
}
select#menu-navi:focus {
  background: url('arrow_up.png') no-repeat right #000;
  background-origin: content-box;
  padding: 0 0.5em 0 0;
}
select#menu-navi option {
  height: 2em;
  margin: 0;
  width: 12em;
}

/* Content left margin */
main {
  margin-left: calc(100px + 1em);
}
@media (max-width: 800px) {
  main {
    margin-left: 0;
  }
}
div#cgit {
  margin-left: calc(100px + 1em);
}
@media (max-width: 800px) {
  div#cgit {
    margin-left: 0;
  }
}