zo/GenderDysphoria.fyi
1
0
Fork 0
mirror of https://github.com/GenderDysphoria/GenderDysphoria.fyi.git synced 2025-01-31 07:16:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Early work on redoing the navigation UI

Browse Source
This commit is contained in:
Jocelyn Badgley (Twipped) 2021-03-02 08:10:04 -08:00
parent 98323f3316
commit 66aaba7c3e
3 changed files with 37 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
scss/_header.scss
View File

@ -28,7 +28,7 @@ header {
@media (max-width: 500px) { @media (max-width: 500px) {
padding: 0.5rem 1rem 0; padding: 0.5rem 1rem 0;
position: static; // position: static;
} }
transition-property: min-height, background, box-shadow; transition-property: min-height, background, box-shadow;
@ -57,20 +57,26 @@ header {
font-family: $font-brand; font-family: $font-brand;
font-size: 2em; font-size: 2em;
white-space: nowrap; white-space: nowrap;
transition: max-height 0.5s ease-out;
overflow: hidden;
@media (max-width: 500px) { @media (max-width: 500px) {
font-size: 1.8em; font-size: 1.8em;
} }
} }
@media (min-width: 500px) { &.active {
&.active { @include header--active;
@include header--active;
@media (max-width: 500px) {
.top-brand {
max-height: 0;
}
} }
} }
nav {
nav {
flex: 1; flex: 1;
max-width: 1200px; max-width: 1200px;
@ -96,6 +102,10 @@ header {
margin: 0 0 0 1em; margin: 0 0 0 1em;
padding: 0; padding: 0;
@media (max-width: 800px) {
margin: 0;
}
.top-nav-item { .top-nav-item {
transition-property: color, padding, margin; transition-property: color, padding, margin;
@ -135,24 +145,32 @@ header {
} }
@media (max-width: 400px) { @media (max-width: 400px) {
flex-wrap: wrap; .disposable {
justify-content: center; display: none;
.break { display: block; }
.top-nav-item {
padding: 0.25rem 0.5rem;
} }
} }
} }
@media (max-width: 500px) {
.top-nav-inner .disposable {
transition: max-width 0.5s ease-out;
max-width: 50px;
}
&.active .top-nav-inner .disposable {
max-width: 0;
overflow: hidden;
}
}
} }
@media (min-width: 500px) { // @media (min-width: 500px) {
body:not(.front-page):not(.longform) header + * { body:not(.front-page):not(.longform) header + * {
margin-top: $header-full-height; margin-top: $header-full-height;
} }
} // }
.disclaimer { .disclaimer {
$cwColor: darken($gray-100, 2%); $cwColor: darken($gray-100, 2%);

5
scss/_page.scss
View File

@ -6,10 +6,7 @@ body.page, body.post {
header { header {
background: $gray-800; background: $gray-800;
&.active { background: white; }
@media (min-width: 500px) {
&.active { background: white; }
}
} }
} }

10
templates/layout.hbs
View File

@ -62,13 +62,11 @@
<div class="top-nav"> <div class="top-nav">
<ul class="top-nav-inner"> <ul class="top-nav-inner">
<!-- <li><a href="/glossary" class="top-nav-item">Glossary</a></li> --> <li><a href="/gdb/" class="top-nav-item dropdown-toggle" id="nav-gdb" data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">The Gender Dysphoria Bible</a>{{import '/public/_gdb-menu'}}</li>
<li><a href="/gdb/" class="top-nav-item dropdown-toggle" id="nav-gdb" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">The Gender Dysphoria Bible</a>{{import '/public/_gdb-menu'}}</li>
<li><a href="/tweets/" class="top-nav-item" title="Trans Twitter Topics"><img src="/images/transtwitter.png" width="24" height="24" alt=""></a></li> <li><a href="/tweets/" class="top-nav-item" title="Trans Twitter Topics"><img src="/images/transtwitter.png" width="24" height="24" alt=""></a></li>
<li class="break"></li> <li class="disposable"><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi/issues" class="top-nav-item">{{icon 'brands/github'}}</a></li>
<li><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi/issues" class="top-nav-item">{{icon 'brands/github'}}</a></li> <li class="disposable"><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li>
<li><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li> <li class="disposable"><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
<li><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
</ul> </ul>