diff --git a/assets/css/base.css b/assets/css/base.css index 9f33c20..3f0a636 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -36,6 +36,7 @@ body{ align-items: center; } +#footer { min-height: 300px} /* Typography */ @@ -77,6 +78,7 @@ a { color: inherit; cursor: pointer; opacity: 0.9; + outline: 0; } a:hover { @@ -84,18 +86,20 @@ a:hover { } -.btn>a { +.btn { color: white; - background-color: darkslategrey; + background-color: black; text-transform: uppercase; padding: .5em; border-radius: 5px; - border: 3px solid #566963; + border: 3px solid grey; cursor: pointer; font-weight: bold; text-shadow: 0 1px 0 grey; } + + img { max-width: 100%; } diff --git a/assets/css/navbar.css b/assets/css/navbar.css index 47977f5..46216ca 100644 --- a/assets/css/navbar.css +++ b/assets/css/navbar.css @@ -3,15 +3,16 @@ .nav-bar { display: flex; flex-direction: column; - align-items: flex-start; - justify-content: flex-start; position: fixed; top: 0; left: 0; - z-index: 1000; + z-index: 10000; width: 100%; + color: black; background-color: white; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid grey; + font-size: 1em; + font-weight: bold; } .nav-bar__header { @@ -19,73 +20,105 @@ flex-direction: row; justify-content: flex-start; align-content: center; - font-weight: bold; + padding-top: 1em; + padding-bottom: 1em; } -.nav-bar__header a { +.nav-bar__logo, .nav-bar__menu-button { font-size: 1.5em; - padding: 1em 1em; - font-weight: bold; + padding-left: 1em; } .nav-bar__logo { order: 2; - padding-right: 1em; } .nav-bar__menu-button { - font-size: 1.5em; - padding: .8em 1em; - cursor: pointer; order: 1; + cursor: pointer; } .nav-bar__menu { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - flex-basis: 100%; overflow-y: scroll; - /*max-height: 80vh;*/ + max-height: 80vh; } -.display-menu { - height: auto; +.hide-menu { + height: 0; } -.nav-bar__link { - padding: 1em; - flex-grow: 1; - font-size: 1em; - border-bottom: 1px solid #f4f4f4; - font-weight: 600; +.nav-bar__menu-item { + display: flex; + justify-content: center; transition: 200ms; + border-top: 2px solid; + font-size: 2em; + padding: 1em; } -@media only screen and (min-width: 801px) { +.nav-bar__menu-item>a { + flex-grow: 1; + text-align: center; +} + +.nav-bar__menu-item:hover { + background-color: black; + color: white; +} + +@media only screen and (min-width: 800px) { + .nav-bar { flex-direction: row; - align-content: center; + flex-wrap: nowrap; justify-content: space-between; + align-items: center; + + } + + .nav-bar__menu { + display: flex; + overflow-y: hidden; } - .nav-bar__logo { - margin-left: 1em; + .hide-menu { + height: auto; } - .nav-bar__link, .nav-bar__header a { - font-size: 2em; - padding: 1em .5em; + + .nav-bar__menu { + display: flex; + justify-content: flex-end; + overflow-y: hidden; + overflow-x: auto; } - .nav-bar__menu-button { + + .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-button { display: none; } - .nav-bar_menu { - flex-direction: row; - align-content: center; - justify-content: flex-end; - } } + /* Desktop */ -@media screen and (min-width: 1200px) {} +@media screen and (min-width: 1400px) { + + .nav-bar__menu-item, .nav-bar__logo { + font-size: 2em; + padding-left: .5em; + padding-right: .5em; + } + +} diff --git a/assets/css/page.css b/assets/css/page.css index 3c9dd6f..fa0a03e 100644 --- a/assets/css/page.css +++ b/assets/css/page.css @@ -1,8 +1,5 @@ /* sections */ -.section__container { -} - .section-headline { text-align: center; } @@ -13,14 +10,46 @@ align-items: center; } +.section__content ul { + display: flex; + flex-direction: column; + align-items: flex-start; + max-width:80%; + padding-top: .3em; + padding-bottom: 1em; +} + + +.section__content li { + padding-bottom: .7em; +} + +.section__content li::before { +font-family: FontAwesome; +content: "\f18e"; +padding-right:.5em; +padding-left:1em +} + +.section__content ul li { + text-indent: -3rem; +} + .section--even { color: white; - background-color: silver; + background-color: black; +} + +.section--even .btn { + color: black; + background-color: white; + text-transform: uppercase; } .section--footer { color: white; - background-color: darkslategrey; + background-color: darkgrey; + min-height: 4000px; } @@ -53,7 +82,7 @@ .box { display: flex; flex-direction: row; - flex-wrap:wrap; + flex-wrap: wrap; align-content: center; justify-content: center; } @@ -79,28 +108,3 @@ .gallery__item { padding: 3px; } - -.section__content ul { - display: flex; - flex-direction: column; - align-items: flex-start; - max-width:80%; - padding-top: .3em; - padding-bottom: 1em; -} - - -.section__content li { - padding-bottom: .7em; -} - -.section__content li::before { -font-family: FontAwesome; -content: "\f18e"; -padding-right:.5em; -padding-left:1em -} - -.section__content ul li { - text-indent: -3rem; -} diff --git a/assets/images/hero.jpg b/assets/images/hero.jpg new file mode 100644 index 0000000..9be6467 Binary files /dev/null and b/assets/images/hero.jpg differ diff --git a/assets/js/docready.js b/assets/js/docready.js index cb64f1f..cfeb389 100644 --- a/assets/js/docready.js +++ b/assets/js/docready.js @@ -2,7 +2,7 @@ $(document).ready(function () { // Intialize all the media i.e. photos with "media" id // TODO use Hugo params to initialize multiple galleries/albums - $("#4005").lightGallery({ + var lg = $("#4005").lightGallery({ thumbnail: true, thumbWidth: 80, controls: true, @@ -12,6 +12,18 @@ $(document).ready(function () { // videojs: true }); + lg.on('onBeforeOpen.lg', function (event) { + $('.nav-bar').css("display", "none") + }); + + lg.on('onCloseAfter.lg', function (event) { + $('.nav-bar').css("display", "flex") + }); + + lg.on('onBeforeOpen.lg', function (event) { + $('.nav-bar').css("display", "none") + }); + // initialize hero size heroResize(); // iframeResize(); diff --git a/assets/js/page.js b/assets/js/page.js index eaadc2f..3625350 100644 --- a/assets/js/page.js +++ b/assets/js/page.js @@ -12,8 +12,10 @@ $('a[href*="#"]:not([href="#"])').click(function () { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { + var targetOffset = target.offset().top - $(".nav-bar__header").outerHeight(true); + // console.log(targetOffset, target.offset().top, $(".nav-bar__header").outerHeight()) $('html, body').animate({ - scrollTop: target.offset().top + scrollTop: targetOffset }, 1000); return false; } @@ -23,38 +25,32 @@ $('a[href*="#"]:not([href="#"])').click(function () { // navbar - preload (function navbarInit() { - // var navButton = document.getElementById("nav-menu-button"), - // var navButton = document.getElementById("nav-container"), - // navUl = document.getElementsByClassName("nav-ul"); - function toggleMobileMenu() { - $('.nav-bar__menu-list')[0].style.transition = "max-height 0.5s"; - $('.nav-bar__menu-list')[0].classList.toggle("hide-ul"); + $('.nav-bar__menu')[0].style.transition = "max-height 0.5s"; + $('.nav-bar__menu')[0].classList.toggle("hide-menu"); } - // navLink.onclick = toggleMobileMenu; - // navButton.onclick = toggleMobileMenu; - $('.nav-bar__menu-button, .nav-bar__menu a').click(toggleMobileMenu) + $('.nav-bar__menu-button, .nav-bar__menu-item > a').click(toggleMobileMenu) }()); -function iframeResize(percent = 1) { - console.log('window width', percent, $(window).width()) - console.log('section_content', percent, $('.section__content').width()) - console.log('box embed width', percent, $('.box__embed').width()) - $('iframe').each(function (i) { - console.log('aspect', this.aspect) - $(this).attr('height', this.aspect * $('.box__embed').width()) - $(this).attr('width', $('.box__embed').width()) - }) - console.log('new width and height', $('iframe')[0].width, $('iframe')[0].height) - console.log('new width and height', $('iframe')[1].width, $('iframe')[1].height) -} - -// get all original iframe dimensions -(function iframeInit() { - $('iframe').each(function (i) { - console.log(i, $(this).attr('height'), $(this).attr('width')); - this.aspect = $(this).attr('height') / $(this).attr('width') - console.log('aspect iframe', i, this.aspect) - }) -}()); +// function iframeResize(percent = 1) { +// console.log('window width', percent, $(window).width()) +// console.log('section_content', percent, $('.section__content').width()) +// console.log('box embed width', percent, $('.box__embed').width()) +// $('iframe').each(function (i) { +// console.log('aspect', this.aspect) +// $(this).attr('height', this.aspect * $('.box__embed').width()) +// $(this).attr('width', $('.box__embed').width()) +// }) +// console.log('new width and height', $('iframe')[0].width, $('iframe')[0].height) +// console.log('new width and height', $('iframe')[1].width, $('iframe')[1].height) +// } +// +// // get all original iframe dimensions +// (function iframeInit() { +// $('iframe').each(function (i) { +// console.log(i, $(this).attr('height'), $(this).attr('width')); +// this.aspect = $(this).attr('height') / $(this).attr('width') +// console.log('aspect iframe', i, this.aspect) +// }) +// }()); diff --git a/assets/js/page.js.bak b/assets/js/page.js.bak new file mode 100644 index 0000000..06f0d45 --- /dev/null +++ b/assets/js/page.js.bak @@ -0,0 +1,66 @@ +// hero resizer +function heroResize() { + jQuery('#hero').css({ + width: jQuery(window).width(), + height: jQuery(window).height() + }); +} + +// Smooth Scroll Init - Register click handler for ID anchors +$('a[href*="#"]:not([href="#"])').click(function () { + if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { + var target = $(this.hash); + target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); + if (target.length) { + var targetOffset = target.offset().top - $("nav-bar__header").height(); + console.log(targetOffset, target.offset.top, $("nav-bar__header").height()) + // $('html, body').animate({ + // scrollTop: targetOffset + // }, 1000); + return false; + } + } +}); + +// navbar - preload +(function navbarInit() { + + // var navButton = document.getElementById("nav-menu-button"), + // var navButton = document.getElementById("nav-container"), + // navUl = document.getElementsByClassName("nav-ul"); + + function toggleMobileMenu() { + $('.nav-bar__menu')[0].style.transition = "max-height 0.5s"; + $('.nav-bar__menu')[0].classList.toggle("hide-menu"); + } + $('.nav-bar__menu-button').click(toggleMobileMenu) + +}()); + +// function navbarPadding() { +// // apply dynamic padding at the top of the body according to the fixed navbar height +// console.log($(".nav-bar__header").height()) +// // $("#page").css("padding-top", $(".nav-bar__header").height()); +// }; + +// function iframeResize(percent = 1) { +// console.log('window width', percent, $(window).width()) +// console.log('section_content', percent, $('.section__content').width()) +// console.log('box embed width', percent, $('.box__embed').width()) +// $('iframe').each(function (i) { +// console.log('aspect', this.aspect) +// $(this).attr('height', this.aspect * $('.box__embed').width()) +// $(this).attr('width', $('.box__embed').width()) +// }) +// console.log('new width and height', $('iframe')[0].width, $('iframe')[0].height) +// console.log('new width and height', $('iframe')[1].width, $('iframe')[1].height) +// } +// +// // get all original iframe dimensions +// (function iframeInit() { +// $('iframe').each(function (i) { +// console.log(i, $(this).attr('height'), $(this).attr('width')); +// this.aspect = $(this).attr('height') / $(this).attr('width') +// console.log('aspect iframe', i, this.aspect) +// }) +// }()); diff --git a/config.toml b/config.toml index fd510a6..aaf2028 100644 --- a/config.toml +++ b/config.toml @@ -6,19 +6,17 @@ staticDir ="assets" publishDir = "dist" [params] - custom_css = ["css/custom.css"] - font = "Lato" # a valid google font name, default Roboto - +custom_css = ["css/custom.css"] +# font = "Lato" # a valid google font name, default Roboto # For List of html colors # http://www.quackit.com/css/color/charts/css_color_names_chart.cfm [params.navbar] - # text = "For Sale By Owner: 4005 Rock Way" # default is to use the page title - # text_small = "" - text_size="1" # unit is em, 1em is default + #logo_text = "For Sale By Owner: 4005 Rock Way" # default is to use the page title + # logo_text_size="1" # unit is em, 2em is default for small # font = "Ranga" - color = "white" - bg_color = "seagreen" + # color = "white" + # bg_color = "seagreen" [params.hero] img = "../images/4005front.jpg" # default is images/hero.jpg, must provide the full path or url @@ -55,7 +53,7 @@ publishDir = "dist" # bg_color = "" [params.sections.even] # color = "" - bg_color = "seagreen" + # bg_color = "seagreen" [[params.social]] diff --git a/content/footer.md b/content/footer.md index 4f023aa..3b4c3df 100644 --- a/content/footer.md +++ b/content/footer.md @@ -1,6 +1,7 @@ +++ draft = false weight = 100 -link_text = "Contact" +++ -This is the footer +{{% box footer %}} +This is a footer +{{% /box %}} diff --git a/layouts/partials/head/styles.html b/layouts/partials/head/styles.html index c7c0cd9..f4f5c73 100644 --- a/layouts/partials/head/styles.html +++ b/layouts/partials/head/styles.html @@ -9,21 +9,21 @@ {{ with .navbar }} {{ with .font }} - .nav-bar__logo, nav-bar__menu { font-family:{{ . }},Helvetica,Arial,sans-serif; } + .nav-bar__logo, .nav-bar__menu { font-family:{{ . }},Helvetica,Arial,sans-serif; } {{ end }} {{ with .bg_color }} - .nav-bar__link:hover {color: {{ . }}; } + .nav-bar__menu-item:hover {color: {{ . }}; } .nav-bar, .nav-bar__menu-button { background-color: {{ . }}; } {{ end }} {{ with .text_size }} - #nav-bar__logo { font-size: {{ . }}em; } + .nav-bar__logo { font-size: {{ . }}em; } {{ end }} {{ with .color }} - .nav-bar__logo, .nav-bar__link, .nav-bar__menu-button { color: {{ . }}; } - .nav-bar__link:hover { background-color: {{ . }}; } + .nav-bar__logo, .nav-bar__menu, .nav-bar__menu-button { color: {{ . }}; } + .nav-bar__menu-item:hover { background-color: {{ . }}; } {{ end }} {{ end }} /* end navbar */ diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 024cc36..b1176e2 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -1,26 +1,24 @@ - diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html deleted file mode 100644 index de6e5f1..0000000 --- a/layouts/shortcodes/button.html +++ /dev/null @@ -1,6 +0,0 @@ - -
- -{{ .Get "text" }} - -
diff --git a/layouts/shortcodes/jotform.html b/layouts/shortcodes/jotform.html index d67723b..aa6d093 100644 --- a/layouts/shortcodes/jotform.html +++ b/layouts/shortcodes/jotform.html @@ -1,4 +1,4 @@ -
-{{ .Get 1 }} +
+{{ .Get 1 }}