navbar working with photo viewer too
David Kebler
parent
61d544c6cd
commit
4073483d02
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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__logo {
|
||||
margin-left: 1em;
|
||||
|
||||
.nav-bar__menu {
|
||||
display: flex;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.nav-bar__link, .nav-bar__header a {
|
||||
font-size: 2em;
|
||||
padding: 1em .5em;
|
||||
.hide-menu {
|
||||
height: 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__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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
// })
|
||||
// }());
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
// })
|
||||
// }());
|
||||
16
config.toml
16
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]]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
+++
|
||||
draft = false
|
||||
weight = 100
|
||||
link_text = "Contact"
|
||||
+++
|
||||
This is the footer
|
||||
{{% box footer %}}
|
||||
This is a footer
|
||||
{{% /box %}}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<!-- Navigation -->
|
||||
<div id="nav-bar" class="nav-bar">
|
||||
<div id="nav-bar" class="nav-bar">
|
||||
<!-- <div class="nav-bar__container"> -->
|
||||
<div class="nav-bar__header">
|
||||
<a href="#hero" class="nav-bar__logo">{{ .Site.Params.navbar.text | default .Site.Title }}</a>
|
||||
<a href="#hero" class="nav-bar__logo">{{ if .Site.Params.navbar.logo_text }} {{ .Site.Params.navbar.logo_text }} {{ else }} {{ .Site.Title | default "Add a site title" }} {{ end }}</a>
|
||||
<div class="nav-bar__menu-button"> <i class="fa fa-bars"></i></div>
|
||||
</div>
|
||||
<!-- <nav class="nav-bar__menu"> -->
|
||||
<ul class="nav-bar__menu display-menu">
|
||||
{{ range .Data.Pages }}
|
||||
{{ if ne .File.BaseFileName "footer"}}
|
||||
<li>
|
||||
<a class="nav-bar__link" href="#{{ .File.BaseFileName }}">
|
||||
<!-- <nav class="nav-bar__menu-off"> -->
|
||||
<ul class="nav-bar__menu hide-menu">
|
||||
{{ range .Data.Pages }} {{ if ne .File.BaseFileName "footer"}}
|
||||
<li class="nav-bar__menu-item">
|
||||
<a href="#{{ .File.BaseFileName }}">
|
||||
{{ if isset .Params "link_text" }}
|
||||
{{ index .Params "link_text" }}
|
||||
{{ else }}
|
||||
|
|
@ -18,9 +17,8 @@
|
|||
{{ end }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }} {{ end }}
|
||||
</ul>
|
||||
<!-- </nav> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
<!-- parameters url, text, type, size color, bgcolor, padding-in padding-out -->
|
||||
<div class ="box box--btn btn {{ .Get "size" ">
|
||||
<!-- <a href="javascript:void( window.open('https://form.jotform.com/{{ .Get 0 }}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500') )">{{ .Get 1 }}</a> -->
|
||||
<a href="{{ .Get "url" }}">{{ .Get "text" }}</a>
|
||||
<!-- <a href="javascript:void( window.open('https://form.jotform.com/{{ .Get 0 }}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500') )">{{ .Get 1 }}</a> -->
|
||||
</div>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- parameters, jotformID,text for button-->
|
||||
<div class ="box box--btn btn">
|
||||
<a href="javascript:void( window.open('https://form.jotform.com/{{ .Get 0 }}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500') )">{{ .Get 1 }}</a>
|
||||
<div class ="box box--btn">
|
||||
<a class="btn" href="javascript:void( window.open('https://form.jotform.com/{{ .Get 0 }}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500') )">{{ .Get 1 }}</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue