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

Retina versions of box depth effects

Browse Source
This commit is contained in:
Said Achmiz 2020-02-11 00:41:50 -05:00
parent 946c4c9d13
commit 95cefcca5c
1 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
assets/css/main.css
View File

@ -11,6 +11,7 @@
--deus-color-medium-blue: #0f5093;
--deus-color-light-blue: #2069b3;
--deus-color-gold: #fdc22f;
--deus-color-dark-gold: #c8a44d;
--deus-color-gold-shadow: #a5842e;
--deus-color-gold-shadow-opacity-one-quarter: rgba(165, 132, 46, 0.25);
--deus-color-gold-shadow-opacity-one-half: rgba(165, 132, 46, 0.5);
@ -34,6 +35,7 @@
--deus-box-background-color: var(--deus-color-dark-grey);
--deus-box-border-color: var(--deus-color-gold);
--deus-box-shadow-color: var(--deus-color-gold-shadow);
--deus-box-shadow-color-intermediate-retina: var(--deus-color-dark-gold);
--deus-body-text-color: var(--deus-color-white);
--deus-body-text-shadow-color: var(--deus-color-white-opacity-one-quarter);
@ -76,6 +78,20 @@
--deus-post-spacing: 3rem;
}
@media only screen and (max-width: 960px) {
:root {
/* Layout. */
--deus-body-padding: 6rem 1rem;
--deus-post-padding: 1.25rem;
}
}
@media only screen and (max-width: 520px) {
:root {
/* Layout. */
--deus-body-padding: 6rem 0.5rem;
--deus-post-padding: 1rem;
}
}
@media only screen and (max-resolution: 191dpi) {
:root {
--deus-body-text-shadow: 0 0 0 var(--deus-body-text-shadow-color);
@ -160,6 +176,16 @@ main nav {
opacity 0.15s ease,
filter 0.15s ease;
}
@media only screen and (min-resolution: 192dpi) {
main nav {
border-bottom: none;
box-shadow:
0 -0.5px 0 0 var(--deus-box-shadow-color-intermediate-retina) inset,
0 0.5px 0 0 var(--deus-box-border-color),
0 1px 0 0 var(--deus-box-shadow-color-intermediate-retina),
0 1.5px 0 0 var(--deus-box-shadow-color);
}
}
main nav.hidden {
top: -5rem;
}
@ -303,6 +329,17 @@ article {
0 0 0 2px var(--deus-body-background-color);
z-index: 1;
}
@media only screen and (min-resolution: 192dpi) {
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);
}
}
@supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) {
article {
text-align: justify;
@ -333,12 +370,15 @@ article h1 {
border: var(--deus-box-border-width) solid var(--deus-box-border-color);
box-shadow:
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);
@ -354,6 +394,36 @@ article h1 {
*/
padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em);
}
@media only screen and (min-resolution: 192dpi) {
article h1 {
border: none;
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);
}
}
article h1 a {
text-shadow: 2px 2px 1px var(--deus-link-text-shadow-color);