Initial commit of full-screen-logo-homepage

.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)$">
-# 	Header set Cache-Control "max-age=0, public"
-# </filesMatch>
+<filesMatch ".(css|js)$">
+	Header set Cache-Control "max-age=0, public"
+</filesMatch>
 
 Options +Includes
 AddType text/html .shtml

assets/css/home-page.css

@@ -5,11 +5,21 @@
 /*=========*/
 
 body.home-page {
-	--deus-body-padding: 2rem;
+	--deus-body-padding: 5rem 5rem 10rem 5rem;
 
 	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;
 }
@@ -36,35 +46,77 @@ 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: -2rem;
+	top: unset;
+	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 {
-	top: 0;
+	bottom: 0;
 	opacity: 1.0;
 	transition:
-		top 1s ease,
+		bottom 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 {
-	bottom: -0.625rem;
+	top: -0.75rem;
 	opacity: 0.0;
 }
 body.home-page #copyright.shown {
-	bottom: 0.625rem;
+	top: 0.75rem;
 	opacity: 0.5;
 	transition:
-		bottom 1s ease,
+		top 1s ease,
 		opacity 1s ease;
 }

assets/css/image-focus.css

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

assets/css/main.css

@@ -324,12 +324,6 @@ 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:	".gallery img",
-			focusedImageSelector:	".gallery img.focused",
+			contentImagesSelector:	"article img, .gallery img",
+			focusedImageSelector:	"article img.focused, .gallery img.focused",
 			shrinkRatio:			0.975,
 			hideUITimerDuration:	1500,
 			hideUITimerExpired:		() => {
@@ -118,13 +118,16 @@ function imageFocusSetup() {
 		image.addEventListener("click", GW.imageClickedToFocus);
 	});
 
-	// Add image wrapper class.
+	// Wrap all images in a span.
 	document.querySelectorAll(GW.imageFocus.contentImagesSelector).forEach(image => {
-		let wrapper = image.closest(".img");
-		if (wrapper)
-			wrapper.classList.add("image-wrapper");
-	});	
-
+		let wrapper = document.createElement("span");
+		wrapper.classList.add("image-wrapper", "img");
+		image.parentElement.insertBefore(wrapper, image);
+		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'>
@@ -600,3 +603,10 @@ 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"), () => {
-	forceInitializer('earlyInitialize');
-
 	GWLog("INITIALIZER pageLayoutFinished");
 
+	forceInitializer('earlyInitialize');
+
 	// We pre-query the relevant elements, so we don’t have to run queryAll on
 	// every firing of the scroll listener.
 	GW.scrollState = {
@@ -472,18 +472,5 @@ 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,7 +7,8 @@
 </head>
 <body class='home-page'>
 	<div id='splash-image' class='hidden'>
-		<img src='/deus/assets/images/deus-logo-text-horizontal.png'>
+		<img class='wide' 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" -->
@@ -17,12 +18,9 @@
 </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");
-	}, 2000);
+	}, 1500);
 </script>
 </html>