add in complete link shortcode, other minor fixes

layouts/partials/head/css.html

@@ -2,6 +2,8 @@
 <!-- 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">
+<!-- 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" />
 
 <!-- Site Base CSS  -->
 <link href="/css/base.css" rel="stylesheet">
@@ -12,9 +14,6 @@
 <!-- Site Navigation CSS  -->
 <link href="/css/navbar.css" rel="stylesheet">
 
-    <!-- Photo Gallery Styling with thumbsup  -->
-    <!-- <link href="/css/thumbsup.css" rel="stylesheet"> -->
-
 <!-- Responsive Media Queries  -->
 <link href="/css/responsive.css" rel="stylesheet">
 
@@ -23,5 +22,4 @@
 
 <!-- Custom/Override CSS files -->
 {{ range .Site.Params.custom_css }}
-        <link rel="stylesheet" href="{{ . }}">
+<link rel="stylesheet" href="/css/{{ . }}"> {{ end }}
-    {{ end }}

layouts/partials/head/fonts.html

@@ -2,32 +2,32 @@
 <link href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
 <!-- base font -->
-<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
 <!-- Configurable  Fonts -->
 {{ with .Site.Params }}
 
   {{ with .font }}
-  <link href="//fonts.googleapis.com/css?family={{ . }}:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+  <link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
   {{ end }}
 
   {{ with .navbar.font }}
-  <link href="//fonts.googleapis.com/css?family={{ . }}:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+  <link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
   {{ end }}
 
   {{ with .hero.font }}
-  <link href="//fonts.googleapis.com/css?family={{ . }}:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+  <link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
   {{ end }}
 
   {{ with .hero.headline_font }}
-  <link href="//fonts.googleapis.com/css?family={{ . }}:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+  <link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
   {{ end }}
 
   {{ with .sections.font }}
-  <link href="//fonts.googleapis.com/css?family={{ . }}:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+  <link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
   {{ end }}
 
   {{ with .sections.font_headline }}
-  <link href="//fonts.googleapis.com/css?family={{ . }}:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+  <link href="//fonts.googleapis.com/css?family={{ . }}:300,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
   {{ end }}
 
 {{ end }}

layouts/partials/head/styles.html

@@ -152,7 +152,7 @@
     {{ end }}
 
     {{ with .bullet_icon }}
-    .section__content li::before {
+    .section__content ul > li::before {
       content: "{{ . }}";
       }
 

layouts/partials/js.html

@@ -1,9 +1,10 @@
 <!-- CDNs -->
 <!-- jQuery -->
 <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 -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.8.0/jquery.modal.min.js"></script>
 
 <!-- LOCAL -->
 
@@ -22,3 +23,18 @@
 
 <!-- Document Ready - Initialize - Window resize calls -->
 <script src="/js/docready.js"></script>
+
+<!-- Custom/Override js files -->
+{{ range .Site.Params.custom_js }}
+   <script src="/js/{{ . }}"></script>
+{{ end }}
+
+<!-- Initialize Photo Galleries with a Lightbox -->
+{{ if .Site.Params.galleries }}
+<script>
+$(document).ready(function () {
+  {{ range.Site.Params.galleries }}
+  {{ $.Site.Params.lightbox | safeJS }}('#{{ . }}'){{ end }}
+});
+</script>
+{{ end }}

layouts/partials/sections.html

@@ -6,7 +6,7 @@
 		<div class="section__headline section__headline--{{ .File.BaseFileName }}">
 			<h1>{{ .Title }}</h1>
 		</div>
-		<div class="section__content section-content--{{ .File.BaseFileName }}">
+		<div class="section__content section-content--{{ .File.BaseFileName }}" {{ with .Params.align }} style="align-items: {{.}};"{{ end }} >
 			{{ .Content }}
 		</div>
 	</div>

layouts/shortcodes/link.html

@@ -1,4 +1,24 @@
-<!-- parameters, jotformID,text for button-->
+{{ .Scratch.Set "url" (.Get "url") }}
-<div class ="box box--btn">
+{{ .Scratch.Set "height" (.Get "height") }}
-<a class="btn" href="{{.Get 0 }}">{{ .Get 1 }}</a>
+{{ .Scratch.Set "width" (.Get "width" | default "1000") }}
-</div>
+{{ 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" }}rel="modal:open"{{ 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>

layouts/shortcodes/text-justify.html

@@ -1,3 +0,0 @@
-<div style="text-align: {{ .Get 0 }}">
-{{ .Inner }}
-</div>

static/css/base.css

@@ -110,6 +110,7 @@ a,
   outline: 0;
   text-decoration: none;
   cursor: pointer;
+  font-weight: bold;
 }
 
 a:hover,
@@ -157,6 +158,7 @@ hr {
   border-style: solid;
 }
 
+
 .flex-col-center {
   display: flex;
   align-items: center;
@@ -180,3 +182,15 @@ hr {
 .hide {
   visibility: hidden;
 }
+
+.text-center p {
+  text-align: center;
+}
+
+.text-left p {
+  text-align: left;
+}
+
+.text-right p {
+  text-align: right;
+}

static/css/page.css

@@ -1,6 +1,6 @@
 /* sections */
 
-.section-headline {
+.section__headline {
   text-align: center;
 }
 
@@ -25,14 +25,14 @@
   padding-bottom: 0.7em;
 }
 
-.section__content li::before {
+.section__content ul > li::before {
   font-family: FontAwesome;
   content: "\f18e";
   padding-right: 0.5em;
   padding-left: 0;
 }
 
-.section__content ul li {
+.section__content ul > li {
   text-indent: -1.2rem;
 }
 
@@ -74,14 +74,12 @@
  	Components/Shortcodes Styling
 ---------------- */
 
-/* box creates a flexbox wrapper */
+/* box creates a flexbox wrapper, row default */
 .box {
   display: flex;
-  flex-direction: row;
+  flex-flow: wrap;
-  flex-wrap: wrap;
   align-content: center;
   justify-content: center;
-  /*padding: 0.0em;*/
 }
 
 .box--column {
@@ -101,13 +99,30 @@
 }
 
 .box--btn {
-  padding: 1rem;
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
-.box--avatar  {
+.box--btn-bar > .box--btn {
-  flex
+  margin-right: 0.2em;
+  margin-bottom: 0.5em;
 }
 
+.btn__text {
+  align-self: center;
+}
+
+.btn__icon {
+  align-self: center;
+  padding-right: 0.2em;
+}
+
+.btn--large .btn__text,
+.btn--large .btn__icon {
+  font-size: 3rem;
+}
+
+
 
 .box--avatar > img,
 img.avatar {
@@ -115,7 +130,7 @@ img.avatar {
   border-radius: 50%;
   width: 100px;
   height: 100px;
-  padding: .5em;
+  padding: 0.5em;
 }
 
 .box--avatar > a {
@@ -136,7 +151,6 @@ img.avatar {
   max-width: 800px;
 }
 
-
 .box__contact-info > * {
   padding: 0.1em;
   align-self: center;
@@ -147,8 +161,6 @@ img.avatar {
   align-self: center;
 }
 
-
-
 /*turn off default bullets*/
 .box--gallery {
   list-style: none;

static/css/responsive.css

@@ -2,8 +2,9 @@
 
 /* small tablets */
 @media only screen and (min-width: 600px) {
-  .section__content ul li {
+  /* undo indent of small screens */
-    text-indent: -2rem;
+  .section__content ul > li {
+    text-indent: 1rem;
   }
 }
 

static/js/docready.js

@@ -5,7 +5,6 @@ $(document).ready(function () {
   heroResize();
   itemResize('iframe');
   typeResize(); // for section content
-  lightbox('#4005') // TODO put this in template instead of hard coding using parameter
 
   // resize elements on change
   $(window).resize(function () {

static/js/page.js

@@ -79,7 +79,7 @@ function typeResize() {
 
 // Lightbox for Gallery
 
-function lightbox(id) {
+function lightgallery(id) {
   // Intialize all the media i.e. photos with "media" id
   // TODO use Hugo params to initialize multiple galleries/albums
   var lg = $(id).lightGallery({