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

155
assets/css/main.css
View File

@ -49,12 +49,17 @@
--deus-image-border-color: var(--deus-color-golden-brown);
/* 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-weight: 300;
--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-heading-font: Spectral SC;
@ -72,7 +77,6 @@
/* 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;
@ -92,7 +96,7 @@
--deus-post-padding: 1rem;
}
}
@media only screen and (max-resolution: 191dpi) {
@media only screen and (max-resolution: 1dppx) {
:root {
--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);
width: 100%;
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);
z-index: 1001;
transition:
@ -176,7 +180,7 @@ main nav {
opacity 0.15s ease,
filter 0.15s ease;
}
@media only screen and (min-resolution: 192dpi) {
@media only screen and (min-resolution: 2dppx) {
main nav {
border-bottom: none;
box-shadow:
@ -323,21 +327,25 @@ 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-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: 192dpi) {
@media only screen and (min-resolution: 2dppx) {
article {
border: none;
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),
0 0 0 1px var(--deus-box-shadow-color-intermediate-retina),
0 0 0 1.5px var(--deus-box-shadow-color);
0 0 0 2.5px var(--deus-body-background-color);
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: 2rem;
}
}
@supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) {
@ -348,6 +356,7 @@ article {
hyphens: auto;
}
}
article + article {
margin-top: var(--deus-post-spacing);
}
@ -357,31 +366,26 @@ article + article {
/*=--------------=*/
article h1 {
position: relative;
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))
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);
border: var(--deus-box-border-width) solid var(--deus-box-border-color);
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-size: var(--deus-heading-font-size);
font-weight: var(--deus-heading-font-weight);
@ -389,39 +393,70 @@ article h1 {
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);
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
@media only screen and (min-resolution: 192dpi) {
article h1 {
border: 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:
0 0 0 0.5px var(--deus-box-shadow-color),
0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina) inset,
0 0 0 1px var(--deus-box-border-color) inset,
0 0 0 1.5px var(--deus-box-shadow-color-intermediate-retina) inset,
calc(-1 * (var(--deus-post-heading-spacing) + 1px)) calc(var(--deus-post-heading-spacing) + 1px) 0 1px var(--deus-body-background-color),
calc(-1 * (var(--deus-post-heading-spacing) + 1px)) 0 0 1px var(--deus-body-background-color),
0 calc(var(--deus-post-heading-spacing) + 1px) 0 1px var(--deus-body-background-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),
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),
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),
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),
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),
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-box-border-width) + 1px)) calc(var(--deus-post-heading-spacing) + 2.5px) 0 var(--deus-box-border-width) var(--deus-box-border-color),
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(-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),
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);
-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) + 1.125em))
calc(var(--deus-post-heading-spacing) + 4px)
2rem
calc(var(--deus-post-heading-spacing) + 4px);
text-align: center;
}
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);
}
}
}