fix iframe resize issue - added more custom sytling options

master
David Kebler 2017-03-13 12:35:41 -07:00
parent 79564fa926
commit 05c229d9aa
16 changed files with 618 additions and 621 deletions

129
.stylelintrc Normal file
View File

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

View File

@ -1,107 +1,127 @@
/* resets */
*,
*:before,
*:after {
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}
/* regions */
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;
width: 95%;
align-items: center;
flex-direction: column;
}
#footer { min-height: 300px}
#footer {
min-height: 300px;
}
/* Typography */
body {
font-size: 12px;
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
/* display: block; */
text-align: center;
font-weight: bold;
line-height: 1.45;
text-align: center;
}
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;}
h1 {
font-size: 2em;
}
p {font-size: 1em;
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}
li {
font-size: 1em;
}
/* elements */
ul, nav {
nav,
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
opacity: 0.9;
outline: 0;
text-decoration: none;
cursor: pointer;
}
a:hover {
opacity: 1;
}
.btn {
padding: 0.5em;
color: white;
border: 3px solid grey;
border-radius: 5px;
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;
font-weight: bold;
cursor: pointer;
}
img {
max-width: 100%;
}
@ -113,44 +133,39 @@ figure {
figcaption {
display: block;
text-align: center;
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;
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;
align-content: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: center;
}

View File

@ -24,7 +24,8 @@
padding-bottom: 1em;
}
.nav-bar__logo, .nav-bar__menu-button {
.nav-bar__logo,
.nav-bar__menu-button {
font-size: 1.5em;
padding-left: 1em;
}
@ -67,19 +68,18 @@
}
@media only screen and (min-width: 800px) {
.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;
}
@ -96,12 +96,13 @@
padding-bottom: 0;
}
.nav-bar__menu-item, .nav-bar__logo {
.nav-bar__menu-item,
.nav-bar__logo {
font-size: 1.5em;
padding-left: .3em;
padding-right: .3em;
padding-top: .7em;
padding-bottom: .7em;
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 0.7em;
padding-bottom: 0.7em;
border-top: 0;
}
@ -114,11 +115,10 @@
/* Desktop */
@media screen and (min-width: 1400px) {
.nav-bar__menu-item, .nav-bar__logo {
.nav-bar__menu-item,
.nav-bar__logo {
font-size: 2em;
padding-left: .5em;
padding-right: .5em;
padding-left: 0.5em;
padding-right: 0.5em;
}
}

View File

@ -15,20 +15,19 @@
flex-direction: column;
align-items: flex-start;
max-width: 80%;
padding-top: .3em;
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
padding-right: 0.5em;
padding-left: 1em;
}
.section__content ul li {
@ -52,12 +51,9 @@ padding-left:1em
min-height: 4000px;
}
/* ----------------
Hero Section
---------------- */
#hero {
background-image: url("../images/hero.jpg");
background-size: cover;
@ -72,13 +68,11 @@ padding-left:1em
color: white;
}
/* ----------------
Components/Shortcodes Styling
---------------- */
/* box creates a flexbox wrapper */
.box {
display: flex;
flex-direction: row;
@ -92,9 +86,11 @@ padding-left:1em
align-items: center;
}
.box--headline {}
.box--headline {
}
.box--text {}
.box--text {
}
.box--btn {
padding: 1rem;

View File

@ -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;
}
}
@media only screen and (min-device-width: 1200px) and (max-device-width: 1800px) {
/* Styles */
}
/* large */
@media screen and (min-width: 1800px) {}
@media screen and (min-width: 1800px) {
.section__container {
max-width: 1200px;
}
}

View File

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

View File

@ -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 */
}

View File

@ -37,7 +37,7 @@ $(document).ready(function () {
});
// resize elements on change
$(window).smartresize(function () {
$(window).resize(function () {
heroResize();
iframeResize();
});

View File

@ -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;
}
console.log(`width before setting ${newWidth}`)
// Set new size of element
$el.width(newWidth);

View File

@ -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');

View File

@ -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]]

View File

@ -6,4 +6,4 @@ link_text = "Video"
+++
{{< embed youtube >}}
<iframe width="560" height="315" src="https://www.youtube.com/embed/Fv2BF_V8cWM" frameborder="0" allowfullscreen></iframe>
{{< /embed }}
{{< /embed >}}

View File

@ -18,7 +18,7 @@
<link href="http://fonts.googleapis.com/css?family={{ . }}:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
{{ end }}
{{ with .hero.font_headline }}
{{ with .hero.headline_font }}
<link href="http://fonts.googleapis.com/css?family={{ . }}:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
{{ end }}

View File

@ -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 */

View File

@ -1,77 +0,0 @@
<!-- Configurable Styles partial to appear in head -->
{{ with $.Site.Params }}
<style>
{{ with .font }}
body,h1,h2,h3,h4,h5,h6 { font-family:{{ . }},Helvetica,Arial,sans-serif; }
{{ end }}
{{ with .navbar }}
{{ with .font }}
.navbar { font-family:{{ . }},Helvetica,Arial,sans-serif; }
{{ end }}
{{ with .bg_color }}
.navbar { background-color: {{ . }}; }
{{ end }}
{{ with .color }}
.navbar-header > a, .navbar-nav > li > a { color: {{ . }}; }
{{ end }}
{{ end }} /* end navbar */
{{ with .intro }}
{{ with .img }}
#intro {background-image: url("../images/{{ . }}");}
{{ end }}
{{ with .font }}
#intro, #intro h1, #intro h2, #intro h3, #intro h4, #intro p { font-family: "{{ . }}",Helvetica,Arial,sans-serif; }
{{ end }}
{{ with .color }}
#intro, #intro h1, #intro h2, #intro h3, #intro h4, #intro p { color: {{ . }}; }
{{ end }}
{{ with .font_headline }}
#intro h1, #intro h2, #intro h3 { font-family: "{{ . }}",Helvetica,Arial,sans-serif; }
{{ end }}
{{ with .color_headline }}
#intro > h1 { color: {{ . }}; }
{{ end }}
{{ with .color_subheadline }}
#intro > h2 { color: {{ . }}; }
{{ end }}
{{ with .color_subsubheadline }}
#intro > h3 { color: {{ . }}; }
{{ end }}
{{ end }} /* end intro */
{{ with .sections }}
{{ with .font }}
.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; }
{{ end }}
{{ with .odd }}
.section-odd {
color: {{ .color }}; }
background-color: {{ .bg_color }}; }
{{ end }}
{{ end }} /* end sections */
*/
</style>
{{ end }}

View File

@ -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 :-).