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

42
scss/_header.scss
View File

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

3
scss/_page.scss
View File

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

10
templates/layout.hbs
View File

@ -62,13 +62,11 @@
<div class="top-nav">
<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" 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" data-flip="false" 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 class="break"></li>
<li><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi/issues" class="top-nav-item">{{icon 'brands/github'}}</a></li>
<li><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li>
<li><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
<li class="disposable"><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 class="disposable"><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
</ul>