deus-gaming/assets/css/main.css

@charset "UTF-8";

/*************/
/* VARIABLES */
/*************/

:root {
	/*	Specific colors. */
	--deus-color-darker-blue: #00122f;
	--deus-color-dark-blue: #002e5c;
	--deus-color-medium-blue: #0f5093;
	--deus-color-light-blue: #2069b3;
	--deus-color-gold: #fdc22f;
	--deus-color-dark-gold: #c8a44d;
	--deus-color-gold-shadow: #a5842e;
	--deus-color-gold-shadow-opacity-one-quarter: rgba(165, 132, 46, 0.25);
	--deus-color-gold-shadow-opacity-one-half: rgba(165, 132, 46, 0.5);
	--deus-color-gold-shadow-opacity-three-quarters: rgba(165, 132, 46, 0.75);
	--deus-color-golden-brown: #684f00;
	--deus-color-darker-grey: #161a1f;
	--deus-color-dark-grey: #272b30;
	--deus-color-medium-grey: #567;
	--deus-color-light-grey: #a2a1a0;
	--deus-color-lighter-grey: #d5d2d2;
	--deus-color-white: #fff;
	--deus-color-white-opacity-one-quarter: rgba(255,255,255,0.25);
	--deus-color-white-opacity-one-half: rgba(255,255,255,0.5);
	--deus-color-white-opacity-three-quarters: rgba(255,255,255,0.75);

	/*	Element colors & appearance. */
	--deus-body-background-color: var(--deus-color-darker-blue);
	--deus-body-background-image: url('/deus/assets/images/deus-logo-only.png');
	--deus-body-background-image-margin: 1.5rem;

	--deus-box-background-color: var(--deus-color-dark-grey);
	--deus-box-border-color: var(--deus-color-gold);
	--deus-box-shadow-color: var(--deus-color-gold-shadow);
	--deus-box-shadow-color-intermediate-retina: var(--deus-color-dark-gold);

	--deus-body-text-color: var(--deus-color-white);
	--deus-body-text-shadow-color: var(--deus-color-white-opacity-one-quarter);

	--deus-link-color: var(--deus-color-gold);
	--deus-link-color-hover: var(--deus-color-white);
	--deus-link-color-active: var(--deus-color-white);
	--deus-link-color-visited: var(--deus-color-gold);
	--deus-link-text-shadow-color: var(--deus-color-gold-shadow-opacity-one-quarter);
	
	--deus-image-border-color: var(--deus-color-golden-brown);

	/*	Typography. */
	/*	1rem = 16px (set on 'html').
		These calculated values ensure integer line height;
		otherwise, line spacing will vary in pixel count, leading to
		a subtly inconsistent appearance of the body text.
		*/
	--deus-content-base-font-size: calc(1rem * 9/8);

	--deus-body-font: HK Grotesk;
	--deus-body-font-weight: 300;
	--deus-body-text-shadow: none;
	--deus-body-text-line-spacing: calc(1 + 7/(16 * 9/8));
	--deus-body-text-paragraph-spacing: 1em;

	--deus-heading-font: Spectral SC;
	--deus-heading-font-variant: normal;
	--deus-heading-font-opentype-features: none;
	--deus-heading-font-size: 1.5em;
	--deus-heading-font-weight: 700;
	--deus-heading-letter-spacing: normal;
	--deus-heading-text-color: var(--deus-color-white);
	
	--deus-nav-ui-font: Spectral SC;
	--deus-nav-ui-font-variant: normal;
	--deus-nav-ui-font-opentype-features: none;

	/*	Layout. */
	--deus-body-padding: 6rem 2rem;
	--deus-content-max-width: 92ch;
	--deus-post-padding: 1.5rem;
	--deus-post-heading-spacing: 5px;
	--deus-post-spacing: 3rem;
	
}
@media only screen and (max-width: 960px) {
	:root {
		/*	Layout. */
		--deus-body-padding: 6rem 1rem;
		--deus-post-padding: 1.25rem;
		--deus-mobile-post-heading-inset: 1.75rem;
	}
}
@media only screen and (max-width: 520px) {
	:root {
		/*	Layout. */
		--deus-body-padding: 6rem 0.5rem;
		--deus-post-padding: 1rem;
	}
}
@media only screen and (max-resolution: 1dppx) {
	:root {
		--deus-body-text-shadow: 0 0 0 var(--deus-body-text-shadow-color);
	}
}

/********/
/* BASE */
/********/

html {
	font-size: 16px;
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

/**********/
/* LAYOUT */
/**********/

body {
	margin: 0;
	padding: var(--deus-body-padding);
	background-color: var(--deus-body-background-color);
}
body::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: var(--deus-body-background-image);
	background-size: auto 150vh;
	background-repeat: no-repeat;
	background-position: right 50vw top 0;
	background-attachment: fixed;
	opacity: 0.2;
}

main {
	max-width: var(--deus-content-max-width);
	margin: auto;
	position: relative;
}

/********/
/* TEXT */
/********/

main {
	color: var(--deus-body-text-color);
	font-size: var(--deus-content-base-font-size);
	font-family: var(--deus-body-font);
	font-weight: var(--deus-body-font-weight);
	text-shadow: var(--deus-body-text-shadow);
	line-height: var(--deus-body-text-line-spacing);
}

/**********/
/* NAV UI */
/**********/

main nav {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	background-color: var(--deus-box-background-color);
	width: 100%;
	padding: 0.75em 1.25em;
	border-bottom: 1px solid var(--deus-box-border-color);
	box-shadow: 0 1px 0 0 var(--deus-box-shadow-color);
	z-index: 1001;
	transition:
		top 0.3s ease,
		opacity 0.15s ease,
		filter 0.15s ease;
}
@media only screen and (min-resolution: 2dppx) {
	main nav {
		border-bottom: none;
		box-shadow: 
			0 -0.5px 0 0 var(--deus-box-shadow-color-intermediate-retina) inset,
			0  0.5px 0 0 var(--deus-box-border-color),
			0    1px 0 0 var(--deus-box-shadow-color-intermediate-retina),
			0  1.5px 0 0 var(--deus-box-shadow-color);
	}
}
main nav.hidden {
	top: -5rem;
}
main nav.translucent-on-scroll {
	opacity: 0.6;
	filter: blur(1px);
}

main nav a {
	font-family: var(--deus-nav-ui-font);
	font-size: 1.25em;
	font-weight: bold;
	font-feature-settings: var(--deus-nav-ui-font-opentype-features);
	font-variant: var(--deus-nav-ui-font-variant);
	text-shadow: 2px 2px 1px var(--deus-link-text-shadow-color);

	/*	Workaround for baseline bug in “Spectral” font.
		*/
	padding: 0.125em 0 0 0;
}
main nav a + a {
	margin-left: 1em;
}
main nav a:hover {
	text-decoration: none;
}
main nav a:active {
	transform: scale(0.9);
}

/*=-------------------=*/
/*= Nav items (text). =*/
/*=-------------------=*/

@media only screen and (max-width: 520px) {
	main nav a.text {
		font-size: 0.625em;
		padding-top: 0.375em;
	}
	main nav a.text::before {
		content: attr(data-deus-icon);
		display: block;
		font-family: Font Awesome;
		margin: auto;
		text-align: center;
		font-size: 1.75em;
	}
	main nav a + a {
		margin-left: 1.5em;
	}
}

/*=-------=*/
/*= Logo. =*/
/*=-------=*/

main nav a.logo {
	line-height: 0.5;
	margin-right: 0.25em;
	font-size: 1em;

	/*	Workaround for baseline bug in “Spectral” font.
		*/
	padding: 0;
}
main nav a img {
	max-height: 2em;
	filter:
		  drop-shadow(0 0 1px var(--deus-color-gold))
		  drop-shadow(0 0 2px var(--deus-color-gold));
}
main nav a:hover img {
	filter:
		  drop-shadow(0 0 1px var(--deus-color-white))
		  drop-shadow(0 0 2px var(--deus-color-white));
}

/*=----------------=*/
/*= Share buttons. =*/
/*=----------------=*/

main nav .social-buttons {
	flex: 1 0 auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
}
main nav .social-buttons > * {
	flex: 0 1 auto;
}

main nav .social-buttons a {
	font-family: Font Awesome, Font Awesome Brands;
	font-size: 1em;
	font-weight: normal;
	width: 1.5em;
	text-align: center;
}
main nav .social-buttons a + a {
	margin-left: 0.5em;
}

/*	“Share” button.
	*/
main nav .social-buttons a.share {
	font-weight: 900;
}

/*********/
/* LINKS */
/*********/

a {
	color: var(--deus-link-color);
	text-decoration: none;
}
a:hover {
	color: var(--deus-link-color-hover);
	text-decoration: underline;
}

/********/
/* MISC */
/********/

hr {
	height: 1px;
	border: none;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--deus-color-gold), rgba(0, 0, 0, 0));
	margin: 1.5em 0;
	clear: both;
}

/*=-----------------=*/
/* Copyright notice. */
/*=-----------------=*/

#copyright {
	position: fixed;
	left: 0;
	bottom: 1rem;
	width: 100%;
	text-align: center;
	color: var(--deus-body-text-color);
	font-size: 0.875rem;
	opacity: 0.5;
}
#copyright p {
	margin: 0;
}

/*********/
/* POSTS */
/*********/

article {
	position: relative;
	padding: var(--deus-post-padding);
	background-color: var(--deus-box-background-color);
	box-shadow:
		0 0 0 1px var(--deus-box-border-color) inset,
		0 0 0 1px var(--deus-box-shadow-color),
		0 0 0 2px var(--deus-body-background-color);
	z-index: 1;
}
@media only screen and (min-resolution: 2dppx) {
	article {
		box-shadow:
			0 0 0 0.5px var(--deus-box-border-color) inset,
			0 0 0 1.0px var(--deus-box-shadow-color-intermediate-retina) inset,
			0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
			0 0 0 1.0px var(--deus-box-shadow-color),
			0 0 0 2.0px var(--deus-body-background-color);
	}
}
@media only screen and (max-width: 960px) {
	article {
		margin-top: 3rem;
	}
}
@supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) {
	article {
		text-align: justify;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
}

article + article {
	margin-top: var(--deus-post-spacing);
}
@media only screen and (max-width: 960px) {
	article + article {
		margin-top: calc(var(--deus-mobile-post-heading-inset) + var(--deus-post-spacing));
	}
}

/*=--------------=*/
/*= Post titles. =*/
/*=--------------=*/

article h1 {
	position: relative;
	float: right;
	margin:
		calc(-1 * var(--deus-post-padding))
		calc(-1 * var(--deus-post-padding))
		var(--deus-post-padding)
		calc(1.5 * var(--deus-post-padding));
	padding:
		calc(0.5 * var(--deus-post-padding))
		var(--deus-post-padding);

	/*	Workaround for baseline bug in “Spectral” font.
		*/
	padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em);

	background-color: var(--deus-box-background-color);
	box-shadow:
		0 0 0 1px var(--deus-box-border-color) inset,
		0 0 0 1px var(--deus-box-shadow-color);

	font-family: var(--deus-heading-font);
	font-size: var(--deus-heading-font-size);
	font-weight: var(--deus-heading-font-weight);
	color: var(--deus-heading-text-color);
	font-feature-settings: var(--deus-heading-font-opentype-features);
	font-variant: var(--deus-heading-font-variant);
	letter-spacing: var(--deus-heading-letter-spacing);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}
article h1::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: calc(-1 * (var(--deus-post-heading-spacing) + 2px));
	right: -1px;
	top: -1px;
	bottom: calc(-1 * (var(--deus-post-heading-spacing) + 2px));
	background-color: var(--deus-body-background-color);
	box-shadow:
		-1px 1px 0 0 var(--deus-box-shadow-color),
		-2px 2px 0 0 var(--deus-box-border-color);
}
@media only screen and (min-resolution: 2dppx) {
	article h1 {
		box-shadow:
			0 0 0 0.5px var(--deus-box-border-color) inset,
			0 0 0 1.0px var(--deus-box-shadow-color-intermediate-retina) inset,
			0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
			0 0 0 1.0px var(--deus-box-shadow-color);
	}
	article h1::after {
		box-shadow:
			-0.5px 0.5px 0 0 var(--deus-box-shadow-color),
			-1.0px 1.0px 0 0 var(--deus-box-shadow-color-intermediate-retina),
			-1.5px 1.5px 0 0 var(--deus-box-border-color),
			-2.0px 2.0px 0 0 var(--deus-box-shadow-color-intermediate-retina);
	}
}
@media only screen and (max-width: 960px) {
	article h1 {
		float: none;
		margin:
			calc(-1 * (var(--deus-post-padding) + var(--deus-mobile-post-heading-inset)))
			calc(var(--deus-post-heading-spacing) + 4px)
			2rem
			calc(var(--deus-post-heading-spacing) + 4px);
		text-align: center;
	}
	article h1::after {
		top: calc(var(--deus-mobile-post-heading-inset) - 1px);
		right: calc(-1 * (var(--deus-post-heading-spacing) + 2px));
		box-shadow:
			 0   1px 0 0   var(--deus-body-background-color),
			 0   1px 0 1px var(--deus-box-shadow-color),
			-1px 2px 0 1px var(--deus-box-border-color),
			 1px 2px 0 1px var(--deus-box-border-color);
	}
	@media only screen and (min-resolution: 2dppx) {
		article h1::after {
			box-shadow:
				     0   1px 0     0 var(--deus-body-background-color),
				     0   1px 0 0.5px var(--deus-box-shadow-color),
				-0.5px 1.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
				 0.5px 1.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
				  -1px   2px 0 0.5px var(--deus-box-border-color),
				   1px   2px 0 0.5px var(--deus-box-border-color),
				-1.5px 2.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
				 1.5px 2.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina);
		}
	}
}

article h1 a {
	text-shadow: 2px 2px 1px var(--deus-link-text-shadow-color);
}

article h1 a:hover {
	text-decoration: none;
}

/*=--------------=*/
/*= “More” link. =*/
/*=--------------=*/

article .more-link {
	text-align: right;
	font-size: 0.875em;
	line-height: 1;
}
article .more-link a {
	font-weight: 500;
}

/*=-------------=*/
/*= Paragraphs. =*/
/*=-------------=*/

article p {
	margin: 0 0 var(--deus-body-text-paragraph-spacing) 0;
}
article p:last-child {
	margin: 0 0 0 0;
}

/*=---------=*/
/*= Images. =*/
/*=---------=*/

article img {
	display: block;
	max-width: 100%;
}
article .img {
	display: block;
	max-width: 100%;
	border: 1px solid var(--deus-image-border-color);
}
article .img.full {
	margin: 2em 0 1.5em 0;
}
article .img.left {
	float: left;
	clear: both;
	max-width: 50%;
	margin: 0.25em 1em 0.5em 0;
}
article .img.left ~ p {
	float: right;
	clear: right;
	max-width: calc(50% - 1em);
}
article .img.right {
	float: right;
	clear: both;
	max-width: 50%;
	margin: 0.25em 0 0.5em 1em;
}
article .img.right ~ p {
	float: left;
	clear: left;
	max-width: calc(50% - 1em);
}
article .img.left ~ hr ~ p,
article .img.right ~ hr ~ p {
	float: none;
	max-width: unset;
}

@media only screen and (max-width: 960px) {
	article .img.left,
	article .img.right {
		float: none;
		margin: 2em auto 1.5em auto;
	}
	article .img.left ~ p,
	article .img.right ~ p {
		float: none;
		max-width: unset;
	}
}

/*=-----------=*/
/*= Sections. =*/
/*=-----------=*/

section::after {
	content: "";
	display: block;
	clear: both;
}

section + section {
	margin-top: 4em;
}

/***********/
/* GALLERY */
/***********/

main.gallery-layout {
	max-width: unset;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(64ch, 1fr));
	grid-gap: 2.5rem;
	align-items: start;
	margin: 1rem 1rem 0 1rem;
}

main.gallery-layout article {
	grid-column-start: -2;
	grid-row: 1;
	margin-top: 5rem;
}

main.gallery-layout article h1 {
	border: none;
	background-color: transparent;
	box-shadow: none;
	float: none;
	padding: 0;
	margin: -7.5rem 0 2.75rem calc(-1 * var(--deus-post-padding));
	font-size: 3em;
}

.gallery img {
	display: block;
	max-width: 100%;
	border: 1px solid var(--deus-image-border-color);
}

.gallery {
	--deus-gallery-column-count: 12;
	--deus-gallery-grid-gap: 0.5em;
	
	display: grid;
	grid-template-columns: repeat(var(--deus-gallery-column-count), auto);
	grid-gap: var(--deus-gallery-grid-gap);
	align-content: start;
}

.gallery .large {
	grid-column: span 12;
}
.gallery .medium {
	grid-column: span 6;
}
.gallery .small {
	grid-column: span 4;
}