diff --git a/layouts/index.html b/layouts/index.html
index 1d1a353..d34c430 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -5,10 +5,10 @@
{{ if ne .Site.Params.navbar.hidden true }}
{{ partial "navbar.html" . }}
{{ end }}
-
{{ if ne .Site.Params.hero.custom_hero true }}
{{ partial "hero.html" . }}
{{ end }}
+
{{ partial "sections.html" . }}
{{ partial "modals.html" . }}
diff --git a/layouts/partials/head/meta.html b/layouts/partials/head/meta.html
index b36030f..3eec4eb 100644
--- a/layouts/partials/head/meta.html
+++ b/layouts/partials/head/meta.html
@@ -1,6 +1,7 @@
-
+
+
diff --git a/static/css/base.css b/static/css/base.css
index 5a8416e..4cd1786 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -19,7 +19,7 @@ body {
font-family: 'Roboto', sans-serif;
font-size: 1.4rem;
flex-direction: column;
- width: 100%;
+ width: 100vw;
/* 14px default before jquery scalling */
}
@@ -29,6 +29,7 @@ body {
padding-bottom: 1em;
align-items: center;
flex-direction: column;
+ width: 100vw;
}
/* mobile first column */
diff --git a/static/css/navbar.css b/static/css/navbar.css
index a788753..aad0a87 100644
--- a/static/css/navbar.css
+++ b/static/css/navbar.css
@@ -7,7 +7,7 @@
top: 0;
left: 0;
z-index: 10000;
- width: 100%;
+ width: 100vw;
color: black;
background-color: white;
border-bottom: 1px solid grey;
diff --git a/static/css/page.css b/static/css/page.css
index 6999b93..3921b6a 100644
--- a/static/css/page.css
+++ b/static/css/page.css
@@ -85,7 +85,7 @@
/* modal */
.section--modal {
- display: flex;
+ display: none;
color: white;
justify-content: center;
position: fixed;
@@ -131,7 +131,7 @@
overflow-y: auto;
position: relative;
align-items: flex-start;
- font-size: .9em;
+ font-size: 0.9em;
padding: 1em;
}
@@ -144,6 +144,7 @@
display: flex;
align-items: center;
justify-content: center;
+ width: 100vw;
}
#hero .section-content--hero {
diff --git a/static/js/docready.js b/static/js/docready.js
index 00bf617..ccbe50e 100644
--- a/static/js/docready.js
+++ b/static/js/docready.js
@@ -1,23 +1,22 @@
-// requires jquery
-$(document).ready(function () {
-
- // initialize
+(function initialze() {
navbarSpacer();
- // $('#page').css("width", $(window).width());
heroResize();
itemResize('iframe');
typeResize(); // for section content
hljs.initHighlightingOnLoad();
$('.section__content--modal').perfectScrollbar();
+})();
- // resize elements on change
- $(window).resize(function () {
- // $('#page').css("width", $(window).width());
- navbarSpacer();
- heroResize();
- itemResize('iframe');
- typeResize();
- $('.section__content--modal').perfectScrollbar('update');
- });
+// requires jquery
+$(document).ready(function () {
-});;
+});
+
+// resize elements on change
+$(window).resize(function () {
+ navbarSpacer();
+ heroResize();
+ itemResize('iframe');
+ typeResize();
+ $('.section__content--modal').perfectScrollbar('update');
+});
diff --git a/static/js/flowType.js b/static/js/flowType.js
index 275efec..d769d09 100644
--- a/static/js/flowType.js
+++ b/static/js/flowType.js
@@ -3,7 +3,6 @@
* Copyright 2013-2014, Simple Focus http://simplefocus.com/
*
*/
-
$.fn.flowtype = function (options) {
// Establish default settings/variables
diff --git a/static/js/page.js b/static/js/page.js
index 9400d95..9e4d7ae 100644
--- a/static/js/page.js
+++ b/static/js/page.js
@@ -36,7 +36,7 @@ function navbarSpacer() {
}
// hero resizer
-function heroResize(bfr = 15) {
+function heroResize(bfr = 30) {
var h = $(window).height() - $(".nav-bar__header").outerHeight(true),
w = $(window).width(),
fr = bfr * h / w
@@ -44,7 +44,7 @@ function heroResize(bfr = 15) {
// minimum base font ratio
fr = (fr > bfr) ? bfr : fr
// adjust for short viewport height
- fr = (w / h > 1 && h < 600) ? 15 * w / h : fr
+ fr = (w / h > 1 && h < 700) ? 30 * w / h : fr
//console.log('fr after', fr)
$('#hero').css({
@@ -52,14 +52,17 @@ function heroResize(bfr = 15) {
height: h / w > 1.5 ? w * 1.5 : h,
});
+ var mf = w / h > 1 ? 0 : 12
+
$('#hero').flowtype({
- maxFont: 50,
- minFont: 18,
+ maxFont: 30,
+ minFont: mf,
fontRatio: fr
});
}
// child item resize based on parent container (i.e. flexbox)
+// Especially good for iframes
function itemResize(item, maxWidth = 450, widthPadding = 30) {
let windowWidth = $(window).width()
let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
@@ -73,12 +76,12 @@ function itemResize(item, maxWidth = 450, widthPadding = 30) {
})
}
-function typeResize() {
- $('.section').flowtype({
+function typeResize(fr = 20) {
+ $('main:not(#hero)').flowtype({
// maximum: 1000,
minFont: 12,
maxFont: 25,
- fontRatio: 20
+ fontRatio: fr
})
}
@@ -107,39 +110,67 @@ function lightgallery(id) {
}
-// Modal
-// hide all the modals before displaying
-$('.section--modal').each(function () {
- $(this).hide();
-});
+// Modal tool. Must use modal template for content
+(function ($) {
-// all but inside the modal box
-$(document).on('click', function (event) {
- var container = $(".section__container--modal");
- if (!container.is(event.target) && // If the target of the click isn't the container...
- container.has(event.target).length === 0) // ... nor a descendant of the container
- {
- $('.section--modal.current').hide().removeClass("current");
+ // extend jquery so remove handlers can be added and removed at the right time in a group
+ $.fn.modalHandlers = function (state = 'on') {
+
+ if (state === 'on') {
+ $(document).on('click', modalClickOutside);
+ $(document).keypress(modalEsc);
+ this.find('a[modal-close]').on('click', modalClickCloser);
+ return this
+ }
+
+ if (state === 'off') {
+ $(document).off('click', modalClickOutside);
+ $(document).off('keypress', modalEsc);
+ this.find('a[modal-close]').off('click', modalClickCloser);
+ return this
+ }
+
+ return false;
+
+ };
+
+ // modal event handlers - add more if you want - add them to extension above
+ function modalEsc(event) {
+ if (event.key === "Escape") { modalHide() }
}
-});
-$('.section__container--modal').click(function () {
- $('.section--modal.current').hide().removeClass("current");
- $('a[modal-close]').remove();
-});
+ function modalClickOutside(event) {
+ var container = $(".section__container--modal");
+ if (!container.is(event.target) && // If the target of the click isn't the container...
+ container.has(event.target).length === 0) // ... nor a descendant of the container
+ { modalHide(); }
+ }
-// register click for modal link
-$("a[modal]").click(function () {
- if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
- var target = this.hash;
- $(target).addClass("current").show()
- target = target + " > .section__container > .section__headline"
+ function modalClickCloser(event) {
+ modalHide();
+ }
+
+ // modal show and hide
+ function modalShow(modal_hash) {
var closer = ""
- $(target).append(closer);
- } else {
- var target = this;
+ $(modal_hash).find('.section__headline').append(closer).end().modalHandlers().addClass("current").css('display', 'flex');
}
- // alert(`I clicked on modal link ${target}`);
- return false;
-});
+
+ function modalHide() {
+ $('.section--modal.current').hide().modalHandlers("off").removeClass("current").find('a[modal-close]').remove;
+ }
+
+ // Register click event for all modal links on page
+ $("a[modal]").click(function () {
+ if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+ var target = this.hash;
+ modalShow(target);
+ } else {
+ alert(`modal display of off page content not supported`);
+ }
+ return false;
+ });
+
+}(jQuery));
+
// end modal