diff --git a/assets/less/new/components/buttons.less b/assets/less/new/components/buttons.less index 9b11dc5b0..fac329c08 100644 --- a/assets/less/new/components/buttons.less +++ b/assets/less/new/components/buttons.less @@ -1,326 +1,314 @@ @import "../functions.less"; @import '../mixins.less'; -.btn, -.btn-download, -[type="button"] { - @outline(); - // Moved from @outline - &:focus { - outline: var(--focus-outline); - outline-offset: var(--focus-outline-offset); - } +[type="submit"], +[type="button"], +button { + @btn-no-bg-styling(); + all: unset; } .btn { - cursor: pointer; -} -.btn:disabled { - cursor: not-allowed; - filter: grayscale(50%); -} + // Local variables with defaults + --after-opacity: var(--btn-after-opacity, 0.5); + --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)); + --background-color-hover: var(--btn-background-color-hover, var(--background-color)); + --font-size: var(--btn-font-size, var(--font-lg)); + --transition: all 250ms; -/* Remove some list padding */ -.download-dumb > ul { - padding: 0; -} - -.download-button > ul { - padding: 0; -} + cursor: pointer; + font-size: var(--font-size); + background: var(--background-color); + border-radius: 0.375rem; //6px; + border: .125em solid var(--border-color); + color: var(--txt-color); + padding: .5em 3em; + position: relative; + // ? + transition: font-size .2s; + text-decoration: none; + white-space: nowrap; -// Just some temp styling -.header-download { - font-weight: 500; + &:hover { + --after-opacity: 0.75; + 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: var(--txt-color-hover); + transition: var(--transition); + } - .download-link.btn-download:after { - background: transparent; + &: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); } -} -.header-donate { - margin-top: -0.05rem; - margin-left: -1rem; + &:focus, + &:focus-visible, + &.focused { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + } - a.btn { - padding: 0.72em 1em; - border-width: 0.125rem; //2px; + &:disabled { + cursor: not-allowed; + filter: grayscale(50%); } - a.btn::after { - background: transparent; + &::before { + content: ''; + position: absolute; + background: var(--glow); + border-radius: 50%; + filter: blur(32px); + opacity: .25; + inset: -.25em -5em; + z-index: -2; } - svg { - width: 1rem; + &::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-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-light { + --btn-background-color: var(--color-white); } -.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-gray { + --btn-background-color: rgba(0, 0, 0, .8); } -.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; +.btn-dark { + --btn-background-color: var(--color-black); } -.download-link.btn-download:hover::after, -.btn:hover::after, -button:hover::after { - opacity: .75; - background-size: 500%; +.btn-no-glow { + &:before { + background: none; + filter: none; + } } -/* -/** HACK for Mozilla Firefox */ -@-moz-document url-prefix() { - .download-link.btn-download::after { - inset-inline-end: 0.25rem; //4px; +.btn-transparent { + --btn-background-color: transparent; + --btn-background-color-hover: var(--color-white); + --txt-color: currentColor; + + &:after { + background: transparent; } } -.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; +// 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); } -.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; -} +.btn-hero-download { + --font-size: var(--font-lg); + --btn-background-color: transparent; + font-weight: 600; -.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; + &:hover { + background: none; + border-color: var(--border-color); + } + + &:active { + border-color: var(--border-color); + } } -.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; +.scrolled-nav .btn-hamburger { + margin: -0.3rem 0 0; + transition: margin .2s; } -.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 { +.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; -.android .download-button-desktop .nojs-download, -.ios .download-button-desktop .nojs-download, -.no-js .download-button .nojs-download { - display: block; + @media (max-width: @lg) { + 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; +// Just some temp styling +.header-download { + font-weight: 500; } -.android.x86 .download-button .download-list .os_android.x86 { - display: block !important; -} +.header-donate { + margin-top: -0.05rem; + margin-left: -1rem; -.android.x86 .download-button .download-other.os_android .armv7up { - display: inline !important; -} + .btn { + padding-left: 1rem; + padding-right: 1rem; + } -.windows.sha-1 .download-button .os_win { - display: none !important; + svg { + width: 1rem; + } } -.windows.sha-1 .download-button .os_winsha1 { - display: block !important; -} -.download-button ul { - list-style: 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(); } -.download-button ul li { - margin-block: 1.25rem ;//20px; +.btn-newsletter-icon { + display: none; + padding: .75em 1em; } -.download-dumb { - ul li { - margin-block: 2.5rem; //40px; +@media (max-width: @sm) { + .btn-newsletter-text { + display: none; } -} -.all-downloads-link { - margin-bottom: 3.75rem; //60px; + .btn-newsletter-icon { + display: block; + } } -// Make the smart download button a bit larger -.download-button { - .btn-download { - font-size: var(--font-lg); - font-weight: 600; - } -} +/* + * Styling for download-button.html + */ -// 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); +.download-list { + display: flex; + flex-direction: column; + gap: 2rem; + padding: 0; + list-style: none; } -.btn-white-bg { - --btn-background-color: var(--color-white); +nav .download-list { + display: none; } -.btn-black-bg { - --btn-background-color: var(--color-black); +.windows, +.win7up.x86.x64, +.linux:not(.x64), +.linux.x86.x64, +.osx { + nav .download-list { + display: block; + } } -.btn-no-bg::after { - background: transparent; +.all-downloads-link { + margin-bottom: 3.75rem; //60px; } -.btn-white-bg::after { - background: var(--color-white); +// Call to action name (e.g. "Download Thunderbird") +.nice-name { + display: inline-block; } -.btn-black-bg::after { - background: var(--color-black); +// Platform name (e.g. "Windows 64-bit") +.full-platform-name { + display: none; } -.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; - } +// 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; } -.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; +// 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; } -.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(); +// 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; } -.btn-newsletter-icon { - display: none; - padding: .75em 1em; -} +// 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; + } -@media (max-width: @sm) { - .btn-newsletter-text { + .nice-name { display: none; } - .btn-newsletter-icon { - display: block; + + .full-platform-name { + display: inline-block; } -} \ No newline at end of file +} 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/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..a0c8d0133 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.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) 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 @@
{{ description }}
{% endmacro %}