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-gold-shadow: #a5842e;
	--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-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-image-border-color: var(--deus-color-golden-brown);

	/*	Typography. */
	--deus-content-base-font-size: 1.125rem;

	--deus-body-font: HK Grotesk;
	--deus-body-font-weight: 300;
	--deus-body-text-shadow: none;
	--deus-body-text-line-spacing: 1.4;
	--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-box-border-width: 1px;
	--deus-post-padding: 1.5rem;
	--deus-post-heading-spacing: 5px;
	--deus-post-spacing: 3rem;
	
}
@media only screen and (max-resolution: 191dpi) {
	: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: var(--deus-box-border-width) solid var(--deus-box-border-color);
	z-index: 1001;
	transition:
		top 0.3s ease,
		opacity 0.15s ease,
		filter 0.15s ease;
}
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);

	/*	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);
}

/*=-------=*/
/*= 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);
	border: var(--deus-box-border-width) solid var(--deus-box-border-color);
	box-shadow: 0 0 0 1px var(--deus-body-background-color);
	z-index: 1;
}
@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);
}

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

article h1 {
	float: right;
	margin:
		calc(-1 * var(--deus-post-padding) - var(--deus-box-border-width))
		calc(-1 * var(--deus-post-padding) - var(--deus-box-border-width))
		var(--deus-post-padding)
		calc(1.5 * var(--deus-post-padding));
	padding:
		calc(0.5 * var(--deus-post-padding))
		var(--deus-post-padding);
	background-color: var(--deus-box-background-color);
	border: var(--deus-box-border-width) solid var(--deus-box-border-color);
	box-shadow:
		  calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 0 var(--deus-body-background-color),
		  calc(-1 * var(--deus-post-heading-spacing)) 0 0 0 var(--deus-body-background-color),
		  0 calc(var(--deus-post-heading-spacing)) 0 0 var(--deus-body-background-color),
		  calc(-1 * var(--deus-post-heading-spacing)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-border-color),
		  calc(-1 * var(--deus-box-border-width)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-color),
		  calc(-1 * var(--deus-post-heading-spacing)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-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);

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

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;
}

/*=-----------=*/
/*= 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;
}