make shrotcode boxed embded iframes and images fit to window width and respond - add modal parameter to image shortcut for lightbox

layouts/partials/js.html

@@ -41,3 +41,10 @@ $(document).ready(function () {
 });
 </script>
 {{ end }}
+
+<!-- use same lightbox for full sized images in when link="modal" -->
+<script>
+$(document).ready(function () {
+  {{ $.Site.Params.lightbox | safeJS }}('.box--image')
+});
+</script>

layouts/shortcodes/box.html

@@ -1,3 +1,4 @@
-<div class="box box--{{ .Get 0 }}">
+{{ $numOfParams := ( len .Params ) }}
+<div class="box {{ range .Params }}box--{{ . }} {{ end }}">
 {{ .Inner }}
 </div>

layouts/shortcodes/embed.html

@@ -1,20 +1,16 @@
 <!-- Used for embedding iframes from sites like youtube and google -->
 {{ if .IsNamedParams }}
-<div class="box box--{{ .Get "type" }}">
+<div class="box box--embed box--{{ .Get "type" }}">
     {{ with .Get "title" }}
     <div class="box__title">{{ . }}</div>
     {{ end }}
-    <div class="box__embed box__embed--{{ .Get "type" }}">
+    {{ .Inner }}
-        {{ .Inner }}
-    </div>
     {{ with .Get "caption"}}
     <div class="box__caption">{{ . }}</div>
     {{ end }}
 </div>
 {{ else }}
-<div class="box box--{{ .Get 0 }}">
+<div class="box box--embed box--{{ .Get 0 }}">
-    <div class="box__embed box__embed--{{ .Get 0 }}">
+    {{ .Inner }}
-        {{ .Inner }}
-    </div>
 </div>
 {{ end }}

layouts/shortcodes/image.html

@@ -1,10 +1,13 @@
 {{ $path := "/images/" }}
+{{ $filename := .Get "filename" }}
 {{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
 <div class="box box--column box--image">
 {{ with .Get "title" }}
   <div class="box__title">{{ . }}</div>
   {{ end }}
-{{ with .Get "link"}}<a href="{{.}}">{{ end }}
+{{ with .Get "link"}}
+{{ if eq . "modal" }}<a href="{{ $path }}{{ $filename }}">{{ else }}<a href="{{.}}">{{ end }}
+{{ end }}
 <img src="{{ $path }}{{ .Get "filename" }}" />
 {{ if .Get "link"}}</a>{{ end }}
 {{ with .Get "caption"}}

static/css/base.css

@@ -128,7 +128,7 @@ a:hover,
 }
 
 img {
-  max-width: 100%;
+  max-width: 95vw;
 }
 
 img.avatar {

static/css/page.css

@@ -8,13 +8,14 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-width: 95%;
 }
 
 .section__content ul {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  max-width: 80%;
+  max-width: 85%;
   padding-top: 0.3em;
   padding-bottom: 1em;
   padding-left: 0.5em;
@@ -209,11 +210,6 @@
   font-weight: bold;
 }
 
-.box--image {
-  max-width: 450px;
-  padding: 0.5em;
-}
-
 .box--headline {
 }
 

static/js/docready.js

@@ -1,6 +1,8 @@
 // TODO register these individually with window resize use self callled function
 function resizeElements() {
   navbarSpacer();
+  $('.box--embed > iframe').fitToWindow()
+  $('.box--image > img').fitToWindow()
   heroResize();
   typeResize(); // for section content
   $('.section__content--modal').perfectScrollbar('update');

static/js/fitToWindow.js

@@ -13,15 +13,16 @@
     this.each(function () {
       let $el = $(this);
 
-      console.log(`${maxWidth} ${wPad} ${$el.data('maxWidth')} ${$el.data('wPad')}`)
+      console.log(`element ${$el.prop("tagName")} ${$el.attr("class")} parent ${$el.parent().attr('class')}`)
-
+      console.log(`before ${maxWidth} ${wPad} ${$el.data('maxWidth')} ${$el.data('wPad')}`)
       maxWidth = (maxWidth || $el.data('maxWidth')) || 450
+      wPad = $el.parent().css("padding-left") > 0 ? $el.parent().css("padding-left") : wPad
       wPad = (wPad || $el.data('wPad')) || 5
 
       let windowWidth = $(window).width()
       let newWidth = (windowWidth > maxWidth) ? maxWidth : windowWidth - 2 * wPad
 
-      console.log(`${maxWidth} ${wPad} ${newWidth} ${$el.parent().attr('youtube_id')}`)
+      console.log(`after ${maxWidth} ${wPad} ${newWidth}`)
 
       // Initial Aspect given in attributes by element itself
       let setWidth = $el.attr('width');
@@ -54,7 +55,6 @@
       // Set new size of element
       $el.width(newWidth);
       $el.height(newHeight);
-
     });
 
   }