WIP

.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,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 =*/
 /*=--------------=*/
 
-.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/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,14 +118,11 @@ 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.
@@ -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();
 });
 

includes/colophon.html

@@ -1,4 +1,4 @@
 		<div id='copyright'>
-			<p>&copy; 2020&ndash;present DEUS gaming</p>
+			<p>&copy; 2020&ndash;present Team DEUS</p>
 			<p>SOULCALIBUR and SOULCALIBUR VI World Tour are &copy; <a href="https://www.bandainamcoent.com/">BANDAI NAMCO ENTERTAINMENT</a>  </p>
 		</div>

includes/main-nav.html

@@ -13,9 +13,14 @@
 				data-deus-icon='' 
 				href='/posts'
 					>News</a>
+			<a 
+				class='nav-item text icon-regular' 
+				data-deus-icon='&#xf143;' 
+				href='/pages/players'
+					>Players</a>
 			<div class='social-buttons'>
-				<a class='social-button share' href='#'>&#xf1e0;</a>
+				<!-- <a class='social-button share' href='#'>&#xf1e0;</a>
-				<a class='social-button facebook' href='#'>&#xf39e;</a>
+				<a class='social-button facebook' href='#'>&#xf39e;</a> -->
 				<a class='social-button twitter' href='#'>&#xf099;</a>
 			</div>
 		</nav>

index.shtml

@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>DEUS gaming</title>
+	<title>Team DEUS</title>
 <!--#include virtual="/includes/head-content.html" -->
 	<link rel='stylesheet' type='text/css' href='/assets/css/home-page.css'>
 </head>
 <body class='home-page'>
 	<div id='splash-image' class='hidden'>
-		<img src='/assets/images/deus-logo-text-horizontal.png'>
+		<img class='wide' src='/assets/images/deus-logo-text-horizontal.png'>
+		<img class='tall' src='/assets/images/deus-logo-text.png'>
 	</div>
 	<main>
 <!--#include virtual="/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>

pages/about/index.shtml

@@ -1,18 +1,19 @@
 <!DOCTYPE html>
 <html lang='en-US'>
 <head>
-	<title>DEUS gaming</title>
+	<title>Team DEUS</title>
 <!--#include virtual="/includes/head-content.html" -->
 </head>
 <body>
 	<main>
 <!--#include virtual="/includes/main-nav.html" -->
 		<article>
-			<h1>About DEUS gaming</h1>
+			<h1>About Team DEUS</h1>
 			<section>
 				
-				<p>DEUS is a New York City based e-Sports organization dedicated to empowering young talented players to make a name for themselves on the global stage. We are focused on <a href="https://scworldtour.com/">SOULCALIBUR VI</a> as our game of choice. </p><img src='soulcaliburvi.png' class='right' />
+				<p>DEUS is a New York City based e-Sports organization dedicated to empowering young talented players to make a name for themselves on the global stage. We are focused on <a href="https://scworldtour.com/">SOULCALIBUR VI</a> as our game of choice. </p>
-				<p>DEUS was started in 2020 by Ian Friedman (<a href="https://twitter.com/sabindeus">SabinDeus</a>) as a way to help the talented New York Soulcalibur scene grow beyond the boundaries of the Northeast United States. </p>
+				<img src='soulcaliburvi.png' class='right' />
+				<p>DEUS was started in 2020 by Ian Friedman (<a href="https://twitter.com/sabindeus">SabinDeus</a>) as a way to help the talented New York Soul Calibur scene grow beyond the boundaries of the Northeast United States. </p>
 			</section>
 			
 		</article>

pages/player/index.shtml

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='en-US'>
 <head>
-	<title>DEUS gaming</title>
+	<title>Team DEUS</title>
 <!--#include virtual="/includes/head-content.html" -->
 </head>
 <body>

pages/players/endersj/index.shtml

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='en-US'>
 <head>
-	<title>DEUS gaming</title>
+	<title>Team DEUS</title>
 <!--#include virtual="/includes/head-content.html" -->
 </head>
 <body>

pages/players/incendiate/index.shtml

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang='en-US'>
+<head>
+	<title>Team DEUS</title>
+<!--#include virtual="/includes/head-content.html" -->
+</head>
+<body>
+	<main class='gallery-layout'>
+<!--#include virtual="/includes/main-nav.html" -->
+		<div class='gallery'>
+			<img class='medium' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='medium' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+		</div>
+		<article>
+			<h1>Enders J</h1>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis diam turpis, at sagittis tortor pulvinar sed. Quisque sollicitudin ex in ultrices mattis. Cras vehicula odio at feugiat fermentum. Nunc mi lectus, iaculis eget velit vel, gravida elementum arcu. Nam facilisis, erat at dictum tincidunt, nunc ex ultricies elit, nec ullamcorper nunc purus eget nunc. Nulla facilisi. Fusce volutpat libero eget mollis ornare. Curabitur auctor ornare viverra. Nam sollicitudin lacus magna, eu vestibulum nulla consequat at. Vestibulum tempus dolor sed feugiat lobortis. Nulla facilisi. Fusce malesuada, velit a posuere vulputate, nisl mauris imperdiet odio, a porta diam felis eu ante. Maecenas mollis nulla enim, vitae gravida justo laoreet a. Mauris blandit orci a odio vestibulum rutrum. Fusce lobortis libero ut efficitur pretium. Donec semper, lectus gravida ultricies vulputate, mauris arcu laoreet massa, at sollicitudin tortor metus ut libero.</p>
+			<p>Maecenas mattis convallis risus, sed mattis nibh sagittis et. Integer sed nulla quis ligula auctor fermentum non a felis. Mauris vitae eros quis nulla blandit dignissim. Cras bibendum augue non leo luctus bibendum. Nunc et porttitor nunc. Aenean at ipsum vel ligula volutpat mattis. Maecenas feugiat mauris vitae nibh pharetra venenatis. Nullam ornare dolor nec ex imperdiet pharetra condimentum id elit. Integer orci neque, dignissim non neque ut, aliquam commodo tellus. Suspendisse rhoncus neque tempus magna luctus, sodales rhoncus ipsum gravida. Maecenas et hendrerit augue.</p>
+			<p>Pellentesque dapibus leo eget odio imperdiet, ac pellentesque elit finibus. In eu fermentum risus. In pretium lobortis efficitur. Proin hendrerit nisl magna, ut tempor dui tristique id. Morbi convallis risus at erat vehicula interdum. Nunc pellentesque metus quis vulputate sodales. Morbi consectetur massa turpis, ac condimentum massa rutrum ut. Vestibulum finibus felis ut magna hendrerit, non blandit nulla iaculis. Fusce commodo aliquet volutpat. Curabitur id bibendum lectus. Maecenas et scelerisque turpis, at vestibulum sem. Donec non mauris felis. Maecenas in nunc rutrum, dapibus nulla sed, vestibulum neque. Donec a lacus venenatis, tempus nunc quis, pellentesque mauris. Cras pharetra bibendum eros at efficitur. Nunc laoreet cursus elit ac pellentesque.</p>
+			<p>Etiam eu nisl sapien. Maecenas vehicula vitae metus in viverra. Fusce nec sapien malesuada, cursus quam eget, semper justo. Donec bibendum accumsan ante, in porta urna porta a. Ut luctus odio lacus, pulvinar semper ex lacinia accumsan. Curabitur sit amet rutrum ligula. Nam ex augue, tempor ut tortor et, vehicula hendrerit felis. Curabitur sit amet massa diam. Vestibulum ante urna, varius sed nunc vitae, laoreet dignissim enim. Suspendisse nec suscipit sem, vitae egestas tortor. Mauris auctor maximus dolor, vitae elementum nisi ullamcorper nec.</p>
+		</article>
+<!--#include virtual="/includes/colophon.html" -->
+	</main>
+<!--#include virtual="/includes/foot-content.html" -->
+</body>
+</html>

pages/players/index.shtml

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang='en-US'>
+<head>
+	<title>Team DEUS</title>
+<!--#include virtual="/includes/head-content.html" -->
+</head>
+<body>
+	<main class='gallery-layout'>
+<!--#include virtual="/includes/main-nav.html" -->
+		<div class='gallery'>
+			<!-- Images (<img> tags) go here (with one class of { small, medium, large }). -->
+			<img src="endersj/cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg" class='medium' />
+			<img src="ramon/sophitia-alexandra-soulcalibur6-artwork.png" class='medium' />
+			<img src="incendiate/ivy-valentine-soulcalibur6-character-artwork.jpg" class='medium' />
+
+		</div>
+<!--#include virtual="/includes/colophon.html" -->
+	</main>
+<!--#include virtual="/includes/foot-content.html" -->
+</body>
+</html>

pages/players/ramon/index.shtml

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang='en-US'>
+<head>
+	<title>Team DEUS</title>
+<!--#include virtual="/includes/head-content.html" -->
+</head>
+<body>
+	<main class='gallery-layout'>
+<!--#include virtual="/includes/main-nav.html" -->
+		<div class='gallery'>
+			<img class='medium' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='medium' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+			<img class='small' src='cervantes-soulcalibur6-artwork-by-takuji-kawano.jpg'>
+		</div>
+		<article>
+			<h1>Enders J</h1>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis diam turpis, at sagittis tortor pulvinar sed. Quisque sollicitudin ex in ultrices mattis. Cras vehicula odio at feugiat fermentum. Nunc mi lectus, iaculis eget velit vel, gravida elementum arcu. Nam facilisis, erat at dictum tincidunt, nunc ex ultricies elit, nec ullamcorper nunc purus eget nunc. Nulla facilisi. Fusce volutpat libero eget mollis ornare. Curabitur auctor ornare viverra. Nam sollicitudin lacus magna, eu vestibulum nulla consequat at. Vestibulum tempus dolor sed feugiat lobortis. Nulla facilisi. Fusce malesuada, velit a posuere vulputate, nisl mauris imperdiet odio, a porta diam felis eu ante. Maecenas mollis nulla enim, vitae gravida justo laoreet a. Mauris blandit orci a odio vestibulum rutrum. Fusce lobortis libero ut efficitur pretium. Donec semper, lectus gravida ultricies vulputate, mauris arcu laoreet massa, at sollicitudin tortor metus ut libero.</p>
+			<p>Maecenas mattis convallis risus, sed mattis nibh sagittis et. Integer sed nulla quis ligula auctor fermentum non a felis. Mauris vitae eros quis nulla blandit dignissim. Cras bibendum augue non leo luctus bibendum. Nunc et porttitor nunc. Aenean at ipsum vel ligula volutpat mattis. Maecenas feugiat mauris vitae nibh pharetra venenatis. Nullam ornare dolor nec ex imperdiet pharetra condimentum id elit. Integer orci neque, dignissim non neque ut, aliquam commodo tellus. Suspendisse rhoncus neque tempus magna luctus, sodales rhoncus ipsum gravida. Maecenas et hendrerit augue.</p>
+			<p>Pellentesque dapibus leo eget odio imperdiet, ac pellentesque elit finibus. In eu fermentum risus. In pretium lobortis efficitur. Proin hendrerit nisl magna, ut tempor dui tristique id. Morbi convallis risus at erat vehicula interdum. Nunc pellentesque metus quis vulputate sodales. Morbi consectetur massa turpis, ac condimentum massa rutrum ut. Vestibulum finibus felis ut magna hendrerit, non blandit nulla iaculis. Fusce commodo aliquet volutpat. Curabitur id bibendum lectus. Maecenas et scelerisque turpis, at vestibulum sem. Donec non mauris felis. Maecenas in nunc rutrum, dapibus nulla sed, vestibulum neque. Donec a lacus venenatis, tempus nunc quis, pellentesque mauris. Cras pharetra bibendum eros at efficitur. Nunc laoreet cursus elit ac pellentesque.</p>
+			<p>Etiam eu nisl sapien. Maecenas vehicula vitae metus in viverra. Fusce nec sapien malesuada, cursus quam eget, semper justo. Donec bibendum accumsan ante, in porta urna porta a. Ut luctus odio lacus, pulvinar semper ex lacinia accumsan. Curabitur sit amet rutrum ligula. Nam ex augue, tempor ut tortor et, vehicula hendrerit felis. Curabitur sit amet massa diam. Vestibulum ante urna, varius sed nunc vitae, laoreet dignissim enim. Suspendisse nec suscipit sem, vitae egestas tortor. Mauris auctor maximus dolor, vitae elementum nisi ullamcorper nec.</p>
+		</article>
+<!--#include virtual="/includes/colophon.html" -->
+	</main>
+<!--#include virtual="/includes/foot-content.html" -->
+</body>
+</html>

posts/index.shtml

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='en-US'>
 <head>
-	<title>DEUS gaming</title>
+	<title>Team DEUS</title>
 <!--#include virtual="/includes/head-content.html" -->
 </head>
 <body>

posts/some-post/index.shtml

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='en-US'>
 <head>
-	<title>DEUS gaming</title>
+	<title>Team DEUS</title>
 <!--#include virtual="/includes/head-content.html" -->
 </head>
 <body>

templates/.htaccess

@@ -1,2 +1 @@
-Order Deny,Allow
+
-Deny from all

templates/generic-page.shtml

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='en-US'>
 <head>
-	<title>DEUS gaming</title>
+	<title>Team DEUS</title>
 <!--#include virtual="/includes/head-content.html" -->
 </head>
 <body>

templates/image-gallery.shtml

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='en-US'>
 <head>
-	<title>DEUS gaming</title>
+	<title>Team DEUS</title>
 <!--#include virtual="/includes/head-content.html" -->
 </head>
 <body>

templates/news-post.shtml

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='en-US'>
 <head>
-	<title>DEUS gaming</title>
+	<title>Team DEUS</title>
 <!--#include virtual="/includes/head-content.html" -->
 </head>
 <body>