standardebooks/web
1
0
Fork 0
mirror of https://github.com/standardebooks/web.git synced 2025-07-07 15:20:32 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Tweak top navbar, button colors, and dark mode background

Browse source
This commit is contained in:
Alex Cabal 2020-12-16 14:28:51 -06:00
parent 1383eba0f5
commit 2e7b24bb97
1 changed files with 27 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

39
www/css/core.css
View file

@ -60,23 +60,24 @@
} }
:root{ :root{
--light-body-bg: #e9e7e0;
--light-body-text: #222; --light-body-text: #222;
--light-highlight: #1d6878; --light-highlight: #1d6878;
--light-button: #1d6878; --light-button: #4f9d85;
--light-button-highlight: #3da5bb; --light-button-highlight: #62bfa3;
--light-border: #222; --light-border: #222;
--light-sub-text: #777; --light-sub-text: #777;
--light-body-bg: #e9e7e0;
--light-input-hover: #000; --light-input-hover: #000;
--light-input-border: #777; --light-input-border: #777;
--light-input-outline: #000; --light-input-outline: #000;
--dark-body-bg: #2c3035;
--dark-body-text: #fff; --dark-body-text: #fff;
--dark-highlight: #3da5bb; --dark-highlight: #3da5bb;
--dark-button: #118460; --dark-button: #4f9d85;
--dark-button-highlight: #4ab089; --dark-button-highlight: #62bfa3;
--dark-border: #000; --dark-border: #000;
--dark-sub-text: #aaa; --dark-sub-text: #aaa;
--dark-body-bg: #293542;
--dark-input-border: #aaa; --dark-input-border: #aaa;
--dark-input-hover: #118460; --dark-input-hover: #118460;
--dark-input-outline: #fff; --dark-input-outline: #fff;
@ -260,7 +261,7 @@ body > header > a:hover{
header nav{ header nav{
font-family: "League Spartan"; font-family: "League Spartan";
text-transform: lowercase; text-transform: uppercase;
align-self: center; align-self: center;
text-align: right; text-align: right;
font-size: 0; font-size: 0;
@ -269,7 +270,6 @@ header nav{
header nav li{ header nav li{
color: rgba(255, 255, 255, .75); color: rgba(255, 255, 255, .75);
display: inline-block; display: inline-block;
} }
header nav li + li:before{ header nav li + li:before{
@ -284,6 +284,9 @@ header nav li a{
text-decoration: none; text-decoration: none;
font-size: 20px; font-size: 20px;
transition: border 200ms ease, color 200ms ease; transition: border 200ms ease, color 200ms ease;
letter-spacing: 1px;
position: relative;
display: inline-block;
} }
header nav li a:link, header nav li a:link,
@ -296,13 +299,26 @@ header nav li a:visited{
header nav li a:hover, header nav li a:hover,
header nav li a.highlighted:hover{ header nav li a.highlighted:hover{
color: #fff; color: #fff;
border-bottom: 5px solid rgb(241, 168, 73); border-bottom: 5px solid var(--button);
transition: none; transition: none;
} }
header nav li a.highlighted{ header nav li a.highlighted{
color: #fff; color: #fff;
border-bottom: 2px solid rgb(241, 168, 73); border-bottom: 2px solid var(--button);
}
header nav li a.highlighted::after{
position: absolute;
content: "";
width: 0px;
height: 0px;
border-top: 10px solid var(--button);
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -20px;
right: calc(50% - 10px);
} }
article > h1{ article > h1{
@ -491,7 +507,6 @@ a.button,
form button{ form button{
font-style: normal; font-style: normal;
box-sizing: border-box; box-sizing: border-box;
background-color: #1d6878; /* fallback for IE */
background-color: var(--button); background-color: var(--button);
border-width: 0; border-width: 0;
border-radius: 5px; border-radius: 5px;
@ -500,7 +515,7 @@ form button{
text-decoration: none; text-decoration: none;
font-family: "League spartan", sans-serif; font-family: "League spartan", sans-serif;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .5); text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
box-shadow: 2px 2px 0 #194149; box-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
position: relative; position: relative;
text-transform: lowercase; text-transform: lowercase;
cursor: pointer; cursor: pointer;