navbar working with photo viewer too

assets/css/base.css

@@ -36,6 +36,7 @@ body{
     align-items: center;
 }
 
+#footer { min-height: 300px}
 
 
  /* Typography */
@@ -77,6 +78,7 @@ a {
     color: inherit;
     cursor: pointer;
     opacity: 0.9;
+    outline: 0;
 }
 
 a:hover {
@@ -84,18 +86,20 @@ a:hover {
 }
 
 
-.btn>a {
+.btn {
     color: white;
-    background-color: darkslategrey;
+    background-color: black;
     text-transform: uppercase;
     padding: .5em;
     border-radius: 5px;
-    border: 3px solid #566963;
+    border: 3px solid grey;
     cursor: pointer;
     font-weight: bold;
     text-shadow: 0 1px 0 grey;
 }
 
+
+
 img {
     max-width: 100%;
 }

assets/css/navbar.css

@@ -3,15 +3,16 @@
 .nav-bar {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 1000;
+    z-index: 10000;
     width: 100%;
+    color: black;
     background-color: white;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid grey;
+    font-size: 1em;
+    font-weight: bold;
 }
 
 .nav-bar__header {
@@ -19,73 +20,105 @@
     flex-direction: row;
     justify-content: flex-start;
     align-content: center;
-    font-weight: bold;
+    padding-top: 1em;
+    padding-bottom: 1em;
 }
 
-.nav-bar__header a {
+.nav-bar__logo, .nav-bar__menu-button {
     font-size: 1.5em;
-    padding: 1em 1em;
+    padding-left: 1em;
-    font-weight: bold;
 }
 
 .nav-bar__logo {
     order: 2;
-    padding-right: 1em;
 }
 
 .nav-bar__menu-button {
-    font-size: 1.5em;
-    padding: .8em 1em;
-    cursor: pointer;
     order: 1;
+    cursor: pointer;
+}
+
+.nav-bar__menu {
+    overflow-y: scroll;
+    max-height: 80vh;
+}
+
+.hide-menu {
+    height: 0;
+}
+
+.nav-bar__menu-item {
+    display: flex;
+    justify-content: center;
+    transition: 200ms;
+    border-top: 2px solid;
+    font-size: 2em;
+    padding: 1em;
+}
+
+.nav-bar__menu-item>a {
+    flex-grow: 1;
+    text-align: center;
+}
+
+.nav-bar__menu-item:hover {
+    background-color: black;
+    color: white;
+}
+
+@media only screen and (min-width: 800px) {
+
+    .nav-bar {
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+
       }
 
     .nav-bar__menu {
         display: flex;
-    flex-direction: column;
+        overflow-y: hidden;
-    align-items: center;
-    justify-content: center;
-    flex-basis: 100%;
-    overflow-y: scroll;
-    /*max-height: 80vh;*/
     }
-
+    .hide-menu {
-.display-menu {
         height: auto;
     }
 
-.nav-bar__link {
+    .nav-bar__menu {
-    padding: 1em;
+      display: flex;
-    flex-grow: 1;
+      justify-content: flex-end;
-    font-size: 1em;
+      overflow-y: hidden;
-    border-bottom: 1px solid #f4f4f4;
+      overflow-x: auto;
-    font-weight: 600;
-    transition: 200ms;
     }
 
-@media only screen and (min-width: 801px) {
+    .nav-bar__header {
-    .nav-bar {
+        padding-top: 0;
-        flex-direction: row;
+        padding-bottom: 0;
-        align-content: center;
-        justify-content: space-between;
     }
-    .nav-bar__logo {
+
-        margin-left: 1em;
+    .nav-bar__menu-item, .nav-bar__logo {
-    }
+        font-size: 1.5em;
-    .nav-bar__link, .nav-bar__header a {
+        padding-left: .3em;
-        font-size: 2em;
+        padding-right: .3em;
-        padding: 1em .5em;
+        padding-top: .7em;
+        padding-bottom: .7em;
+        border-top: 0;
     }
+
   .nav-bar__menu-button {
         display: none;
     }
-    .nav-bar_menu {
-        flex-direction: row;
-        align-content: center;
-        justify-content: flex-end;
-    }
 }
 
+
 /* Desktop */
 
-@media screen and (min-width: 1200px) {}
+@media screen and (min-width: 1400px) {
+
+  .nav-bar__menu-item, .nav-bar__logo {
+      font-size: 2em;
+      padding-left: .5em;
+      padding-right: .5em;
+  }
+
+}

assets/css/page.css

@@ -1,8 +1,5 @@
 /* sections */
 
-.section__container {
-}
-
 .section-headline {
   text-align: center;
 }
@@ -13,14 +10,46 @@
     align-items: center;
 }
 
+.section__content ul {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width:80%;
+  padding-top: .3em;
+  padding-bottom: 1em;
+}
+
+
+.section__content li {
+  padding-bottom: .7em;
+}
+
+.section__content  li::before {
+font-family: FontAwesome;
+content: "\f18e";
+padding-right:.5em;
+padding-left:1em
+}
+
+.section__content ul li {
+    text-indent: -3rem;
+}
+
 .section--even {
     color: white;
-    background-color: silver;
+    background-color: black;
+}
+
+.section--even .btn {
+    color: black;
+    background-color: white;
+    text-transform: uppercase;
 }
 
 .section--footer {
     color: white;
-    background-color: darkslategrey;
+    background-color: darkgrey;
+    min-height: 4000px;
 }
 
 
@@ -79,28 +108,3 @@
 .gallery__item {
   padding: 3px;
 }
-
-.section__content ul {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  max-width:80%;
-  padding-top: .3em;
-  padding-bottom: 1em;
-}
-
-
-.section__content  li {
-  padding-bottom: .7em;
-}
-
-.section__content  li::before {
-font-family: FontAwesome;
-content: "\f18e";
-padding-right:.5em;
-padding-left:1em
-}
-
-.section__content ul li {
-    text-indent: -3rem;
-}

assets/js/docready.js

@@ -2,7 +2,7 @@
 $(document).ready(function () {
   // Intialize all the media i.e. photos with "media" id
   // TODO use Hugo params to initialize multiple galleries/albums
-  $("#4005").lightGallery({
+  var lg = $("#4005").lightGallery({
     thumbnail: true,
     thumbWidth: 80,
     controls: true,
@@ -12,6 +12,18 @@ $(document).ready(function () {
     // videojs: true
   });
 
+  lg.on('onBeforeOpen.lg', function (event) {
+    $('.nav-bar').css("display", "none")
+  });
+
+  lg.on('onCloseAfter.lg', function (event) {
+    $('.nav-bar').css("display", "flex")
+  });
+
+  lg.on('onBeforeOpen.lg', function (event) {
+    $('.nav-bar').css("display", "none")
+  });
+
   // initialize hero size
   heroResize();
   // iframeResize();

assets/js/page.js

@@ -12,8 +12,10 @@ $('a[href*="#"]:not([href="#"])').click(function () {
     var target = $(this.hash);
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
     if (target.length) {
+      var targetOffset = target.offset().top - $(".nav-bar__header").outerHeight(true);
+      // console.log(targetOffset, target.offset().top, $(".nav-bar__header").outerHeight())
       $('html, body').animate({
-        scrollTop: target.offset().top
+        scrollTop: targetOffset
       }, 1000);
       return false;
     }
@@ -23,38 +25,32 @@ $('a[href*="#"]:not([href="#"])').click(function () {
 // navbar - preload
 (function navbarInit() {
 
-  // var navButton = document.getElementById("nav-menu-button"),
-  // var navButton = document.getElementById("nav-container"),
-  //   navUl = document.getElementsByClassName("nav-ul");
-
   function toggleMobileMenu() {
-    $('.nav-bar__menu-list')[0].style.transition = "max-height 0.5s";
+    $('.nav-bar__menu')[0].style.transition = "max-height 0.5s";
-    $('.nav-bar__menu-list')[0].classList.toggle("hide-ul");
+    $('.nav-bar__menu')[0].classList.toggle("hide-menu");
   }
-  // navLink.onclick = toggleMobileMenu;
+  $('.nav-bar__menu-button, .nav-bar__menu-item > a').click(toggleMobileMenu)
-  //  navButton.onclick = toggleMobileMenu;
-  $('.nav-bar__menu-button, .nav-bar__menu a').click(toggleMobileMenu)
 
 }());
 
-function iframeResize(percent = 1) {
+// function iframeResize(percent = 1) {
-  console.log('window width', percent, $(window).width())
+//   console.log('window width', percent, $(window).width())
-  console.log('section_content', percent, $('.section__content').width())
+//   console.log('section_content', percent, $('.section__content').width())
-  console.log('box embed width', percent, $('.box__embed').width())
+//   console.log('box embed width', percent, $('.box__embed').width())
-  $('iframe').each(function (i) {
+//   $('iframe').each(function (i) {
-    console.log('aspect', this.aspect)
+//     console.log('aspect', this.aspect)
-    $(this).attr('height', this.aspect * $('.box__embed').width())
+//     $(this).attr('height', this.aspect * $('.box__embed').width())
-    $(this).attr('width', $('.box__embed').width())
+//     $(this).attr('width', $('.box__embed').width())
-  })
+//   })
-  console.log('new width and height', $('iframe')[0].width, $('iframe')[0].height)
+//   console.log('new width and height', $('iframe')[0].width, $('iframe')[0].height)
-  console.log('new width and height', $('iframe')[1].width, $('iframe')[1].height)
+//   console.log('new width and height', $('iframe')[1].width, $('iframe')[1].height)
-}
+// }
-
+//
-// get all original iframe dimensions
+// // get all original iframe dimensions
-(function iframeInit() {
+// (function iframeInit() {
-  $('iframe').each(function (i) {
+//   $('iframe').each(function (i) {
-    console.log(i, $(this).attr('height'), $(this).attr('width'));
+//     console.log(i, $(this).attr('height'), $(this).attr('width'));
-    this.aspect = $(this).attr('height') / $(this).attr('width')
+//     this.aspect = $(this).attr('height') / $(this).attr('width')
-    console.log('aspect iframe', i, this.aspect)
+//     console.log('aspect iframe', i, this.aspect)
-  })
+//   })
-}());
+// }());

assets/js/page.js.bak

@@ -0,0 +1,66 @@
+// hero resizer
+function heroResize() {
+  jQuery('#hero').css({
+    width: jQuery(window).width(),
+    height: jQuery(window).height()
+  });
+}
+
+// Smooth Scroll Init - Register click handler for ID anchors
+$('a[href*="#"]:not([href="#"])').click(function () {
+  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+    var target = $(this.hash);
+    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+    if (target.length) {
+      var targetOffset = target.offset().top - $("nav-bar__header").height();
+      console.log(targetOffset, target.offset.top, $("nav-bar__header").height())
+        // $('html, body').animate({
+        //   scrollTop: targetOffset
+        // }, 1000);
+      return false;
+    }
+  }
+});
+
+// navbar - preload
+(function navbarInit() {
+
+  // var navButton = document.getElementById("nav-menu-button"),
+  // var navButton = document.getElementById("nav-container"),
+  //   navUl = document.getElementsByClassName("nav-ul");
+
+  function toggleMobileMenu() {
+    $('.nav-bar__menu')[0].style.transition = "max-height 0.5s";
+    $('.nav-bar__menu')[0].classList.toggle("hide-menu");
+  }
+  $('.nav-bar__menu-button').click(toggleMobileMenu)
+
+}());
+
+// function navbarPadding() {
+//   // apply dynamic padding at the top of the body according to the fixed navbar height
+//   console.log($(".nav-bar__header").height())
+//     // $("#page").css("padding-top", $(".nav-bar__header").height());
+// };
+
+// function iframeResize(percent = 1) {
+//   console.log('window width', percent, $(window).width())
+//   console.log('section_content', percent, $('.section__content').width())
+//   console.log('box embed width', percent, $('.box__embed').width())
+//   $('iframe').each(function (i) {
+//     console.log('aspect', this.aspect)
+//     $(this).attr('height', this.aspect * $('.box__embed').width())
+//     $(this).attr('width', $('.box__embed').width())
+//   })
+//   console.log('new width and height', $('iframe')[0].width, $('iframe')[0].height)
+//   console.log('new width and height', $('iframe')[1].width, $('iframe')[1].height)
+// }
+//
+// // get all original iframe dimensions
+// (function iframeInit() {
+//   $('iframe').each(function (i) {
+//     console.log(i, $(this).attr('height'), $(this).attr('width'));
+//     this.aspect = $(this).attr('height') / $(this).attr('width')
+//     console.log('aspect iframe', i, this.aspect)
+//   })
+// }());

config.toml

@@ -7,18 +7,16 @@ publishDir = "dist"
 
 [params]
 custom_css = ["css/custom.css"]
-  font = "Lato"  # a valid google font name, default Roboto
+# font = "Lato"  # a valid google font name, default Roboto
-
 #  For List of html colors
 # http://www.quackit.com/css/color/charts/css_color_names_chart.cfm
 
 [params.navbar]
-  # text = "For Sale By Owner: 4005 Rock Way"  # default is to use the page title
+  #logo_text = "For Sale By Owner: 4005 Rock Way"  # default is to use the page title
-  # text_small = ""
+  # logo_text_size="1" # unit is em, 2em is default for small
-  text_size="1" # unit is em, 1em is default
   # font = "Ranga"
-  color = "white"
+  # color = "white"
-  bg_color = "seagreen"
+  # bg_color = "seagreen"
 
 [params.hero]
   img = "../images/4005front.jpg"  # default is images/hero.jpg, must provide the full path or url
@@ -55,7 +53,7 @@ publishDir = "dist"
     # bg_color = ""
     [params.sections.even]
     # color = ""
-    bg_color = "seagreen"
+    # bg_color = "seagreen"
 
 
 [[params.social]]

content/footer.md

@@ -1,6 +1,7 @@
 +++
 draft = false
 weight = 100
-link_text = "Contact"
 +++
-This is the footer
+{{% box footer %}}
+This is a footer
+{{% /box %}}

layouts/partials/head/styles.html

@@ -9,21 +9,21 @@
  {{ with .navbar }}
 
  {{ with .font }}
- .nav-bar__logo, nav-bar__menu { font-family:{{ . }},Helvetica,Arial,sans-serif; }
+ .nav-bar__logo, .nav-bar__menu { font-family:{{ . }},Helvetica,Arial,sans-serif; }
  {{ end }}
 
  {{ with .bg_color }}
- .nav-bar__link:hover {color: {{ . }}; }
+ .nav-bar__menu-item:hover {color: {{ . }}; }
  .nav-bar, .nav-bar__menu-button { background-color: {{ . }};  }
  {{ end }}
 
  {{ with .text_size }}
- #nav-bar__logo { font-size: {{ . }}em; }
+ .nav-bar__logo { font-size: {{ . }}em; }
  {{ end }}
 
  {{ with .color }}
-  .nav-bar__logo, .nav-bar__link, .nav-bar__menu-button { color: {{ . }};  }
+  .nav-bar__logo, .nav-bar__menu, .nav-bar__menu-button { color: {{ . }};  }
-  .nav-bar__link:hover { background-color: {{ . }}; }
+  .nav-bar__menu-item:hover { background-color: {{ . }}; }
  {{ end }}
 
  {{ end }}  /* end navbar */

layouts/partials/navbar.html

@@ -2,15 +2,14 @@
 <div id="nav-bar" class="nav-bar">
     <!-- <div class="nav-bar__container">  -->
         <div class="nav-bar__header">
-        <a href="#hero" class="nav-bar__logo">{{ .Site.Params.navbar.text | default .Site.Title }}</a>
+            <a href="#hero" class="nav-bar__logo">{{ if .Site.Params.navbar.logo_text }} {{ .Site.Params.navbar.logo_text }} {{ else }} {{ .Site.Title | default "Add a site title" }} {{ end }}</a>
             <div class="nav-bar__menu-button"> <i class="fa fa-bars"></i></div>
         </div>
-      <!-- <nav class="nav-bar__menu"> -->
+        <!-- <nav class="nav-bar__menu-off"> --> 
-        <ul class="nav-bar__menu display-menu">
+            <ul class="nav-bar__menu hide-menu">
-          {{ range .Data.Pages }}
+                {{ range .Data.Pages }} {{ if ne .File.BaseFileName "footer"}}
-          {{ if ne .File.BaseFileName "footer"}}
+                <li class="nav-bar__menu-item">
-          <li>
+                    <a href="#{{ .File.BaseFileName }}">
-              <a class="nav-bar__link" href="#{{ .File.BaseFileName }}">
                   {{ if isset .Params "link_text" }}
                       {{ index .Params "link_text" }}
                   {{ else  }}
@@ -18,8 +17,7 @@
                   {{ end }}
                 </a>
                 </li>
-          {{ end }}
+                {{ end }} {{ end }}
-          {{ end }}
              </ul>
         <!-- </nav> -->
       <!-- </div> -->

layouts/shortcodes/button.html

@@ -1,6 +0,0 @@
-<!-- parameters url, text, type, size color, bgcolor, padding-in padding-out -->
-<div class ="box box--btn btn {{ .Get "size"  ">
-<!-- <a href="javascript:void( window.open('https://form.jotform.com/{{ .Get 0 }}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500') )">{{ .Get 1 }}</a> -->
-<a href="{{ .Get "url" }}">{{ .Get "text" }}</a>
-<!-- <a href="javascript:void( window.open('https://form.jotform.com/{{ .Get 0 }}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500') )">{{ .Get 1 }}</a> -->
-</div>

layouts/shortcodes/jotform.html

@@ -1,4 +1,4 @@
 <!-- parameters, jotformID,text for button-->
-<div class ="box box--btn btn">
+<div class ="box box--btn">
-<a href="javascript:void( window.open('https://form.jotform.com/{{ .Get 0 }}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500') )">{{ .Get 1 }}</a>
+<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>