UCOMmandIt
/
uci-hugo-landingpage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

navbar working with photo viewer too

master
David Kebler 2017-03-11 20:11:20 -08:00
parent 61d544c6cd
commit 4073483d02
13 changed files with 255 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/css/base.css
View File

@ -36,6 +36,7 @@ body{
align-items: center; align-items: center;
} }
#footer { min-height: 300px}
/* Typography */ /* Typography */
@ -77,6 +78,7 @@ a {
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
opacity: 0.9; opacity: 0.9;
outline: 0;
} }
a:hover { a:hover {
@ -84,18 +86,20 @@ a:hover {
} }
.btn>a { .btn {
color: white; color: white;
background-color: darkslategrey; background-color: black;
text-transform: uppercase; text-transform: uppercase;
padding: .5em; padding: .5em;
border-radius: 5px; border-radius: 5px;
border: 3px solid #566963; border: 3px solid grey;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
text-shadow: 0 1px 0 grey; text-shadow: 0 1px 0 grey;
} }
img { img {
max-width: 100%; max-width: 100%;
} }

113
assets/css/navbar.css
View File

@ -3,15 +3,16 @@
.nav-bar { .nav-bar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1000; z-index: 10000;
width: 100%; width: 100%;
color: black;
background-color: white; background-color: white;
border-bottom: 1px solid #ddd; border-bottom: 1px solid grey;
font-size: 1em;
font-weight: bold;
} }
.nav-bar__header { .nav-bar__header {
@ -19,73 +20,105 @@
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-content: center; 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; font-size: 1.5em;
padding: 1em 1em; padding-left: 1em;
font-weight: bold;
} }
.nav-bar__logo { .nav-bar__logo {
order: 2; order: 2;
padding-right: 1em;
} }
.nav-bar__menu-button { .nav-bar__menu-button {
font-size: 1.5em;
padding: .8em 1em;
cursor: pointer;
order: 1; order: 1;
cursor: pointer;
} }
.nav-bar__menu { .nav-bar__menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-basis: 100%;
overflow-y: scroll; overflow-y: scroll;
/*max-height: 80vh;*/ max-height: 80vh;
} }
.display-menu { .hide-menu {
height: auto; height: 0;
} }
.nav-bar__link { .nav-bar__menu-item {
padding: 1em; display: flex;
flex-grow: 1; justify-content: center;
font-size: 1em;
border-bottom: 1px solid #f4f4f4;
font-weight: 600;
transition: 200ms; 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 { .nav-bar {
flex-direction: row; flex-direction: row;
align-content: center; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
align-items: center;
}
.nav-bar__menu {
display: flex;
overflow-y: hidden;
} }
.nav-bar__logo { .hide-menu {
margin-left: 1em; height: auto;
} }
.nav-bar__link, .nav-bar__header a {
font-size: 2em; .nav-bar__menu {
padding: 1em .5em; 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; display: none;
} }
.nav-bar_menu {
flex-direction: row;
align-content: center;
justify-content: flex-end;
}
} }
/* Desktop */ /* 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;
}
}

66
assets/css/page.css
View File

@ -1,8 +1,5 @@
/* sections */ /* sections */
.section__container {
}
.section-headline { .section-headline {
text-align: center; text-align: center;
} }
@ -13,14 +10,46 @@
align-items: center; 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 { .section--even {
color: white; color: white;
background-color: silver; background-color: black;
}
.section--even .btn {
color: black;
background-color: white;
text-transform: uppercase;
} }
.section--footer { .section--footer {
color: white; color: white;
background-color: darkslategrey; background-color: darkgrey;
min-height: 4000px;
} }
@ -53,7 +82,7 @@
.box { .box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap:wrap; flex-wrap: wrap;
align-content: center; align-content: center;
justify-content: center; justify-content: center;
} }
@ -79,28 +108,3 @@
.gallery__item { .gallery__item {
padding: 3px; 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;
}

BIN
assets/images/hero.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

14
assets/js/docready.js
View File

@ -2,7 +2,7 @@
$(document).ready(function () { $(document).ready(function () {
// Intialize all the media i.e. photos with "media" id // Intialize all the media i.e. photos with "media" id
// TODO use Hugo params to initialize multiple galleries/albums // TODO use Hugo params to initialize multiple galleries/albums
$("#4005").lightGallery({ var lg = $("#4005").lightGallery({
thumbnail: true, thumbnail: true,
thumbWidth: 80, thumbWidth: 80,
controls: true, controls: true,
@ -12,6 +12,18 @@ $(document).ready(function () {
// videojs: true // 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 // initialize hero size
heroResize(); heroResize();
// iframeResize(); // iframeResize();

58
assets/js/page.js
View File

@ -12,8 +12,10 @@ $('a[href*="#"]:not([href="#"])').click(function () {
var target = $(this.hash); var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) { 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({ $('html, body').animate({
scrollTop: target.offset().top scrollTop: targetOffset
}, 1000); }, 1000);
return false; return false;
} }
@ -23,38 +25,32 @@ $('a[href*="#"]:not([href="#"])').click(function () {
// navbar - preload // navbar - preload
(function navbarInit() { (function navbarInit() {
// var navButton = document.getElementById("nav-menu-button"),
// var navButton = document.getElementById("nav-container"),
// navUl = document.getElementsByClassName("nav-ul");
function toggleMobileMenu() { function toggleMobileMenu() {
$('.nav-bar__menu-list')[0].style.transition = "max-height 0.5s"; $('.nav-bar__menu')[0].style.transition = "max-height 0.5s";
$('.nav-bar__menu-list')[0].classList.toggle("hide-ul"); $('.nav-bar__menu')[0].classList.toggle("hide-menu");
} }
// navLink.onclick = toggleMobileMenu; $('.nav-bar__menu-button, .nav-bar__menu-item > a').click(toggleMobileMenu)
// navButton.onclick = toggleMobileMenu;
$('.nav-bar__menu-button, .nav-bar__menu a').click(toggleMobileMenu)
}()); }());
function iframeResize(percent = 1) { // function iframeResize(percent = 1) {
console.log('window width', percent, $(window).width()) // console.log('window width', percent, $(window).width())
console.log('section_content', percent, $('.section__content').width()) // console.log('section_content', percent, $('.section__content').width())
console.log('box embed width', percent, $('.box__embed').width()) // console.log('box embed width', percent, $('.box__embed').width())
$('iframe').each(function (i) { // $('iframe').each(function (i) {
console.log('aspect', this.aspect) // console.log('aspect', this.aspect)
$(this).attr('height', this.aspect * $('.box__embed').width()) // $(this).attr('height', this.aspect * $('.box__embed').width())
$(this).attr('width', $('.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')[0].width, $('iframe')[0].height)
console.log('new width and height', $('iframe')[1].width, $('iframe')[1].height) // console.log('new width and height', $('iframe')[1].width, $('iframe')[1].height)
} // }
//
// get all original iframe dimensions // // get all original iframe dimensions
(function iframeInit() { // (function iframeInit() {
$('iframe').each(function (i) { // $('iframe').each(function (i) {
console.log(i, $(this).attr('height'), $(this).attr('width')); // console.log(i, $(this).attr('height'), $(this).attr('width'));
this.aspect = $(this).attr('height') / $(this).attr('width') // this.aspect = $(this).attr('height') / $(this).attr('width')
console.log('aspect iframe', i, this.aspect) // console.log('aspect iframe', i, this.aspect)
}) // })
}()); // }());

66
assets/js/page.js.bak Normal file
View File

@ -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
View File

@ -6,19 +6,17 @@ staticDir ="assets"
publishDir = "dist" publishDir = "dist"
[params] [params]
custom_css = ["css/custom.css"] custom_css = ["css/custom.css"]
font = "Lato" # a valid google font name, default Roboto # font = "Lato" # a valid google font name, default Roboto
# For List of html colors # For List of html colors
# http://www.quackit.com/css/color/charts/css_color_names_chart.cfm # http://www.quackit.com/css/color/charts/css_color_names_chart.cfm
[params.navbar] [params.navbar]
# 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
# text_small = "" # logo_text_size="1" # unit is em, 2em is default for small
text_size="1" # unit is em, 1em is default
# font = "Ranga" # font = "Ranga"
color = "white" # color = "white"
bg_color = "seagreen" # bg_color = "seagreen"
[params.hero] [params.hero]
img = "../images/4005front.jpg" # default is images/hero.jpg, must provide the full path or url img = "../images/4005front.jpg" # default is images/hero.jpg, must provide the full path or url
@ -55,7 +53,7 @@ publishDir = "dist"
# bg_color = "" # bg_color = ""
[params.sections.even] [params.sections.even]
# color = "" # color = ""
bg_color = "seagreen" # bg_color = "seagreen"
[[params.social]] [[params.social]]

5
content/footer.md
View File

@ -1,6 +1,7 @@
+++ +++
draft = false draft = false
weight = 100 weight = 100
link_text = "Contact"
+++ +++
This is the footer {{% box footer %}}
This is a footer
{{% /box %}}

10
layouts/partials/head/styles.html
View File

@ -9,21 +9,21 @@
{{ with .navbar }} {{ with .navbar }}
{{ with .font }} {{ 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 }} {{ end }}
{{ with .bg_color }} {{ with .bg_color }}
.nav-bar__link:hover {color: {{ . }}; } .nav-bar__menu-item:hover {color: {{ . }}; }
.nav-bar, .nav-bar__menu-button { background-color: {{ . }}; } .nav-bar, .nav-bar__menu-button { background-color: {{ . }}; }
{{ end }} {{ end }}
{{ with .text_size }} {{ with .text_size }}
#nav-bar__logo { font-size: {{ . }}em; } .nav-bar__logo { font-size: {{ . }}em; }
{{ end }} {{ end }}
{{ with .color }} {{ with .color }}
.nav-bar__logo, .nav-bar__link, .nav-bar__menu-button { color: {{ . }}; } .nav-bar__logo, .nav-bar__menu, .nav-bar__menu-button { color: {{ . }}; }
.nav-bar__link:hover { background-color: {{ . }}; } .nav-bar__menu-item:hover { background-color: {{ . }}; }
{{ end }} {{ end }}
{{ end }} /* end navbar */ {{ end }} /* end navbar */

36
layouts/partials/navbar.html
View File

@ -1,26 +1,24 @@
<!-- Navigation --> <!-- Navigation -->
<div id="nav-bar" class="nav-bar"> <div id="nav-bar" class="nav-bar">
<!-- <div class="nav-bar__container"> --> <!-- <div class="nav-bar__container"> -->
<div class="nav-bar__header"> <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 class="nav-bar__menu-button"> <i class="fa fa-bars"></i></div>
</div> </div>
<!-- <nav class="nav-bar__menu"> --> <!-- <nav class="nav-bar__menu-off"> -->
<ul class="nav-bar__menu display-menu"> <ul class="nav-bar__menu hide-menu">
{{ range .Data.Pages }} {{ range .Data.Pages }} {{ if ne .File.BaseFileName "footer"}}
{{ if ne .File.BaseFileName "footer"}} <li class="nav-bar__menu-item">
<li> <a href="#{{ .File.BaseFileName }}">
<a class="nav-bar__link" href="#{{ .File.BaseFileName }}">
{{ if isset .Params "link_text" }} {{ if isset .Params "link_text" }}
{{ index .Params "link_text" }} {{ index .Params "link_text" }}
{{ else }} {{ else }}
{{ index .Title }} {{ index .Title }}
{{ end }} {{ end }}
</a> </a>
</li> </li>
{{ end }} {{ end }} {{ end }}
{{ end }} </ul>
</ul> <!-- </nav> -->
<!-- </nav> --> <!-- </div> -->
<!-- </div> --> </div>
</div>

6
layouts/shortcodes/button.html
View File

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

4
layouts/shortcodes/jotform.html
View File

@ -1,4 +1,4 @@
<!-- parameters, jotformID,text for button--> <!-- parameters, jotformID,text for button-->
<div class ="box box--btn btn"> <div class ="box box--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> <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> </div>