From 301675b0969ab7e94fb4ee3c8d06f7034752cbad Mon Sep 17 00:00:00 2001
From: David Kebler <d@kebler.net>
Date: Sat, 22 Apr 2017 16:03:10 -0700
Subject: [PATCH] add max-wdith to image shortcode - change css of #hero to
 .section--hero

---
 layouts/partials/js.html      |  2 +-
 layouts/shortcodes/image.html |  9 +++++++--
 static/css/base.css           |  3 +--
 static/css/page.css           | 22 ++++++++++++----------
 static/css/responsive.css     | 24 ++++++++++++------------
 5 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index 011f9c1..a76a3a3 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -45,6 +45,6 @@ $(document).ready(function () {
 <!-- use same lightbox for full sized images in when link="modal" -->
 <script>
 $(document).ready(function () {
-  {{ $.Site.Params.lightbox | safeJS }}('.box--image')
+  {{ $.Site.Params.lightbox | safeJS }}('.box--image-lightbox')
 });
 </script>
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
index 65273bd..588074d 100644
--- a/layouts/shortcodes/image.html
+++ b/layouts/shortcodes/image.html
@@ -1,12 +1,17 @@
 {{ $path := "/images/" }}
 {{ $filename := .Get "filename" }}
 {{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
-<div class="box box--column box--image">
+<div class="box box--column box--image
+{{ 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 . "modal" }}<a href="{{ $path }}{{ $filename }}">{{ else }}<a href="{{.}}">{{ end }}
+{{ if eq . "lightbox" }}<a href="{{ $path }}{{ $filename }}">{{ else }}<a href="{{.}}" target="_blank" >{{ end }}
 {{ end }}
 <img src="{{ $path }}{{ .Get "filename" }}" />
 {{ if .Get "link"}}</a>{{ end }}
diff --git a/static/css/base.css b/static/css/base.css
index a63d8d0..042eb67 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -104,7 +104,6 @@ ol {
 a,
 .clickable {
   color: inherit;
-  opacity: 0.8;
   outline: 0;
   text-decoration: none;
   cursor: pointer;
@@ -113,7 +112,7 @@ a,
 
 a:hover,
 .clickable:hover {
-  opacity: 1;
+  filter: saturate(140%);
 }
 
 .btn {
diff --git a/static/css/page.css b/static/css/page.css
index 040bccb..bfa53d2 100644
--- a/static/css/page.css
+++ b/static/css/page.css
@@ -143,7 +143,7 @@
 /* ----------------
  	Hero Section
 ---------------- */
-#hero {
+.section--hero {
   background-size: cover;
   background-position: center;
   display: flex;
@@ -152,18 +152,18 @@
   width: 100vw;
 }
 
-#hero .section-content--hero {
+.section--hero .section-content--hero {
   text-align: center;
   line-height: 1;
 }
 
 /*mobile first*/
-#hero h1,
-#hero h2,
-#hero h3,
-#hero h4,
-#hero h5,
-#hero h6 {
+.section--hero h1,
+.section--hero h2,
+.section--hero h3,
+.section--hero h4,
+.section--hero h5,
+.section--hero h6 {
   line-height: 1;
 }
 
@@ -189,12 +189,14 @@
   align-items: center;
 }
 
-.box--embed::before {
+.box--embed::before,
+.box--image::before {
   content: "";
   height: 0.5em;
 }
 
-.box--embed::after {
+.box--embed::after,
+.box--image::after {
   content: "";
   height: 0.5em;
 }
diff --git a/static/css/responsive.css b/static/css/responsive.css
index 7fcfb11..8f80abc 100644
--- a/static/css/responsive.css
+++ b/static/css/responsive.css
@@ -19,12 +19,12 @@
 }
 
 @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 {
+  .section--hero h1,
+  .section--hero h2,
+  .section--hero h3,
+  .section--hero h4,
+  .section--hero h5,
+  .section--hero h6 {
     line-height: 1.1;
   }
 }
@@ -40,12 +40,12 @@
     margin-left: 6em;
   }
 
-  #hero h1,
-  #hero h2,
-  #hero h3,
-  #hero h4,
-  #hero h5,
-  #hero h6 {
+  .section--hero h1,
+  .section--hero h2,
+  .section--hero h3,
+  .section--hero h4,
+  .section--hero h5,
+  .section--hero h6 {
     line-height: inherit;
   }
 }