Added no-hyphens CSS class

.htaccess

@@ -1,9 +1,9 @@
 AddCharset utf-8 .shtml .html .css .php .txt .js
 
 # Disable caching of CSS and JS (for testing only).
-<filesMatch ".(css|js)$">
+# <filesMatch ".(css|js)$">
-	Header set Cache-Control "max-age=0, public"
+# 	Header set Cache-Control "max-age=0, public"
-</filesMatch>
+# </filesMatch>
 
 Options +Includes
 AddType text/html .shtml

assets/css/home-page.css

@@ -5,21 +5,11 @@
 /*=========*/
 
 body.home-page {
-	--deus-body-padding: 5rem 5rem 10rem 5rem;
+	--deus-body-padding: 2rem;
 
 	width: 100%;
 	height: 100vh;
 }
-@media only screen and (max-width: 960px) {
-	body.home-page {
-		--deus-body-padding: 4rem 4rem 8rem 4rem;
-	}
-}
-@media only screen and (max-width: 520px) {
-	body.home-page {
-		--deus-body-padding: 3rem 3rem 8rem 3rem;
-	}
-}
 body.home-page::before {
 	content: none;
 }
@@ -46,77 +36,35 @@ body.home-page #splash-image img {
 	height: 100%;
 	object-fit: contain;
 }
-body.home-page #splash-image img.tall {
-	display: none;
-}
-@media only screen and (max-width: 960px) {
-	body.home-page #splash-image img.tall {
-		display: initial;
-	}
-	body.home-page #splash-image img.wide {
-		display: none;
-	}
-}
 
 /*================*/
 /* Navigation UI. */
 /*================*/
 
 body.home-page #main-nav {
-	top: unset;
+	top: -2rem;
-	bottom: -2rem;
 	opacity: 0.0;
-	border-bottom: none;
-	box-shadow: none;
-	background-color: transparent;
-	font-size: 1.75em;
-	justify-content: center;
 }
 body.home-page #main-nav.shown {
-	bottom: 0;
+	top: 0;
 	opacity: 1.0;
 	transition:
-		bottom 1s ease,
+		top 1s ease,
 		opacity 1s ease;
 }
 
-body.home-page #main-nav a.text {
-	margin: 0 0.75em;
-	width: 4em;
-}
-
-body.home-page #main-nav .social-buttons {
-	position: fixed;
-	top: 0;
-	right: 0;
-	font-size: 0.75em;
-	padding: 0.5em;
-}
-@media only screen and (max-width: 520px) {
-	body.home-page #main-nav .social-buttons {
-		flex-flow: column nowrap;
-	}
-	body.home-page #main-nav .social-buttons a + a {
-		margin: 0.5em 0 0 0;
-	}
-}
-
-body.home-page #main-nav .logo {
-	display: none;
-}
-
 /*===================*/
 /* Copyright notice. */
 /*===================*/
 
 body.home-page #copyright {
-	top: -0.75rem;
+	bottom: -0.625rem;
 	opacity: 0.0;
 }
 body.home-page #copyright.shown {
-	top: 0.75rem;
+	bottom: 0.625rem;
 	opacity: 0.5;
 	transition:
-		top 1s ease,
+		bottom 1s ease,
 		opacity 1s ease;
 }

assets/css/image-focus.css

@@ -6,11 +6,11 @@
 /*= Hover styles =*/
 /*=--------------=*/
 
-.img img:hover {
+.image-wrapper img:hover {
     filter: drop-shadow(0 0 3px #777);
     cursor: zoom-in;
 }
-.img img:active {
+.image-wrapper img:active {
     transform: scale(0.975);
 }
 

assets/css/main.css

@@ -324,6 +324,12 @@ hr {
 	clear: both;
 }
 
+.no-hyphens {
+	-webkit-hyphens: none !important;
+	-moz-hyphens: none !important;
+	hyphens: none !important;
+}
+
 /*=-----------------=*/
 /* Copyright notice. */
 /*=-----------------=*/

assets/js/image-focus.js

@@ -84,8 +84,8 @@ String.prototype.hasPrefix = function (prefix) {
 function imageFocusSetup() {
 	if (typeof GW.imageFocus == "undefined")
 		GW.imageFocus = {
-			contentImagesSelector:	"article img, .gallery img",
+			contentImagesSelector:	".gallery img",
-			focusedImageSelector:	"article img.focused, .gallery img.focused",
+			focusedImageSelector:	".gallery img.focused",
 			shrinkRatio:			0.975,
 			hideUITimerDuration:	1500,
 			hideUITimerExpired:		() => {
@@ -118,16 +118,13 @@ function imageFocusSetup() {
 		image.addEventListener("click", GW.imageClickedToFocus);
 	});
 
-	// Wrap all images in a span.
+	// Add image wrapper class.
 	document.querySelectorAll(GW.imageFocus.contentImagesSelector).forEach(image => {
-		let wrapper = document.createElement("span");
+		let wrapper = image.closest(".img");
-		wrapper.classList.add("image-wrapper", "img");
+		if (wrapper)
-		image.parentElement.insertBefore(wrapper, image);
+			wrapper.classList.add("image-wrapper");
-		wrapper.appendChild(image);
+	});	
-		wrapper.classList.add(...image.classList);
+
-		image.classList.remove(...image.classList);
-	});
-	
 	// Create the image focus overlay.
 	let imageFocusOverlay = addUIElement("<div id='image-focus-overlay'>" + 
 	`<div class='help-overlay'>
@@ -603,10 +600,3 @@ function focusImageSpecifiedByURL() {
 		});
 	}
 }
-
-/******************/
-/* INITIALIZATION */
-/******************/
-
-imageFocusSetup();
-focusImageSpecifiedByURL();

assets/js/script.js

@@ -456,10 +456,10 @@ registerInitializer('earlyInitialize', true, () => (query("#content") != null),
 /*************************/
 
 registerInitializer('pageLayoutFinished', false, () => (document.readyState == "complete"), () => {
-	GWLog("INITIALIZER pageLayoutFinished");
-
 	forceInitializer('earlyInitialize');
 
+	GWLog("INITIALIZER pageLayoutFinished");
+
 	// We pre-query the relevant elements, so we don’t have to run queryAll on
 	// every firing of the scroll listener.
 	GW.scrollState = {
@@ -472,5 +472,18 @@ registerInitializer('pageLayoutFinished', false, () => (document.readyState == "
 	GW.scrollState.siteNavUI.forEach(element => {
 		element.addEventListener("mouseover", () => { showSiteNavUI(); });
 	});
+
+	// Wrap all images in a span.
+	document.querySelectorAll("main > nav ~ * img").forEach(image => {
+		let wrapper = document.createElement("span");
+		wrapper.classList.add("img");
+		image.parentElement.insertBefore(wrapper, image);
+		wrapper.appendChild(image);
+		wrapper.classList.add(...image.classList);
+		image.classList.remove(...image.classList);
+	});	
+
+	imageFocusSetup();
+	focusImageSpecifiedByURL();
 });
 

index.shtml

@@ -7,8 +7,7 @@
 </head>
 <body class='home-page'>
 	<div id='splash-image' class='hidden'>
-		<img class='wide' src='/deus/assets/images/deus-logo-text-horizontal.png'>
+		<img src='/deus/assets/images/deus-logo-text-horizontal.png'>
-		<img class='tall' src='/deus/assets/images/deus-logo-text.png'>
 	</div>
 	<main>
 <!--#include virtual="/deus/includes/main-nav.html" -->
@@ -18,9 +17,12 @@
 </body>
 <script>
 	document.querySelector("#splash-image").classList.remove("hidden");
+	setTimeout(() => {
+		document.querySelector("#splash-image").classList.add("fade");
+	}, 2000);
 	setTimeout(() => {
 		document.querySelector("#main-nav").classList.add("shown");
 		document.querySelector("#copyright").classList.add("shown");
-	}, 1500);
+	}, 2000);
 </script>
 </html>