mirrors/mycorrhiza
1
0
Fork 0
mirror of https://github.com/osmarks/mycorrhiza.git synced 2024-12-12 05:20:26 +00:00
Code Issues Releases Wiki Activity

Make the top bar look like a long list on mobiles

Browse Source
This commit is contained in:
Timur Ismagilov 2021-07-15 21:52:00 +05:00
parent 362c607da5
commit 81b764174d
1 changed files with 53 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
static/default.css
View File

@ -597,10 +597,17 @@ kbd {
/*
* Top bar
*/
.top-bar__wrapper {
display: grid;
padding: 0;
}
.top-bar a {
color: black;
text-decoration: none;
}
.top-bar__section {
display: block;
}
.top-bar__home-link:hover,
.auth-links__link:hover,
@ -624,14 +631,9 @@ kbd {
padding: 0;
}
.top-bar__wrapper {
display: grid;
padding: 0;
margin: 0 2rem;
grid-template-columns: 1fr 1fr 1fr;
}
.top-bar__section {
display: block;
}
.top-bar__section_home {
grid-column: 1 / span 1;
}
@ -654,6 +656,15 @@ kbd {
justify-content: flex-end;
margin-right: -.5rem;
}
.top-bar__section_home,
.top-bar__highlights {
display: flex;
padding: 0;
margin: 0 0 0 -.5rem;
}
}
.auth-links__box {
display: block;
line-height: 2rem;
@ -662,12 +673,6 @@ kbd {
display: block;
padding: 0 .5rem;
}
.top-bar__section_home,
.top-bar__highlights {
display: flex;
padding: 0;
margin: 0 0 0 -.5rem;
}
.top-bar__home-link-wrapper,
.top-bar__highlight {
display: block;
@ -680,4 +685,29 @@ kbd {
display: block;
padding: 0 .5rem;
}
@media screen and (max-width: 799px) {
.top-bar__wrapper {
grid-template-columns: 1fr 2fr 1fr;
}
.top-bar__section_home {
grid-column: 1 / span 1;
}
.top-bar__section_search {
grid-column: 2 / span 1;
text-align: center;
}
.top-bar__section_auth,
.top-bar__section_highlights {
grid-column: 1 / span 3;
}
.auth-links {
padding: 0;
}
.top-bar__highlights {
padding: 0;
}
.top-bar__highlight {
margin-right: 0;
}
}