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;
}
#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%;
}

113
assets/css/navbar.css
View File

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

66
assets/css/page.css
View File

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

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 () {
// 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();

58
assets/js/page.js
View File

@ -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)
// })
// }());

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"
[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]]

5
content/footer.md
View File

@ -1,6 +1,7 @@
+++
draft = false
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 .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 */

36
layouts/partials/navbar.html
View File

@ -1,26 +1,24 @@
<!-- Navigation -->
<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>
<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 }}">
<div id="nav-bar" class="nav-bar">
<!-- <div class="nav-bar__container"> -->
<div class="nav-bar__header">
<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-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 }}
{{ index .Title }}
{{ end }}
</a>
</li>
{{ end }}
{{ end }}
</ul>
<!-- </nav> -->
<!-- </div> -->
</div>
</li>
{{ end }} {{ end }}
</ul>
<!-- </nav> -->
<!-- </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-->
<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>