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:
parent
51bafed805
commit
b989956acb
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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)
|
Loading…
Reference in New Issue
Block a user