diff --git a/assets/css/navbar.css b/assets/css/navbar.css
index 018894e..852d311 100644
--- a/assets/css/navbar.css
+++ b/assets/css/navbar.css
@@ -20,13 +20,13 @@
flex-direction: row;
justify-content: flex-start;
align-content: center;
- padding-top: 1em;
- padding-bottom: 1em;
+ padding-top: 0.9em;
+ padding-bottom: 0.9em;
}
.nav-bar__logo,
.nav-bar__menu-button {
- font-size: 1.5em;
+ font-size: 1.8em;
padding-left: 1em;
}
@@ -53,8 +53,8 @@
justify-content: center;
transition: 200ms;
border-top: 2px solid;
- font-size: 2em;
- padding: 1em;
+ font-size: 1.8em;
+ padding: .5em;
}
.nav-bar__menu-item > a {
diff --git a/assets/css/page.css b/assets/css/page.css
index 10c8f3e..fa940ca 100644
--- a/assets/css/page.css
+++ b/assets/css/page.css
@@ -17,6 +17,8 @@
max-width: 80%;
padding-top: 0.3em;
padding-bottom: 1em;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
}
.section__content li {
@@ -27,11 +29,11 @@
font-family: FontAwesome;
content: "\f18e";
padding-right: 0.5em;
- padding-left: 1em;
+ padding-left: 0;
}
.section__content ul li {
- text-indent: -3rem;
+ text-indent: -1.2rem;
}
.section--even {
diff --git a/assets/css/responsive.css b/assets/css/responsive.css
index 01e280d..7ce6f3e 100644
--- a/assets/css/responsive.css
+++ b/assets/css/responsive.css
@@ -2,6 +2,9 @@
/* small tablets */
@media only screen and (min-width: 600px) {
+ .section__content ul li {
+ text-indent: -2rem;
+ }
}
@media only screen and (min-device-width: 600px) and (max-device-width: 799px) {
diff --git a/assets/js/docready.js b/assets/js/docready.js
index 99a1cae..ccf44b7 100644
--- a/assets/js/docready.js
+++ b/assets/js/docready.js
@@ -1,45 +1,17 @@
// requires jquery
$(document).ready(function () {
- // Intialize all the media i.e. photos with "media" id
- // TODO use Hugo params to initialize multiple galleries/albums
- var lg = $("#4005").lightGallery({
- thumbnail: true,
- thumbWidth: 80,
- controls: true,
- loop: false,
- download: false,
- counter: 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")
- });
-
- // initialize hero size
+ // initialize
heroResize();
itemResize('iframe');
-
- $('section').flowtype({
- // maximum: 1000,
- minFont: 12,
- maxFont: 25,
- fontRatio: 20
- });
-
- $('#hero').flowtype({
- maxFont: 60,
- fontRatio: 15
- });
+ typeResize(); // for section content
+ lightbox('#4005') // TODO put this in template instead of hard coding using parameter
// resize elements on change
$(window).resize(function () {
heroResize();
itemResize('iframe');
+ typeResize();
});
});
diff --git a/assets/js/fitToParent.js b/assets/js/fitToParent.js
index 824b3a5..ce4d634 100644
--- a/assets/js/fitToParent.js
+++ b/assets/js/fitToParent.js
@@ -37,7 +37,7 @@ jQuery.fn.fitToParent = function (options) {
var parentWidth = settings.boxWidth - settings.widthOffset;
var parentHeight = settings.boxHeight - settings.heightOffset;
- console.log(`settings.boxWidth, parentWidth ${settings.boxWidth} ${parentWidth}`);
+ // console.log(`settings.boxWidth, parentWidth ${settings.boxWidth} ${parentWidth}`);
// Maintain aspect ratio
var aspect = $el.data('aspect');
@@ -45,6 +45,8 @@ jQuery.fn.fitToParent = function (options) {
aspect = width / height;
$el.data('aspect', aspect);
}
+
+ // removed for flexbox parent with dynamic height
// var parentAspect = parentWidth / parentHeight;
// // Resize to fit box
// if (aspect > parentAspect) {
@@ -61,7 +63,7 @@ jQuery.fn.fitToParent = function (options) {
newWidth = parentWidth;
newHeight = (newWidth / aspect);
- console.log(`width before setting ${newWidth}`)
+ // console.log(`width before setting ${newWidth}`)
// Set new size of element
$el.width(newWidth);
diff --git a/assets/js/flowType.js b/assets/js/flowType.js
new file mode 100644
index 0000000..275efec
--- /dev/null
+++ b/assets/js/flowType.js
@@ -0,0 +1,37 @@
+/*
+ * Adapted from FlowType.JS v1.1
+ * Copyright 2013-2014, Simple Focus http://simplefocus.com/
+ *
+ */
+
+$.fn.flowtype = function (options) {
+
+ // Establish default settings/variables
+ // ====================================
+ var settings = $.extend({
+ maximum: 9999,
+ minimum: 1,
+ maxFont: 9999,
+ minFont: 1,
+ fontRatio: 35
+ }, options),
+
+ // the magic math
+ // =================
+ resize = function (el) {
+ var $el = $(el),
+ elw = $el.width(),
+ width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
+ fontBase = width / settings.fontRatio,
+ fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
+ $el.css('font-size', fontSize + 'px');
+ };
+
+ // Make the magic visible
+ // ======================
+ this.each(function () {
+ // resize text in each element
+ resize(this);
+ });
+
+};
diff --git a/assets/js/page.js b/assets/js/page.js
index 4f4dcdf..bcb3306 100644
--- a/assets/js/page.js
+++ b/assets/js/page.js
@@ -1,11 +1,3 @@
-// hero resizer
-function heroResize() {
- $('#hero').css({
- width: $(window).width(),
- height: $(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) {
@@ -33,6 +25,19 @@ $('a[href*="#"]:not([href="#"])').click(function () {
}());
+// hero resizer
+function heroResize() {
+ $('#hero').css({
+ width: $(window).width() + 10,
+ height: $(window).height() + 10
+ });
+ $('#hero').flowtype({
+ maxFont: 60,
+ fontRatio: 15
+ });
+}
+
+// child item resize based on parent container (i.e. flexbox)
function itemResize(item, maxWidth = 450, widthPadding = 30) {
let windowWidth = $(window).width()
let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
@@ -42,97 +47,40 @@ function itemResize(item, maxWidth = 450, widthPadding = 30) {
// 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
- // }
+ // callback: function (newWidth, newHeight) {}
})
}
-// /*
-// * throttledresize: special jQuery event that happens at a reduced rate compared to "resize"
-// *
-// * latest version and complete README available on Github:
-// * https://github.com/louisremi/jquery-smartresize
-// *
-// * Copyright 2012 @louis_remi
-// * Licensed under the MIT license.
-// *
-// * This saved you an hour of work?
-// * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
-// */
-// (function ($) {
-//
-// var $event = $.event,
-// $special,
-// dummy = { _: 0 },
-// frame = 0,
-// wasResized, animRunning;
-//
-// $special = $event.special.throttledresize = {
-// setup: function () {
-// $(this).on("resize", $special.handler);
-// },
-// teardown: function () {
-// $(this).off("resize", $special.handler);
-// },
-// handler: function (event, execAsap) {
-// // Save the context
-// var context = this,
-// args = arguments;
-//
-// wasResized = true;
-//
-// if (!animRunning) {
-// setInterval(function () {
-// frame++;
-//
-// if (frame > $special.threshold && wasResized || execAsap) {
-// // set correct event type
-// event.type = "throttledresize";
-// $event.dispatch.apply(context, args);
-// wasResized = false;
-// frame = 0;
-// }
-// if (frame > 9) {
-// $(dummy).stop();
-// animRunning = false;
-// frame = 0;
-// }
-// }, 30);
-// animRunning = true;
-// }
-// },
-// threshold: 0
-// };
-//
-// })(jQuery, 'throttledResize');
-//
-// // debouncing function for window resize from John Hann
-// // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
-// (function ($, sr) {
-// var debounce = function (func, threshold, execAsap) {
-// var timeout;
-//
-// return function debounced() {
-// var obj = this,
-// args = arguments;
-//
-// function delayed() {
-// if (!execAsap)
-// func.apply(obj, args);
-// timeout = null;
-// };
-//
-// if (timeout)
-// clearTimeout(timeout);
-// else if (execAsap)
-// func.apply(obj, args);
-//
-// timeout = setTimeout(delayed, threshold || 100);
-// };
-// }
-// // smartresize
-// jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn, 50)) : this.trigger(sr); };
-//
-// })(jQuery, 'debounceResize');
+function typeResize() {
+ $('.section').flowtype({
+ // maximum: 1000,
+ minFont: 12,
+ maxFont: 25,
+ fontRatio: 20
+ })
+}
+
+// Lightbox for Gallery
+
+function lightbox(id) {
+ // Intialize all the media i.e. photos with "media" id
+ // TODO use Hugo params to initialize multiple galleries/albums
+ var lg = $(id).lightGallery({
+ thumbnail: true,
+ thumbWidth: 80,
+ controls: true,
+ loop: false,
+ download: false,
+ counter: 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")
+ });
+
+}
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index f663872..70dd705 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -5,22 +5,20 @@
-
-
-
-
-
+
+
+
+
+
+
{{ if isset .Site.Params "googleAnalytics" }}
{{ end }}
-
-
+
+
-
-
-
-
+