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

76
static/default.css
View File

@ -597,10 +597,17 @@ kbd {
/* /*
* Top bar * Top bar
*/ */
.top-bar__wrapper {
display: grid;
padding: 0;
}
.top-bar a { .top-bar a {
color: black; color: black;
text-decoration: none; text-decoration: none;
} }
.top-bar__section {
display: block;
}
.top-bar__home-link:hover, .top-bar__home-link:hover,
.auth-links__link:hover, .auth-links__link:hover,
@ -624,14 +631,9 @@ kbd {
padding: 0; padding: 0;
} }
.top-bar__wrapper { .top-bar__wrapper {
display: grid;
padding: 0;
margin: 0 2rem; margin: 0 2rem;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
.top-bar__section {
display: block;
}
.top-bar__section_home { .top-bar__section_home {
grid-column: 1 / span 1; grid-column: 1 / span 1;
} }
@ -654,30 +656,58 @@ kbd {
justify-content: flex-end; justify-content: flex-end;
margin-right: -.5rem; margin-right: -.5rem;
} }
.auth-links__box {
display: block;
line-height: 2rem;
}
.auth-links__link {
display: block;
padding: 0 .5rem;
}
.top-bar__section_home, .top-bar__section_home,
.top-bar__highlights { .top-bar__highlights {
display: flex; display: flex;
padding: 0; padding: 0;
margin: 0 0 0 -.5rem; margin: 0 0 0 -.5rem;
} }
.top-bar__home-link-wrapper, }
.top-bar__highlight {
display: block;
margin-right: .5rem; .auth-links__box {
line-height: 2rem; display: block;
line-height: 2rem;
}
.auth-links__link {
display: block;
padding: 0 .5rem;
}
.top-bar__home-link-wrapper,
.top-bar__highlight {
display: block;
margin-right: .5rem;
line-height: 2rem;
}
.top-bar__home-link,
.auth-links__link,
.top-bar__highlight-link {
display: block;
padding: 0 .5rem;
}
@media screen and (max-width: 799px) {
.top-bar__wrapper {
grid-template-columns: 1fr 2fr 1fr;
} }
.top-bar__home-link, .top-bar__section_home {
.auth-links__link, grid-column: 1 / span 1;
.top-bar__highlight-link { }
display: block; .top-bar__section_search {
padding: 0 .5rem; 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;
} }
} }