forked from achmizs/deus-gaming
678 lines
15 KiB
CSS
678 lines
15 KiB
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('/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.8em;
|
|
--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;
|
|
text-align: center;
|
|
}
|
|
main nav a.text::before {
|
|
content: attr(data-deus-icon);
|
|
display: block;
|
|
font-family: Font Awesome;
|
|
margin: auto;
|
|
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;
|
|
}
|
|
@media only screen and (max-width: 960px) {
|
|
main.gallery-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
main.gallery-layout article {
|
|
grid-column-start: -2;
|
|
grid-row: 1;
|
|
margin-top: 5rem;
|
|
}
|
|
@media only screen and (max-width: 960px) {
|
|
main.gallery-layout article {
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 961px) {
|
|
main.gallery-layout article h1 {
|
|
border: none;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
float: none;
|
|
font-size: 2.5em;
|
|
line-height: 1.1;
|
|
font-size: 3em;
|
|
position: absolute;
|
|
padding: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
bottom: calc(100% + 1.5rem);
|
|
}
|
|
main.gallery-layout article h1::after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.gallery img {
|
|
display: block;
|
|
max-width: 100%;
|
|
border: 1px solid var(--deus-image-border-color);
|
|
}
|
|
|
|
.gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, auto);
|
|
grid-gap: 0.5em;
|
|
align-content: start;
|
|
}
|
|
|
|
.gallery .large {
|
|
grid-column: span 12;
|
|
}
|
|
.gallery .medium {
|
|
grid-column: span 6;
|
|
}
|
|
.gallery .small {
|
|
grid-column: span 4;
|
|
}
|
|
|
|
@media only screen and (max-width: 960px) {
|
|
.gallery {
|
|
grid-template-columns: repeat(6, auto);
|
|
grid-gap: 0.75em;
|
|
}
|
|
.gallery .large {
|
|
grid-column: span 6;
|
|
}
|
|
.gallery .small {
|
|
grid-column: span 3;
|
|
}
|
|
}
|