added flexbox wrapper to image changed fitoparent to resize any item
David Kebler
parent
3a37a9677c
commit
53895254aa
|
|
@ -68,7 +68,7 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
@media only screen and (min-width: 850px) {
|
||||
.nav-bar {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
|
|
|
|||
|
|
@ -87,6 +87,10 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.box--image {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.box--headline {
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ $(document).ready(function () {
|
|||
|
||||
// initialize hero size
|
||||
heroResize();
|
||||
iframeResize();
|
||||
itemResize('iframe');
|
||||
|
||||
$('section').flowtype({
|
||||
// maximum: 1000,
|
||||
|
|
@ -39,7 +39,7 @@ $(document).ready(function () {
|
|||
// resize elements on change
|
||||
$(window).resize(function () {
|
||||
heroResize();
|
||||
iframeResize();
|
||||
itemResize('iframe');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
});
|
||||
}
|
||||
|
|
@ -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 width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
|
||||
console.log(`passed width ${width}`)
|
||||
jQuery('iframe').fitToParent({
|
||||
jQuery(item).fitToParent({
|
||||
heightOffset: 0, // (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
|
||||
boxWidth: width, // (int) Will look for .size-parent, or fallback to parent size
|
||||
callback: function (newWidth, newHeight) {
|
||||
// alert(`after w h ${newWidth} ${newHeight}`)
|
||||
// Fires after fitting is complete
|
||||
}
|
||||
boxWidth: width // (int) Will look for .size-parent, or fallback to parent size
|
||||
// callback: function (newWidth, newHeight) {
|
||||
// // alert(`after w h ${newWidth} ${newHeight}`)
|
||||
// // Fires after fitting is complete
|
||||
// }
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
// })
|
||||
// }());
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
<figure
|
||||
|
||||
<figure class="box box--column box--image"
|
||||
{{ with .Get "position" }}class="{{.}}"{{ end }}>
|
||||
{{ with .Get "link"}}<a href="{{.}}">{{ end }}
|
||||
|
||||
<img src="{{ .Page.Params.imagespath }}{{ .Get "filename" }}"{{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
|
||||
{{ if .Get "link"}}</a>{{ end }}
|
||||
|
||||
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
|
||||
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
|
||||
|
||||
<figcaption>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
14
readme.md
|
|
@ -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.
|
||||
|
||||
### 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)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue