add max-wdith to image shortcode - change css of #hero to .section--hero

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>

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 }}

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 {

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;
 }

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;
   }
 }