fix iframe resize issue - added more custom sytling options
David Kebler
parent
79564fa926
commit
05c229d9aa
|
|
@ -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,
|
||||
},
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 */
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ $(document).ready(function () {
|
|||
});
|
||||
|
||||
// resize elements on change
|
||||
$(window).smartresize(function () {
|
||||
$(window).resize(function () {
|
||||
heroResize();
|
||||
iframeResize();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
30
config.toml
30
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]]
|
||||
|
|
|
|||
|
|
@ -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 >}}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
41
readme.md
41
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 :-).
|
||||
|
|
|
|||
Loading…
Reference in New Issue