From 05c229d9aacf134a11a5698a84061721cd509609 Mon Sep 17 00:00:00 2001 From: David Kebler Date: Mon, 13 Mar 2017 12:35:41 -0700 Subject: [PATCH] fix iframe resize issue - added more custom sytling options --- .stylelintrc | 129 ++++++++++++++++ assets/css/base.css | 209 ++++++++++++++------------ assets/css/navbar.css | 156 +++++++++---------- assets/css/page.css | 92 ++++++------ assets/css/responsive.css | 34 ++--- assets/css/temp.css | 172 --------------------- assets/css/thumbsup.css | 64 -------- assets/js/docready.js | 2 +- assets/js/fitToParent.js | 27 ++-- assets/js/page.js | 123 +++++++++++---- config.toml | 30 ++-- content/video.md | 2 +- layouts/partials/head/fonts.html | 2 +- layouts/partials/head/styles.html | 79 +++++++++- layouts/partials/head/styles.html.bak | 77 ---------- readme.md | 41 ++++- 16 files changed, 618 insertions(+), 621 deletions(-) create mode 100644 .stylelintrc delete mode 100644 assets/css/temp.css delete mode 100644 assets/css/thumbsup.css delete mode 100644 layouts/partials/head/styles.html.bak diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..eec86b8 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,129 @@ +{ +"rules": { + "at-rule-empty-line-before": [ "always", { + except: [ + "blockless-after-same-name-blockless", + "first-nested", + ], + ignore: ["after-comment"], + } ], + "at-rule-name-case": "lower", + "at-rule-name-space-after": "always-single-line", + "at-rule-semicolon-newline-after": "always", + "block-closing-brace-empty-line-before": "never", + "block-closing-brace-newline-after": "always", + "block-closing-brace-newline-before": "always-multi-line", + "block-closing-brace-space-before": "always-single-line", + "block-no-empty": null, + "block-opening-brace-newline-after": "always-multi-line", + "block-opening-brace-space-after": "always-single-line", + "block-opening-brace-space-before": "always", + "color-hex-case": "lower", + "color-hex-length": "short", + "color-no-invalid-hex": true, + "comment-empty-line-before": [ null, { + except: ["first-nested"], + ignore: ["stylelint-commands"], + } ], + "comment-no-empty": true, + "comment-whitespace-inside": null, + "custom-property-empty-line-before": [ "always", { + except: [ + "after-custom-property", + "first-nested", + ], + ignore: [ + "after-comment", + "inside-single-line-block", + ], + } ], + "declaration-bang-space-after": "never", + "declaration-bang-space-before": "always", + "declaration-block-no-duplicate-properties": [ true, { + ignore: ["consecutive-duplicates-with-different-values"], + } ], + "declaration-block-no-redundant-longhand-properties": true, + "declaration-block-no-shorthand-property-overrides": true, + "declaration-block-semicolon-newline-after": "always-multi-line", + "declaration-block-semicolon-space-after": "always-single-line", + "declaration-block-semicolon-space-before": "never", + "declaration-block-single-line-max-declarations": 1, + "declaration-block-trailing-semicolon": "always", + "declaration-colon-newline-after": "always-multi-line", + "declaration-colon-space-after": "always-single-line", + "declaration-colon-space-before": "never", + "declaration-empty-line-before": [ "always", { + except: [ + "after-declaration", + "first-nested", + ], + ignore: [ + "after-comment", + "inside-single-line-block", + ], + } ], + "font-family-no-duplicate-names": true, + "function-calc-no-unspaced-operator": true, + "function-comma-newline-after": "always-multi-line", + "function-comma-space-after": "always-single-line", + "function-comma-space-before": "never", + "function-linear-gradient-no-nonstandard-direction": true, + "function-max-empty-lines": 0, + "function-name-case": "lower", + "function-parentheses-newline-inside": "always-multi-line", + "function-parentheses-space-inside": "never-single-line", + "function-whitespace-after": "always", + "indentation": 2, + "keyframe-declaration-no-important": true, + "length-zero-no-unit": true, + "max-empty-lines": 1, + "media-feature-colon-space-after": "always", + "media-feature-colon-space-before": "never", + "media-feature-name-case": "lower", + "media-feature-name-no-unknown": true, + "media-feature-parentheses-space-inside": "never", + "media-feature-range-operator-space-after": "always", + "media-feature-range-operator-space-before": "always", + "media-query-list-comma-newline-after": "always-multi-line", + "media-query-list-comma-space-after": "always-single-line", + "media-query-list-comma-space-before": "never", + "no-empty-source": true, + "no-eol-whitespace": true, + "no-extra-semicolons": true, + "no-invalid-double-slash-comments": true, + "no-missing-end-of-source-newline": true, + "number-leading-zero": "always", + "number-no-trailing-zeros": true, + "property-case": "lower", + "property-no-unknown": true, + "rule-empty-line-before": [ "always-multi-line", { + except: ["first-nested"], + ignore: ["after-comment"], + } ], + "selector-attribute-brackets-space-inside": "never", + "selector-attribute-operator-space-after": "never", + "selector-attribute-operator-space-before": "never", + "selector-combinator-space-after": "always", + "selector-combinator-space-before": "always", + "selector-descendant-combinator-no-non-space": true, + "selector-list-comma-newline-after": "always", + "selector-list-comma-space-before": "never", + "selector-max-empty-lines": 0, + "selector-pseudo-class-case": "lower", + "selector-pseudo-class-no-unknown": true, + "selector-pseudo-class-parentheses-space-inside": "never", + "selector-pseudo-element-case": "lower", + "selector-pseudo-element-colon-notation": "double", + "selector-pseudo-element-no-unknown": true, + "selector-type-case": "lower", + "selector-type-no-unknown": true, + "shorthand-property-no-redundant-values": true, + "string-no-newline": true, + "unit-case": "lower", + "unit-no-unknown": true, + "value-list-comma-newline-after": "always-multi-line", + "value-list-comma-space-after": "always-single-line", + "value-list-comma-space-before": "never", + "value-list-max-empty-lines": 0, +}, +} diff --git a/assets/css/base.css b/assets/css/base.css index 496d04b..9874374 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -1,156 +1,171 @@ - /* resets */ -*, -*:before, -*:after { -box-sizing: border-box; -margin: 0; -padding: 0; -border: 0; -} +/* resets */ +*, +*::after, +*::before { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; +} /* regions */ - -body{ +body { display: flex; - flex-direction: column; - align-items: center; - font-family: 'Roboto', sans-serif; - font-size: 1.4rem; /* 14px default before jquery scalling */ color: black; background-color: white; + align-items: center; + font-family: 'Roboto', sans-serif; + font-size: 1.4rem; + flex-direction: column; + /* 14px default before jquery scalling */ } - .section { display: flex; - flex-direction: column; - align-items: center; padding-top: 1em; padding-bottom: 1em; + align-items: center; + flex-direction: column; } /* mobile first column */ .section__container { - width:95%; - display: flex; - flex-direction: column; - align-items: center; + display: flex; + width: 95%; + align-items: center; + flex-direction: column; } -#footer { min-height: 300px} - - - /* Typography */ - - body { - font-size: 12px; - } - -h1, h2, h3, h4, h5, h6 { - /* display: block; */ - font-weight: bold; - line-height: 1.45; - text-align: center; +#footer { + min-height: 300px; } -h1 {font-size: 2em;} -h2 {font-size: 1.5em;} -h3 {font-size: 1.17em;} -h4 {font-size: 1em;} -h5 {font-size: .83em;} -h6 {font-size: .67em;} - -p {font-size: 1em; - text-align: left; - line-height: 1.2; +/* Typography */ +body { + font-size: 12px; } -li { font-size: 1em} +h1, +h2, +h3, +h4, +h5, +h6 { + /* display: block; */ + text-align: center; + font-weight: bold; + line-height: 1.45; +} + +h1 { + font-size: 2em; +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 1.17em; +} + +h4 { + font-size: 1em; +} + +h5 { + font-size: 0.83em; +} + +h6 { + font-size: 0.67em; +} + +p { + text-align: left; + font-size: 1em; + line-height: 1.2; +} + +li { + font-size: 1em; +} /* elements */ - -ul, nav { - list-style: none; +nav, +ul { + list-style: none; } - a { - text-decoration: none; - color: inherit; - cursor: pointer; - opacity: 0.9; - outline: 0; + color: inherit; + opacity: 0.9; + outline: 0; + text-decoration: none; + cursor: pointer; } a:hover { - opacity: 1; + opacity: 1; } - .btn { - color: white; - background-color: black; - text-transform: uppercase; - padding: .5em; - border-radius: 5px; - border: 3px solid grey; - cursor: pointer; - font-weight: bold; - text-shadow: 0 1px 0 grey; + padding: 0.5em; + color: white; + border: 3px solid grey; + border-radius: 5px; + background-color: black; + text-transform: uppercase; + text-shadow: 0 1px 0 grey; + font-weight: bold; + cursor: pointer; } - - img { - max-width: 100%; + max-width: 100%; } figure { - display: block; - padding: 1em; + display: block; + padding: 1em; } figcaption { - display: block; - text-align: center; - margin: 1em 0; - font-style: italic; - orphans: 2; + display: block; + margin: 1em 0; + text-align: center; + font-style: italic; + orphans: 2; } -/* html5 video tag, override any iframe width */ -/*video, iframe { - width: 100%!important; - height: auto!important;/ -}*/ - +/* divider */ hr { - margin: 4px auto 4px auto; - height: 0; - width: 50%; - border-style: solid; - border-width: 2px; - border-top-color: white; - border-bottom-color: rgba(0, 0, 0, 0.2); + width: 50%; + height: 0; + margin: 4px auto; + border-top-color: white; + border-bottom-color: rgba(0, 0, 0, 0.2); + border-width: 2px; + border-style: solid; } .flex-col-center { display: flex; - flex-direction: column; align-items: center; + flex-direction: column; } .flex-col-left { display: flex; - flex-direction: column; align-items: flex-start; + flex-direction: column; } .flex-row { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - align-content: center; + display: flex; + align-content: center; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; } diff --git a/assets/css/navbar.css b/assets/css/navbar.css index 46216ca..837716f 100644 --- a/assets/css/navbar.css +++ b/assets/css/navbar.css @@ -1,124 +1,124 @@ /* NAVIGATION BAR */ .nav-bar { - display: flex; - flex-direction: column; - position: fixed; - top: 0; - left: 0; - z-index: 10000; - width: 100%; - color: black; - background-color: white; - border-bottom: 1px solid grey; - font-size: 1em; - font-weight: bold; + display: flex; + flex-direction: column; + position: fixed; + top: 0; + left: 0; + z-index: 10000; + width: 100%; + color: black; + background-color: white; + border-bottom: 1px solid grey; + font-size: 1em; + font-weight: bold; } .nav-bar__header { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-content: center; - padding-top: 1em; - padding-bottom: 1em; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-content: center; + padding-top: 1em; + padding-bottom: 1em; } -.nav-bar__logo, .nav-bar__menu-button { - font-size: 1.5em; - padding-left: 1em; +.nav-bar__logo, +.nav-bar__menu-button { + font-size: 1.5em; + padding-left: 1em; } .nav-bar__logo { - order: 2; + order: 2; } .nav-bar__menu-button { - order: 1; - cursor: pointer; + order: 1; + cursor: pointer; } .nav-bar__menu { - overflow-y: scroll; - max-height: 80vh; + overflow-y: scroll; + max-height: 80vh; } .hide-menu { - height: 0; + height: 0; } .nav-bar__menu-item { - display: flex; - justify-content: center; - transition: 200ms; - border-top: 2px solid; - font-size: 2em; - padding: 1em; + display: flex; + justify-content: center; + transition: 200ms; + border-top: 2px solid; + font-size: 2em; + padding: 1em; } -.nav-bar__menu-item>a { - flex-grow: 1; - text-align: center; +.nav-bar__menu-item > a { + flex-grow: 1; + text-align: center; } .nav-bar__menu-item:hover { - background-color: black; - color: white; + background-color: black; + color: white; } @media only screen and (min-width: 800px) { + .nav-bar { + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + } - .nav-bar { - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; + .nav-bar__menu { + display: flex; + overflow-y: hidden; + } - } + .hide-menu { + height: auto; + } - .nav-bar__menu { - display: flex; - overflow-y: hidden; - } - .hide-menu { - height: auto; - } + .nav-bar__menu { + display: flex; + justify-content: flex-end; + overflow-y: hidden; + overflow-x: auto; + } - .nav-bar__menu { - display: flex; - justify-content: flex-end; - overflow-y: hidden; - overflow-x: auto; - } + .nav-bar__header { + padding-top: 0; + padding-bottom: 0; + } - .nav-bar__header { - padding-top: 0; - padding-bottom: 0; - } - - .nav-bar__menu-item, .nav-bar__logo { - font-size: 1.5em; - padding-left: .3em; - padding-right: .3em; - padding-top: .7em; - padding-bottom: .7em; - border-top: 0; - } + .nav-bar__menu-item, + .nav-bar__logo { + font-size: 1.5em; + padding-left: 0.3em; + padding-right: 0.3em; + padding-top: 0.7em; + padding-bottom: 0.7em; + border-top: 0; + } .nav-bar__menu-button { - display: none; - } + display: none; + } } /* Desktop */ @media screen and (min-width: 1400px) { - - .nav-bar__menu-item, .nav-bar__logo { - font-size: 2em; - padding-left: .5em; - padding-right: .5em; + .nav-bar__menu-item, + .nav-bar__logo { + font-size: 2em; + padding-left: 0.5em; + padding-right: 0.5em; } - } diff --git a/assets/css/page.css b/assets/css/page.css index e3bd920..033a040 100644 --- a/assets/css/page.css +++ b/assets/css/page.css @@ -5,96 +5,92 @@ } .section__content { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } .section__content ul { display: flex; flex-direction: column; align-items: flex-start; - max-width:80%; - padding-top: .3em; + max-width: 80%; + padding-top: 0.3em; padding-bottom: 1em; } - .section__content li { - padding-bottom: .7em; + padding-bottom: 0.7em; } -.section__content li::before { -font-family: FontAwesome; -content: "\f18e"; -padding-right:.5em; -padding-left:1em +.section__content li::before { + font-family: FontAwesome; + content: "\f18e"; + padding-right: 0.5em; + padding-left: 1em; } .section__content ul li { - text-indent: -3rem; + text-indent: -3rem; } .section--even { - color: white; - background-color: black; + color: white; + background-color: black; } .section--even .btn { - color: black; - background-color: white; - text-transform: uppercase; + color: black; + background-color: white; + text-transform: uppercase; } .section--footer { - color: white; - background-color: darkgrey; - min-height: 4000px; + color: white; + background-color: darkgrey; + min-height: 4000px; } - - -/*---------------- +/* ---------------- Hero Section -----------------*/ - +---------------- */ #hero { - background-image: url("../images/hero.jpg"); - background-size: cover; - background-position: center; - display: flex; - align-items: center; - justify-content: center; + background-image: url("../images/hero.jpg"); + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; } #hero .text { - text-align: center; - color: white; + text-align: center; + color: white; } - -/*---------------- +/* ---------------- Components/Shortcodes Styling -----------------*/ - -/* box creates a flexbox wrapper*/ +---------------- */ +/* box creates a flexbox wrapper */ .box { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-content: center; - justify-content: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: center; + justify-content: center; } .box--column { - flex-direction: column; - align-items: center; + flex-direction: column; + align-items: center; } -.box--headline {} +.box--headline { +} -.box--text {} +.box--text { +} .box--btn { padding: 1rem; diff --git a/assets/css/responsive.css b/assets/css/responsive.css index 0516e9f..01e280d 100644 --- a/assets/css/responsive.css +++ b/assets/css/responsive.css @@ -1,42 +1,34 @@ -/* mobile in base and page css*/ +/* mobile first in base and page css*/ /* small tablets */ -@media only screen and (min-width: 40rem) { - .section__container { - - } +@media only screen and (min-width: 600px) { } -@media only screen and (min-device-width: 40rem) and (max-device-width: 79rem) { +@media only screen and (min-device-width: 600px) and (max-device-width: 799px) { } - /* tablets */ @media only screen and (min-width: 800px) { - .section__container { - - } } @media only screen and (min-device-width: 800px) and (max-device-width: 1190px) { } - /* desktop */ @media only screen and (min-width: 1200px) { - -.section__container { - max-width: 1200px; - } + .section__container { + max-width: 1200px; + } } - @media only screen and (min-device-width: 1200px) and (max-device-width: 1800px) { - /* Styles */ + /* Styles */ } - -/* large*/ - -@media screen and (min-width: 1800px) {} +/* large */ +@media screen and (min-width: 1800px) { + .section__container { + max-width: 1200px; + } +} diff --git a/assets/css/temp.css b/assets/css/temp.css deleted file mode 100644 index 15cff6e..0000000 --- a/assets/css/temp.css +++ /dev/null @@ -1,172 +0,0 @@ - - -/*-------------------- - Our Work Section ----------------------*/ - .оur-work { - background-color: #fff; - } - .our-work .grid li { - padding: 20px; - height: 350px; - border-radius: 3px; - background-clip: content-box; - background-size: cover; - background-position: center; - background-color: #333; - } - .our-work .grid li.small { - flex-basis: 40%; - } - .our-work .grid li.large { - flex-basis: 60%; - } - @media (max-width: 1000px) { - .our-work .grid li.small, .our-work .grid li.large { - flex-basis: 100%; - } - } - /*---------------------- - Features Section -----------------------*/ - .features { - background-color: #f7f7f7; - } - .features .grid li { - padding: 0 30px; - flex-basis: 33%; - text-align: center; - } - .features .grid li i { - font-size: 50px; - color: #2196F3; - margin-bottom: 25px; - } - .features .grid li h4 { - color: #555; - font-size: 20px; - margin-bottom: 25px; - } - .features .grid li p { - margin: 0; - } - @media (max-width: 1000px) { - .features .grid li { - flex-basis: 70%; - margin-bottom: 65px; - } - .features .grid li:last-child { - margin-bottom: 0; - } - } - @media (max-width: 600px) { - .features .grid li { - flex-basis: 100%; - } - } - /*-------------------- - Reviews Section ---------------------*/ - .reviews { - background-color: #fff; - } - .reviews .quote { - text-align: center; - width: 80%; - font-size: 22px; - font-weight: 300; - line-height: 1.5; - margin-bottom: 20px; - padding: 0; - } - .reviews .author { - font-size: 18px; - margin-bottom: 50px; - } - .reviews .author:last-child { - margin-bottom: 0; - } - @media (max-width: 1000px) { - .reviews .quote { - font-size: 20px; - } - .reviews .author { - font-size: 16px; - } - } - /*--------------------- - Contact Section ----------------------*/ - .contact { - background-color: #f7f7f7; - } - .contact form { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; - width: 80%; - } - .contact form input { - padding: 15px; - flex: 1; - margin-right: 30px; - font-size: 18px; - color: #555; - } - .contact form .btn { - padding: 18px 42px; - } - @media (max-width: 800px) { - .contact form input { - flex-basis: 100%; - margin: 0 0 20px 0; - } - } - /*------------- - Footer --------------*/ - footer { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - color: #fff; - background-color: #414a4f; - padding: 60px 0; - } - footer ul { - display: flex; - margin-bottom: 25px; - font-size: 32px; - } - footer ul li { - margin: 0 8px; - } - footer ul li:first-child { - margin-left: 0; - } - footer ul li:last-child { - margin-right: 0; - } - footer p { - text-transform: uppercase; - font-size: 14px; - color: rgba(255, 255, 255, 0.6); - margin-bottom: 10px; - } - footer p a { - color: #fff; - } - @media (max-width: 700px) { - footer { - padding: 80px 15px; - } - } - /* -- Demo ads -- */ - @media (max-width: 1200px) { - #bsaHolder { - display: none; - } - } diff --git a/assets/css/thumbsup.css b/assets/css/thumbsup.css deleted file mode 100644 index b0cd12c..0000000 --- a/assets/css/thumbsup.css +++ /dev/null @@ -1,64 +0,0 @@ -#galleries a { - display: inline-block; -} -#galleries .meta { - font-size: 0.9em; - width: 100%; - margin: 0.5em 0; - color: #666; - line-height: 1.2em; -} -#galleries > li { - display: inline-block; - margin-right: 2em; - margin-bottom: 3em; -} -#galleries .grid { - width: 200px; -} -#galleries .grid li { - float: left; - padding: 0 0.2em 0.2em 0; - width: 50%; -} -#galleries .grid img { - display: block; - width: 100%; -} -#media { - margin-bottom: 3em; -} -#media li { - display: inline-block; - margin-right: 0.2em; - margin-bottom: 0.2em; - position: relative; -} -#media li .video-overlay { - left: 50%; - height: 48px; - margin-left: -24px; - margin-top: -24px; - position: absolute; - top: 50%; - width: 48px; -} -#lg-gallery .lg-slide .object { - transition-duration: 0.3s; -} -#lg-gallery .video { - height: 100%; - left: 0; - padding-bottom: 100px; - position: absolute; - top: 0; - width: 100%; -} -#lg-gallery video { - max-width: 100%; -} -/* captions */ -.lg-sub-html { - bottom: 100px; - /* always display above the thumbnails */ -} diff --git a/assets/js/docready.js b/assets/js/docready.js index 5da9d55..3e51afe 100644 --- a/assets/js/docready.js +++ b/assets/js/docready.js @@ -37,7 +37,7 @@ $(document).ready(function () { }); // resize elements on change - $(window).smartresize(function () { + $(window).resize(function () { heroResize(); iframeResize(); }); diff --git a/assets/js/fitToParent.js b/assets/js/fitToParent.js index 9229f31..824b3a5 100644 --- a/assets/js/fitToParent.js +++ b/assets/js/fitToParent.js @@ -37,22 +37,31 @@ jQuery.fn.fitToParent = function (options) { var parentWidth = settings.boxWidth - settings.widthOffset; var parentHeight = settings.boxHeight - settings.heightOffset; + console.log(`settings.boxWidth, parentWidth ${settings.boxWidth} ${parentWidth}`); + // Maintain aspect ratio var aspect = $el.data('aspect'); if (!aspect) { aspect = width / height; $el.data('aspect', aspect); } - var parentAspect = parentWidth / parentHeight; + // var parentAspect = parentWidth / parentHeight; + // // Resize to fit box + // if (aspect > parentAspect) { + // newWidth = parentWidth; + // console.log(`aspect > width ${newWidth}`) + // newHeight = (newWidth / aspect); + // + // } else { + // newHeight = parentHeight; + // newWidth = newHeight * aspect; + // console.log(`aspect < width ${newWidth}`) + // } - // Resize to fit box - if (aspect > parentAspect) { - newWidth = parentWidth; - newHeight = (newWidth / aspect); - } else { - newHeight = parentHeight; - newWidth = newHeight * aspect; - } + newWidth = parentWidth; + newHeight = (newWidth / aspect); + + console.log(`width before setting ${newWidth}`) // Set new size of element $el.width(newWidth); diff --git a/assets/js/page.js b/assets/js/page.js index 1bf9e60..a3ef91a 100644 --- a/assets/js/page.js +++ b/assets/js/page.js @@ -33,10 +33,10 @@ $('a[href*="#"]:not([href="#"])').click(function () { }()); -function iframeResize(maxWidth = 450) { - var windowWidth = $(window).width() - var width = (windowWidth > maxWidth) ? maxWidth : windowWidth - 20 - // alert(`before ww width ${windowWidth} ${width}`) +function iframeResize(maxWidth = 450, widthPadding = 30) { + let windowWidth = $(window).width() + let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding + console.log(`passed width ${width}`) jQuery('iframe').fitToParent({ heightOffset: 0, // (int) Put some space around the element // widthOffset: 5, // (int) Put some space around the element @@ -49,31 +49,90 @@ function iframeResize(maxWidth = 450) { }) } -// debouncing function for window resize from John Hann -// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ -(function ($, sr) { - var debounce = function (func, threshold, execAsap) { - var timeout; - - return function debounced() { - var obj = this, - args = arguments; - - function delayed() { - if (!execAsap) - func.apply(obj, args); - timeout = null; - }; - - if (timeout) - clearTimeout(timeout); - else if (execAsap) - func.apply(obj, args); - - timeout = setTimeout(delayed, threshold || 100); - }; - } - // smartresize - jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; - -})(jQuery, 'smartresize'); +// /* +// * throttledresize: special jQuery event that happens at a reduced rate compared to "resize" +// * +// * latest version and complete README available on Github: +// * https://github.com/louisremi/jquery-smartresize +// * +// * Copyright 2012 @louis_remi +// * Licensed under the MIT license. +// * +// * This saved you an hour of work? +// * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON +// */ +// (function ($) { +// +// var $event = $.event, +// $special, +// dummy = { _: 0 }, +// frame = 0, +// wasResized, animRunning; +// +// $special = $event.special.throttledresize = { +// setup: function () { +// $(this).on("resize", $special.handler); +// }, +// teardown: function () { +// $(this).off("resize", $special.handler); +// }, +// handler: function (event, execAsap) { +// // Save the context +// var context = this, +// args = arguments; +// +// wasResized = true; +// +// if (!animRunning) { +// setInterval(function () { +// frame++; +// +// if (frame > $special.threshold && wasResized || execAsap) { +// // set correct event type +// event.type = "throttledresize"; +// $event.dispatch.apply(context, args); +// wasResized = false; +// frame = 0; +// } +// if (frame > 9) { +// $(dummy).stop(); +// animRunning = false; +// frame = 0; +// } +// }, 30); +// animRunning = true; +// } +// }, +// threshold: 0 +// }; +// +// })(jQuery, 'throttledResize'); +// +// // debouncing function for window resize from John Hann +// // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ +// (function ($, sr) { +// var debounce = function (func, threshold, execAsap) { +// var timeout; +// +// return function debounced() { +// var obj = this, +// args = arguments; +// +// function delayed() { +// if (!execAsap) +// func.apply(obj, args); +// timeout = null; +// }; +// +// if (timeout) +// clearTimeout(timeout); +// else if (execAsap) +// func.apply(obj, args); +// +// timeout = setTimeout(delayed, threshold || 100); +// }; +// } +// // smartresize +// jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn, 50)) : this.trigger(sr); }; +// +// })(jQuery, 'debounceResize'); diff --git a/config.toml b/config.toml index aaf2028..a449d31 100644 --- a/config.toml +++ b/config.toml @@ -8,11 +8,13 @@ publishDir = "dist" [params] custom_css = ["css/custom.css"] # font = "Lato" # a valid google font name, default Roboto +# list_item_icon # For List of html colors # http://www.quackit.com/css/color/charts/css_color_names_chart.cfm [params.navbar] - #logo_text = "For Sale By Owner: 4005 Rock Way" # default is to use the page title + logo_text = "For Sale By Owner: 4005 Rock Way" # default is to use the page title + logo_text_short = "For Sale By Owner" # logo_text_size="1" # unit is em, 2em is default for small # font = "Ranga" # color = "white" @@ -23,8 +25,11 @@ custom_css = ["css/custom.css"] # img_medium = "intro-medium.jpg" # min 1024 # img_small "intro-small.jpg" font = "Acme" # a valid google font name, default Roboto for all hero text + color = "honeydew" # color = "green" - # background-color = "red" + # bg_color = "red" + text_outline = "black" + text_shadow = "black" # headlines_font = "Gloria Hallelujah" # a valid google font name, defaults to intro font headline = "For Sale" headline_color = "red" @@ -32,7 +37,7 @@ custom_css = ["css/custom.css"] subheadline = "4005 Rock Way" # subheadline_color = "pink" # subheadline_size = "1" - subsubheadline = "Central Point, Oregon" + subsubheadline = "Central Point, OR" # subsubheadline_color = "brown" # subsubheadline_size = "1" lines = ["A Rambler Style House","Close to Schools"] @@ -42,18 +47,25 @@ custom_css = ["css/custom.css"] divider_color = "seagreen" # divider_thickness = "3" + [params.sections] - font = "Lato" + font = "Acme" # maxFont = # fontRatio = + # bullet_icon = '\f069' # the font awesome hex number "\nnnn" headline_font = "Lato" - headline_size = "3" + # headline_size = "3" [params.sections.odd] - # color = "" - # bg_color = "" + color = "#363636" + bg_color = "honeydew" [params.sections.even] - # color = "" - # bg_color = "seagreen" + color = "white" + bg_color = "darkolivegreen" + [params.sections.footer] + # color = "white" + # bg_color = "darkolivegreen" + + [[params.social]] diff --git a/content/video.md b/content/video.md index 36e0b78..c2b1c4b 100644 --- a/content/video.md +++ b/content/video.md @@ -6,4 +6,4 @@ link_text = "Video" +++ {{< embed youtube >}} -{{< /embed }} +{{< /embed >}} diff --git a/layouts/partials/head/fonts.html b/layouts/partials/head/fonts.html index 7101c18..05efb6c 100644 --- a/layouts/partials/head/fonts.html +++ b/layouts/partials/head/fonts.html @@ -18,7 +18,7 @@ {{ end }} - {{ with .hero.font_headline }} + {{ with .hero.headline_font }} {{ end }} diff --git a/layouts/partials/head/styles.html b/layouts/partials/head/styles.html index f4f5c73..34636b4 100644 --- a/layouts/partials/head/styles.html +++ b/layouts/partials/head/styles.html @@ -4,6 +4,8 @@ html { font-family:{{ . }},Helvetica,Arial,sans-serif; } {{ end }} + + {{ with .Site.Params }} {{ with .navbar }} @@ -26,6 +28,24 @@ .nav-bar__menu-item:hover { background-color: {{ . }}; } {{ end }} +{{ with .logo_text_short }} +@media only screen and (max-width: 400px) { + .nav-bar__logo { + text-indent: -9999px; + line-height: 0; /* Collapse the original line */ + } + + .nav-bar__logo::after { + content: "{{ . }}"; + text-indent: 0; + display: block; + line-height: initial; /* New content takes up original line height */ + } + } + {{ end }} + + + {{ end }} /* end navbar */ {{ with .hero }} @@ -39,9 +59,40 @@ {{ end }} {{ with .color }} - #hero .text { color: {{ . }}; } + #hero > .text { color: {{ . }}; } {{ end }} + {{ if and ( .text_outline ) ( .text_shadow ) }} + #hero > .text { + text-shadow: + -2px -2px 0 {{ .text_outline }}, + 2px -2px 0 {{ .text_outline }}, + -2px 2px 0 {{ .text_outline }}, + 2px 2px 0 {{ .text_outline }}, + -7px -3px 0 {{ .text_shadow }}; + } + {{ else }} + + {{ with .text_outline }} + #hero > .text { + text-shadow: + -2px -2px 0 {{ . }}, + 2px -2px 0 {{ . }}, + -2px 2px 0 {{ . }}, + 2px 2px 0 {{ . }}; + } + {{ end }} + + {{ with .text_shadow }} + #hero > .text { + text-shadow: + -7px -3px 0 {{ . }} + } + {{ end }} + + {{ end }} + + {{ with .headlines_font }} #hero h1, #hero h2, #hero h3 { font-family: "{{ . }}",Helvetica,Arial,sans-serif; } {{ end }} @@ -95,14 +146,30 @@ .section, .section h1, .section h2, .section h3, .section p { font-family: "{{ . }}",Helvetica,Arial,sans-serif; } {{ end }} - {{ with .font_headline }} - .section h1, .section h2, .section h3, { font-family: "{{ . }}",Helvetica,Arial,sans-serif; } + {{ with .headline_font }} + .section__headline h1 { font-family: "{{ . }}",Helvetica,Arial,sans-serif; } + {{ end }} + + {{ with .bullet_icon }} + .section__content li::before { + content: '{{ . }}'; + /*content: "\f069";*/ + } + {{ end }} {{ with .odd }} - .section-odd { - color: {{ .color }}; } - background-color: {{ .bg_color }}; } + .section--odd { + color: {{ .color }}; + background-color: {{ .bg_color }}; + } + {{ end }} + + {{ with .even }} + .section--even { + color: {{ .color }}; + background-color: {{ .bg_color }}; + } {{ end }} {{ end }} /* end sections */ diff --git a/layouts/partials/head/styles.html.bak b/layouts/partials/head/styles.html.bak deleted file mode 100644 index df2ef8e..0000000 --- a/layouts/partials/head/styles.html.bak +++ /dev/null @@ -1,77 +0,0 @@ - -{{ with $.Site.Params }} - - {{ end }} diff --git a/readme.md b/readme.md index 302daa4..70cfa93 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,38 @@ -Very rough - still working on styling and a few other issues +# Customizable Responsive Landing Page -But just +## generated by Hugo using flexbox layouts, easy customizable styling settings and your content. -Just clone this repo and then add or remove markdown files in the content directory to make sections in the single page -config.toml has additional parameters you can set for intro section and for global template use -Render with either ```hugo``` or ```hugo server``` from the root of the repo (hugo must be installed) +### 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/ + +https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet + + +### See this repo in action. Check out the hugo rendered master branch [here](http://4005.kebler.net) + +### What to do... + +Install [Hugo](http://gohugo.io) + +Clone and open a terminal in the root of the repo and run ```hugo server``` for development (localhost:1313) from the root of the repo. Run just plain ```hugo``` to output your "static site" in the "dist" folder which then can be copied to say an S3 bucket for deployment. + +With a text editor of your choice, such as my favorite [atom](http://atom.io), add/remove/edit the markdown files in the content directory to make sections in your landing plage. Each page will add a section. Some settings are the frontmatter, in particular "weight" which will force an order for your sections. + +The config.toml file show you what parameters you can get. Don't delete the settings just comment them to disable and uncomment to enable. If you delete them there is no documentation to tell you what they are. FYI, I am still working out the custom styling for buttons and list bullets. + +There are a number of shortcodes that will help you insert and format content but I have no documentation yet for those (see the layout/shortcodes folder or just look in the content files for example). + +I am still working on a generator for gallery shortcode. It currently uses thumbsup to generate the html and lightgallery for the modal display but I still need to customize [thumbsup](https://github.com/thumbsup/thumbsup) output into the shortcode. So if you need to do photo galleries just open an issue and I can explain (basically hand edit the gallery.html shortcode for now). + +If you need to do custom css do it in the custom.css file which is loaded last. Check out the other css files for the various classes. For noobs this is not necessary. Most of the custom styling is acheivable via the settings in the config.toml file. + +It's all working. If I were you I'd make a branch for each landing page you want to create and keep the master unchanged. That way you can sync with my master as I have fixes and additions and then you can merge those into existing branches. + +At this time I have not set this up as a hugo theme because it's just easier to distribute it as a complete site you edit to suit which make more sense than a theme with no example content. + +### The Plan + +The plan to is to write some documentation on how it's all laid out and sytled so noobs could make their first steps into hugo, html, templating, javascript and css with little pain. In the meantime it's just useful to crank out custom landing pages. Eventually I will merge this project with my 4S repo for easy deployment and optimization, etc. + +The ultimate plan is to make a virtualbox vm with a complete devleopment environment ready to go. A noob could fire off the vm and be productive almost immediately without having to "install" a thing....well virtualbox :-).