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

Compare commits

base: achmizs:77a449449ed5140059f671ea9c655c238c38577b
Branches Tags
achmizs:master
achmizs:full-screen-logo-homepage
..
compare: achmizs:5264f5b4a523e60ff9ceaa90bcdee39addaf6f0e
Branches Tags
achmizs:master
achmizs:full-screen-logo-homepage

2 Commits
77a449449e ... 5264f5b4a5

Author SHA1 Message Date
Said Achmiz
5264f5b4a5 Added depth effect to UI links 2020-02-10 22:15:24 -05:00
Said Achmiz
d5c6b7ddcf Added depth effect to boxes 2020-02-10 22:07:13 -05:00
1 changed files with 24 additions and 7 deletions
Show Stats Expand all files Collapse all files

31
assets/css/main.css
View File

@ -12,6 +12,9 @@
--deus-color-light-blue: #2069b3;
--deus-color-gold: #fdc22f;
--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);
--deus-color-gold-shadow-opacity-three-quarters: rgba(165, 132, 46, 0.75);
--deus-color-golden-brown: #684f00;
--deus-color-darker-grey: #161a1f;
--deus-color-dark-grey: #272b30;
@ -30,6 +33,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-body-text-color: var(--deus-color-white);
--deus-body-text-shadow-color: var(--deus-color-white-opacity-one-quarter);
@ -38,6 +42,7 @@
--deus-link-color-hover: var(--deus-color-white);
--deus-link-color-active: var(--deus-color-white);
--deus-link-color-visited: var(--deus-color-gold);
--deus-link-text-shadow-color: var(--deus-color-gold-shadow-opacity-one-quarter);
--deus-image-border-color: var(--deus-color-golden-brown);
@ -148,6 +153,7 @@ main nav {
width: 100%;
padding: 0.75em 1.25em;
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;
transition:
top 0.3s ease,
@ -168,6 +174,7 @@ main nav a {
font-weight: bold;
font-feature-settings: var(--deus-nav-ui-font-opentype-features);
font-variant: var(--deus-nav-ui-font-variant);
text-shadow: 2px 2px 0 var(--deus-link-text-shadow-color);
/* Workaround for baseline bug in “Spectral” font.
*/
@ -291,7 +298,9 @@ article {
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-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;
}
@supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) {
@ -323,12 +332,16 @@ article h1 {
background-color: var(--deus-box-background-color);
border: var(--deus-box-border-width) solid var(--deus-box-border-color);
box-shadow:
calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 0 var(--deus-body-background-color),
calc(-1 * var(--deus-post-heading-spacing)) 0 0 0 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)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-border-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 * var(--deus-post-heading-spacing)) var(--deus-post-heading-spacing) 0 var(--deus-box-border-width) var(--deus-box-border-color);
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);
@ -342,6 +355,10 @@ article h1 {
padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em);
}
article h1 a {
text-shadow: 2px 2px 0 var(--deus-link-text-shadow-color);
}
article h1 a:hover {
text-decoration: none;
}