From 53895254aa0f6c189842b368eadc9ebdcd4413da Mon Sep 17 00:00:00 2001 From: David Kebler Date: Tue, 14 Mar 2017 23:20:52 -0700 Subject: [PATCH] added flexbox wrapper to image changed fitoparent to resize any item --- assets/css/navbar.css | 2 +- assets/css/page.css | 4 +++ assets/js/docready.js | 4 +-- assets/js/junk.js | 37 -------------------- assets/js/page.js | 14 ++++---- assets/js/page.js.bak | 66 ----------------------------------- layouts/shortcodes/image.html | 5 +-- layouts/shortcodes/link.html | 4 +++ readme.md | 14 +++++--- 9 files changed, 30 insertions(+), 120 deletions(-) delete mode 100644 assets/js/junk.js delete mode 100644 assets/js/page.js.bak create mode 100644 layouts/shortcodes/link.html diff --git a/assets/css/navbar.css b/assets/css/navbar.css index 44ef05e..018894e 100644 --- a/assets/css/navbar.css +++ b/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; diff --git a/assets/css/page.css b/assets/css/page.css index cf86a8f..10c8f3e 100644 --- a/assets/css/page.css +++ b/assets/css/page.css @@ -87,6 +87,10 @@ align-items: center; } +.box--image { + max-width: 450px; +} + .box--headline { } diff --git a/assets/js/docready.js b/assets/js/docready.js index 3e51afe..99a1cae 100644 --- a/assets/js/docready.js +++ b/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'); }); }); diff --git a/assets/js/junk.js b/assets/js/junk.js deleted file mode 100644 index e0027ea..0000000 --- a/assets/js/junk.js +++ /dev/null @@ -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')); - }); -} diff --git a/assets/js/page.js b/assets/js/page.js index a3ef91a..4f4dcdf 100644 --- a/assets/js/page.js +++ b/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 - callback: function (newWidth, newHeight) { - // alert(`after w h ${newWidth} ${newHeight}`) - // Fires after fitting is complete - } + boxWidth: width // (int) Will look for .size-parent, or fallback to parent size + // callback: function (newWidth, newHeight) { + // // alert(`after w h ${newWidth} ${newHeight}`) + // // Fires after fitting is complete + // } }) } diff --git a/assets/js/page.js.bak b/assets/js/page.js.bak deleted file mode 100644 index 06f0d45..0000000 --- a/assets/js/page.js.bak +++ /dev/null @@ -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) -// }) -// }()); diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html index 13c5bfb..ff41d2f 100755 --- a/layouts/shortcodes/image.html +++ b/layouts/shortcodes/image.html @@ -1,11 +1,12 @@ -
{{ with .Get "link"}}{{ end }} {{ if .Get "link"}}{{ end }} -{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}} +{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
diff --git a/layouts/shortcodes/link.html b/layouts/shortcodes/link.html new file mode 100644 index 0000000..aa6d093 --- /dev/null +++ b/layouts/shortcodes/link.html @@ -0,0 +1,4 @@ + +
+{{ .Get 1 }} +
diff --git a/readme.md b/readme.md index 70cfa93..f616973 100644 --- a/readme.md +++ b/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)