From a49955fa3494437a04952ec1afc70ff7c2c86d5e Mon Sep 17 00:00:00 2001 From: Will Norris Date: Sat, 23 Oct 2021 17:10:38 -0700 Subject: [PATCH] don't hide menu on small screens if no js --- assets/css/_main.scss | 47 +++++++++++++++------------- assets/css/year-in-review.scss | 2 +- layouts/_default/baseof.html | 3 +- layouts/_default/year-in-review.html | 3 +- 4 files changed, 31 insertions(+), 24 deletions(-) diff --git a/assets/css/_main.scss b/assets/css/_main.scss index db6015cc6..a3cff9e7a 100644 --- a/assets/css/_main.scss +++ b/assets/css/_main.scss @@ -140,33 +140,38 @@ nav { // Navigation - mobile @media (max-width: 650px) { - #menu-toggle { - display: block; - } - #nav-menu { - display: none; - height: 100vh; - width: 100%; - margin: 0; - margin-top: calc(var(--feather-grid-mega) * 2); - animation: fadein 1.5s; - - li { + margin-top: var(--feather-grid-xxsmall); + } + html:not(.no-js) { + #menu-toggle { display: block; - font-weight: var(--feather-font-weight-bold); - font-size: var(--feather-font-size-jumbo); - line-height: var(--feather-line-height-jumbo); - padding: var(--feather-grid-medium) 0; + } + + #nav-menu { + display: none; + height: 100vh; + width: 100%; margin: 0; - &:not(:last-child) { - border-bottom: 1px solid var(--tw-color-blue-faded); + margin-top: calc(var(--feather-grid-mega) * 2); + animation: fadein 1.5s; + + li { + display: block; + font-weight: var(--feather-font-weight-bold); + font-size: var(--feather-font-size-jumbo); + line-height: var(--feather-line-height-jumbo); + padding: var(--feather-grid-medium) 0; + margin: 0; + &:not(:last-child) { + border-bottom: 1px solid var(--tw-color-blue-faded); + } } } - } - #nav-menu.active { - display: block; + #nav-menu.active { + display: block; + } } } diff --git a/assets/css/year-in-review.scss b/assets/css/year-in-review.scss index 8244a2f3e..03d2fd91e 100644 --- a/assets/css/year-in-review.scss +++ b/assets/css/year-in-review.scss @@ -542,7 +542,7 @@ span.metric-name { } // Copied from main.css because mobile navigation is activated at a wider width on this page - #menu-toggle { + html:not(.no-js) #menu-toggle { display: block; } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index b60fa52af..dad775eb4 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,5 @@ - + {{ partial "head.html" . }} @@ -27,6 +27,7 @@ {{ partial "footer.html" . }} + {{ with .Params.custom_js }}{{ end }} {{ if hugo.IsProduction }}{{ partial "ga.html" . }}{{ end }} diff --git a/layouts/_default/year-in-review.html b/layouts/_default/year-in-review.html index 52968205a..d7fda35a9 100644 --- a/layouts/_default/year-in-review.html +++ b/layouts/_default/year-in-review.html @@ -1,5 +1,5 @@ - + @@ -367,6 +367,7 @@

@TwitterOSS

}; + {{ partial "ga.html" . }}