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

added flexbox wrapper to image changed fitoparent to resize any item

master
David Kebler 2017-03-14 23:20:52 -07:00
parent 3a37a9677c
commit 53895254aa
9 changed files with 30 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/navbar.css
View File

@ -68,7 +68,7 @@
color: white; color: white;
} }
@media only screen and (min-width: 800px) { @media only screen and (min-width: 850px) {
.nav-bar { .nav-bar {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;

4
assets/css/page.css
View File

@ -87,6 +87,10 @@
align-items: center; align-items: center;
} }
.box--image {
max-width: 450px;
}
.box--headline { .box--headline {
} }

4
assets/js/docready.js
View File

@ -22,7 +22,7 @@ $(document).ready(function () {
// initialize hero size // initialize hero size
heroResize(); heroResize();
iframeResize(); itemResize('iframe');
$('section').flowtype({ $('section').flowtype({
// maximum: 1000, // maximum: 1000,
@ -39,7 +39,7 @@ $(document).ready(function () {
// resize elements on change // resize elements on change
$(window).resize(function () { $(window).resize(function () {
heroResize(); heroResize();
iframeResize(); itemResize('iframe');
}); });
}); });

37
assets/js/junk.js
View File

@ -1,37 +0,0 @@
//
// // 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)
// })
// }());
// videos - preload
(function videoInit() {
var $allVideos = $("iframe[src*='//player.vimeo.com'], iframe[src*='//www.youtube.com'], object, embed"),
$fluidEl = $("figure");
$allVideos.each(function () {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
})
}());
// resize videos on window change
function videoResize() {
$allVideos.each(function () {
var $el = $(this);
var newWidth = $el.parents('figure').width();
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}

14
assets/js/page.js
View File

@ -33,19 +33,19 @@ $('a[href*="#"]:not([href="#"])').click(function () {
}()); }());
function iframeResize(maxWidth = 450, widthPadding = 30) { function itemResize(item, maxWidth = 450, widthPadding = 30) {
let windowWidth = $(window).width() let windowWidth = $(window).width()
let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
console.log(`passed width ${width}`) console.log(`passed width ${width}`)
jQuery('iframe').fitToParent({ jQuery(item).fitToParent({
heightOffset: 0, // (int) Put some space around the element heightOffset: 0, // (int) Put some space around the element
// widthOffset: 5, // (int) Put some space around the element // widthOffset: 5, // (int) Put some space around the element
// boxHeight: , // (int) Will look for .size-parent, or fallback to parent size // boxHeight: , // (int) Will look for .size-parent, or fallback to parent size
boxWidth: width, // (int) Will look for .size-parent, or fallback to parent size boxWidth: width // (int) Will look for .size-parent, or fallback to parent size
callback: function (newWidth, newHeight) { // callback: function (newWidth, newHeight) {
// alert(`after w h ${newWidth} ${newHeight}`) // // alert(`after w h ${newWidth} ${newHeight}`)
// Fires after fitting is complete // // Fires after fitting is complete
} // }
}) })
} }

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

@ -1,66 +0,0 @@
// 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)
// })
// }());

3
layouts/shortcodes/image.html
View File

@ -1,4 +1,5 @@
<figure
<figure class="box box--column box--image"
{{ with .Get "position" }}class="{{.}}"{{ end }}> {{ with .Get "position" }}class="{{.}}"{{ end }}>
{{ with .Get "link"}}<a href="{{.}}">{{ end }} {{ with .Get "link"}}<a href="{{.}}">{{ end }}

4
layouts/shortcodes/link.html Normal file
View File

@ -0,0 +1,4 @@
<!-- parameters, jotformID,text for button-->
<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>

14
readme.md
View File

@ -1,17 +1,21 @@
# Customizable Responsive Landing Page # Customizable Mobile First Responsive Landing Page
## generated by Hugo using flexbox layouts, easy customizable styling settings and your content. ## generated by Hugo using flexbox layouts, easy customizable styling settings and your content.
### 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 ### 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/ * [learn markdown](http://www.markdowntutorial.com/)
* [markdown cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet ### Motivation:
### Goal:
### See this repo in action. Check out the hugo rendered master branch [here](http://4005.kebler.net) ### Learn about and see this repo in action at once. Check out the hugo rendered guide branch [here](http://)
### What to do... ### See the master branch rendered with default settings
### How to get startedo...
Install [Hugo](http://gohugo.io) Install [Hugo](http://gohugo.io)