Use variables and change header bg color in light theme

This commit is contained in:
Yash Mehrotra
2021-07-08 13:13:47 +05:30
parent 7954fde5d6
commit 005767980e

View File

@@ -1,3 +1,8 @@
:root {
--color-blue: #0058b5;
--content-width: 810px;
}
html { html {
background: white; background: white;
color: black; color: black;
@@ -17,22 +22,22 @@ a {
} }
a:hover { a:hover {
color: #0058b5 !important; color: var(--color-blue) !important;
} }
main#content { main#content {
width: 810px; width: var(--content-width);
margin: 90px auto 0; margin: 90px auto 0;
} }
img { img {
width: 810px; width: var(--content-width);
height: auto; height: auto;
} }
/* HEADER */ /* HEADER */
.header { .header {
background-color: rgb(255, 255, 255); background-color: rgb(240, 240, 240);
box-shadow: rgba(170, 170, 170, 0.5) 0px 1px 2px 0px; box-shadow: rgba(170, 170, 170, 0.5) 0px 1px 2px 0px;
color: black; color: black;
font-size: 1.05rem; font-size: 1.05rem;
@@ -149,8 +154,8 @@ img {
padding: 0; padding: 0;
} }
.post-tags .post-tag { .post-tags .post-tag {
background-color: #0058b5; background-color: var(--color-blue);
border: 1px solid #0058b5; border: 1px solid var(--color-blue);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
color: white; color: white;