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

Refactored box depth effects; improved mobile layout

Browse Source
This commit is contained in:
Said Achmiz 2020-02-11 19:37:10 -05:00
parent df672c2927
commit 5b242d102a
1 changed files with 87 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
assets/css/main.css
View File

@ -77,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;
@ -97,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);
} }
@ -173,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:
@ -181,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:
@ -328,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) {
@ -353,6 +356,7 @@ article {
hyphens: auto; hyphens: auto;
} }
} }
article + article { article + article {
margin-top: var(--deus-post-spacing); margin-top: var(--deus-post-spacing);
} }
@ -362,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);
@ -394,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 {
article h1 { content: "";
border: none; 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: box-shadow:
0 0 0 0.5px var(--deus-box-shadow-color), -1px 1px 0 0 var(--deus-box-shadow-color),
0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina) inset, -2px 2px 0 0 var(--deus-box-border-color);
0 0 0 1px var(--deus-box-border-color) inset, }
0 0 0 1.5px var(--deus-box-shadow-color-intermediate-retina) inset, @media only screen and (min-resolution: 2dppx) {
article h1 {
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 0 0 0.5px var(--deus-box-border-color) inset,
0 calc(var(--deus-post-heading-spacing) + 1px) 0 1px var(--deus-body-background-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),
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), 0 0 0 1.0px 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), article h1::after {
box-shadow:
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), -0.5px 0.5px 0 0 var(--deus-box-shadow-color),
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), -1.0px 1.0px 0 0 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), -1.5px 1.5px 0 0 var(--deus-box-border-color),
-2.0px 2.0px 0 0 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), @media only screen and (max-width: 960px) {
article h1 {
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), float: none;
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), margin:
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); 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);
}
} }
} }