achmizs/deus-gaming
1
0
Fork 1
Code Issues Pull Requests 1 Releases Wiki Activity

Compare commits

base: achmizs:5b242d102aade6205ad904bbe01d9dae10c5d9fd
Branches Tags
achmizs:master
achmizs:full-screen-logo-homepage
..
compare: achmizs:8a8e7ff5c7cd1ea8c67c4823de5f524428a47fd8
Branches Tags
achmizs:master
achmizs:full-screen-logo-homepage

No commits in common. "5b242d102aade6205ad904bbe01d9dae10c5d9fd" and "8a8e7ff5c7cd1ea8c67c4823de5f524428a47fd8" have entirely different histories.
5b242d102a ... 8a8e7ff5c7

1 changed files with 59 additions and 94 deletions
Show Stats Expand all files Collapse all files

153
assets/css/main.css
View File

@ -49,17 +49,12 @@
--deus-image-border-color: var(--deus-color-golden-brown); --deus-image-border-color: var(--deus-color-golden-brown);
/* Typography. */ /* Typography. */
/* 1rem = 16px (set on 'html'). --deus-content-base-font-size: 1.125rem;
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: HK Grotesk;
--deus-body-font-weight: 300; --deus-body-font-weight: 300;
--deus-body-text-shadow: none; --deus-body-text-shadow: none;
--deus-body-text-line-spacing: calc(1 + 7/(16 * 9/8)); --deus-body-text-line-spacing: 1.4;
--deus-body-text-paragraph-spacing: 1em; --deus-body-text-paragraph-spacing: 1em;
--deus-heading-font: Spectral SC; --deus-heading-font: Spectral SC;
@ -77,6 +72,7 @@
/* Layout. */ /* Layout. */
--deus-body-padding: 6rem 2rem; --deus-body-padding: 6rem 2rem;
--deus-content-max-width: 92ch; --deus-content-max-width: 92ch;
--deus-box-border-width: 1px;
--deus-post-padding: 1.5rem; --deus-post-padding: 1.5rem;
--deus-post-heading-spacing: 5px; --deus-post-heading-spacing: 5px;
--deus-post-spacing: 3rem; --deus-post-spacing: 3rem;
@ -96,7 +92,7 @@
--deus-post-padding: 1rem; --deus-post-padding: 1rem;
} }
} }
@media only screen and (max-resolution: 1dppx) { @media only screen and (max-resolution: 191dpi) {
:root { :root {
--deus-body-text-shadow: 0 0 0 var(--deus-body-text-shadow-color); --deus-body-text-shadow: 0 0 0 var(--deus-body-text-shadow-color);
} }
@ -172,7 +168,7 @@ main nav {
background-color: var(--deus-box-background-color); background-color: var(--deus-box-background-color);
width: 100%; width: 100%;
padding: 0.75em 1.25em; padding: 0.75em 1.25em;
border-bottom: 1px solid var(--deus-box-border-color); border-bottom: var(--deus-box-border-width) solid var(--deus-box-border-color);
box-shadow: 0 1px 0 0 var(--deus-box-shadow-color); box-shadow: 0 1px 0 0 var(--deus-box-shadow-color);
z-index: 1001; z-index: 1001;
transition: transition:
@ -180,7 +176,7 @@ main nav {
opacity 0.15s ease, opacity 0.15s ease,
filter 0.15s ease; filter 0.15s ease;
} }
@media only screen and (min-resolution: 2dppx) { @media only screen and (min-resolution: 192dpi) {
main nav { main nav {
border-bottom: none; border-bottom: none;
box-shadow: box-shadow:
@ -327,25 +323,21 @@ article {
position: relative; position: relative;
padding: var(--deus-post-padding); padding: var(--deus-post-padding);
background-color: var(--deus-box-background-color); background-color: var(--deus-box-background-color);
border: var(--deus-box-border-width) solid var(--deus-box-border-color);
box-shadow: box-shadow:
0 0 0 1px var(--deus-box-border-color) inset,
0 0 0 1px var(--deus-box-shadow-color), 0 0 0 1px var(--deus-box-shadow-color),
0 0 0 2px var(--deus-body-background-color); 0 0 0 2px var(--deus-body-background-color);
z-index: 1; z-index: 1;
} }
@media only screen and (min-resolution: 2dppx) { @media only screen and (min-resolution: 192dpi) {
article { article {
border: none;
box-shadow: box-shadow:
0 0 0 0.5px var(--deus-box-border-color) inset, 0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina) inset,
0 0 0 1.0px var(--deus-box-shadow-color-intermediate-retina) inset, 0 0 0 0.5px var(--deus-box-border-color),
0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina), 0 0 0 1px var(--deus-box-shadow-color-intermediate-retina),
0 0 0 1.0px var(--deus-box-shadow-color), 0 0 0 1.5px var(--deus-box-shadow-color);
0 0 0 2.0px var(--deus-body-background-color); 0 0 0 2.5px var(--deus-body-background-color);
}
}
@media only screen and (max-width: 960px) {
article {
margin-top: 2rem;
} }
} }
@supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) { @supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) {
@ -356,7 +348,6 @@ article {
hyphens: auto; hyphens: auto;
} }
} }
article + article { article + article {
margin-top: var(--deus-post-spacing); margin-top: var(--deus-post-spacing);
} }
@ -366,26 +357,31 @@ article + article {
/*=--------------=*/ /*=--------------=*/
article h1 { article h1 {
position: relative;
float: right; float: right;
margin: margin:
calc(-1 * var(--deus-post-padding)) calc(-1 * var(--deus-post-padding) - var(--deus-box-border-width))
calc(-1 * var(--deus-post-padding)) calc(-1 * var(--deus-post-padding) - var(--deus-box-border-width))
var(--deus-post-padding) var(--deus-post-padding)
calc(1.5 * var(--deus-post-padding)); calc(1.5 * var(--deus-post-padding));
padding: padding:
calc(0.5 * var(--deus-post-padding)) calc(0.5 * var(--deus-post-padding))
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); background-color: var(--deus-box-background-color);
border: var(--deus-box-border-width) solid var(--deus-box-border-color);
box-shadow: box-shadow:
0 0 0 1px var(--deus-box-border-color) inset, 0 0 0 1px var(--deus-box-shadow-color),
0 0 0 1px var(--deus-box-shadow-color);
calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 1px var(--deus-body-background-color),
calc(-1 * var(--deus-post-heading-spacing)) 0 0 1px var(--deus-body-background-color),
0 calc(var(--deus-post-heading-spacing)) 0 1px var(--deus-body-background-color),
calc(-1 * calc(var(--deus-post-heading-spacing) + 1px)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
calc(-1 * var(--deus-box-border-width)) calc(var(--deus-post-heading-spacing) + 1px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
calc(-1 * calc(var(--deus-post-heading-spacing) + 1px)) calc(var(--deus-post-heading-spacing) + 1px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-border-color),
calc(-1 * var(--deus-box-border-width)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-border-color),
calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-border-color);
font-family: var(--deus-heading-font); font-family: var(--deus-heading-font);
font-size: var(--deus-heading-font-size); font-size: var(--deus-heading-font-size);
font-weight: var(--deus-heading-font-weight); font-weight: var(--deus-heading-font-weight);
@ -393,70 +389,39 @@ article h1 {
font-feature-settings: var(--deus-heading-font-opentype-features); font-feature-settings: var(--deus-heading-font-opentype-features);
font-variant: var(--deus-heading-font-variant); font-variant: var(--deus-heading-font-variant);
letter-spacing: var(--deus-heading-letter-spacing); letter-spacing: var(--deus-heading-letter-spacing);
-webkit-hyphens: none;
-ms-hyphens: none; /* Workaround for baseline bug in “Spectral” font.
hyphens: none; */
padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em);
} }
article h1::after { @media only screen and (min-resolution: 192dpi) {
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 { article h1 {
border: none;
box-shadow: box-shadow:
0 0 0 0.5px var(--deus-box-border-color) inset, 0 0 0 0.5px var(--deus-box-shadow-color),
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) inset,
0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina), 0 0 0 1px var(--deus-box-border-color) inset,
0 0 0 1.0px var(--deus-box-shadow-color); 0 0 0 1.5px var(--deus-box-shadow-color-intermediate-retina) inset,
}
article h1::after { calc(-1 * (var(--deus-post-heading-spacing) + 1px)) calc(var(--deus-post-heading-spacing) + 1px) 0 1px var(--deus-body-background-color),
box-shadow: calc(-1 * (var(--deus-post-heading-spacing) + 1px)) 0 0 1px var(--deus-body-background-color),
-0.5px 0.5px 0 0 var(--deus-box-shadow-color), 0 calc(var(--deus-post-heading-spacing) + 1px) 0 1px var(--deus-body-background-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), calc(-1 * calc(var(--deus-post-heading-spacing) + 1.5px)) calc(var(--deus-box-border-width) + 0.0px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
-2.0px 2.0px 0 0 var(--deus-box-shadow-color-intermediate-retina); calc(-1 * (var(--deus-box-border-width) + 0.0px)) calc(var(--deus-post-heading-spacing) + 1.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
} calc(-1 * calc(var(--deus-post-heading-spacing) + 1.5px)) calc(var(--deus-post-heading-spacing) + 1.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color),
}
@media only screen and (max-width: 960px) { calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) calc(var(--deus-box-border-width) + 0.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina),
article h1 { calc(-1 * (var(--deus-box-border-width) + 0.5px)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina),
float: none; calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina),
margin:
calc(-1 * (var(--deus-post-padding) + 1.125em)) calc(-1 * calc(var(--deus-post-heading-spacing) + 2.5px)) calc(var(--deus-box-border-width) + 1px) 0 var(--deus-box-border-width) var(--deus-box-border-color),
calc(var(--deus-post-heading-spacing) + 4px) calc(-1 * (var(--deus-box-border-width) + 1px)) calc(var(--deus-post-heading-spacing) + 2.5px) 0 var(--deus-box-border-width) var(--deus-box-border-color),
2rem calc(-1 * calc(var(--deus-post-heading-spacing) + 2.5px)) calc(var(--deus-post-heading-spacing) + 2.5px) 0 var(--deus-box-border-width) var(--deus-box-border-color),
calc(var(--deus-post-heading-spacing) + 4px);
text-align: center; calc(-1 * calc(var(--deus-post-heading-spacing) + 3px)) calc(var(--deus-box-border-width) + 1.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina),
} calc(-1 * (var(--deus-box-border-width) + 1.5px)) calc(var(--deus-post-heading-spacing) + 3px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina),
article h1::after { calc(-1 * calc(var(--deus-post-heading-spacing) + 3px)) calc(var(--deus-post-heading-spacing) + 3px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina);
top: calc(1.25em - 4px);
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);
}
} }
} }