From a57525de2f6c40ce90dffb884b4a64b71725f273 Mon Sep 17 00:00:00 2001
From: "kebler.net" <kebler.net@gmail.com>
Date: Wed, 11 Aug 2021 13:52:19 -0700
Subject: [PATCH] feat: allow default light/dark colors as defaults for entire
 page fix: move shortcodes to their own repo feat: allow offsetting light and
 dark colors on sections refactor: removed custom hero, just use a regular
 section

---
 layouts/index.html                |   2 +-
 layouts/partials/head/styles.html | 126 ++++++++++++++----------------
 layouts/partials/sections.html    |   8 +-
 layouts/shortcodes/avatar.html    |  13 ---
 layouts/shortcodes/bookmark.html  |   6 --
 layouts/shortcodes/box.html       |   4 -
 layouts/shortcodes/contact.html   |  23 ------
 layouts/shortcodes/disqus.html    |  50 ------------
 layouts/shortcodes/embed.html     |  23 ------
 layouts/shortcodes/format.html    |   4 -
 layouts/shortcodes/image.html     |  22 ------
 layouts/shortcodes/jotform.html   |   4 -
 layouts/shortcodes/link.html      |  24 ------
 layouts/shortcodes/lorem.html     |   7 --
 layouts/shortcodes/social.html    |   8 --
 layouts/shortcodes/youtube.html   |  38 ---------
 static/css/base.css               |   7 +-
 static/css/navbar.css             |  10 ++-
 18 files changed, 77 insertions(+), 302 deletions(-)
 delete mode 100644 layouts/shortcodes/avatar.html
 delete mode 100644 layouts/shortcodes/bookmark.html
 delete mode 100644 layouts/shortcodes/box.html
 delete mode 100644 layouts/shortcodes/contact.html
 delete mode 100644 layouts/shortcodes/disqus.html
 delete mode 100644 layouts/shortcodes/embed.html
 delete mode 100755 layouts/shortcodes/format.html
 delete mode 100644 layouts/shortcodes/image.html
 delete mode 100644 layouts/shortcodes/jotform.html
 delete mode 100644 layouts/shortcodes/link.html
 delete mode 100755 layouts/shortcodes/lorem.html
 delete mode 100644 layouts/shortcodes/social.html
 delete mode 100644 layouts/shortcodes/youtube.html

diff --git a/layouts/index.html b/layouts/index.html
index d34c430..a40a6b6 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -5,7 +5,7 @@
 {{ if ne .Site.Params.navbar.hidden true }}
   {{ partial "navbar.html" . }}
 {{ end }}
-{{ if ne .Site.Params.hero.custom_hero true }}
+{{ if eq .Site.Params.use_hero true }}
 {{ partial "hero.html" . }}
 {{ end }}
 <main class="sections">
diff --git a/layouts/partials/head/styles.html b/layouts/partials/head/styles.html
index 85e3dd7..9978285 100644
--- a/layouts/partials/head/styles.html
+++ b/layouts/partials/head/styles.html
@@ -1,33 +1,33 @@
 <!-- Configurable Styles partial to appear in head -->
  <style>
 
+ {{ $navbar := .Site.Params.navbar }}
+ {{ $hero := .Site.Params.hero }}
+ {{ $sections := .Site.Params.sections }}
+ {{ $modal := .Site.Params.modal }}
+ {{ $buttons := .Site.Params.buttons }}
+
+ {{ $dark_color:=.Site.Params.dark_color }}
+ {{ $light_color:=.Site.Params.light_color }}
+
 {{ with .Site.Params.font }}
   body { font-family:{{ . }},Helvetica,Arial,sans-serif; }
  {{ end }}
 
- {{ with .Site.Params }}
+ /* NAVBAR */
 
- {{ with .navbar }}
-
- {{ with .font }}
+ {{ $bg_color := $navbar.bg_color | default $dark_color }}
+ {{ $color := $navbar.color | default $light_color }}
+ .nav-bar__menu-item:hover {color: {{ $bg_color }}; }
+ .nav-bar, .section--footer { background-color: {{ $bg_color }};  }
+ .nav-bar__logo, .nav-bar__menu, .nav-bar__menu-button, .section--footer { color: {{ $color }};  }
+ .nav-bar__menu-item:hover { background-color: {{ $color }}; }
+ 
+ {{ with $navbar.font }}
  .nav-bar__logo, .nav-bar__menu { font-family:{{ . }},Helvetica,Arial,sans-serif; }
  {{ end }}
 
- {{ with .bg_color }}
- .nav-bar__menu-item:hover {color: {{ . }}; }
- .nav-bar, .section--footer { background-color: {{ . }};  }
- {{ end }}
-
- {{ with .text_size }}
- .nav-bar__logo { font-size: {{ . }}em; }
- {{ end }}
-
- {{ with .color }}
-  .nav-bar__logo, .nav-bar__menu, .nav-bar__menu-button, .section--footer { color: {{ . }};  }
-  .nav-bar__menu-item:hover { background-color: {{ . }}; }
- {{ end }}
-
-{{ with .logo_text_short }}
+{{ with $navbar.logo_text_short }}
 @media only screen and (max-width: 400px) {
  .nav-bar__logo {
    text-indent: -9999px;
@@ -43,9 +43,24 @@
  }
  {{ end }}
 
- {{ end }}  /* end navbar */
+ /* HERO */
 
- {{ with .hero }}
+{{ if ne .Site.Params.hero.custom_hero true }}
+
+ {{ $bg_color := .Params.bg_color | default $light_color }}
+ <!-- {{ $bg_color := $hero.bg_color | default $light_color }} -->
+ {{ $color := $hero.color | default $dark_color }}
+
+   #hero { color: {{ $color }}; }
+   #hero { background-color: {{ $bg_color }}; }
+   #hero h1 { color: {{ $hero.headline_color | default $color }}; }
+   #hero h2 { color: {{ $hero.subheadline_color | default $color }}; }
+   #hero h3 { color: {{ $hero.subsubheadline_color | default $color }}; }
+   #hero h4 { color: {{ $hero.lines_color | default $color }}; }
+   #hero hr { border-top-color: {{ $hero.divider_color | default $color }}; }
+  
+
+ {{ with $hero }}
 
   {{ with $.Site.Params.imagespath }}
     {{ $.Scratch.Set "path" ( . ) }}
@@ -60,13 +75,7 @@
   #hero > .section__container { font-family:{{ . }},Helvetica,Arial,sans-serif;}
   {{ end }}
 
-  {{ with .color }}
-  #hero { color: {{ . }}; }
-  {{ end }}
 
-  {{ with .bg_color }}
-  #hero { background-color: {{ . }}; }
-  {{ end }}
 
   {{ if and ( .text_outline ) ( .text_shadow ) }}
   #hero > .section__container {
@@ -103,34 +112,18 @@
   #hero h1, #hero h2, #hero h3 { font-family: "{{ . }}",Helvetica,Arial,sans-serif; }
   {{ end }}
 
-  {{ with .headline_color }}
-  #hero h1 { color: {{ . }}; }
-  {{ end }}
-
-  {{ with .headline_size }}
+   {{ with .headline_size }}
   #hero h1 { font-size: {{ . }}em; }
   {{ end }}
 
-  {{ with .subheadline_color }}
-  #hero h2 { color: {{ . }}; }
-  {{ end }}
-
   {{ with .subheadline_size }}
   #hero h2 { font-size: {{ . }}em; }
   {{ end }}
 
-  {{ with .subsubheadline_color }}
-  #hero h3 { color: {{ . }}; }
-  {{ end }}
-
-  {{ with .subsubheadline_size }}
+ {{ with .subsubheadline_size }}
   #hero h3 { font-size: {{ . }}em; }
   {{ end }}
 
-  {{ with .lines_color }}
-  #hero h4 { color: {{ . }}; }
-  {{ end }}
-
   {{ with .lines_size }}
   #hero h4 { font-size: {{ . }}em; }
   {{ end }}
@@ -139,19 +132,33 @@
   #hero hr { border-width: {{ . }}px; }
   {{ end }}
 
-  {{ with .divider_color }}
-  #hero hr { border-top-color: {{ . }}; }
-  {{ end }}
 
-  {{ end }}  /* end hero */
+  {{ end }}  /* end with hero */
 
+  {{ end }}  /* end not custom hero
 
-  {{ with .sections }}
+  /* sections */
+
+ {{ $bg_color := $sections.bg_color | default $light_color }}
+ {{ $color := $sections.color | default $dark_color }}
+  
+ .section--odd, .section--even .btn {
+   color: {{ $sections.odd.color | default $color }};
+   background-color: {{ $sections.odd.bg_color | default $bg_color }};
+ }
+.section--even, .section--odd .btn {
+   color: {{ $sections.even.color | default $bg_color }};
+   background-color: {{ $sections.even.bg_color | default $color }};
+  }
+
+  {{ with $sections }}
 
     {{ with .font }}
     .section, .section h1, .section h2, .section h3, .section p { font-family: "{{ . }}",Helvetica,Arial,sans-serif; }
     {{ end }}
 
+  
+
     {{ with .headline_font }}
     .section__headline h1 { font-family: "{{ . }}",Helvetica,Arial,sans-serif; }
     {{ end }}
@@ -163,20 +170,7 @@
 
     {{ end }}
 
-    {{ with .odd }}
-    .section--odd, .section--even .btn {
-      color: {{ .color }};
-      background-color: {{ .bg_color }};
-    }
 
-    {{ end }}
-
-    {{ with .even }}
-    .section--even, .section--odd .btn {
-      color: {{ .color }};
-      background-color: {{ .bg_color }};
-    }
-    {{ end }}
 
     {{ with .footer }}
     .section--footer {
@@ -195,7 +189,7 @@
   {{ end }}  /* end sections */
 
 
-  {{ with .modal }}
+  {{ with $modal }}
 
   {{ with .font }}
   .section__container--modal { font-family:{{ . }},Helvetica,Arial,sans-serif; }
@@ -222,7 +216,7 @@
   {{ end }} /*end modal */
 
 
-  {{ with .buttons }}
+  {{ with $buttons }}
 
   {{ with .odd }}
   .section--odd .btn {
@@ -250,6 +244,4 @@
 
   {{ end }} /* .buttons */
 
- {{ end }} /* .Site.Params*/
-
  </style>
diff --git a/layouts/partials/sections.html b/layouts/partials/sections.html
index adad9e4..65da214 100644
--- a/layouts/partials/sections.html
+++ b/layouts/partials/sections.html
@@ -1,9 +1,11 @@
 <!-- Renders Section Based on Content -->
-{{ $.Scratch.Set "offset" 0 }}
+{{ if eq .Site.Params.sections.offset true }}{{ $.Scratch.Set "offset" 0 }}{{ else }}{{ $.Scratch.Set "offset" 1 }}{{ end }}
+{{ if eq .Site.Params.use_hero true }}{{ $.Scratch.Set "offset" 1 }}{{ end }}
 {{ range $i, $e := where ( where .Site.RegularPages  "Section" "sections" ) ".Params.hidden" "!=" true }}
-{{ if eq .File.BaseFileName "hero" }}{{ $.Scratch.Set "offset" 1 }}{{ end }}
 {{ $j := add ( $.Scratch.Get "offset" ) $i }}
-<section id="{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} {{ if ne .File.BaseFileName "hero" }}section--{{ if modBool $j 2  }}odd{{ else  }}even{{ end }}{{ end }}">
+<section id="{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} section--{{ if modBool $j 2  }}even{{ else  }}odd{{ end }}"
+style="color:{{ .Params.color }}; background-color:{{ .Params.bg_color }};"
+>
 	<div class="section__container">
 		<div class="section__headline section__headline--{{ .File.BaseFileName }}">
 			<h1>{{ .Title }}</h1>
diff --git a/layouts/shortcodes/avatar.html b/layouts/shortcodes/avatar.html
deleted file mode 100644
index 96fa424..0000000
--- a/layouts/shortcodes/avatar.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{{ $path := "/images/" }} {{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
-{{ if .IsNamedParams }}
-<div class="box box--avatar">
-  {{ with .Get "url" }}<a href="{{.}}">{{ end }}
-	<img class="avatar" src="{{ $path }}{{ .Get "img" }}"/>
-  {{ with .Get "url" }}</a>{{ end }}
-</div>
-{{ else }}
-{{ $avatar := ( .Get 0 | default "avatar.jpg" ) }}
-<div class="box box--avatar">
-	<img class="avatar" src="{{ $path }}{{ $avatar }}"/>
-</div>
-{{ end }}
diff --git a/layouts/shortcodes/bookmark.html b/layouts/shortcodes/bookmark.html
deleted file mode 100644
index 2de630a..0000000
--- a/layouts/shortcodes/bookmark.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{{ $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 }}
diff --git a/layouts/shortcodes/box.html b/layouts/shortcodes/box.html
deleted file mode 100644
index acad83f..0000000
--- a/layouts/shortcodes/box.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{{ $numOfParams := ( len .Params ) }}
-<div class="box {{ range .Params }}box--{{ . }} {{ end }}">
-{{ .Inner }}
-</div>
diff --git a/layouts/shortcodes/contact.html b/layouts/shortcodes/contact.html
deleted file mode 100644
index 7b50b46..0000000
--- a/layouts/shortcodes/contact.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{{ with .Site.Params.contact }} {{ $path := "/images/" }} {{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
-<div class="box box__contact">
-	<img class="avatar" src="{{ $path }}{{ .avatar | default " avatar.jpg "}}"/>
-	<div class="box box__contact-info">
-		<h4>{{ .name }}</h4>
-		<div class="box">
-			<a class="btn" onClick="javascript:window.open('mailto:{{ .email }}', 'mail');event.preventDefault()" href="{{ .email }}">
-				<i class="fa fa-envelope-o fa-fw"></i>
-			</a>
-			<div id="cell" class="btn clickable">
-				<i class="fa fa-mobile fa-fw"></i>
-			</div>
-			{{ if .cell_image | or .cell }}
-			{{ if .cell_image }}
-			<img id="cell-number" class="hide" src="{{ $path }}{{ .cell_image }}"/>
-			{{ else }}
-			<div id="cell-number" class="hide">{{ .cell }}</div>
-			{{ end }}
-			{{ end }}
-		</div>
-	</div>
-</div>
-{{ end }}
diff --git a/layouts/shortcodes/disqus.html b/layouts/shortcodes/disqus.html
deleted file mode 100644
index a66871a..0000000
--- a/layouts/shortcodes/disqus.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<div class="box box--disqus">
-    <div id="disqus_thread" class="box__embed box__embed--disqus">
-    </div>
-</div>
-
-<script type="text/javascript">
-
-(function() {
-    // Don't ever inject Disqus on localhost--it creates unwanted
-    // discussions from 'localhost:1313' on your Disqus account...
-    // if (window.location.hostname == "localhost")
-    //     return;
-
-    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-    var disqus_shortname = '{{ .Get 0 | default .Site.DisqusShortname }}';
-    dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-})();
-</script>
-
-<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-
-<a href="https://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
-
-
-<!-- from disqus
-<div id="disqus_thread"></div>
-<script>
-
-/**
-*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
-*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
-/*
-var disqus_config = function () {
-this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
-this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
-};
-*/
-(function() { // DON'T EDIT BELOW THIS LINE
-var d = document, s = d.createElement('script');
-s.src = 'https://landingpage-guide.disqus.com/embed.js';
-s.setAttribute('data-timestamp', +new Date());
-(d.head || d.body).appendChild(s);
-})();
-</script>
-<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-                                 -->
-
-<!-- goes in body before closing tag for count -->
-<!-- <script id="dsq-count-scr" src="//landingpage-guide.disqus.com/count.js" async></script> -->
diff --git a/layouts/shortcodes/embed.html b/layouts/shortcodes/embed.html
deleted file mode 100644
index 67ea536..0000000
--- a/layouts/shortcodes/embed.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!-- Used for embedding iframes from sites like youtube and google -->
-{{ if .IsNamedParams }}
-<div class="box box--embed box--{{ .Get "type" }}">
-    {{ with .Get "title" }}
-    <div class="box__title">{{ . }}</div>
-    {{ end }}
-    <div
-       {{ with .Get "type" }} class="embed--{{ . }}"{{end}}
-       {{ with .Get "id" }} id="{{ . }}"{{end}}
-       {{ with .Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
-       {{ with .Get "wpad"}} wPad="{{ . }}"{{ end }}
-       >
-    {{ .Inner }}
-    </div>
-    {{ with .Get "caption"}}
-    <div class="box__caption">{{ . }}</div>
-    {{ end }}
-</div>
-{{ else }}
-<div class="box box--embed {{ with .Get 0 }}embed--{{ . }}{{ end }}">
-    {{ .Inner }}
-</div>
-{{ end }}
diff --git a/layouts/shortcodes/format.html b/layouts/shortcodes/format.html
deleted file mode 100755
index cecde2a..0000000
--- a/layouts/shortcodes/format.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!--  Adds a class to a block of text.  Used for custom formatting -->
-<span class="{{ range .Params }}{{ . }} {{ end }}">
-{{ .Inner }}
-</span>
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
deleted file mode 100644
index 1ebb969..0000000
--- a/layouts/shortcodes/image.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{{ $path := "/images/" }}
-{{ $filename := .Get "filename" }}
-{{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
-<div class="box box--column box--image
-{{ with .Get "style"}} box--image-{{ . }}{{ end }}
-{{ with .Get "link"}}{{ if eq . "lightbox" }} box--image-lightbox{{ end }}{{ end }}
-"
-{{ with .Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
-{{ with .Get "wpad"}} wPad="{{ . }}"{{ end }}
->
-{{ with .Get "title" }}
-  <div class="box__title">{{ . }}</div>
-  {{ end }}
-{{ with .Get "link"}}
-{{ if eq . "lightbox" }}<a href="{{ $path }}{{ $filename }}">{{ else }}<a href="{{.}}" target="_blank" >{{ end }}
-{{ end }}
-<img src="{{ $path }}{{ .Get "filename" }}" />
-{{ if .Get "link"}}</a>{{ end }}
-{{ with .Get "caption"}}
-<div class="box__caption">{{ . }}</div>
-{{ end }}
-</div>
diff --git a/layouts/shortcodes/jotform.html b/layouts/shortcodes/jotform.html
deleted file mode 100644
index aa6d093..0000000
--- a/layouts/shortcodes/jotform.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- parameters, jotformID,text for button-->
-<div class ="box box--btn">
-<a class="btn" href="javascript:void( window.open('https://form.jotform.com/{{ .Get 0 }}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500') )">{{ .Get 1 }}</a>
-</div>
diff --git a/layouts/shortcodes/link.html b/layouts/shortcodes/link.html
deleted file mode 100644
index fda8f7b..0000000
--- a/layouts/shortcodes/link.html
+++ /dev/null
@@ -1,24 +0,0 @@
-{{ .Scratch.Set "url" (.Get "url") }}
-{{ .Scratch.Set "height" (.Get "height") }}
-{{ .Scratch.Set "width" (.Get "width" | default "1000") }}
-{{ if .Get "height" }}
-   {{ .Scratch.Set "height" ( printf ", height=%s" ( .Scratch.Get "height" ) ) }}
-  {{else}}
-    {{ .Scratch.Set "height" "" }}
-  {{ end }}
-
-{{ if eq (.Get "display") "window" }}
-{{ .Scratch.Set "url" ( printf "javascript:void( window.open('%s', 'blank', 'scrollbars=yes, toolbar=no, width=%s %s' ))" (.Scratch.Get "url") (.Scratch.Get "width") (.Scratch.Get "height") ) }}
-{{ end }}
-<a
-{{ if eq (.Get "display") "tab" }} target="_blank"{{ end }}
-{{ if eq (.Get "display") "modal" }} modal{{ end }}
-{{ if eq (.Get "type") "btn" }} class="box box--btn btn btn--{{ .Get "size" | default "regular" }}"{{ end }}
-{{ printf "href=%q" (.Scratch.Get "url") | safeHTMLAttr }}
->
-{{ with .Get "icon" }}<i class="btn__icon fa fa-{{ . }}"></i>{{ end }}
-{{ if eq (.Get "type") "btn" }}<div class="btn__text">{{ .Get "text" }}</div>
-{{ else }}
-{{ .Get "text" }}
-{{ end }}
-</a>
diff --git a/layouts/shortcodes/lorem.html b/layouts/shortcodes/lorem.html
deleted file mode 100755
index b7ddbfc..0000000
--- a/layouts/shortcodes/lorem.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- https://github.com/f/loremjs
-shorcode parameter
-2p = 2 paragraphs
-5s = 5 sentences
-6w = 6 words
-1-6w = between 1 and 6 words -->
-<div data-lorem={{ .Get 0 | default "2p" }}></div>
diff --git a/layouts/shortcodes/social.html b/layouts/shortcodes/social.html
deleted file mode 100644
index a1394b4..0000000
--- a/layouts/shortcodes/social.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{{ range .Site.Params.social }}
-	<li>
-		<a href="{{ .url }}" class="btn btn--round btn--large">
-			<i class="fa fa-{{ .icon }} fa-fw"></i>
-			<span class="network-name">{{ .title }}</span>
-		</a>
-	</li>
-{{ end }}
diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html
deleted file mode 100644
index bb306bb..0000000
--- a/layouts/shortcodes/youtube.html
+++ /dev/null
@@ -1,38 +0,0 @@
-{{ $.Scratch.Set "maxwidth" ( $.Page.Site.Params.youtube.maxwidth )  }}
-{{ $.Scratch.Set "wpad" ( $.Page.Site.Params.youtube.wpad )  }}
-{{ $.Scratch.Set "nothumb" ( $.Page.Site.Params.youtube.disable_thumb )  }}
-{{ if .IsNamedParams }}
-{{ with .Get "maxwidth" }}{{ $.Scratch.Set "maxwidth" . }}{{ end }}
-{{ with .Get "wpad" }}{{ $.Scratch.Set "wpad" . }}{{ end }}
-{{ with .Get "nothumb" }}{{ $.Scratch.Set "nothumb" . }}{{ end }}
-<div class="box box--embed box--column box--youtube">
-    {{ with .Get "title" }}
-    <div class="box__title">{{ . }}</div>
-    {{ end }}
-    <div
-       youtube_id="{{ .Get "id" }}"
-       {{ with .Get "start"}} start="{{ . }}"{{ end }}
-       {{ with .Get "end"}} end="{{ . }}"{{ end }}
-       {{ with .Get "plist"}} list="{{ . }}"{{ end }}
-       {{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
-       {{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}
-       {{ with $.Scratch.Get "nothumb"}} nothumb="yes" {{ end }}
-       >
-  <!-- thumb and video get put here -->
-    </div>
-    {{ with .Get "caption"}}
-    <div class="box__caption">{{ . }}</div>
-    {{ end }}
-</div>
-{{ else }}
-{{ $numOfParams := ( len .Params ) }}
-<div class="box box--embed box--youtube"
-       youtube_id="{{ .Get 0 }}"
-       {{ if eq $numOfParams 2 }} start="{{ .Get 1 }}"{{ end }}
-       {{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
-       {{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}
-       {{ with $.Scratch.Get "nothumb"}} nothumb="yes" {{ end }}
-       >
-      <!-- image or iframe injected here -->
-</div>
-{{ end }}
diff --git a/static/css/base.css b/static/css/base.css
index 042eb67..9cb897f 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -103,16 +103,19 @@ ol {
 
 a,
 .clickable {
-  color: inherit;
+  color:inherit;
   outline: 0;
   text-decoration: none;
   cursor: pointer;
   font-weight: bold;
+  font-style: italic;
+  filter: saturate(200%);
 }
 
 a:hover,
 .clickable:hover {
-  filter: saturate(140%);
+  color: black;
+  filter: saturate(100%);
 }
 
 .btn {
diff --git a/static/css/navbar.css b/static/css/navbar.css
index 12d2ba5..1418af4 100644
--- a/static/css/navbar.css
+++ b/static/css/navbar.css
@@ -1,5 +1,6 @@
 /* NAVIGATION BAR */
 
+/* mobile first at <1000px */
 .nav-bar {
   display: flex;
   flex-direction: column;
@@ -42,6 +43,7 @@
 .nav-bar__menu {
   overflow-y: scroll;
   max-height: 75vh;
+  padding-right: .5em;
 }
 
 .hide-menu {
@@ -68,13 +70,15 @@
   color: white;
 }
 
+/* bigger than small tablet */
 @media only screen and (min-width: 1000px) {
   .nav-bar {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
-    padding-right: 1em;
+    padding-right: 2em;
+    padding-left: 2em;
   }
 
   .nav-bar__menu {
@@ -111,10 +115,10 @@
   .nav-bar__menu-button {
     display: none;
   }
-}
+} /* end responsive */
 
 
-/* Desktop */
+/* full size */
 
 @media screen and (min-width: 1400px) {
   .nav-bar__menu-item,