forked from achmizs/deus-gaming
Refactored box depth effects; improved mobile layout
This commit is contained in:
Said Achmiz
parent
df672c2927
commit
5b242d102a
@ -77,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;
|
||||
@ -97,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);
|
||||
}
|
||||
@ -173,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:
|
||||
@ -181,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:
|
||||
@ -328,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) {
|
||||
@ -353,6 +356,7 @@ article {
|
||||
hyphens: auto;
|
||||
}
|
||||
}
|
||||
|
||||
article + article {
|
||||
margin-top: var(--deus-post-spacing);
|
||||
}
|
||||
@ -362,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);
|
||||
@ -394,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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user