added flexbox wrapper to image changed fitoparent to resize any item

assets/css/navbar.css

@@ -68,7 +68,7 @@
   color: white;
 }
 
-@media only screen and (min-width: 800px) {
+@media only screen and (min-width: 850px) {
   .nav-bar {
     flex-direction: row;
     flex-wrap: nowrap;

assets/css/page.css

@@ -87,6 +87,10 @@
   align-items: center;
 }
 
+.box--image {
+  max-width: 450px;
+}
+
 .box--headline {
 }
 

assets/js/docready.js

@@ -22,7 +22,7 @@ $(document).ready(function () {
 
   // initialize hero size
   heroResize();
-  iframeResize();
+  itemResize('iframe');
 
   $('section').flowtype({
     // maximum: 1000,
@@ -39,7 +39,7 @@ $(document).ready(function () {
   // resize elements on change
   $(window).resize(function () {
     heroResize();
-    iframeResize();
+    itemResize('iframe');
   });
 
 });

assets/js/junk.js

@@ -1,37 +0,0 @@
-//
-// // get all original iframe dimensions
-// (function iframeInit() {
-//   $('iframe').each(function (i) {
-//     console.log(i, $(this).attr('height'), $(this).attr('width'));
-//     this.aspect = $(this).attr('height') / $(this).attr('width')
-//     console.log('aspect iframe', i, this.aspect)
-//   })
-// }());
-
-// videos - preload
-(function videoInit() {
-
-  var $allVideos = $("iframe[src*='//player.vimeo.com'], iframe[src*='//www.youtube.com'], object, embed"),
-    $fluidEl = $("figure");
-
-  $allVideos.each(function () {
-    $(this)
-      // jQuery .data does not work on object/embed elements
-      .attr('data-aspectRatio', this.height / this.width)
-      .removeAttr('height')
-      .removeAttr('width');
-  })
-}());
-
-// resize videos on window change
-function videoResize() {
-
-  $allVideos.each(function () {
-
-    var $el = $(this);
-    var newWidth = $el.parents('figure').width();
-    $el
-      .width(newWidth)
-      .height(newWidth * $el.attr('data-aspectRatio'));
-  });
-}

assets/js/page.js

@@ -33,19 +33,19 @@ $('a[href*="#"]:not([href="#"])').click(function () {
 
 }());
 
-function iframeResize(maxWidth = 450, widthPadding = 30) {
+function itemResize(item, maxWidth = 450, widthPadding = 30) {
   let windowWidth = $(window).width()
   let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
   console.log(`passed width ${width}`)
-  jQuery('iframe').fitToParent({
+  jQuery(item).fitToParent({
     heightOffset: 0, // (int) Put some space around the element
     // widthOffset: 5, // (int) Put some space around the element
     // boxHeight: , // (int) Will look for .size-parent, or fallback to parent size
-    boxWidth: width, // (int) Will look for .size-parent, or fallback to parent size
+    boxWidth: width // (int) Will look for .size-parent, or fallback to parent size
-    callback: function (newWidth, newHeight) {
+      // callback: function (newWidth, newHeight) {
-      // alert(`after w h ${newWidth} ${newHeight}`)
+      //   // alert(`after w h ${newWidth} ${newHeight}`)
-      // Fires after fitting is complete
+      //   // Fires after fitting is complete
-    }
+      // }
   })
 }
 

assets/js/page.js.bak

@@ -1,66 +0,0 @@
-// hero resizer
-function heroResize() {
-  jQuery('#hero').css({
-    width: jQuery(window).width(),
-    height: jQuery(window).height()
-  });
-}
-
-// Smooth Scroll Init - Register click handler for ID anchors
-$('a[href*="#"]:not([href="#"])').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) + ']');
-    if (target.length) {
-      var targetOffset = target.offset().top - $("nav-bar__header").height();
-      console.log(targetOffset, target.offset.top, $("nav-bar__header").height())
-        // $('html, body').animate({
-        //   scrollTop: targetOffset
-        // }, 1000);
-      return false;
-    }
-  }
-});
-
-// navbar - preload
-(function navbarInit() {
-
-  // var navButton = document.getElementById("nav-menu-button"),
-  // var navButton = document.getElementById("nav-container"),
-  //   navUl = document.getElementsByClassName("nav-ul");
-
-  function toggleMobileMenu() {
-    $('.nav-bar__menu')[0].style.transition = "max-height 0.5s";
-    $('.nav-bar__menu')[0].classList.toggle("hide-menu");
-  }
-  $('.nav-bar__menu-button').click(toggleMobileMenu)
-
-}());
-
-// function navbarPadding() {
-//   // apply dynamic padding at the top of the body according to the fixed navbar height
-//   console.log($(".nav-bar__header").height())
-//     // $("#page").css("padding-top", $(".nav-bar__header").height());
-// };
-
-// function iframeResize(percent = 1) {
-//   console.log('window width', percent, $(window).width())
-//   console.log('section_content', percent, $('.section__content').width())
-//   console.log('box embed width', percent, $('.box__embed').width())
-//   $('iframe').each(function (i) {
-//     console.log('aspect', this.aspect)
-//     $(this).attr('height', this.aspect * $('.box__embed').width())
-//     $(this).attr('width', $('.box__embed').width())
-//   })
-//   console.log('new width and height', $('iframe')[0].width, $('iframe')[0].height)
-//   console.log('new width and height', $('iframe')[1].width, $('iframe')[1].height)
-// }
-//
-// // get all original iframe dimensions
-// (function iframeInit() {
-//   $('iframe').each(function (i) {
-//     console.log(i, $(this).attr('height'), $(this).attr('width'));
-//     this.aspect = $(this).attr('height') / $(this).attr('width')
-//     console.log('aspect iframe', i, this.aspect)
-//   })
-// }());

layouts/shortcodes/image.html

@@ -1,11 +1,12 @@
-<figure 
+
+<figure class="box box--column box--image"
 {{ with .Get "position" }}class="{{.}}"{{ end }}>
 {{ with .Get "link"}}<a href="{{.}}">{{ end }}
 
 <img src="{{ .Page.Params.imagespath }}{{ .Get "filename" }}"{{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
 {{ if .Get "link"}}</a>{{ end }}
 
-{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}} 
+{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
 
 <figcaption>
 

layouts/shortcodes/link.html

@@ -0,0 +1,4 @@
+<!-- parameters, jotformID,text for button-->
+<div class ="box box--btn">
+<a class="btn" href="javascript:void( window.open('https://form.jotform.com/{{ .Get 0 }}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500') )">{{ .Get 1 }}</a>
+</div>

readme.md

@@ -1,17 +1,21 @@
-# Customizable Responsive Landing Page
+# Customizable Mobile First Responsive Landing Page
 
 ## generated by Hugo using flexbox layouts, easy customizable styling settings and your content.
 
 ### A complete site in a repo that's especially useful for noobs who just want to generate a landing page with some customized styling options and one's content without knowing any html, javascript or css nor much about [Hugo](http://gohugo.io).....but...you do have to learn about writing markdown
 
-http://www.markdowntutorial.com/
+* [learn markdown](http://www.markdowntutorial.com/)
+* [markdown cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
 
-https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
+### Motivation:
 
+### Goal:
 
-### See this repo in action. Check out the hugo rendered master branch [here](http://4005.kebler.net)
+### Learn about and see this repo in action at once. Check out the hugo rendered guide branch [here](http://)
 
-### What to do...
+### See the master branch rendered with default settings
+
+### How to get startedo...
 
 Install [Hugo](http://gohugo.io)