Fix hamburger menu opacity on mobile

This commit is contained in:
Avijit 🚀
2021-08-04 22:51:50 +02:00
committed by Yash Mehrotra
parent 6ff5def1f0
commit f4bad71986
2 changed files with 13 additions and 15 deletions

View File

@@ -1,21 +1,21 @@
:root { :root {
--dark-bg-color: #121212; --dark-bg-color: 18, 18, 18;
--dark-text-color: white; --dark-text-color: white;
--dark-tags-bg-color: #1f1f1f; --dark-tags-bg-color: #1f1f1f;
--dark-header-divider-color: #484848; --dark-header-divider-color: #484848;
} }
html { html {
background-color: var(--dark-bg-color); background-color: rgb(var(--dark-bg-color));
color: var(--dark-text-color); color: var(--dark-text-color);
} }
.header { .header {
background-color: var(--dark-bg-color); background-color: rgb(var(--dark-bg-color));
} }
.nav-hamburger-list { .nav-hamburger-list {
background: var(--dark-header-bg-color); background: rgba(var(--dark-bg-color), 1);
} }
.nav-links .nav-icons-divider { .nav-links .nav-icons-divider {
@@ -29,7 +29,7 @@ a:hover .feather-moon {
.post-tags .post-tag:hover { .post-tags .post-tag:hover {
background-color: var(--dark-text-color); background-color: var(--dark-text-color);
color: var(--dark-bg-color); color: rgb(--dark-bg-color);
} }
.tags-list .post-tags .post-tag a .tag-posts-count { .tags-list .post-tags .post-tag a .tag-posts-count {
@@ -38,7 +38,7 @@ a:hover .feather-moon {
.tags-list .post-tags .post-tag:hover a .tag-posts-count { .tags-list .post-tags .post-tag:hover a .tag-posts-count {
background-color: var(--dark-text-color); background-color: var(--dark-text-color);
color: var(--dark-bg-color); color: rgb(--dark-bg-color);
} }
.footer { .footer {

View File

@@ -1,14 +1,13 @@
:root { :root {
--content-width: 810px; --content-width: 810px;
--light-bg-color: white; --light-bg-color: 255, 255, 255;
--light-text-color: black; --light-text-color: black;
--light-header-bg-color: white;
--light-header-divider-color: #dfdfdf; --light-header-divider-color: #dfdfdf;
} }
html { html {
background-color: var(--light-bg-color); background-color: rgb(var(--light-bg-color));
color: var(--light-text-color); color: var(--light-text-color);
font-family: "Jost", sans-serif; font-family: "Jost", sans-serif;
font-weight: 400; font-weight: 400;
@@ -42,8 +41,7 @@ img {
/* HEADER */ /* HEADER */
.header { .header {
background-color: var(--light-bg-color); background-color: rgba(var(--light-bg-color), 0.95);
/* background-color: inherit; */
color: inherit; color: inherit;
font-size: 1.2rem; font-size: 1.2rem;
height: 50px; height: 50px;
@@ -51,7 +49,7 @@ img {
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
opacity: 0.95; /* opacity: 0.95; */
transition: box-shadow 0.3s ease-in-out; transition: box-shadow 0.3s ease-in-out;
} }
@@ -133,7 +131,7 @@ a:hover .feather-sun {
width: 24px; width: 24px;
} }
.nav-hamburger-list { .nav-hamburger-list {
background: var(--light-header-bg-color); background: rgb(var(--light-bg-color));
border-bottom: solid 1.5px var(--light-header-divider-color); border-bottom: solid 1.5px var(--light-header-divider-color);
border-top: solid 1.5px var(--light-header-divider-color); border-top: solid 1.5px var(--light-header-divider-color);
list-style-type: none; list-style-type: none;
@@ -152,7 +150,7 @@ a:hover .feather-sun {
/* FOOTER */ /* FOOTER */
.footer { .footer {
bottom: 0; bottom: 0;
border-top: 1px solid var(--light-header-bg-color); border-top: 1px solid rgb(var(--light-bg-color));
color: inherit; color: inherit;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
@@ -262,7 +260,7 @@ table {
} }
table thead { table thead {
background-color: var(--light-header-bg-color); background-color: var(--light-bg-color);
} }
table td, table td,