magic decks, site config, library update

src/assets/scripts/1-docready.min.js

@@ -1,9 +0,0 @@
-// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt MIT
-/*
-	docready.js
-	https://github.com/jfriend00/docReady
-	The MIT License (MIT)
-	Copyright (c) 2014 John Friend
-*/
-!(function(t,e){"use strict";function n(){if(!a){a=!0;for(var t=0;t<o.length;t+=1){o[t].fn.call(window,o[t].ctx)}o=[]}}function d(){"complete"===document.readyState&&n()}(t=t||"docReady"),(e=e||window);var o=[],a=!1,c=!1;e[t]=function(t,e){return a?void setTimeout(function(){t(e)},1):(o.push({fn:t,ctx:e}),void("complete"===document.readyState||(!document.attachEvent&&"interactive"===document.readyState)?setTimeout(n,1):c||(document.addEventListener?(document.addEventListener("DOMContentLoaded",n,!1),window.addEventListener("load",n,!1)):(document.attachEvent("onreadystatechange",d),window.attachEvent("onload",n)),(c=!0))))}})("docReady",window);
-// @license-end

src/assets/scripts/5-fontfaceobserver.min.js

@@ -1,10 +0,0 @@
-// @license magnet:?xt=urn:btih:c80d50af7d3db9be66a4d0a86db0286e4fd33292&dn=bsd-3-clause.txt BSD-3-Clause
-/*
-	Font Face Observer v2.3.0
-	https://github.com/bramstein/fontfaceobserver
-	The BSD 3-Clause License
-	Copyright Bram Stein. All rights reserved.
-*/
-(function(){"use strict";var f,g=[];function l(a){g.push(a);1==g.length&&f()}function m(){for(;g.length;){g[0](),g.shift()}}f=function(){setTimeout(m)};function n(a){this.a=p;this.b=void 0;this.f=[];var b=this;try{a(function(a){q(b,a)},function(a){r(b,a)})}catch(c){r(b,c)}}var p=2;function t(a){return new n(function(b,c){c(a)})}function u(a){return new n(function(b){b(a)})}function q(a,b){if(a.a==p){if(b==a){throw new TypeError()}var c=!1;try{var d=b&&b.then;if(null!=b&&"object"==typeof b&&"function"==typeof d){d.call(b,function(b){c||q(a,b);c=!0},function(b){c||r(a,b);c=!0});return}}catch(e){c||r(a,e);return}a.a=0;a.b=b;v(a)}}function r(a,b){if(a.a==p){if(b==a){throw new TypeError()}a.a=1;a.b=b;v(a)}}function v(a){l(function(){if(a.a!=p){for(;a.f.length;){var b=a.f.shift(),c=b[0],d=b[1],e=b[2],b=b[3];try{0==a.a?"function"==typeof c?e(c.call(void 0,a.b)):e(a.b):1==a.a&&("function"==typeof d?e(d.call(void 0,a.b)):b(a.b))}catch(h){b(h)}}}})}n.prototype.g=function(a){return this.c(void 0,a)};n.prototype.c=function(a,b){var c=this;return new n(function(d,e){c.f.push([a,b,d,e]);v(c)})};function w(a){return new n(function(b,c){function d(c){return function(d){h[c]=d;e+=1;e==a.length&&b(h)}}var e=0,h=[];0==a.length&&b(h);for(var k=0;k<a.length;k+=1){u(a[k]).c(d(k),c)}})}function x(a){return new n(function(b,c){for(var d=0;d<a.length;d+=1){u(a[d]).c(b,c)}})}window.Promise||((window.Promise=n),(window.Promise.resolve=u),(window.Promise.reject=t),(window.Promise.race=x),(window.Promise.all=w),(window.Promise.prototype.then=n.prototype.c),(window.Promise.prototype["catch"]=n.prototype.g))})();
-(function(){function p(a,c){document.addEventListener?a.addEventListener("scroll",c,!1):a.attachEvent("scroll",c)}function u(a){document.body?a():document.addEventListener?document.addEventListener("DOMContentLoaded",function b(){document.removeEventListener("DOMContentLoaded",b);a()}):document.attachEvent("onreadystatechange",function g(){if("interactive"==document.readyState||"complete"==document.readyState){document.detachEvent("onreadystatechange",g),a()}})}function w(a){this.g=document.createElement("div");this.g.setAttribute("aria-hidden","true");this.g.appendChild(document.createTextNode(a));this.h=document.createElement("span");this.i=document.createElement("span");this.m=document.createElement("span");this.j=document.createElement("span");this.l=-1;this.h.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.i.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.j.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.m.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;";this.h.appendChild(this.m);this.i.appendChild(this.j);this.g.appendChild(this.h);this.g.appendChild(this.i)}function x(a,c){a.g.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;white-space:nowrap;font-synthesis:none;font:"+c+";"}function B(a){var c=a.g.offsetWidth,b=c+100;a.j.style.width=b+"px";a.i.scrollLeft=b;a.h.scrollLeft=a.h.scrollWidth+100;return a.l!==c?((a.l=c),!0):!1}function C(a,c){function b(){var e=g;B(e)&&null!==e.g.parentNode&&c(e.l)}var g=a;p(a.h,b);p(a.i,b);B(a)}function D(a,c,b){c=c||{};b=b||window;this.family=a;this.style=c.style||"normal";this.weight=c.weight||"normal";this.stretch=c.stretch||"normal";this.context=b}var E=null,F=null,G=null,H=null;function I(a){null===F&&(M(a)&&/Apple/.test(window.navigator.vendor)?((a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent)),(F=!!a&&603>parseInt(a[1],10))):(F=!1));return F}function M(a){null===H&&(H=!!a.document.fonts);return H}function N(a,c){var b=a.style,g=a.weight;if(null===G){var e=document.createElement("div");try{e.style.font="condensed 100px sans-serif"}catch(q){}G=""!==e.style.font}return[b,g,G?a.stretch:"","100px",c].join(" ")}D.prototype.load=function(a,c){var b=this,g=a||"BESbswy",e=0,q=c||3e3,J=new Date().getTime();return new Promise(function(K,L){if(M(b.context)&&!I(b.context)){var O=new Promise(function(r,t){function h(){new Date().getTime()-J>=q?t(Error(""+q+"ms timeout exceeded")):b.context.document.fonts.load(N(b,'"'+b.family+'"'),g).then(function(n){1<=n.length?r():setTimeout(h,25)},t)}h()}),P=new Promise(function(r,t){e=setTimeout(function(){t(Error(""+q+"ms timeout exceeded"))},q)});Promise.race([P,O]).then(function(){clearTimeout(e);K(b)},L)}else{u(function(){function r(){var d;if((d=(-1!=k&&-1!=l)||(-1!=k&&-1!=m)||(-1!=l&&-1!=m))){(d=k!=l&&k!=m&&l!=m)||(null===E&&((d=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent)),(E=!!d&&(536>parseInt(d[1],10)||(536===parseInt(d[1],10)&&11>=parseInt(d[2],10))))),(d=E&&((k==y&&l==y&&m==y)||(k==z&&l==z&&m==z)||(k==A&&l==A&&m==A)))),(d=!d)}d&&(null!==f.parentNode&&f.parentNode.removeChild(f),clearTimeout(e),K(b))}function t(){if(new Date().getTime()-J>=q){null!==f.parentNode&&f.parentNode.removeChild(f),L(Error(""+q+"ms timeout exceeded"))}else{var d=b.context.document.hidden;if(!0===d||void 0===d){(k=h.g.offsetWidth),(l=n.g.offsetWidth),(m=v.g.offsetWidth),r()}e=setTimeout(t,50)}}var h=new w(g),n=new w(g),v=new w(g),k=-1,l=-1,m=-1,y=-1,z=-1,A=-1,f=document.createElement("div");f.dir="ltr";x(h,N(b,"sans-serif"));x(n,N(b,"serif"));x(v,N(b,"monospace"));f.appendChild(h.g);f.appendChild(n.g);f.appendChild(v.g);b.context.document.body.appendChild(f);y=h.g.offsetWidth;z=n.g.offsetWidth;A=v.g.offsetWidth;t();C(h,function(d){k=d;r()});x(h,N(b,'"'+b.family+'",sans-serif'));C(n,function(d){l=d;r()});x(n,N(b,'"'+b.family+'",serif'));C(v,function(d){m=d;r()});x(v,N(b,'"'+b.family+'",monospace'))})}})};"object"===typeof module?(module.exports=D):((window.FontFaceObserver=D),(window.FontFaceObserver.prototype.load=D.prototype.load))})();
-// @license-end

src/assets/scripts/scripts.js

@@ -2,16 +2,16 @@
 /****************************************************************************
  * It's Eric Woodward's Site
  *
- * Copyright 2014-2023 Eric Woodward
+ * Copyright 2014-2024 Eric Woodward
  * Source released under CC0 Public Domain License v1.0
  * https://www.itsericwoodward.com/licenses/cc0/
  * http://creativecommons.org/publicdomain/zero/1.0/
  ****************************************************************************/
-(function () {
-	"use strict";
+export default (() => {
+	// we load this library via "module" to guarantee baseline ES6 functionality
 
-	// Checking if browser "cuts the mustard" - https://gomakethings.com/ditching-jquery/
-	if (!(!!document.querySelector && !!window.addEventListener)) return;
+	// check for loaded libraries
+	if (!window.Cookies) return;
 
 	if (window.dayjs) dayjs.extend(window.dayjs_plugin_relativeTime);
 
@@ -19,27 +19,9 @@
 	document.documentElement.className =
 		document.documentElement.className.replace("no-js", "js");
 
-	// Enable cached fonts ASAP
-	if (window.Cookies && !!Cookies.get("fonts_loaded")) {
-		document.documentElement.className += " js-hasFontsLoaded";
-	}
-
-	docReady(function () {
-		setTimeout(function () {
-			if (!window.Cookies || !window.FontFaceObserver) return;
-
-			// Handle Fonts
-			const fontExo2 = new FontFaceObserver("exo_2");
-			fontExo2.load().then(function () {
-				if (
-					document.documentElement.className.indexOf(
-						"js-hasFontsLoaded"
-					) == -1
-				) {
-					document.documentElement.className += " js-hasFontsLoaded";
-				}
-				Cookies.set("fonts_loaded", true);
-			});
+	document.addEventListener("DOMContentLoaded", () => {
+		setTimeout(() => {
+			if (!window.Cookies) return;
 
 			// Lazy-Load Media
 			if (typeof loadMedia === "function") {
@@ -61,9 +43,13 @@
 				});
 			}
 
-			// TODO: maybe put toggle behind collapsable "settings" menu that
-			// lives on bottom left of screen on mobile?
-			const actionBox = document.querySelector("#footer .actionBox");
+			const actionBoxDiv = document.querySelector("#bio .actionBox");
+
+			const actionBox = document.createElement("details");
+
+			actionBoxDiv.append(actionBox);
+
+			actionBox.setAttribute("open", "true");
 
 			/** THEME SWITCHER */
 
@@ -154,6 +140,11 @@
 			actionBox.append(scrollToggle);
 			actionBox.classList.add("js-actionBox");
 
+			const actionBoxTitle = document.createElement("summary");
+			actionBoxTitle.innerHTML =
+				"<h3 class='actionBox-title'>Settings</h3>";
+			actionBox.append(actionBoxTitle);
+
 			// add toggle event
 			document
 				.getElementById("scrollingToggle")

src/assets/styles/styles.css

@@ -31,7 +31,7 @@ body {
 	background: #040308;
 	color: #9aa8bc;
 	color: var(--color-main);
-	font-family: sans-serif;
+	font-family: "exo_2", sans-serif;
 	font-size: 100%;
 	line-height: 1.5em;
 }
@@ -366,7 +366,11 @@ samp {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-evenly;
-	margin: 1rem 0;
+	margin: 2rem 0 1rem;
+}
+
+.actionBox-title {
+	display: inline-block;
 }
 
 .actionBox.js-actionBox > .topLink {
@@ -825,10 +829,48 @@ samp {
 	padding: 0.25em 0.5em;
 }
 
-.magic-commander-img {
-	border-radius: 0.75em;
-	max-width: 100%;
-	width: 15em;
+.magicDeck {
+	display: grid;
+	grid-template-columns: 1fr;
+}
+
+.magicDeck-content {
+	grid-column: 1;
+	grid-row: 1;
+}
+
+.magicDeck-images {
+	align-items: center;
+	align-self: top;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	grid-column: 1;
+	grid-row: 2;
+	justify-content: center;
+}
+
+.magicDeck-images-list {
+	margin-top: -1em;
+}
+
+.magicDeck--saheeli .magicCard-img {
+	border-radius: 1em;
+}
+
+.magicCard-img {
+	border-radius:.75em;
+	display: block;
+	margin: 0 auto;
+	max-width: 15em;
+}
+
+.magicCard-link {
+	border: 1px dashed transparent;
+	display: block;
+	margin: 0 auto;
+	max-width: 18em;
+	padding: 0.5em;
 }
 
 .magnetLink {
@@ -1515,10 +1557,6 @@ samp {
 	max-width: 90%;
 }
 
-.js-hasFontsLoaded body {
-	font-family: "exo_2", sans-serif;
-}
-
 .pageMenu-link.isCurrent .pageMenu-text {
 	background-color: #049c74;
 	background-color: rgba(4, 156, 116, 0.8);
@@ -1576,9 +1614,24 @@ samp {
  ****************************************************************************/
 
  @media all and (min-width: 34em) {
-	.magic-commander-img {
-		float: right;
+	.magicDeck {
+		display: block;
 	}
+	
+	.magicDeck-images {
+		align-items: center;
+		align-self: top;
+		display: flex;
+		flex-direction: column;
+		float: right;
+		grid-column: 2;
+		justify-content: start;
+	}
+
+	.magicCard-img {
+		width: 15em;
+	}
+	
 }
 
 @media all and (min-width: 38em) {
@@ -1608,6 +1661,11 @@ samp {
 }
 
 @media all and (min-width: 70em) {
+	.actionBox {
+		border-top: 1px dashed white;
+		flex-direction: column-reverse;
+	}	
+	  
 	.asideContent {
 		background: #040308;
 		background: rgba(4, 3, 8, 0.9);
@@ -1647,6 +1705,10 @@ samp {
 		max-height: none;
 	}
 
+	.scrollToggle {
+		margin-top: 1rem;
+	}
+
 	.socialList-item {
 		display: inherit;
 	}