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

Added depth effect to boxes

Browse Source
This commit is contained in:
Said Achmiz 2020-02-10 22:07:13 -05:00
parent 77a449449e
commit d5c6b7ddcf
1 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/main.css
View File

@ -30,6 +30,7 @@
--deus-box-background-color: var(--deus-color-dark-grey); --deus-box-background-color: var(--deus-color-dark-grey);
--deus-box-border-color: var(--deus-color-gold); --deus-box-border-color: var(--deus-color-gold);
--deus-box-shadow-color: var(--deus-color-gold-shadow);
--deus-body-text-color: var(--deus-color-white); --deus-body-text-color: var(--deus-color-white);
--deus-body-text-shadow-color: var(--deus-color-white-opacity-one-quarter); --deus-body-text-shadow-color: var(--deus-color-white-opacity-one-quarter);
@ -148,6 +149,7 @@ main nav {
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: var(--deus-box-border-width) solid var(--deus-box-border-color);
box-shadow: 0 1px 0 0 var(--deus-box-shadow-color);
z-index: 1001; z-index: 1001;
transition: transition:
top 0.3s ease, top 0.3s ease,
@ -291,7 +293,9 @@ article {
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); border: var(--deus-box-border-width) solid var(--deus-box-border-color);
box-shadow: 0 0 0 1px var(--deus-body-background-color); box-shadow:
0 0 0 1px var(--deus-box-shadow-color),
0 0 0 2px var(--deus-body-background-color);
z-index: 1; z-index: 1;
} }
@supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) { @supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) {
@ -323,12 +327,16 @@ article h1 {
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); border: var(--deus-box-border-width) solid var(--deus-box-border-color);
box-shadow: box-shadow:
calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 0 var(--deus-body-background-color), 0 0 0 1px var(--deus-box-shadow-color),
calc(-1 * var(--deus-post-heading-spacing)) 0 0 0 var(--deus-body-background-color), calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 1px var(--deus-body-background-color),
0 calc(var(--deus-post-heading-spacing)) 0 0 var(--deus-body-background-color), calc(-1 * var(--deus-post-heading-spacing)) 0 0 1px var(--deus-body-background-color),
calc(-1 * var(--deus-post-heading-spacing)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-border-color), 0 calc(var(--deus-post-heading-spacing)) 0 1px var(--deus-body-background-color),
calc(-1 * var(--deus-box-border-width)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-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-post-heading-spacing)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-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);