From b4ae638066f8031d86e668393b14918013fb18d3 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <all@melissaautumn.com>
Date: Fri, 31 May 2024 09:06:56 -0700
Subject: [PATCH 1/6] Initial work on button restyling

---
 assets/less/new/components/buttons.less       | 194 +++++++++++++++++-
 .../includes/download-button.html             |  14 +-
 .../thunderbird/all/index.html                |   2 +-
 3 files changed, 198 insertions(+), 12 deletions(-)

diff --git a/assets/less/new/components/buttons.less b/assets/less/new/components/buttons.less
index 9b11dc5b0..3577336f9 100644
--- a/assets/less/new/components/buttons.less
+++ b/assets/less/new/components/buttons.less
@@ -1,6 +1,195 @@
 @import "../functions.less";
 @import '../mixins.less';
 
+.btn,
+//button,
+[type="button"],
+[type="submit"] {
+  // Local variables with defaults
+  --after-opacity: var(--btn-after-opacity, 0.5);
+  --border-color: var(--btn-border-colour, currentColor);
+  --background-color: var(--btn-background-color, var(--color-white));
+  --font-size: var(--btn-font-size, var(--font-md));
+  --transition: all 250ms;
+
+  font-size: var(--font-size);
+  background: var(--background-color);
+  border-radius: 0.375rem ; //6px;
+  border: .125em solid var(--border-color);
+  color: currentColor;
+  padding: .5em 3em;
+  position: relative;
+  // ?
+  transition: font-size .2s;
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover {
+    --after-opacity: 0.75;
+
+    background: linear-gradient(var(--background-color), var(--background-color)) padding-box,
+    linear-gradient(to right, var(--color-blue-50), var(--color-purple-50)) border-box;
+    border-color: transparent;
+    color: currentColor;
+    transition: var(--transition);
+  }
+  &:active {
+    background: linear-gradient(var(--background-color-hover), var(--background-color-hover)) padding-box,
+    linear-gradient(to right, var(--color-button-border-active), var(--color-button-border-active)) border-box;
+    border-color: transparent;
+    transition: var(--transition);
+
+    // Remove the focus state
+    outline: none;
+  }
+  &:focus,
+  &:focus-visible,
+  &.focused {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    background: var(--glow);
+    border-radius: 50%;
+    filter: blur(32px);
+    opacity: .25;
+    inset: -.25em -5em;
+    z-index: -2;
+  }
+  &::after {
+    content: '';
+    background-color: transparent;
+    background-image: radial-gradient(circle, var(--accent), var(--color-purple-60) 30%);
+    background-size: 400%;
+    background-position: center;
+    opacity: var(--after-opacity);
+    inset: 0;
+    transition: var(--transition);
+
+    position: absolute;
+    z-index: -1;
+
+    // Firefox requires this little hack
+    @-moz-document url-prefix() {
+        inset-inline-end: 4px;
+    }
+  }
+}
+
+.btn-light {
+  --btn-background-color: var(--color-white);
+}
+.btn-gray {
+  --btn-background-color: rgba(0, 0, 0, .8);
+}
+.btn-dark {
+  --btn-background-color: var(--color-black);
+}
+.btn-no-glow {
+  &:before {
+    background: none;
+    filter: none;
+  }
+}
+.btn-download {
+  --font-size: var(--font-lg);
+  --btn-background-color: transparent;
+  font-weight: 600;
+
+  &:hover {
+    background: none;
+    border-color: var(--border-color);
+  }
+  &:active {
+    border-color: var(--border-color);
+  }
+}
+
+/*
+ * Styling for download-button.html
+ */
+
+.download-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  padding: 0;
+  list-style: none;
+}
+
+// Call to action name (e.g. "Download Thunderbird")
+.nice-name {
+  display: inline-block;
+}
+// Platform name (e.g. "Windows 64-bit")
+.full-platform-name {
+  display: none;
+}
+
+// By default the os buttons are hidden
+.linux-arm-download,
+.unsupported-download,
+.os_win64,
+.os_msi,
+.os_win,
+.os_linux64,
+.os_linux,
+.os_osx {
+  display: none;
+}
+
+// Show buttons if a supported platform is detected
+.windows .os_win,
+.win7up.x86.x64 .os_win64,
+.linux:not(.x64) .os_linux,  // Maybe we should just combine .x86-64 as one class to avoid :not
+.linux.x86.x64 .os_linux64,
+.osx .os_osx
+{
+  display: block;
+}
+
+// Linux arm is special
+.linux.arm .linux-arm-download,
+// Unsupported platforms
+.windows.arm .unsupported-download,
+.chromeos .unsupported-download,
+.oldwin .unsupported-download,
+.oldmac .unsupported-download {
+  display: block;
+}
+
+// Platforms that should show the entire list
+.android,
+.ios,
+.fxos, // lol
+.chromeos,
+.oldwin,
+.oldmac,
+.other,
+.no-js {
+  .os_win64,
+  .os_msi,
+  .os_win,
+  .os_linux64,
+  .os_linux,
+  .os_osx {
+    display: block;
+  }
+
+  .nice-name {
+    display: none;
+  }
+  .full-platform-name {
+    display: inline-block;
+  }
+
+}
+
+/*
 .btn,
 .btn-download,
 [type="button"] {
@@ -20,7 +209,6 @@
   filter: grayscale(50%);
 }
 
-/* Remove some list padding */
 .download-dumb > ul {
   padding: 0;
 }
@@ -117,7 +305,6 @@ button:hover::after {
 }
 
 /*
-/** HACK for Mozilla Firefox */
 @-moz-document url-prefix() {
   .download-link.btn-download::after {
     inset-inline-end: 0.25rem; //4px;
@@ -323,4 +510,5 @@ button:hover::after {
   .btn-newsletter-icon {
     display: block;
   }
-}
\ No newline at end of file
+}
+*/
\ No newline at end of file
diff --git a/sites/www.thunderbird.net/includes/download-button.html b/sites/www.thunderbird.net/includes/download-button.html
index e8c5e418f..286c34021 100644
--- a/sites/www.thunderbird.net/includes/download-button.html
+++ b/sites/www.thunderbird.net/includes/download-button.html
@@ -57,14 +57,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,7 +68,7 @@ <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"
@@ -83,6 +76,7 @@ <h4>{{ _('Download Thunderbird') }} — {{ locale_name|safe }}</h4>
           {% 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 +88,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 %}
diff --git a/sites/www.thunderbird.net/thunderbird/all/index.html b/sites/www.thunderbird.net/thunderbird/all/index.html
index d1d110b90..7bb64d0b1 100644
--- a/sites/www.thunderbird.net/thunderbird/all/index.html
+++ b/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 btn-no-glow"
               href="{{ download_url(platform_os=win64) }}"
               data-donate-redirect="download-{{ channel or 'esr' }}"
               data-donate-content="post_download"

From 357c8e9309ee000201824d1a7188d924d7cf044a Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 31 May 2024 09:46:15 -0700
Subject: [PATCH 2/6] Add a `--nonotes` option to disable building release
 notes while doing web dev. Speeds up the site build process.

---
 build-site.py | 5 +++--
 builder.py    | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/build-site.py b/build-site.py
index 5c82d5d35..442497bdf 100644
--- a/build-site.py
+++ b/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)
diff --git a/builder.py b/builder.py
index a1612acb7..e2066ebb4 100644
--- a/builder.py
+++ b/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.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.build_notes)
             else:
                 self.builder.build_website(assets=False, notes=False)
 

From 5f9901fd6b2c7dd1480bafa9e0fb09d60e3a4d1a Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 31 May 2024 10:16:51 -0700
Subject: [PATCH 3/6] Refactor scrolled nav to cache presence of `scrolled-nav`
 css class.

---
 sites/www.thunderbird.net/includes/base/page.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/sites/www.thunderbird.net/includes/base/page.html b/sites/www.thunderbird.net/includes/base/page.html
index 40306452d..62be0ddf4 100644
--- a/sites/www.thunderbird.net/includes/base/page.html
+++ b/sites/www.thunderbird.net/includes/base/page.html
@@ -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 %}
\ No newline at end of file

From dbce6d7d63db3e5d0b4bc6d3f5b64252de323632 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 31 May 2024 13:50:44 -0700
Subject: [PATCH 4/6] Lots of cleanup: * Remove hamburger-btn overrides / style
 * Consolidate btn-hamburger into buttons.less * Override --nav-txt for
 homepage and scrolled-nav * Replace btn-no-bg with btn-transparent * Specify
 hero button class for homepage * Additional clean up

---
 assets/less/new/components/buttons.less       | 164 +++++++++++++++---
 assets/less/new/components/site-nav.less      |  57 +-----
 assets/less/new/variables.less                |   2 +-
 assets/less/pages/home.less                   |   8 +-
 .../includes/base/nav.html                    |   8 +-
 .../includes/base/page.html                   |   6 +-
 .../includes/download-button.html             |  16 --
 sites/www.thunderbird.net/index.html          |   2 +-
 .../thunderbird/all/index.html                |   2 +-
 9 files changed, 162 insertions(+), 103 deletions(-)

diff --git a/assets/less/new/components/buttons.less b/assets/less/new/components/buttons.less
index 3577336f9..562e60b15 100644
--- a/assets/less/new/components/buttons.less
+++ b/assets/less/new/components/buttons.less
@@ -1,22 +1,30 @@
 @import "../functions.less";
 @import '../mixins.less';
 
-.btn,
-//button,
+[type="submit"],
 [type="button"],
-[type="submit"] {
+button {
+  @btn-no-bg-styling();
+  all: unset;
+}
+
+.btn {
   // Local variables with defaults
   --after-opacity: var(--btn-after-opacity, 0.5);
-  --border-color: var(--btn-border-colour, currentColor);
+  --border-color: var(--btn-border-color, currentColor);
+  --txt-color: var(--btn-txt-color, currentColor);
+  --txt-color-hover: var(--btn-txt-color-hover, var(--txt-color));
   --background-color: var(--btn-background-color, var(--color-white));
-  --font-size: var(--btn-font-size, var(--font-md));
+  --background-color-hover: var(--btn-background-color-hover, var(--background-color));
+  --font-size: var(--btn-font-size, var(--font-lg));
   --transition: all 250ms;
 
+  cursor: pointer;
   font-size: var(--font-size);
   background: var(--background-color);
-  border-radius: 0.375rem ; //6px;
+  border-radius: 0.375rem; //6px;
   border: .125em solid var(--border-color);
-  color: currentColor;
+  color: var(--txt-color);
   padding: .5em 3em;
   position: relative;
   // ?
@@ -26,22 +34,21 @@
 
   &:hover {
     --after-opacity: 0.75;
-
-    background: linear-gradient(var(--background-color), var(--background-color)) padding-box,
+    background: linear-gradient(var(--background-color-hover), var(--background-color-hover)) padding-box,
     linear-gradient(to right, var(--color-blue-50), var(--color-purple-50)) border-box;
     border-color: transparent;
-    color: currentColor;
+    color: var(--txt-color-hover);
     transition: var(--transition);
   }
+
   &:active {
     background: linear-gradient(var(--background-color-hover), var(--background-color-hover)) padding-box,
     linear-gradient(to right, var(--color-button-border-active), var(--color-button-border-active)) border-box;
     border-color: transparent;
+    color: var(--txt-color-hover);
     transition: var(--transition);
-
-    // Remove the focus state
-    outline: none;
   }
+
   &:focus,
   &:focus-visible,
   &.focused {
@@ -49,6 +56,11 @@
     outline-offset: var(--focus-outline-offset);
   }
 
+  &:disabled {
+    cursor: not-allowed;
+    filter: grayscale(50%);
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -59,6 +71,7 @@
     inset: -.25em -5em;
     z-index: -2;
   }
+
   &::after {
     content: '';
     background-color: transparent;
@@ -74,7 +87,7 @@
 
     // Firefox requires this little hack
     @-moz-document url-prefix() {
-        inset-inline-end: 4px;
+      inset-inline-end: 4px;
     }
   }
 }
@@ -82,19 +95,41 @@
 .btn-light {
   --btn-background-color: var(--color-white);
 }
+
 .btn-gray {
   --btn-background-color: rgba(0, 0, 0, .8);
 }
+
 .btn-dark {
   --btn-background-color: var(--color-black);
 }
+
 .btn-no-glow {
   &:before {
     background: none;
     filter: none;
   }
 }
-.btn-download {
+
+.btn-transparent {
+  --btn-background-color: transparent;
+  --btn-background-color-hover: var(--color-white);
+  --txt-color: currentColor;
+
+  &:after {
+    background: transparent;
+  }
+}
+
+// Special cases:
+// 1. Homepage initial nav is dark, so use the dark scheme
+// 2. scrolled-nav has a dark background, so use the dark scheme
+.page-index .btn-transparent,
+nav.scrolled-nav .btn-transparent {
+  --btn-background-color-hover: rgba(0, 0, 0, 0.8);
+}
+
+.btn-hero-download {
   --font-size: var(--font-lg);
   --btn-background-color: transparent;
   font-weight: 600;
@@ -103,11 +138,83 @@
     background: none;
     border-color: var(--border-color);
   }
+
   &:active {
     border-color: var(--border-color);
   }
 }
 
+.scrolled-nav .btn-hamburger {
+  margin: -0.3rem 0 0;
+  transition: margin .2s;
+}
+
+.btn-hamburger {
+  background: transparent;
+  cursor: pointer;
+  display: none;
+  height: 2.5rem;
+  width: 2.5rem;
+  margin-right: 4px;
+  margin-top: 8px;
+  transition: margin .2s;
+  padding: 0;
+
+  @media (max-width: @lg) {
+    display: block;
+  }
+}
+
+
+// Just some temp styling
+.header-download {
+  font-weight: 500;
+}
+
+.header-donate {
+  margin-top: -0.05rem;
+  margin-left: -1rem;
+
+  .btn {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  svg {
+    width: 1rem;
+  }
+}
+
+
+.btn-newsletter {
+  position: relative;
+  border: none;
+  border-radius: 0;
+  border-inline-start: 2px solid currentColor;
+  padding: .75rem 2.5rem;
+  margin: 0;
+  font-size: var(--font-md);
+  // FIXME: This needs to get cleaned up and applied to btns generically
+  --btn-background-color: rgba(0, 0, 0, 0.8);
+  @btn-no-bg-styling();
+}
+
+.btn-newsletter-icon {
+  display: none;
+  padding: .75em 1em;
+}
+
+@media (max-width: @sm) {
+  .btn-newsletter-text {
+    display: none;
+  }
+
+  .btn-newsletter-icon {
+    display: block;
+  }
+}
+
+
 /*
  * Styling for download-button.html
  */
@@ -116,15 +223,33 @@
   display: flex;
   flex-direction: column;
   gap: 2rem;
-
   padding: 0;
   list-style: none;
 }
 
+nav .download-list {
+  display: none;
+}
+
+.windows,
+.win7up.x86.x64,
+.linux:not(.x64),
+.linux.x86.x64,
+.osx {
+  nav .download-list {
+    display: block;
+  }
+}
+
+.all-downloads-link {
+  margin-bottom: 3.75rem; //60px;
+}
+
 // Call to action name (e.g. "Download Thunderbird")
 .nice-name {
   display: inline-block;
 }
+
 // Platform name (e.g. "Windows 64-bit")
 .full-platform-name {
   display: none;
@@ -145,10 +270,9 @@
 // Show buttons if a supported platform is detected
 .windows .os_win,
 .win7up.x86.x64 .os_win64,
-.linux:not(.x64) .os_linux,  // Maybe we should just combine .x86-64 as one class to avoid :not
+.linux:not(.x64) .os_linux, // Maybe we should just combine .x86-64 as one class to avoid :not
 .linux.x86.x64 .os_linux64,
-.osx .os_osx
-{
+.osx .os_osx {
   display: block;
 }
 
@@ -183,10 +307,10 @@
   .nice-name {
     display: none;
   }
+
   .full-platform-name {
     display: inline-block;
   }
-
 }
 
 /*
diff --git a/assets/less/new/components/site-nav.less b/assets/less/new/components/site-nav.less
index 347c7b006..62b7416f1 100644
--- a/assets/less/new/components/site-nav.less
+++ b/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;
     }
   }
diff --git a/assets/less/new/variables.less b/assets/less/new/variables.less
index 621e49956..025ccd93a 100644
--- a/assets/less/new/variables.less
+++ b/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;
diff --git a/assets/less/pages/home.less b/assets/less/pages/home.less
index c75a2e6be..7169b48a4 100644
--- a/assets/less/pages/home.less
+++ b/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);
   }
 
 
diff --git a/sites/www.thunderbird.net/includes/base/nav.html b/sites/www.thunderbird.net/includes/base/nav.html
index 9529bfd7c..4899ae247 100644
--- a/sites/www.thunderbird.net/includes/base/nav.html
+++ b/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>
diff --git a/sites/www.thunderbird.net/includes/base/page.html b/sites/www.thunderbird.net/includes/base/page.html
index 62be0ddf4..193dcd82e 100644
--- a/sites/www.thunderbird.net/includes/base/page.html
+++ b/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>
diff --git a/sites/www.thunderbird.net/includes/download-button.html b/sites/www.thunderbird.net/includes/download-button.html
index 286c34021..21ce54281 100644
--- a/sites/www.thunderbird.net/includes/download-button.html
+++ b/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 %}
 
diff --git a/sites/www.thunderbird.net/index.html b/sites/www.thunderbird.net/index.html
index 2f237b2d5..15f030572 100644
--- a/sites/www.thunderbird.net/index.html
+++ b/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>
diff --git a/sites/www.thunderbird.net/thunderbird/all/index.html b/sites/www.thunderbird.net/thunderbird/all/index.html
index 7bb64d0b1..f398f9c4d 100644
--- a/sites/www.thunderbird.net/thunderbird/all/index.html
+++ b/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-light btn-no-glow"
+              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"

From 7345ed9db23bcb0b80259bbc89a3fb3d479e745c Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Fri, 31 May 2024 14:10:24 -0700
Subject: [PATCH 5/6] Clean up

---
 assets/less/new/components/buttons.less | 324 ------------------------
 1 file changed, 324 deletions(-)

diff --git a/assets/less/new/components/buttons.less b/assets/less/new/components/buttons.less
index 562e60b15..fac329c08 100644
--- a/assets/less/new/components/buttons.less
+++ b/assets/less/new/components/buttons.less
@@ -312,327 +312,3 @@ nav .download-list {
     display: inline-block;
   }
 }
-
-/*
-.btn,
-.btn-download,
-[type="button"] {
-  @outline();
-  // Moved from @outline
-  &:focus {
-    outline: var(--focus-outline);
-    outline-offset: var(--focus-outline-offset);
-  }
-}
-
-.btn {
-  cursor: pointer;
-}
-.btn:disabled {
-  cursor: not-allowed;
-  filter: grayscale(50%);
-}
-
-.download-dumb > ul {
-  padding: 0;
-}
-
-.download-button > ul {
-  padding: 0;
-}
-
-// Just some temp styling
-.header-download {
-  font-weight: 500;
-
-  .download-link.btn-download:after {
-    background: transparent;
-  }
-}
-
-.header-donate {
-  margin-top: -0.05rem;
-  margin-left: -1rem;
-
-  a.btn {
-    padding: 0.72em 1em;
-    border-width: 0.125rem; //2px;
-  }
-
-  a.btn::after {
-    background: transparent;
-  }
-
-  svg {
-    width: 1rem;
-  }
-}
-
-.btn-donate,
-.btn-donate-lg,
-.btn-download-inline,
-.btn-download-link,
-.download-link.btn-download,
-.btn,
-button {
-  font-size: var(--font-md);
-  background: var(--btn-bg, transparent);
-  border-radius: 0.375rem ;//6px;
-  border: .125em solid currentColor;
-  color: currentColor;
-  padding: .5em 3em;
-  position: relative;
-  transition: font-size .2s;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.btn-donate::before,
-.btn-donate-lg::before,
-.btn-download-inline::before,
-.btn-download-link::before,
-.download-link.btn-download::before,
-.btn::before {
-  content: '';
-  position: absolute;
-  background: var(--glow);
-  border-radius: 50%;
-  filter: blur(32px);
-  opacity: .25;
-  inset: -.25em -5em;
-  z-index: -2;
-}
-
-.btn-donate::after,
-.btn-donate-lg::after,
-.btn-download-inline::after,
-.btn-download-link::after,
-.download-link.btn-download::after,
-.btn::after {
-  content: '';
-  position: absolute;
-  background-color: transparent;
-  background-image: radial-gradient(circle, var(--accent), var(--color-purple-60) 30%);
-  background-size: 400%;
-  background-position: center;
-  opacity: .5;
-  inset: 0;
-  z-index: -1;
-  transition: all .3s;
-}
-
-.download-link.btn-download:hover::after,
-.btn:hover::after,
-button:hover::after {
-  opacity: .75;
-  background-size: 500%;
-}
-
-/*
-@-moz-document url-prefix() {
-  .download-link.btn-download::after {
-    inset-inline-end: 0.25rem; //4px;
-  }
-}
-
-.download-button .ios-download,
-.download-button .linux-arm-download,
-.download-button .unrecognized-download,
-.download-button .unsupported-download,
-.download-button .unsupported-download-osx,
-.download-button .nojs-download {
-  display: none;
-}
-
-.download-button .os_msi,
-.download-button .os_winsha1,
-.download-button .os_win64,
-.download-button .os_linux,
-.download-button .os_linux64,
-.win7up.x86.x64 .download-button .os_win,
-.android .download-button-desktop,
-.windows.arm .download-button .os_win,
-.linux.arm .download-button .os_linux,
-.linux.x86.x64 .download-list .os_linux,
-.download-button .os_win,
-.download-button .os_osx,
-.download-button .os_android,
-.download-button .os_ios,
-.no-js .download-list,
-.other .download-list {
-  display: none !important;
-}
-
-.win7up.x86.x64 .download-button .os_win64,
-.linux .download-button .os_linux,
-.linux.x86.x64 .download-button .os_linux64,
-.windows .download-button .os_win,
-.osx .download-button .os_osx,
-.android .download-button .os_android,
-.download-button-android .os_android,
-.android .download-button-desktop .download-list,
-.android .download-button-desktop small.os_win,
-.download-button-ios .os_ios,
-.ios .download-button .os_ios,
-.ios .download-button .ios-download,
-.ios .download-button-desktop .download-list,
-.other .download-button-android .download-list,
-.other .download-button small.os_win {
-  display: block !important;
-}
-
-.windows.arm .download-button .unsupported-download,
-.linux.arm .download-button .linux-arm-download,
-.chromeos .download-button .unsupported-download,
-.oldwin .download-button .unsupported-download,
-.oldmac .download-button .unsupported-download {
-  display: block;
-  max-width: 15.625rem ;//250px;
-}
-
-.windows.arm .download-button .fx-privacy-link,
-.linux.arm .download-button .fx-privacy-link,
-.chromeos .download-button .fx-privacy-link,
-.oldwin .download-button .fx-privacy-link,
-.oldmac .download-button .fx-privacy-link {
-  display: none;
-}
-
-.android .download-button-desktop .nojs-download,
-.ios .download-button-desktop .nojs-download,
-.no-js .download-button .nojs-download {
-  display: block;
-}
-
-.other .download-button .unrecognized-download {
-  display: block;
-}
-
-.download-button .download-list .os_android.x86,
-.download-button .download-other.os_android .api-15,
-.android.x86 .download-button .download-list .os_android.armv7up,
-.android.x86 .download-button .download-other.os_android .x86 {
-  display: none !important;
-}
-
-.android.x86 .download-button .download-list .os_android.x86 {
-  display: block !important;
-}
-
-.android.x86 .download-button .download-other.os_android .armv7up {
-  display: inline !important;
-}
-
-.windows.sha-1 .download-button .os_win {
-  display: none !important;
-}
-
-.windows.sha-1 .download-button .os_winsha1 {
-  display: block !important;
-}
-
-.download-button ul {
-  list-style: none;
-}
-
-.download-button ul li {
-  margin-block: 1.25rem ;//20px;
-}
-
-.download-dumb {
-  ul li {
-    margin-block: 2.5rem; //40px;
-  }
-}
-
-.all-downloads-link {
-  margin-bottom: 3.75rem; //60px;
-}
-
-
-// Make the smart download button a bit larger
-.download-button {
-  .btn-download {
-    font-size: var(--font-lg);
-    font-weight: 600;
-  }
-}
-
-// TODO: This is for the fancy padding-box hover border effect thingy. I'll clean this up later
-.btn-no-bg {
-  --btn-background-color: var(--color-white);
-}
-
-.btn-white-bg {
-  --btn-background-color: var(--color-white);
-}
-
-.btn-black-bg {
-  --btn-background-color: var(--color-black);
-}
-
-.btn-no-bg::after {
-  background: transparent;
-}
-
-.btn-white-bg::after {
-  background: var(--color-white);
-}
-
-.btn-black-bg::after {
-  background: var(--color-black);
-}
-
-.btn-black-bg:hover,
-.btn-white-bg:hover,
-.btn-no-bg:hover {
-  background: linear-gradient(var(--btn-background-color), var(--btn-background-color)) padding-box,
-  linear-gradient(to right, var(--color-blue-50), var(--color-purple-50)) border-box;
-  border-color: transparent;
-  transition: all 250ms;
-  color: black;
-
-  &::after {
-    opacity: 0.75;
-  }
-}
-
-.btn-black-bg:active,
-.btn-white-bg:active,
-.btn-no-bg:active {
-  background: linear-gradient(var(--btn-background-color), var(--btn-background-color)) padding-box,
-  linear-gradient(to right, var(--color-button-border-active), var(--color-button-border-active)) border-box;
-  border-color: transparent;
-  transition: all 250ms;
-
-  // Remove the focus state
-  outline: none;
-}
-
-.btn-newsletter {
-  position: relative;
-  border: none;
-  border-radius: 0;
-  border-inline-start: 2px solid currentColor;
-  padding: .75rem 2.5rem;
-  margin: 0;
-  font-size: var(--font-md);
-  // FIXME: This needs to get cleaned up and applied to btns generically
-  --btn-background-color: rgba(0, 0, 0, 0.8);
-  @btn-no-bg-styling();
-}
-
-.btn-newsletter-icon {
-  display: none;
-  padding: .75em 1em;
-}
-
-@media (max-width: @sm) {
-  .btn-newsletter-text {
-    display: none;
-  }
-  .btn-newsletter-icon {
-    display: block;
-  }
-}
-*/
\ No newline at end of file

From 32e3eabff11275724e758b3c3466d8269d45508a Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Mon, 3 Jun 2024 15:53:44 -0700
Subject: [PATCH 6/6] Fix overlapping variable / function name

---
 builder.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder.py b/builder.py
index e2066ebb4..a0c8d0133 100644
--- a/builder.py
+++ b/builder.py
@@ -112,7 +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.build_notes = not no_notes  # Makes code a little less confusing in use.
+        self.should_build_notes = not no_notes  # Makes code a little less confusing in use.
         if debug:
             logger.setLevel(logging.INFO)
 
@@ -483,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=self.builder.build_notes)
+                self.builder.build_website(assets=False, notes=self.builder.should_build_notes)
             else:
                 self.builder.build_website(assets=False, notes=False)