Button refactor

assets/less/new/components/site-nav.less

@@ -1,12 +1,8 @@
 @import '../mixins.less';
 
 .site-nav {
-  --hamburger-background-inactive: var(--color-white);
-  --hamburger-foreground-inactive: var(--color-black);
-  --hamburger-background-active: var(--color-white);
-  --hamburger-foreground-active: var(--color-black);
-
   --popover-left-align: -2rem;
+  --nav-txt: var(--txt);
 
   box-sizing: border-box;
   position: fixed;
@@ -16,7 +12,7 @@
   padding-inline: 1rem;
   padding-block: 12px;
   background: var(--nav-bg);
-  color: var(--txt);
+  color: var(--nav-txt);
   border-bottom: 1px solid transparent;
   box-shadow: none;
   height: var(--nav-height);
@@ -50,32 +46,15 @@
   }
 }
 
-// Homepage hack
-.page-index .btn-no-bg {
-  --btn-background-color: rgba(0, 0, 0, 0.8);
-  @btn-no-bg-styling();
-}
-
 .scrolled-nav {
   --nav-height: 3.75rem;//60px;
+  --nav-txt: var(--color-white);
   border-color: rgba(255, 255, 255, .25);
   box-shadow: 0 4px 8px -2px rgba(0, 0, 0, .25);
   background-color: rgba(0, 0, 0, .8);
-  color: var(--nav-txt);
   backdrop-filter: blur(24px) saturate(120%);
   transition: all .5s;
   z-index: 100000;
-
-  .hamburger-btn {
-    --hamburger-foreground-inactive: var(--nav-txt);
-    margin: 0;
-    transition: margin .2s;
-  }
-
-  .btn-no-bg {
-    --btn-background-color: rgba(0, 0, 0, 0.8);
-    @btn-no-bg-styling();
-  }
 }
 
 .nav-container {
@@ -86,36 +65,12 @@
   margin: 0 auto;
 }
 
-.hamburger-btn {
-  cursor: pointer;
-  display: none;
-  height: 2.5rem;
-  width: 2.5rem;
-  margin-right: 4px;
-  margin-top: 8px;
-  transition: margin .2s;
-  padding: 0;
-
-  &::after {
-    background: var(--hamburger-background-inactive) none;
-  }
-
-  @media (max-width: @lg) {
-    display: block;
-  }
-}
-
-&[aria-expanded="true"].hamburger-btn {
-  background-color: var(--hamburger-background-active);
-  opacity: 100%;
-}
-
 &[aria-expanded="true"] > .hamburger-icon {
   // This isn't quite right...
   @offsetY: 195%;
 
   span {
-    border-color: var(--hamburger-foreground-active);
+    border-color: var(--nav-txt);
   }
 
   span:nth-child(1) {
@@ -142,7 +97,7 @@
     margin: auto;
     width: 50%;
     height: 100%;
-    border-bottom: 2px solid var(--hamburger-foreground-inactive);
+    border-bottom: 2px solid var(--nav-txt);
 
     min-height: 1px;
     transition: all 0.3s ease-in;
@@ -394,7 +349,7 @@
 
 @media (max-width: @lg) {
   .no-js {
-    .hamburger-btn {
+    .btn-hamburger {
       display: none;
     }
   }

assets/less/new/variables.less

@@ -5,7 +5,7 @@
   --glow: var(--color-purple-70);
   --separator-color: var(--color-gray-20);
   --nav-bg: transparent;
-  --nav-txt: white;
+  --nav-txt: var(--txt);
   --nav-height: 5rem; // 80px
 
   --offset-x: 0;

assets/less/pages/home.less

@@ -1,4 +1,5 @@
 .page-index {
+
   #masthead,
   header {
     --bg-hero-gradient: linear-gradient(to top, var(--color-ink-90), black 80%);
@@ -59,12 +60,7 @@
   }
 
   .site-nav {
-    color: var(--nav-txt);
-
-    --hamburger-background-inactive: var(--color-black);
-    --hamburger-foreground-inactive: var(--color-gray-30);
-    --hamburger-background-active: var(--color-white);
-    --hamburger-foreground-active: var(--color-black);
+    --nav-txt: var(--color-white);
   }
 
 

build-site.py

@@ -25,6 +25,7 @@
 parser.add_argument('--port', const=8000, default=8000, type=int,
                     help='Port for the server that runs with --watch.', nargs='?')
 parser.add_argument('--devmode', help='Enables various behaviours that would be helpful for development. (e.g. not hard crashing on jinja syntax errors.)', action='store_true')
+parser.add_argument('--nonotes', help='Speeds up development by disabling notes on www.thunderbird.net.', action='store_true')
 args = parser.parse_args()
 
 if args.enus:
@@ -78,8 +79,8 @@
                }
 
     site = builder.Site(languages, settings.WEBSITE_PATH, settings.WEBSITE_RENDERPATH,
-                        settings.WEBSITE_CSS, js_bundles=settings.WEBSITE_JS, data=context, debug=args.debug, dev_mode=args.devmode)
-    site.build_website()
+                        settings.WEBSITE_CSS, js_bundles=settings.WEBSITE_JS, data=context, debug=args.debug, dev_mode=args.devmode, no_notes=args.nonotes)
+    site.build_website(notes=not args.nonotes)
 
 if args.watch:
     builder.setup_observer(site, args.port)

builder.py

@@ -97,7 +97,7 @@ class Site(object):
     Attributes:
         `lang`: Current language to build the site in, an element of `languages`.
     """
-    def __init__(self, languages, searchpath, renderpath, css_bundles, staticdir='_media', js_bundles={}, data={}, debug=False, dev_mode=False):
+    def __init__(self, languages, searchpath, renderpath, css_bundles, staticdir='_media', js_bundles={}, data={}, debug=False, dev_mode=False, no_notes=False):
         self.languages = languages
         self.lang = languages[0]
         self.context = {}
@@ -112,6 +112,7 @@ def __init__(self, languages, searchpath, renderpath, css_bundles, staticdir='_m
         self._setup_env()
         self._env.globals.update(settings=settings, **helper.contextfunctions)
         self.dev_mode = dev_mode
+        self.should_build_notes = not no_notes  # Makes code a little less confusing in use.
         if debug:
             logger.setLevel(logging.INFO)
 
@@ -482,7 +483,7 @@ def updatesite(self, event):
         else:
             # Reduce build time by ignoring release notes when unnecessary.
             if 'includes' in event.src_path:
-                self.builder.build_website(assets=False, notes=True)
+                self.builder.build_website(assets=False, notes=self.builder.should_build_notes)
             else:
                 self.builder.build_website(assets=False, notes=False)
 

sites/www.thunderbird.net/includes/base/nav.html

@@ -12,7 +12,7 @@ <h6>{{ description }}</h6>
 </li>
 {% endmacro %}
 <ul id="nav-menu" class="nav-links">
-  <!--
+  {#
   <li class="nav-entry nav-expandable" tabindex="0">
     <button
       aria-controls="nav-cat-products"
@@ -27,7 +27,7 @@ <h6>{{ description }}</h6>
       </ul>
     </div>
   </li>
-  -->
+  #}
   <li class="nav-entry nav-expandable" tabindex="0">
     <button
       aria-controls="nav-cat-resources"
@@ -75,12 +75,12 @@ <h6>{{ description }}</h6>
   </li>
   <li class="nav-entry no-border no-mobile">
     <div class="header-download">
-      {{ download_thunderbird(force_direct=true, alt_copy=_('Download'), section="header", hide_footer_links=True, button_class="btn-download btn-no-bg") }}
+      {{ download_thunderbird(force_direct=true, alt_copy=_('Download'), section="header", hide_footer_links=True, button_class="btn-download btn-transparent") }}
     </div>
   </li>
   <li class="nav-entry no-border no-mobile">
     <div class="header-donate">
-      <a href="{{ donate_url('header') }}" class="btn btn-no-bg" aria-label="{{ _('Donate') }}" title="{{ _('Donate') }}">
+      <a href="{{ donate_url('header') }}" class="btn btn-transparent" aria-label="{{ _('Donate') }}" title="{{ _('Donate') }}">
         <span aria-hidden="true">{{ svg('heart') }}</span>
       </a>
     </div>

sites/www.thunderbird.net/includes/base/page.html

@@ -18,7 +18,7 @@
     </a>
     <button
       id="mobile-hamburger-button"
-      class="hamburger-btn"
+      class="btn btn-hamburger btn-transparent"
       aria-expanded="false"
       aria-controls="nav-menu"
       aria-label="{{ _('Open or close site navigation') }}"
@@ -92,8 +92,8 @@ <h2>{{_('Learn What’s <span class="txt-gradient">Next</span>')}}</h2>
       <form action="https://thunderbird.us12.list-manage.com/subscribe?u=f8051cc8637cf3ff79661f382&amp;id=56428f2efc"
             class="newsletter-form" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form">
         <input id="mce-EMAIL" name="EMAIL" type="email" placeholder="{{ _('Your Email') }}" required="">
-        <button type="submit" id="mc-embedded-subscribe" class="btn btn-no-bg btn-newsletter btn-newsletter-text">{{_('Subscribe')}}</button>
-        <button type="submit" id="mc-embedded-subscribe" class="btn btn-no-bg btn-newsletter btn-newsletter-icon">➜</button>
+        <button type="submit" id="mc-embedded-subscribe" class="btn btn-transparent btn-newsletter btn-newsletter-text">{{_('Subscribe')}}</button>
+        <button type="submit" id="mc-embedded-subscribe" class="btn btn-transparent btn-newsletter btn-newsletter-icon">➜</button>
         <!-- Prevent Bot signups -->
         <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f8051cc8637cf3ff79661f382_9badb0cec2" tabindex="-1" value="">
         </div>
@@ -139,10 +139,15 @@ <h2>{{_('Learn What’s <span class="txt-gradient">Next</span>')}}</h2>
 {% block js %}
 <script>
   const navbar = document.querySelector(".site-nav");
+  let hasClass = navbar.classList.contains('scrolled-nav');
   window.addEventListener("scroll", () => {
-    (window.scrollY > 30) ?
-      navbar.classList.add("scrolled-nav") :
-      navbar.classList.remove("scrolled-nav")
+    if (!hasClass && window.scrollY > 30) {
+      navbar.classList.add('scrolled-nav');
+      hasClass = true;
+    } else if (hasClass && window.scrollY <= 30) {
+      navbar.classList.remove('scrolled-nav');
+      hasClass = false;
+    }
   });
 </script>
 {% endblock %}

sites/www.thunderbird.net/includes/download-button.html

@@ -8,22 +8,6 @@
   {% set flex_class = 'self-start' if channel or section == 'body' else 'justify-center' %}
 {% endif %}
 
-
-{% macro alt_buttons(builds) %}
-  <div class="download download-dumb">
-    <h4>{{ _('Download Thunderbird') }} — {{ locale_name|safe }}</h4>
-    <ul class="list-none p-0 flex flex-wrap max-w-lg {{ flex_class }}">
-      {% for plat in builds -%}
-        <li class="ml-3 mr-3">
-          <a href="{{ plat.download_link_direct or plat.download_link }}" class="matomo-track-download download-link {{ button_class }}" data-donate-redirect="download-{{ channel or 'esr' }}" data-donate-content="post_download" data-donate-link="{{ redirect_donate_url(content='post_download', download=True, download_channel=channel or 'esr') }}">
-            {{ plat.os_arch_pretty or plat.os_pretty }}
-          </a>
-        </li>
-      {%- endfor %}
-    </ul>
-  </div>
-{% endmacro %}
-
 {% set download_class = 'download-button' %}
 {% set download_class = download_class ~ ' download-button-' ~ channel if channel else download_class %}
 
@@ -57,14 +41,7 @@ <h4>{{ _('Download Thunderbird') }} — {{ locale_name|safe }}</h4>
     {{ _('Download and languages options') }}</a>
   </div>
   {% endif %}
-  {# no JS #}
   {% if section != 'header' %}
-  <div class="nojs-download">
-    {{ alt_buttons(builds) }}
-  </div>
-  <div class="unrecognized-download os_android os_ios">
-    {{ alt_buttons(builds) }}
-  </div>
   <p class="unsupported-download p-links">
     {{ _("Your system doesn't meet the <a href=\"%(url)s\">requirements</a> to run Thunderbird.")|format(url=thunderbird_url('system-requirements', channel)) }}
   </p>
@@ -75,14 +52,15 @@ <h4>{{ _('Download Thunderbird') }} — {{ locale_name|safe }}</h4>
   <ul class="download-list list-none p-0 flex flex-wrap max-w-lg mb-0 {{ flex_class }}">
     {% for plat in builds %}
       <li class="os_{{ plat.os }}{% if plat.arch %} {{ plat.arch }}{% endif %}">
-        <a class="matomo-track-download download-link {{ button_class }}"
+        <a class="btn matomo-track-download download-link {{ button_class }}"
           href="{{ plat.download_link }}"
           data-donate-redirect="download-{{ channel or 'esr' }}"
           data-donate-content="post_download"
           data-donate-link="{{ redirect_donate_url(content='post_download', download=True, download_channel=channel or 'esr') }}"
           {% if plat.download_link_direct %}
             data-direct-link="{{ plat.download_link_direct }}"
           {% endif %}>
+          <span class="nice-name">
           {% if alt_copy %}
             {{ alt_copy }}
           {% else %}
@@ -94,6 +72,10 @@ <h4>{{ _('Download Thunderbird') }} — {{ locale_name|safe }}</h4>
               {{ _('Download Thunderbird') }}
             {% endif %}
           {% endif %}
+          </span>
+          <span class="full-platform-name">
+            {{ plat.os_arch_pretty or plat.os_pretty }}
+          </span>
         </a>
       </li>
     {% endfor %}

sites/www.thunderbird.net/index.html

@@ -31,7 +31,7 @@ <h1 class="tagline">{{_('<span class="txt-gradient">Free</span> Your Inbox')}}</
       </div>
       <div class="hero-download">
         <div class="download-button">
-          {{ download_thunderbird(force_direct=true, alt_copy=_('Download'), section="homepage-hero") }}
+          {{ download_thunderbird(force_direct=true, alt_copy=_('Download'), button_class='btn-hero-download', section="homepage-hero") }}
         </div>
       </div>
     </div>

sites/www.thunderbird.net/thunderbird/all/index.html

@@ -86,7 +86,7 @@ <h2>{{ _('Get <span class="txt-gradient">Thunderbird</span>') }}</h2>
           <div class="download-button download-button-page">
             <a
               id="download-btn"
-              class="btn btn-download download-link btn-white-bg"
+              class="btn btn-download download-link btn-light"
               href="{{ download_url(platform_os=win64) }}"
               data-donate-redirect="download-{{ channel or 'esr' }}"
               data-donate-content="post_download"