add code highlighting and bookmark shortcode

layouts/partials/head/css.html

@@ -4,6 +4,8 @@
 <link href="https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lg-transitions.min.css" rel="stylesheet">
 <!-- Modal-->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.css" type="text/css" media="screen" />
+<!-- highlights -->
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css">
 
 <!-- Site Base CSS  -->
 <link href="/css/base.css" rel="stylesheet">

layouts/partials/head/fonts.html

@@ -3,6 +3,9 @@
 
 <!-- base font -->
 <link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
+ <!-- monospaced for code -->
+<link href="//fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
+
 <!-- Configurable  Fonts -->
 {{ with .Site.Params }}
 

layouts/partials/js.html

@@ -5,6 +5,8 @@
 <script src="https://cdn.jsdelivr.net/g/lightgallery,lg-autoplay,lg-pager,lg-thumbnail,lg-video"></script>
 <!-- modal -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.js"></script>
+<!-- highlights -->
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
 
 <!-- LOCAL -->
 

layouts/partials/navbar.html

@@ -11,7 +11,7 @@
                 {{ if ne .Params.navbar false }}
                 {{ if ne .Params.hidden true }}
                 <li class="nav-bar__menu-item">
-                      <a href="#{{ .File.BaseFileName }}">
+                      <a href="#nav-{{ .File.BaseFileName }}">
                       {{ .Params.link_text | default .Title }}
                     </a>
                 </li>

layouts/partials/sections.html

@@ -1,7 +1,7 @@
 <!-- Renders Section Based on Content -->
 {{ $parity := "odd" }} {{ range $i, $e := .Data.Pages }}
 {{ if ne .Params.hidden true }}
-<section id="{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} section--{{ if modBool $i 2  }}odd{{ else  }}even{{ end }}">
+<section id="nav-{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} section--{{ if modBool $i 2  }}odd{{ else  }}even{{ end }}">
 	<div class="section__container">
 		<div class="section__headline section__headline--{{ .File.BaseFileName }}">
 			<h1>{{ .Title }}</h1>

layouts/shortcodes/bookmark.html

@@ -0,0 +1,6 @@
+{{ $numOfParams := ( len .Params ) }}
+{{ if eq $numOfParams 1 }} <span name="{{ .Get 0 }}">{{ .Get 0 }}</span> {{ end }}
+{{ if eq $numOfParams 2 }} <span name="{{ .Get 0 }}">{{ .Get 1 }}</span> {{ end }}
+{{ if eq $numOfParams 3 }}
+<span name="{{ .Get 0 }}" {{ if (.Get 2) "hide" }}class="invisible"{{ end }}>{{ .Get 1 }}</span>
+{{ end }}

layouts/shortcodes/embed.html

@@ -1,4 +1,4 @@
-<!-- parameter map url -->
+<!-- Used for embedding iframes from sites like youtube and google -->
 {{ if .IsNamedParams }}
 <div class="box box--{{ .Get "type" }}">
     {{ with .Get "title" }}

layouts/shortcodes/list.html

@@ -1,10 +0,0 @@
-<div class="list">
-    <ul>
-        {{ range .Params }}
-        <li>
-            {{ . }}
-        </li>
-        {{ end }}
-    </ul>
-
-</div>

layouts/shortcodes/social.html

@@ -1,6 +1,6 @@
 {{ range .Site.Params.social }}
 	<li>
-		<a href="{{ .url }}" class="btn btn-default btn-lg">
+		<a href="{{ .url }}" class="btn btn--round btn--large">
 			<i class="fa fa-{{ .icon }} fa-fw"></i>
 			<span class="network-name">{{ .title }}</span>
 		</a>

static/css/base.css

@@ -174,10 +174,6 @@ hr {
   justify-content: flex-start;
 }
 
-.hide {
-  visibility: hidden;
-}
-
 .text-center p {
   text-align: center;
 }
@@ -189,3 +185,19 @@ hr {
 .text-right p {
   text-align: right;
 }
+
+/* keeps in the DOM but moves from the page */
+.invisible {
+  position: absolute;
+  left: -999em;
+}
+
+/*keeps in the same location and maintains it's layout space even though hidden*/
+.hide {
+  visibility: hidden;
+}
+
+/*completely removes from DOM */
+.remove {
+  display: none;
+}

static/css/page.css

@@ -104,6 +104,7 @@
   flex-flow: wrap;
   align-content: center;
   justify-content: center;
+  padding-bottom: 0.5em;
 }
 
 .box--column {
@@ -146,6 +147,11 @@
   font-size: 3rem;
 }
 
+.btn--circle {
+  border-radius: 50%;
+  padding: 0.5em;
+}
+
 .box--avatar > img,
 img.avatar {
   object-fit: cover;
@@ -169,7 +175,6 @@ img.avatar {
 }
 
 .box__caption {
-padding-bottom: .75em;
 text-transform: capitalize;
 font-style: italic;
 }
@@ -213,12 +218,25 @@ font-style: italic;
 
 code {
   font-size: 0.8em;
-  background-color: grey;
+  font-family: Inconsolata;
+  background-color: dimgrey;
   border-radius: 0.2em;
   color: white;
   padding-left: 0.2em;
   padding-right: 0.2em;
   padding-top: 0.05em;
   padding-bottom: 0.05em;
-
+}
+
+code.hljs {
+  font-size: .75em;
+  border-radius: 0.2em;
+  background-color: dimgrey;
+  color: white;
+  padding: 1em;
+  margin-bottom: 0.7em;
+  width: inherit;
+  max-width: 90vw;
+  border-width: 10px;
+  border-color: blue;
 }

static/js/docready.js

@@ -5,7 +5,7 @@ $(document).ready(function () {
   heroResize();
   itemResize('iframe');
   typeResize(); // for section content
-
+  hljs.initHighlightingOnLoad();
   // resize elements on change
   $(window).resize(function () {
     heroResize();
@@ -13,4 +13,4 @@ $(document).ready(function () {
     typeResize();
   });
 
-});
+});;