modals working

layouts/index.html

@@ -10,6 +10,7 @@
 {{ partial "hero.html" . }}
 {{ end }}
 {{ partial "sections.html" . }}
+{{ partial "modals.html" . }}
 </main>
 {{ partial "js.html" . }}
 </body>

layouts/partials/head/css.html

@@ -2,8 +2,13 @@
 <!-- Light Gallery-->
 <link href="https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.min.css" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lg-transitions.min.css" rel="stylesheet">
+<!-- scrollbar-->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/css/perfect-scrollbar.min.css" type="text/css" media="screen" />
+
 <!-- 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" />
+<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.css" type="text/css" media="screen" /> -->
+<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.4.2/css/iziModal.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">
 

layouts/partials/head/styles.html

@@ -42,8 +42,6 @@
  }
  {{ end }}
 
-
-
  {{ end }}  /* end navbar */
 
  {{ with .hero }}
@@ -193,6 +191,34 @@
 
   {{ end }}  /* end sections */
 
+
+  {{ with .modal }}
+
+  {{ with .font }}
+  .section__container--modal { font-family:{{ . }},Helvetica,Arial,sans-serif; }
+  {{ end }}
+
+  {{ with .color }}
+   .section__container--modal { color: {{ . }};  }
+  {{ end }}
+
+  {{ with .bg_color }}
+  .section__container--modal { background-color: {{ . }};  }
+  {{ end }}
+
+  {{ with .headline_size }}
+  .section__headline--modal > h1 { font-size: {{ . }}em; }
+  {{ end }}
+
+  {{ with .text_size }}
+  .section__container--modal { font-size: {{ . }}em; }
+  {{ end }}
+
+
+
+  {{ end }} /*end modal */
+
+
   {{ with .buttons }}
 
   {{ with .odd }}

layouts/partials/js.html

@@ -3,14 +3,12 @@
 <script src="https://cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
 <!-- light gallery and modules/plugins -->
 <script src="https://cdn.jsdelivr.net/g/lightgallery,lg-autoplay,lg-pager,lg-thumbnail,lg-video"></script>
-<!-- modal -->
+<!-- scrollbar -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/js/perfect-scrollbar.jquery.min.js"></script>
 <!-- highlights -->
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
 
 <!-- LOCAL -->
-
-<!-- Function Library -->
 <!-- sizing tools -->
 <script src="/js/fitToParent.js"></script>
 <script src="/js/flowType.js"></script>

layouts/partials/modals.html

@@ -0,0 +1,12 @@
+{{ range where .Site.RegularPages  "Section" "modal" }}
+<div id="modal-{{ .File.BaseFileName }}" class="section section--modal">
+	<div class="section__container	section__container--modal">
+		<div class="section__headline section__headline--modal">
+			<h1>{{ .Title }}</h1>
+		</div>
+		<div class="section__content section__content--modal" {{ with .Params.align }} style="align-items: {{.}};"{{ end }} >
+			{{ .Content }}
+		</div>
+	</div>
+</div>
+{{ end }}

layouts/partials/navbar.html

@@ -7,7 +7,7 @@
         </div>
         <!-- <nav class="nav-bar__menu-off"> -->
             <ul class="nav-bar__menu hide-menu">
-                {{ range .Data.Pages }}
+                {{ range where .Site.RegularPages  "Section" "sections" }}
                 {{ if ne .Params.navbar false }}
                 {{ if ne .Params.hidden true }}
                 <li class="nav-bar__menu-item">
@@ -21,4 +21,4 @@
         <!-- </nav> -->
       <!-- </div> -->
 </div>
-<div id="nav-bar-spacer"></div>
+<div class="nav-bar-spacer"></div>

layouts/partials/sections.html

@@ -1,6 +1,9 @@
 <!-- Renders Section Based on Content -->
-{{ range $i, $e := where (.Data.Pages) ".Params.hidden" "!=" true }}
+{{ $.Scratch.Set "offset" 0 }}
-<section id="{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} {{ if ne .File.BaseFileName "hero" }}section--{{ if modBool $i 2  }}odd{{ else  }}even{{ end }}{{ 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 }}">
 	<div class="section__container">
 		<div class="section__headline section__headline--{{ .File.BaseFileName }}">
 			<h1>{{ .Title }}</h1>

layouts/partials/services.html

@@ -1,58 +0,0 @@
-<section id="services">
-
-<!-- Page Content -->
- {{ range $index, $element :=  .Data.Pages }}{{ if or (eq .Section "services") (eq .Section "post") }}
-    {{ if modBool $index 2 }}
-    <div class="content-section-a">
-
-        <div class="container">
-
-            <div class="row">
-                <div class="col-lg-5 col-sm-6">
-                    <hr class="section-heading-spacer">
-                    <div class="clearfix"></div>
-                    <h2 class="section-heading">{{ .Title }}</h2>
-                    {{ .Content }}
-                </div>
-                {{ with .Params.img }}
-                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
-                    <img class="img-responsive" src="img/{{ . }}" alt="">
-                </div>
-                {{ end }}
-            </div>
-
-        </div>
-        <!-- /.container -->
-
-    </div>
-    <!-- /.content-section-a -->
-    {{ else }}
-
-    <div class="content-section-b">
-
-        <div class="container">
-
-            <div class="row">
-                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
-                    <hr class="section-heading-spacer">
-                    <div class="clearfix"></div>
-                    <h2 class="section-heading">{{ .Title }}</h2>
-                    {{ .Content }}
-                </div>
-                {{ with .Params.img }}
-                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
-                  <img class="img-responsive" src="img/{{ . }}" alt="">
-                </div>
-                {{ end }}
-            </div>
-
-        </div>
-        <!-- /.container -->
-
-    </div>
-    {{ end }}
-    <!-- /.content-section-b -->
-    {{ end }}
-{{ end }}
-
-</section>

layouts/shortcodes/link.html

@@ -12,7 +12,7 @@
 {{ end }}
 <a
 {{ if eq (.Get "display") "tab" }} target="_blank"{{ end }}
-{{ if eq (.Get "display") "modal" }}rel="modal:open"{{ 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 }}
 >

static/css/base.css

@@ -56,7 +56,6 @@ h3,
 h4,
 h5,
 h6 {
-  /* display: block; */
   text-align: center;
   font-weight: bold;
   line-height: 1.45;

static/css/navbar.css

@@ -54,7 +54,7 @@
   transition: 200ms;
   border-top: 2px solid;
   font-size: 1.8em;
-  padding: .5em;
+  padding: .35em;
 }
 
 .nav-bar__menu-item > a {

static/css/page.css

@@ -60,7 +60,7 @@
   margin-left: -1.4em;
 }
 
-.section--even {
+.section--odd {
   color: white;
   background-color: black;
 }
@@ -70,7 +70,7 @@
   background-color: grey;
 }
 
-.section--even .btn {
+.section--odd .btn {
   color: black;
   background-color: white;
   text-transform: uppercase;
@@ -82,11 +82,62 @@
   min-height: 4000px;
 }
 
+/* modal */
+
+.section--modal {
+  display: flex;
+  color: white;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.section__container--modal {
+  margin: 0.5em;
+  margin-top: 2em;
+  background-color: black;
+  color: white;
+  max-height: 85%;
+  border-radius: 1em;
+  width: auto;
+  padding-bottom: 1em;
+}
+
+.section__headline--modal {
+  padding-top: 0.5em;
+  position: relative;
+  width: 100%;
+  padding-right: 1.2em;
+}
+
+.section__headline--modal > h1 {
+  font-size: 1.2em;
+}
+
+.section__headline--modal > a[modal-close] {
+  position: absolute;
+  font-size: 1em;
+  top: 0.4em;
+  right: 0.4em;
+}
+
+.section__content--modal {
+  overflow-y: auto;
+  position: relative;
+  align-items: flex-start;
+  font-size: 0.7em;
+  padding: 1em;
+}
+
 /* ----------------
  	Hero Section
 ---------------- */
 #hero {
-  background-image: url("../images/hero.jpg");
+  background-image: url("/images/hero.jpg");
   background-size: cover;
   background-position: center;
   display: flex;
@@ -96,6 +147,17 @@
 
 #hero .section-content--hero {
   text-align: center;
+  line-height: 1;
+}
+
+/*mobile first*/
+#hero h1,
+#hero h2,
+#hero h3,
+#hero h4,
+#hero h5,
+#hero h6 {
+  line-height: 1;
 }
 
 /* ----------------
@@ -251,7 +313,7 @@ code {
 }
 
 code.hljs {
-  font-size: .75em;
+  font-size: 0.75em;
   border-radius: 0.2em;
   background-color: dimgrey;
   color: white;

static/css/responsive.css

@@ -9,9 +9,24 @@
 
 /* tablets */
 @media only screen and (min-width: 800px) {
+  .section__headline--modal > h1 {
+    font-size: 1.8em;
   }
 
-@media only screen and (min-device-width: 800px) and (max-device-width: 1190px) {
+  .section__headline--modal > a[modal-close] {
+    font-size: 1.2em;
+  }
+}
+
+@media only screen and (min-device-width: 800px) and (max-device-width: 1199px) {
+  #hero h1,
+  #hero h2,
+  #hero h3,
+  #hero h4,
+  #hero h5,
+  #hero h6 {
+    line-height: 1.1;
+  }
 }
 
 /* desktop */
@@ -24,6 +39,15 @@
   .box__contact {
     margin-left: 6em;
   }
+
+  #hero h1,
+  #hero h2,
+  #hero h3,
+  #hero h4,
+  #hero h5,
+  #hero h6 {
+    line-height: inherit;
+  }
 }
 
 @media only screen and (min-device-width: 1200px) and (max-device-width: 1800px) {

static/js/docready.js

@@ -8,6 +8,7 @@ $(document).ready(function () {
   itemResize('iframe');
   typeResize(); // for section content
   hljs.initHighlightingOnLoad();
+  $('.section__content--modal').perfectScrollbar();
 
   // resize elements on change
   $(window).resize(function () {
@@ -16,6 +17,7 @@ $(document).ready(function () {
     heroResize();
     itemResize('iframe');
     typeResize();
+    $('.section__content--modal').perfectScrollbar('update');
   });
 
 });;

static/js/page.js

@@ -1,5 +1,5 @@
 // Smooth Scroll Init - Register click handler for ID anchors
-$('a[href*="#"]:not([href="#"])').click(function () {
+$('a[href*="#"]:not(a[modal])').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) + ']');
@@ -30,7 +30,7 @@ $('#cell').click(function () { $('#cell-number').toggleClass("hide"); });
 // $('#phone').click(function () { alert('phone clicked'); return false; });
 
 function navbarSpacer() {
-  $('#nav-bar-spacer').css({
+  $('.nav-bar-spacer').css({
     height: $(".nav-bar__header").outerHeight(true),
   });
 }
@@ -106,3 +106,40 @@ function lightgallery(id) {
   });
 
 }
+
+// Modal
+// hide all the modals before displaying
+$('.section--modal').each(function () {
+  $(this).hide();
+});
+
+// all but inside the modal box
+$(document).on('click', function (event) {
+  var container = $(".section__container--modal");
+  if (!container.is(event.target) && // If the target of the click isn't the container...
+    container.has(event.target).length === 0) // ... nor a descendant of the container
+  {
+    $('.section--modal.current').hide().removeClass("current");
+  }
+});
+
+$('.section__container--modal').click(function () {
+  $('.section--modal.current').hide().removeClass("current");
+  $('a[modal-close]').remove();
+});
+
+// register click for modal link
+$("a[modal]").click(function () {
+  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+    var target = this.hash;
+    $(target).addClass("current").show()
+    target = target + " > .section__container > .section__headline"
+    var closer = "<a modal-close class='fa-stack fa-2x' ><i class='fa fa-circle-thin fa-stack-2x'></i><i class='fa fa-close fa-stack-1x'></i></a>"
+    $(target).append(closer);
+  } else {
+    var target = this;
+  }
+  // alert(`I clicked on modal link ${target}`);
+  return false;
+});
+// end modal