1
0
mirror of https://github.com/osmarks/mycorrhiza.git synced 2024-12-12 05:20:26 +00:00

Style the hamburger

This commit is contained in:
Timur Ismagilov 2021-07-15 22:41:51 +05:00
parent 51bafed805
commit b989956acb
2 changed files with 29 additions and 2 deletions

View File

@ -214,8 +214,9 @@ table,
.hypha-tabs__tab_active { border-bottom: 2px white solid; background: white; } .hypha-tabs__tab_active { border-bottom: 2px white solid; background: white; }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.hypha-tabs, .hypha-tabs { background: white; padding: .5rem 0 0 .75rem; }
.hypha-tabs__tab { background-color: white; } .hypha-tabs__tab { background-color: white; }
main { padding-top: 0; }
} }
@media screen and (min-width: 801px) { @media screen and (min-width: 801px) {
@ -609,6 +610,22 @@ kbd {
display: block; display: block;
} }
.top-bar__hamburger-wrapper {
display: flex;
height: 100%;
justify-content: flex-end;
}
.top-bar__hamburger {
background: transparent;
color: inherit;
font-size: inherit;
border: 0;
display: block;
margin: 0 .5rem 0 0;
padding: 0 .5rem;
}
.top-bar__hamburger:hover,
.top-bar__home-link:hover, .top-bar__home-link:hover,
.auth-links__link:hover, .auth-links__link:hover,
.top-bar__highlight-link:hover { .top-bar__highlight-link:hover {
@ -639,6 +656,7 @@ kbd {
.top-bar a { .top-bar a {
color: #ddd; color: #ddd;
} }
.top-bar__hamburger:hover,
.top-bar__home-link:hover, .top-bar__home-link:hover,
.auth-links__link:hover, .auth-links__link:hover,
.top-bar__highlight-link:hover { .top-bar__highlight-link:hover {
@ -697,6 +715,7 @@ kbd {
} }
.top-bar__section_home { .top-bar__section_home {
grid-column: 1 / span 1; grid-column: 1 / span 1;
margin-left: .5rem;
} }
.top-bar__section_search { .top-bar__section_search {
grid-column: 2 / span 1; grid-column: 2 / span 1;
@ -719,6 +738,10 @@ kbd {
.top-bar__highlight { .top-bar__highlight {
margin-right: 0; margin-right: 0;
} }
.auth-links__link,
.top-bar__highlight-link {
padding-left: 1rem;
}
.top-bar__section_hidden-on-mobile { .top-bar__section_hidden-on-mobile {
display: none; display: none;
} }

View File

@ -12,8 +12,12 @@ hamburger.onclick = _ => {
} }
hamburger.innerText = "Menu" hamburger.innerText = "Menu"
let hamburgerWrapper = document.createElement("div")
hamburgerWrapper.classList.add("top-bar__hamburger-wrapper")
let hamburgerSection = document.createElement("li") let hamburgerSection = document.createElement("li")
hamburgerSection.classList.add("top-bar__section", "top-bar__section_hamburger") hamburgerSection.classList.add("top-bar__section", "top-bar__section_hamburger")
hamburgerSection.appendChild(hamburger) hamburgerWrapper.appendChild(hamburger)
hamburgerSection.appendChild(hamburgerWrapper)
wrapper.appendChild(hamburgerSection) wrapper.appendChild(hamburgerSection)