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

Compare commits

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

2 Commits
8a8e7ff5c7 ... 5b242d102a

Author SHA1 Message Date
Said Achmiz
5b242d102a Refactored box depth effects; improved mobile layout 2020-02-11 19:37:10 -05:00
Said Achmiz
df672c2927 Fixed line spacing glitch 2020-02-11 04:06:41 -05:00
1 changed files with 94 additions and 59 deletions
Show Stats Expand all files Collapse all files

153
assets/css/main.css
View File

@ -49,12 +49,17 @@
--deus-image-border-color: var(--deus-color-golden-brown); --deus-image-border-color: var(--deus-color-golden-brown);
/* Typography. */ /* Typography. */
--deus-content-base-font-size: 1.125rem; /* 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: 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: 1.4; --deus-body-text-line-spacing: calc(1 + 7/(16 * 9/8));
--deus-body-text-paragraph-spacing: 1em; --deus-body-text-paragraph-spacing: 1em;
--deus-heading-font: Spectral SC; --deus-heading-font: Spectral SC;
@ -72,7 +77,6 @@
/* 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;
@ -92,7 +96,7 @@
--deus-post-padding: 1rem; --deus-post-padding: 1rem;
} }
} }
@media only screen and (max-resolution: 191dpi) { @media only screen and (max-resolution: 1dppx) {
: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);
} }
@ -168,7 +172,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: var(--deus-box-border-width) solid var(--deus-box-border-color); border-bottom: 1px 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:
@ -176,7 +180,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: 192dpi) { @media only screen and (min-resolution: 2dppx) {
main nav { main nav {
border-bottom: none; border-bottom: none;
box-shadow: box-shadow:
@ -323,21 +327,25 @@ 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: 192dpi) { @media only screen and (min-resolution: 2dppx) {
article { article {
border: none;
box-shadow: box-shadow:
0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina) inset, 0 0 0 0.5px var(--deus-box-border-color) inset,
0 0 0 0.5px var(--deus-box-border-color), 0 0 0 1.0px var(--deus-box-shadow-color-intermediate-retina) inset,
0 0 0 1px var(--deus-box-shadow-color-intermediate-retina), 0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
0 0 0 1.5px var(--deus-box-shadow-color); 0 0 0 1.0px var(--deus-box-shadow-color),
0 0 0 2.5px var(--deus-body-background-color); 0 0 0 2.0px 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) {
@ -348,6 +356,7 @@ article {
hyphens: auto; hyphens: auto;
} }
} }
article + article { article + article {
margin-top: var(--deus-post-spacing); margin-top: var(--deus-post-spacing);
} }
@ -357,31 +366,26 @@ article + article {
/*=--------------=*/ /*=--------------=*/
article h1 { article h1 {
position: relative;
float: right; float: right;
margin: margin:
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)) calc(-1 * var(--deus-post-padding))
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-shadow-color), 0 0 0 1px var(--deus-box-border-color) inset,
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);
@ -389,39 +393,70 @@ 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;
/* Workaround for baseline bug in “Spectral” font. -ms-hyphens: none;
*/ hyphens: none;
padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em);
} }
@media only screen and (min-resolution: 192dpi) { 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 { article h1 {
border: none;
box-shadow: box-shadow:
0 0 0 0.5px var(--deus-box-shadow-color), 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 1px var(--deus-box-border-color) inset, 0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina),
0 0 0 1.5px var(--deus-box-shadow-color-intermediate-retina) inset, 0 0 0 1.0px var(--deus-box-shadow-color);
}
calc(-1 * (var(--deus-post-heading-spacing) + 1px)) calc(var(--deus-post-heading-spacing) + 1px) 0 1px var(--deus-body-background-color), article h1::after {
calc(-1 * (var(--deus-post-heading-spacing) + 1px)) 0 0 1px var(--deus-body-background-color), box-shadow:
0 calc(var(--deus-post-heading-spacing) + 1px) 0 1px var(--deus-body-background-color), -0.5px 0.5px 0 0 var(--deus-box-shadow-color),
-1.0px 1.0px 0 0 var(--deus-box-shadow-color-intermediate-retina),
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), -1.5px 1.5px 0 0 var(--deus-box-border-color),
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), -2.0px 2.0px 0 0 var(--deus-box-shadow-color-intermediate-retina);
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), }
}
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), @media only screen and (max-width: 960px) {
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), article h1 {
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), float: none;
margin:
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(-1 * (var(--deus-post-padding) + 1.125em))
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), calc(var(--deus-post-heading-spacing) + 4px)
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), 2rem
calc(var(--deus-post-heading-spacing) + 4px);
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), text-align: center;
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), }
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); article h1::after {
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);
}
} }
} }