Fix: Template nav global icon dropdown toggle

Change to inline SVG dropdown icon in navbar since project doesn't use Web Assets' icon set. Part of #9
Chore: Update templawte nav-global markup to web-assets latest
2025-02-03 18:13:13 +01:00 · 2025-02-03 16:18:15 +01:00 · 2024-12-02 11:11:25 +01:00 · 2024-12-02 10:42:42 +01:00 · 2024-12-02 10:26:03 +01:00 · 2024-12-02 10:22:50 +01:00
20 changed files with 567 additions and 646 deletions
--- a/README.md
+++ b/README.md
@@ -10,3 +10,41 @@
  - --custom-path pointing to the repo directory
  - --config pointing to the custom app.ini
 - Update your user preferences to set the new theme, or it will keep showing the old one.
+
+## Alternative setup with Docker
+
+- Initialize `docker-compose.yml` following Gitea's [basic instructions](https://docs.gitea.com/installation/install-with-docker#basics).
+- Install Gitea following Gitea's [installation instructions](https://docs.gitea.com/installation/install-with-docker#installation).
+- Edit `app.ini` in `[Gitea's root]/conf` to append the following:
+```
+[ui]
+DEFAULT_THEME = bthree-dark
+THEMES = bthree-dark
+```
+(Docker Gitea's root directory defaults to `/gitea/gitea/` from installation root.)
+- Clone this repository to Gitea's root directory, so that its contents are merged. (Gitea's _custom_ directory defaults to Gitea's root.)
+
+Gitea's root flat directory tree should look similar to the following, if done correctly:
+```
+.
+├── actions_artifacts
+├── actions_log
+├── attachments
+├── avatars
+├── conf
+├── gitea.db
+├── home
+├── indexers
+├── jwt
+├── log
+├── packages
+├── public
+├── queues
+├── README.md
+├── repo-archive
+├── repo-avatars
+├── sessions
+├── sphinx
+├── templates
+└── tmp
+```
--- a/public/assets/css/theme-bthree-dark.css
+++ b/public/assets/css/theme-bthree-dark.css
@@ -2,16 +2,14 @@
 :root {
  --is-dark-theme: true;

-  /* Borders. */
-  --border-radius: .33rem;
-  --border-radius-outer: .28571429rem;
-
  /* Colors. */
  /* Some colors must be set as HEX, due to the monaco-editor no supporting
   * conversion of non-hex colors. https: //github.com/microsoft/monaco-editor/issues/1815 */
  color-scheme: dark;
-  --color-primary: hsl(204deg, 90%, 56%);
-  --color-primary-bg: hsla(204deg, 100%, 36%, .2);
+  --color-primary: hsl(204deg, 90%, 60%);
+  --color-primary-hover: hsl(204deg, 90%, 50%);
+  --color-primary-bg: hsla(204deg, 100%, 36%, .6);
+  --color-primary-text: hsl(204deg, 90%, 72%);

  --color-primary-contrast: hsl(0, 0%, 100%);
  --color-primary-dark-1: #14a1ff;
@@ -74,6 +72,7 @@
  /* Colors for buttons, labels, etc. */
  --color-red: hsl(0, 56.4%, 54.1%);
  --color-red-light: hsl(0, 56.5%, 48.6%);
+  --color-red-dark-1: hsl(3deg, 75%, 59%);
  --color-orange: hsl(23.8, 89%, 42.4%);
  --color-orange-light: hsl(23.6, 88.7%, 38%);
  --color-yellow: hsl(44.8, 97%, 40.6%);
@@ -86,8 +85,12 @@
  --color-teal-light: hsl(176.8, 100%, 26%);
  --color-blue: hsl(206, 56%, 50.2%);
  --color-blue-light: hsl(206, 55%, 45.3%);
+  --color-blue-dark-1: hsl(213deg, 89%, 64%);
+  --color-blue-dark-bg: hsla(213deg, 89%, 64%, .15);
  --color-violet: hsl(259.2, 66.5%, 65%);
  --color-violet-light: hsl(259.1, 66.2%, 58%);
+  --color-violet-dark-1: hsl(262deg, 66%, 66%);
+  --color-violet-dark-bg: hsla(262deg, 66%, 66%, .15);
  --color-purple: hsl(285, 55.9%, 58%);
  --color-purple-light: hsl(285, 55.6%, 52%);
  --color-pink: hsl(326, 64.6%, 50.2%);
@@ -130,7 +133,7 @@
  --color-warning-text: hsl(44.7, 96.8%, 50.8%);
  --color-info-border: hsl(210, 50%, 37.6%);
  --color-info-bg: hsl(216.3, 33.3%, 22.4%);
-  --color-info-text: hsl(201.8, 79.3%, 56.5%);
+  --color-info-text: hsl(213deg, 89%, 64%);

  --color-body: #202327;

@@ -159,12 +162,14 @@

  --color-markup-table-row: hsla(0, 0%, 100%, 0);
  --color-markup-code-block: hsla(0, 0%, 100%, 0.1);
+  --color-markup-code-inline: hsla(0, 0%, 100%, 0.1);

  --color-code-bg: #1e2329;
  --color-code-line-bg-hover: hsl(213, 16%, 16%);
  --color-code-sidebar-bg: hsl(213, 15%, 21%);

-  --color-timeline: hsl(220, 10%, 33%);
+  --color-tooltip-text: #fbfdff;
+  --color-tooltip-bg: #000017f0;

  /* Navbar. */
  --color-navbar: hsl(213, 10%, 18%);
@@ -174,15 +179,6 @@
  --color-navbar-transparent: hsla(213, 10%, 14%, 0);
  --color-header-bar: hsl(213, 10%, 18%);

-  /* Buttons. */
-  --color-button: hsl(213, 14%, 24%);
-  --color-expand-button: hsl(213.9, 12.4%, 26.9%);
-
-  --color-button-basic-border: hsl(213, 14%, 30%);
-  --color-button-basic-bg: hsl(213, 14%, 22%);
-  --color-button-basic-bg: var(--color-light);
-  --color-button-basic-text: var(--color-text);
-
  /* Inputs. */
  --color-input-text: #d6dbe6;
  --color-input-background: #17191c;
@@ -194,17 +190,24 @@
  --color-editor-line-highlight: var(--color-primary-light-5);
  --color-project-board-bg: var(--color-secondary-light-2);

+  --color-highlight-fg: #87651e;
+  --color-highlight-bg: #352c1c;
+  --color-overlay-backdrop: #080808c0;
+
+  --color-button: #282d33;
+
  --color-caret: var(--color-text);
  --color-border: var(--color-secondary-alpha-40);

  --color-reaction-bg: hsla(0, 0%, 100%, 0.1);
-  --color-reaction-active-bg: var(--color-primary-alpha-40);
+  --color-reaction-active-bg: var(--color-primary-alpha-30);

  --color-small-accent: var(--color-primary-light-5);
  --color-active-line: hsl(53.6, 50.9%, 22%);

  /* Labels. e.g. issues count indicator in repo tabs. */
  --color-label-text: var(--color-text-light);
+  --color-label-bg: var(--color-secondary-alpha-60);
  --color-label-active-bg: hsl(220, 10.6%, 33.3%);

  /* Footer. */
@@ -216,142 +219,25 @@
 /* Custom styling of individual elements.
 * Using !important is bad, but unfortunately gitea does it already in _base.less. */

-/* Buttons. */
-.ui.basic.button {
-  color: var(--color-button-basic-text);
-  background: var(--color-button-basic-bg);
-  border-color: var(--color-button-basic-border);
-}
-
+/* Primary button. */
 .ui.primary.button,
 .ui.primary.buttons .button {
  background-color: var(--color-primary-bg) !important;
  border-color: var(--color-primary-bg) !important;
-  color: var(--color-primary) !important;
+  color: var(--color-primary-text) !important;
 }

+a.ui.primary.label:hover,
 .ui.primary.button:hover,
 .ui.primary.buttons .button:hover {
-  background-color: var(--color-primary) !important;
+  background-color: var(--color-primary-hover) !important;
  color: var(--color-primary-contrast) !important;
 }

-/* Small buttons
- * e.g. HTTP/SSH clone buttons in repo homepage. */
-.ui.basic.primary.button,
-.ui.basic.primary.buttons .button {
-  box-shadow: none !important;
-}
-
-.ui.menu,
-.ui.vertical.menu {
-  border-color: var(--color-secondary-alpha-30) !important;
-}
-
-/* Vertical menu.
- * Used in: /issues */
-.ui.vertical.menu {
-  padding: var(--spacer-1);
-  border-radius: var(--border-radius);
-}
-
-/* Vertical menu: active item.
- * Gitea adds a "primary" class to what would be the active item. */
-.ui.vertical.menu > .item.primary {
-  background-color: var(--color-active) !important;
-  box-shadow: none !important;
-}
-
-/* Dropdown menus.
- * e.g. user menu. */
-.ui.dropdown .menu {
-  border-radius: var(--border-radius) !important;
-  box-shadow: var(--box-shadow-dropdown-menu) !important;
-}
-
-/* Replace gitea's hardcoded border-radius with variables. */
-.ui.compact.menu {
-  border-radius: var(--border-radius-outer);
-}
-
-.ui.compact.menu>.item:first-child {
-  border-radius: var(--border-radius) 0 0 var(--border-radius);
-}
-
-.ui.compact.menu>.item:last-child {
-  border-radius: 0 var(--border-radius) var(--border-radius) 0;
-}
-
-.ui.menu.new-menu {
-  border-color: var(--color-secondary-alpha-50) !important;
-}
-
-/* Top navigation bar.
- * e.g. Issues, Pull Requests, etc. */
-.ui.menu.bar {
-  border-color: var(--color-border);
-}
-
-.ui.menu .item>.label {
-  color: var(--color-label-text);
-}
-
-.ui.tabular.menu {
-  border-color: var(--color-border);
-}
-
-.ui.breadcrumb a {
-  color: var(--color-text);
-}
-
-/* Cards. */
-.ui.cards>.card .meta,
-.ui.card .meta {
-  color: var(--color-text-dark-2);
-}
-
-.ui.card.card-with-icon .icon svg {
-  margin: 0 var(--spacer) 0 0;
-  width: 50px;
-  opacity: .7;
-}
-
-/* Users/Organizations list. */
-/* Fix alignment issue since */
-.ui.user.list img.avatar,
-.ui.user.list img.avatar+.content {
-  display: inline-block;
-}
-
-.ui.user.list img.avatar {
-  position: relative;
-  top: 3px;
-  vertical-align: initial !important;
-}
-
-.ui.user.list .content {
-  margin-left: var(--spacer-2);
-  width: auto;
-}
-
-.ui.user.list .content .description .svg {
-  margin-right: var(--spacer-1);
-  position: relative;
-  top: 2px;
-}
-
-.issue.list>.item+.item {
-  border-color: var(--color-border);
-}
-
-/* Divider. */
-.ui.divider:not(.vertical, .horizontal) {
-  border-top-color: var(--color-border) !important;
-}
-
-/* Homepage. */
-.home a {
-  color: var(--color-accent);
+.ui.primary.label {
+  background-color: var(--color-primary-bg) !important;
+  border-color: var(--color-primary-bg) !important;
+  color: var(--color-primary) !important;
 }

 /* (from arc-green)
--- a/public/assets/img/apple-touch-icon.png
+++ b/public/assets/img/apple-touch-icon.png
--- a/public/assets/img/avatar_default.png
+++ b/public/assets/img/avatar_default.png
--- a/public/assets/img/favicon.png
+++ b/public/assets/img/favicon.png
--- a/public/assets/img/favicon.svg
+++ b/public/assets/img/favicon.svg
--- a/public/assets/img/logo.png
+++ b/public/assets/img/logo.png
--- a/public/assets/img/logo.svg
+++ b/public/assets/img/logo.svg
--- a/public/assets/img/thumb_blender.jpg
+++ b/public/assets/img/thumb_blender.jpg
--- a/public/assets/img/thumb_flamenco.jpg
+++ b/public/assets/img/thumb_flamenco.jpg
--- a/public/assets/img/thumb_manual.jpg
+++ b/public/assets/img/thumb_manual.jpg
--- a/public/fonts/Heebo-VariableFont_wght.ttf
+++ b/public/fonts/Heebo-VariableFont_wght.ttf
--- a/templates/blender_components/card_modules.tmpl
+++ b/templates/blender_components/card_modules.tmpl
@@ -5,12 +5,12 @@
      <p>Blender development is split into the following modules and projects.</p>
      <ul class="mb-0">
        <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Animation & Rigging">Animation & Rigging</a></li>
-        <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Asset Browser">Asset Browser</a></li>
+        <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Asset System">Asset System</a></li>
        <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Core">Core</a></li>
        <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Grease Pencil">Grease Pencil</a></li>
        <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Modeling">Modeling</a></li>
        <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Nodes & Physics">Nodes & Physics</a></li>
-        <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Pipeline, Assets & I/O">Pipeline, Assets & I/O</a></li>
+        <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Pipeline & I/O">Pipeline & I/O</a></li>
        <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Platforms, Builds, Tests & Devices">Platforms, Builds, Tests & Devices</a></li>
        <li>
          Python & Add-ons
@@ -23,8 +23,8 @@
        <li>
          Rendering
          <ul>
-            <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: EEVEE & Viewport">EEVEE & Viewport</a></li>
            <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Render & Cycles">Render & Cycles</a></li>
+            <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Viewport & EEVEE">Viewport & EEVEE</a></li>
          </ul>
        </li>
        <li><a href="{{AppSubUrl}}/blender/blender/wiki/Module: Sculpt, Paint & Texture">Sculpt, Paint & Texture</a></li>
--- a/templates/blender_components/card_projects.tmpl
+++ b/templates/blender_components/card_projects.tmpl
@@ -1,27 +1,67 @@
 <div class="ui fluid card" style="width: 100%;">
  <div class="content">
-    <h3>Ongoing Projects</h3>
-    <p>Focused activities to advance Blender.</p>
-
-    <div class="description">
-      <ul>
-        <li>
-          <a href="https://code.blender.org/2022/11/the-future-of-character-animation-rigging/">
-            The Future of Character Animation
+    <div class="ui grid">
+      <div class="eight wide column">
+        <h3>Ongoing Projects</h3>
+      </div>
+      <div class="eight wide column right" style="text-align: right">
+        <h3>
+          <a href="{{AppSubUrl}}/blender/blender/">
+            <svg data-v-9113ce96="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"
+              class="svg octicon-repo repo-list-icon" style="margin-top: .333rem;">
+              <path
+                d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.5 2.5 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.5 2.5 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.25.25 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z">
+              </path>
+            </svg>
+            blender/blender
          </a>
-        <li>
-          <a href="https://code.blender.org/2022/12/brush-assets-workflow/">
-            Brush Assets
-          </a>
-        </li>
-      </ul>
+        </h3>
+      </div>
    </div>
-  </div>
-  <div class="extra content">
-    <span class="right floated">
-      <a href="https://code.blender.org">
-        See all articles {{svg "octicon-chevron-right" 18}}
-      </a>
-    </span>
+
+    <table class="ui celled striped table">
+      <thead>
+        <tr>
+          <th>Project</th>
+          <th>Description</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <a href="{{AppSubUrl}}/blender/blender/projects/30">Brush Assets</a>
+          </td>
+          <td>
+            Unified, flexible brush management.
+          </td>
+          <td>
+            <a href="https://devtalk.blender.org/t/brush-assets-prototype-feedback/33568">Feedback Wanted</a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a href="https://projects.blender.org/blender/blender/projects/6">Grease Pencil v3</a>
+          </td>
+          <td>
+            Improved workflows for 2D design and animation.
+          </td>
+          <td>
+            <a href="https://projects.blender.org/blender/blender/projects/6">Under Development</a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a href="https://developer.blender.org/docs/features/animation/animation_system/baklava/">Layered Animation</a>
+          </td>
+          <td>
+            Part of the new animation system roadmap.
+          </td>
+          <td>
+            <a href="https://devtalk.blender.org/tag/animation-rigging">Under Development</a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
  </div>
 </div>
--- a/templates/blender_components/card_releases.tmpl
+++ b/templates/blender_components/card_releases.tmpl
@@ -6,23 +6,27 @@
    <div class="description">
      <ul>
        <li>
-          <a href="{{AppSubUrl}}/blender/blender/milestone/7">Blender 4.0</a>
-          — <strong>Bcon2</strong>: Improve and stabilize
+          <a href="{{AppSubUrl}}/blender/blender/milestone/24">Blender 4.4</a>
+          — <strong>Alpha</strong>: New features and changes
+        </li>
+        <li>
+          <a href="{{AppSubUrl}}/blender/blender/milestone/21">Blender 4.3</a>
+          — Released Nov 19, 2024
+        </li>
+        <li>
+          <a href="{{AppSubUrl}}/blender/blender/milestone/19">Blender 4.2 LTS</a>
+          — Released Jul 16, 2024
        </li>
        <li>
          <a href="{{AppSubUrl}}/blender/blender/milestone/5">Blender 3.6 LTS</a>
-          — Released on Jun 27, 2023
-        </li>
-        <li>
-          <a href="{{AppSubUrl}}/blender/blender/milestone/3">Blender 3.3 LTS</a>
-          — Released on Sep 7, 2022
+          — Released Jun 27, 2023
        </li>
      </ul>
    </div>
  </div>
  <div class="extra content">
    <span class="right floated">
-      <a href="https://wiki.blender.org/wiki/Process/Release_Cycle">
+      <a href="https://developer.blender.org/docs/handbook/release_process/release_cycle/">
        Read more {{svg "octicon-chevron-right" 18}}
      </a>
    </span>
--- a/templates/custom/body_inner_pre.tmpl
+++ b/templates/custom/body_inner_pre.tmpl
@@ -1,47 +1,49 @@
+<!-- @build Blender Web Assets v2.0.0-beta.2 - Do not remove comment -->
 <style>
-  /* This style block is copied across all sites using the developer navbar.
-   * For custom styling on this website, add a <style> block after this one. */
-
  /* Variables. */
  .nav-global {
    -webkit-font-smoothing: antialiased;

-    --nav-global-color-bg: hsl(213, 10%, 14%);
-    --nav-global-color-text: hsl(213, 5%, 64%);
-    --nav-global-color-text-secondary: hsl(213, 5%, 44%);
-    --nav-global-color-text-highlight: hsl(213, 5%, 84%);
-    --nav-global-color-text-hover: white;
-    --nav-global-color-text-active: white;
+    /*
+    *Variables come from, and match partial _variables, and are prefixed with 'bwa-'.
+    *Sizes must be defined in pixels as default rem-sizing might vary in projects.
+    */

-    --nav-global-color-primary: hsl(204, 98%, 54%);
-    --nav-global-color-primary-bg: hsla(204, 100%, 46%, .1);
+    --bwa-color-bg-primary: hsl(213, 10%, 21%);
+    --bwa-color-bg-tertiary: hsl(213, 10%, 14%);

-    --nav-global-color-button-bg-hover: hsl(213, 10%, 24%);
-    --nav-global-color-button-text: var(--nav-global-color-text);
+    --bwa-color-text: hsl(213, 10%, 80%);
+    --bwa-color-text-primary: hsl(213, 10%, 98%);

-    --nav-global-color-menu-bg: var(--nav-global-color-bg);
-    --nav-global-color-menu-border: hsl(213, 10%, 18%);
+    /* Colours Components. */
+    --bwa-border-color: hsla(213, 10%, 80%, .15);

-    --nav-global-color-menu-zindex: 1040;
+    --bwa-btn-color-bg-hover: hsl(213, 10%, 30%);

-    --nav-global-box-shadow-menu: 0px 5px 15px -2px rgba(0, 0, 0, 0.33), 0px 5px 15px -5px rgba(0, 0, 0, 0.33);
-    --nav-global-box-shadow-menu-item: 0px 1px 4px 0px rgba(0, 0, 0, 0.05), 0px 15px 20px -1px rgba(0, 0, 0, 0.025);
+    /* Colours Status. */
+    --bwa-color-accent: hsl(204deg, 100%, 50%);
+    --bwa-color-accent-bg: hsla(204deg, 100%, 50%, .1);
+    --bwa-color-accent-bg-hover: hsla(204deg, 100%, 50%, .2);

-    --nav-global-navbar-height: var(--navbar-primary-height, 56px);
+    --bwa-border-radius: 6px;
+    --bwa-border-radius-lg: 12px;

-    --nav-global-spacer: 15px;
-    --nav-global-spacer-sm: 10px;
-    --nav-global-spacer-xs: 5px;
+    --bwa-transition-speed: 150ms;

-    --nav-global-border-radius: 6px;
-    --nav-global-border-radius-lg: 10px;
+    --bwa-zindex-dropdown: 1040;
+    --bwa-zindex-fixed: 1030;

-    --nav-global-button-height: 35px;
-    --nav-global-link-padding-x: var(--nav-global-spacer);
-    --nav-global-link-padding-y: var(--nav-global-spacer-sm);
+    /* Grid. */
+    --bwa-spacer: 16px;
+    --bwa-spacer-1: calc(var(--bwa-spacer) * 0.25);
+    --bwa-spacer-2: calc(var(--bwa-spacer) * 0.5);
+    --bwa-spacer-3: var(--bwa-spacer);

-    --nav-global-font-size: 14px;
-    --nav-global-transition-speed: 150ms;
+    /* Type. */
+    --bwa-fs-base: 14px;
+
+    /* Components. */
+    --bwa-navbar-zindex: calc(var(--bwa-zindex-fixed) + 1);
  }

  /* Reset. */
@@ -50,8 +52,6 @@
  .nav-global :not(svg|*),
  .nav-global *::before,
  .nav-global *::after {
-    -webkit-box-sizing: border-box;
-
    all: unset;
    display: revert;
    box-sizing: border-box;
@@ -64,17 +64,17 @@
  .nav-global * {
    -webkit-text-size-adjust: 100%;

-    font-family: 'Heebo', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-variation-settings: 'wght' 400;
    font-weight: normal;
  }

  .nav-global {
-    background-color: var(--nav-global-color-bg);
-    color: var(--nav-global-color-text);
+    background-color: var(--bwa-color-bg-tertiary);
+    color: var(--bwa-color-text);
    display: flex;
    position: relative;
-    z-index: var(--zindex-fixed);
+    z-index: var(--bwa-navbar-zindex);
  }

  .nav-global h3,
@@ -102,11 +102,12 @@
  .nav-global nav {
    align-items: center;
    display: flex;
-    line-height: var(--nav-global-font-size);
-    font-size: var(--nav-global-font-size);
-    height: var(--nav-global-navbar-height);
+    line-height: var(--bwa-fs-base);
+    font-size: var(--bwa-fs-base);
+    justify-content: space-between;
+    min-height: calc(var(--bwa-spacer) * 4);
    margin: 0 auto;
-    padding: 0 var(--nav-global-spacer);
+    padding: 0 var(--bwa-spacer);
    position: relative;
  }

@@ -115,23 +116,34 @@
    color: inherit;
    cursor: pointer;
    text-decoration: none;
-    transition: background-color var(--nav-global-transition-speed) ease-out, color var(--nav-global-transition-speed) ease-out;
+    transition: background-color var(--bwa-transition-speed) ease-out, color var(--bwa-transition-speed) ease-out;
+  }
+
+  .nav-global-nav-links {
+    flex-grow: 1;
+  }
+
+  .nav-global-nav-links a:not(.dropdown-item) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
  }

  .nav-global a:not(.dropdown-item):hover {
-    color: var(--nav-global-color-text-hover);
+    color: var(--bwa-color-text-primary);
  }

  /* Navigation items. */
-  .nav-global nav > ul {
+  .nav-global nav>ul {
+    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }

-  .nav-global nav > ul,
-  .nav-global nav > ul > li,
-  .nav-global nav > ul > li > a,
+  .nav-global nav>ul,
+  .nav-global nav>ul>li,
+  .nav-global nav>ul>li>a,
  .nav-global-apps-dropdown-container {
    align-items: center;
    display: inline-flex;
@@ -142,98 +154,143 @@
    position: relative;
  }

-  .nav-global nav > ul > li > a {
-    padding: var(--nav-global-link-padding-y) var(--nav-global-link-padding-x);
+  .nav-global nav>ul>li>a {
+    padding: var(--bwa-spacer-2);
  }

-  .nav-global nav > a.is-active,
-  .nav-global nav > a.is-active svg,
-  .nav-global nav > ul > li > a.is-active,
-  .nav-global .nav-global-link-active,
-  .nav-global .nav-global-link-active svg {
-    color: var(--nav-global-color-text-active) !important;
-    fill: var(--nav-global-color-text-active);
-    font-variation-settings: 'wght' 500;
+  @media (min-width: 1320px) {
+    .nav-global nav>ul>li>a {
+      padding-left: var(--bwa-spacer);
+      padding-right: var(--bwa-spacer);
+    }
+  }
+
+  .nav-global nav>a.is-active,
+  .nav-global nav>a.is-active svg,
+  .nav-global nav>ul>li>a.is-active {
+    color: var(--bwa-color-text-primary) !important;
+    fill: var(--bwa-color-text-primary);
+    font-variation-settings: 'wght', 500;
+    font-weight: bold;
  }

  .nav-global .nav-global-links-right {
-    margin-left: auto;
+    flex-wrap: nowrap;
+    gap: 0 var(--bwa-spacer-2);
  }

  /* Logo. */
  .nav-global a.nav-global-logo {
-    margin-right: var(--nav-global-spacer);
+    margin-right: var(--bwa-spacer);
    position: relative;
    top: 2px;
+    white-space: nowrap;
  }

  .nav-global a.nav-global-logo strong {
-    margin-inline: var(--nav-global-spacer-sm);
+    margin-inline: var(--bwa-spacer-2);
    font-size: 18px;
  }

-  .nav-global .nav-global-logo svg {
+  .nav-global .nav-global-logo svg,
+  .nav-global .nav-global-logo img {
    height: 21px;
+    pointer-events: none;
  }

  .nav-global a.nav-global-logo svg {
    position: relative;
-    top: -4px;
+    top: calc(var(--bwa-spacer-1) * -1);
  }

  .nav-global svg {
-    fill: var(--nav-global-color-text);
-    transition: fill var(--nav-global-transition-speed) ease-out;
+    fill: var(--bwa-color-text);
+    transition: fill var(--bwa-transition-speed) ease-out;
  }

  .nav-global .nav-global-logo:hover svg {
-    fill: white;
+    fill: var(--bwa-color-text-primary);
+  }
+
+  .nav-global .nav-global-logo.is-active,
+  .nav-global .nav-global-logo.is-active svg,
+  // TODO: make classes 'is-active' and 'nav-global-btn-active' consistent
+  .nav-global button.nav-global-btn-active svg {
+    color: var(--bwa-color-text-primary);
+    fill: var(--bwa-color-text-primary);
  }

  /* Apps button. */
+  .nav-global {
+    --bwa-nav-global-btn-height: calc(var(--bwa-spacer) * 2.25);
+  }
+
  .nav-global button,
  .nav-global .nav-global-btn {
    -webkit-appearance: button;

    align-items: center;
    background-color: transparent;
-    border-radius: var(--nav-global-border-radius);
+    border-radius: var(--bwa-border-radius);
    border: 0;
-    color: var(--nav-global-color-button-text);
+    color: var(--bwa-btn-color-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
-    height: var(--nav-global-button-height);
+    height: var(--bwa-nav-global-btn-height);
    margin: 0;
    outline: 0;
    overflow: visible;
-    padding: var(--nav-global-spacer-xs) var(--nav-global-spacer);
+    padding: var(--bwa-spacer-1) var(--bwa-spacer-2);
    text-transform: none;
-    transition: background-color var(--nav-global-transition-speed) ease-out, color var(--nav-global-transition-speed) ease-out, transform var(--nav-global-transition-speed) ease-out;
+    transition: background-color var(--bwa-transition-speed) ease-out, color var(--bwa-transition-speed) ease-out, transform var(--bwa-transition-speed) ease-out;
    white-space: nowrap;
  }

+  /* Button overrides. */
+  /*
+    *Button overrides for Web Assets button components for BWA projects.
+    */
+  .nav-global button,
+  .nav-global .btn {
+    height: var(--bwa-nav-global-btn-height);
+    line-height: 1;
+  }
+
+  .nav-global .btn-accent {
+    color: white !important;
+  }
+
+  .nav-global .nav-global-btn.nav-global-btn-primary {
+    padding-left: var(--bwa-spacer);
+    padding-right: var(--bwa-spacer);
+  }
+
  .nav-global button span,
  .nav-global .nav-global-btn span {
    white-space: nowrap;
  }

  .nav-global button:hover,
-  .nav-global .nav-global-btn:hover {
-    background-color: var(--nav-global-color-button-bg-hover);
-    color: var(--nav-global-color-text-hover);
+  .nav-global .nav-global-btn:hover,
+  .nav-global button.nav-global-btn-active,
+  .nav-global .nav-global-btn.nav-global-btn-active {
+    background-color: var(--bwa-btn-color-bg-hover);
+    color: var(--bwa-color-text-primary);
    cursor: pointer;
  }

-  .nav-global button.nav-global-btn-active,
-  .nav-global .nav-global-btn.nav-global-btn-active {
-    background-color: var(--nav-global-color-primary-bg);
-    color: var(--nav-global-color-primary);
+  .nav-global .nav-global-btn span {
+    margin-left: var(--bwa-spacer-2);
  }

-  .nav-global button.nav-global-btn-active svg,
-  .nav-global .nav-global-btn.nav-global-btn-active svg {
-    fill: var(--nav-global-color-primary);
+  .nav-global .nav-global-btn-primary {
+    background-color: var(--bwa-color-accent-bg);
+    color: var(--bwa-color-accent) !important;
+  }
+
+  .nav-global .nav-global-btn-primary:hover {
+    background-color: var(--bwa-color-accent-bg-hover);
  }

  .nav-global .nav-global-icon {
@@ -242,8 +299,12 @@
    width: 20px;
  }

-  .nav-global-icon-dropdown-toggle {
-    margin-left: var(--nav-global-spacer-xs);
+  .nav-global .nav-global-icon-alt {
+    transform: rotate(90deg);
+  }
+
+  .nav-global .dropdown-toggle.active {
+    color: var(--bwa-color-text-primary)
  }

  .nav-global button:hover svg,
@@ -253,18 +314,18 @@

  /* Apps dropdown menu. */
  .nav-global .nav-global-apps-menu {
-    background-color: var(--nav-global-color-menu-bg);
-    border-radius: var(--nav-global-border-radius-lg);
-    border: thin solid var(--nav-global-color-menu-border);
-    box-shadow: var(--nav-global-box-shadow-menu);
+    background-color: var(--bwa-color-bg-tertiary);
+    border-radius: var(--bwa-border-radius-lg);
+    border: thin solid var(--bwa-border-color);
+    box-shadow: 0 var(--bwa-spacer-1) var(--bwa-spacer) -2px rgba(0, 0, 0, 0.33), 0px var(--bwa-spacer-1) var(--bwa-spacer) calc(var(--bwa-spacer-1) * -1) rgba(0, 0, 0, 0.33);
    display: none;
-    padding: var(--nav-global-spacer-sm);
+    padding: var(--bwa-spacer-2);
    position: absolute;
    right: 0;
-    top: calc(100% + 15px);
+    top: calc(100% + var(--bwa-spacer));
    visibility: hidden;
    width: 640px;
-    z-index: var(--nav-global-color-menu-zindex);
+    z-index: var(--bwa-zindex-dropdown);
  }

  .nav-global .nav-global-dropdown.is-visible {
@@ -273,10 +334,11 @@
  }

  /* Tiny triangle in the corner. */
+  // TODO: consider removing for consistency
  .nav-global .nav-global-apps-menu::before {
-    background-color: var(--nav-global-color-menu-bg);
+    background-color: var(--bwa-color-bg-tertiary);
    border-radius: 3px;
-    border: 2px var(--nav-global-color-menu-bg) solid;
+    border: 2px var(--bwa-color-bg-tertiary) solid;
    content: '';
    display: block;
    height: .85rem;
@@ -291,15 +353,15 @@
  .nav-global .nav-global-apps-menu ul {
    border-bottom: 2px solid rgba(255, 255, 255, .05);
    display: grid;
-    gap: var(--nav-global-spacer-sm);
+    gap: var(--bwa-spacer-2);
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
-    margin: 0 0 var(--nav-global-spacer-xs) 0;
-    padding: var(--nav-global-spacer-xs) 0 var(--nav-global-spacer-sm) 0;
+    margin: 0 0 var(--bwa-spacer-1) 0;
+    padding: var(--bwa-spacer-1) 0 var(--bwa-spacer-2) 0;
  }

  .nav-global .nav-global-apps-menu ul>li>a {
-    border-radius: var(--nav-global-border-radius-lg);
+    border-radius: var(--bwa-border-radius-lg);
    display: flex;
    flex: 1;
    height: 100%;
@@ -307,45 +369,46 @@

  .nav-global .nav-global-apps-menu ul>li>a:hover {
    background-color: rgba(255, 255, 255, .05);
-    color: var(--nav-global-color-text-active);
-    box-shadow: var(--nav-global-box-shadow-menu-item);
+    color: var(--bwa-color-text-primary);
+    box-shadow: 0px 1px var(--bwa-spacer-1) 0 rgba(0, 0, 0, 0.05), 0 var(--bwa-spacer) 20px -1px rgba(0, 0, 0, 0.025);
  }

  .nav-global .nav-global-apps-menu ul>li>a:hover h4,
  .nav-global .nav-global-apps-menu ul>li>a:hover svg {
-    color: var(--nav-global-color-primary);
-    fill: var(--nav-global-color-primary);
+    color: var(--bwa-color-accent);
+    fill: var(--bwa-color-accent);
  }

  .nav-global .nav-global-apps-menu h3 {
    color: white;
    display: inline-block;
-    font-size: 13px;
-    line-height: 18px;
+    font-size: 12px;
+    line-height: var(--bwa-spacer);
    margin: 0;
+    margin-top: 2px;
    opacity: .3;
-    padding-left: var(--nav-global-spacer);
+    padding-left: var(--bwa-spacer);
  }

  .nav-global .nav-global-apps-menu h4 {
-    color: var(--nav-global-color-text-highlight);
-    font-size: 17px;
-    line-height: 18px;
-    margin: var(--nav-global-spacer-xs) 0 0;
-    padding: var(--nav-global-spacer-sm) var(--nav-global-spacer) 0;
-    transition: color var(--nav-global-transition-speed) ease-out;
+    color: var(--bwa-color-text-primary);
+    font-size: 18px;
+    line-height: 20px;
+    margin: var(--bwa-spacer-1) 0 0;
+    padding: var(--bwa-spacer-2) var(--bwa-spacer) 0;
+    transition: color var(--bwa-transition-speed) ease-out;
  }

  .nav-global .nav-global-apps-menu p {
-    font-size: 15px;
+    font-size: var(--bwa-fs-base);
    line-height: 20px;
    margin: 0;
    opacity: .8;
-    padding: var(--nav-global-spacer-xs) var(--nav-global-spacer) var(--nav-global-spacer-sm);
+    padding: var(--bwa-spacer-1) var(--bwa-spacer) var(--bwa-spacer-2);
  }

  .nav-global .nav-global-apps-menu figure {
-    margin: var(--nav-global-spacer) 0 0 var(--nav-global-spacer);
+    margin: var(--bwa-spacer) 0 0 var(--bwa-spacer);
  }

  .nav-global .nav-global-apps-menu ul>li>a svg {
@@ -362,7 +425,7 @@

  .nav-global .nav-global-apps-menu-section-donate a svg {
    fill: hsl(352, 90%, 62%) !important;
-    transition: transform var(--nav-global-transition-speed) ease-out;
+    transition: transform var(--bwa-transition-speed) ease-out;
  }

  .nav-global .nav-global-apps-menu-section-donate ul>li:first-child>a {
@@ -382,107 +445,96 @@
    color: white;
  }

-/* Mobile. */
-.nav-global button.nav-global-logo {
-  display: none;
-  visibility: hidden;
-}
-
-@media (max-width: 767px) {
-
-  .nav-global-apps-dropdown-container,
-  .nav-global a.nav-global-logo {
-    display: none;
-  }
-
+  /* Mobile. */
  .nav-global button.nav-global-logo {
-    display: block;
-    visibility: visible;
-  }
-
-  .nav-global .nav-global-nav-links {
-    align-items: flex-start;
-    background-color: var(--nav-global-color-menu-bg);
-    border-radius: var(--nav-global-border-radius-lg);
    display: none;
-    flex-direction: column;
-    left: 1rem;
-    padding: 0 var(--nav-global-spacer-sm);
-    position: absolute;
-    top: calc(100% + .5rem);
-    visibility: visible;
-    width: 10rem;
-    z-index: var(--nav-global-color-menu-zindex);
+    visibility: hidden;
  }

-  .nav-global .nav-global-nav-links.is-visible {
-    display: flex;
-  }
+  @media (max-width: 767px) {
+    .nav-global-apps-dropdown-container,
+    .nav-global a.nav-global-logo {
+      display: none;
+    }

-  .nav-global .nav-global-nav-links::before {
-    background-color: var(--nav-global-color-menu-bg);
-    border-radius: 3px;
-    border: 2px var(--nav-global-color-menu-bg) solid;
-    content: '';
-    display: block;
-    height: 0.8rem;
-    position: absolute;
-    left: 1.5rem;
-    top: -0.133rem;
-    transform: rotate(45deg);
-    width: 1rem;
-    z-index: -1;
-  }
+    .nav-global button.nav-global-logo {
+      display: flex;
+      visibility: visible;
+    }

-  .nav-global nav>ul {
-    height: initial;
-  }
+    .nav-global button.nav-global-logo strong,
+    .nav-global button.nav-global-logo svg {
+      margin-right: var(--bwa-spacer-2)
+    }

-  .nav-global .nav-global-nav-links>li {
-    border-bottom: 2px solid rgba(255, 255, 255, .05);
-    width: 100%;
-  }
+    .nav-global .nav-global-nav-links {
+      align-items: flex-start;
+      background-color: var(--bwa-color-bg-primary);
+      border-radius: 6px;
+      display: none;
+      flex-direction: column;
+      height: auto;
+      padding: var(--bwa-spacer-1);
+      position: absolute;
+      top: 72px;
+      visibility: visible;
+      z-index: var(--bwa-zindex-dropdown);
+    }

-  .nav-global .nav-global-nav-links>li:last-child {
-    border: none;
-  }
+    .nav-global .nav-global-nav-links.is-visible {
+      display: flex;
+    }

-  .nav-global .nav-global-nav-links>li>a {
-    padding-inline: 0;
-    width: 100%;
-  }
-}
-</style>
+    .nav-global .nav-global-nav-links li {
+      align-items: center;
+      display: flex;
+      margin-bottom: var(--bwa-spacer-1);
+      width: 100%;
+    }

-<style>
-  /* Custom styling for projects.blender.org */
-  /* Make sure to start every line with ".nav-global"
-   * so changes affect the developer navbar only. */
+    .nav-global .nav-global-nav-links li:last-child {
+      margin-bottom: 0;
+    }

-  /* Limit navbar width on large screens. */
-  @media (min-width: 1200px) {
-    [role="main"] > .dashboard-navbar,
-    .full.height > .menu.bar > [role="navigation"],
-    .nav-global .nav-global-container {
-      max-width: 1170px;
+    .nav-global .nav-global-nav-links li a {
+      border-radius: 6px;
+      color: var(--bwa-color-text);
+      display: inline-flex;
+      flex: 1;
+      line-height: initial;
+      padding: var(--bwa-spacer-2) var(--bwa-spacer);
+      transition: background-color var(--bwa-transition-speed) var(--bwa-transition-timing-fast), color var(--bwa-transition-speed) var(--bwa-transition-timing-fast);
+      text-decoration: none;
+      white-space: nowrap;
+      width: 100%;
+    }
+
+
+    .nav-global .nav-global-nav-links li a:hover,
+    .nav-global .nav-global-nav-links li a.nav-global-link-active {
+      background-color: var(--bwa-color-accent-bg);
+      color: var(--bwa-color-accent);
+      text-decoration: none;
    }
  }

-  /* Override Gitea's default navbar height. */
-  #navbar {
-    min-height: 46px;
+  .nav-global .nav-global-nav-links li a.nav-global-link-active {
+    font-variation-settings: 'wght' 700;
+    font-weight: bold;
  }

-  /* Hide the site logo. */
-  #navbar .item:first-child {
-    display: none;
-  }
+  /* Site-specific tweaks. */
+  /* Make sure to start every line with ".nav-global"
+  * so changes affect the developer navbar only. */

-  /* Fix alignment of text in dropdown items. */
-  .ui.dropdown>.text {
-    position: relative;
-    top: -2px;
+  /* Limit navbar width on large screens (optional). */
+  /*
+  @media (min-width: 1380px) { // grid breakpoint 'xl'
+    .nav-global .nav-global-container {
+      max-width: var(--container-width);
+    }
  }
+  */
 </style>

 <div class="nav-global">
@@ -492,26 +544,28 @@
        <svg fill-rule="nonzero" viewBox="0 0 200 162.05">
          <path
            d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z" />
-          <strong>Developer</strong>
        </svg>
+        <strong>Developer</strong>
      </a>

      <button class="nav-global-logo js-dropdown-toggle" data-toggle-menu-id="nav-global-nav-links">
-        <svg fill-rule="nonzero" viewBox="0 0 850.2 162.05">
-          <path d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z" />
-          <path d="M829.17 133.76h-15.9V64.39h15.13l.77 13.59zM850.07 79q-1.47-.25-3.14-.38-1.6-.13-3.2-.13-5.26 0-8.8 1.92-3.45 1.86-5.25 5.39-1.8 3.46-2.11 8.2l-3.66.07q0-8.78 2.31-15.77 2.3-6.99 6.92-11.1 4.62-4.1 11.54-4.1 1.35 0 3.02.26 1.66.26 2.5.58zm-76.55 56.04q-10.32 0-17.82-4.42-7.5-4.5-11.55-12.06-4.03-7.63-4.03-17.05v-2.63q0-10.84 4.1-18.85 4.1-8.08 11.22-12.5 7.18-4.43 16.22-4.43 10 0 16.6 4.36 6.6 4.3 9.88 12 3.27 7.62 3.27 17.69V104h-53.67V92.53h37.96v-1.22q-.13-4.04-1.54-7.56-1.4-3.53-4.49-5.7-3.01-2.19-8.07-2.19-5.07 0-8.53 2.89-3.46 2.82-5.26 8.01-1.8 5.13-1.8 12.12v2.63q0 5.9 2.19 10.58 2.18 4.68 6.34 7.43 4.17 2.7 9.94 2.7 5.58 0 9.87-2.18 4.36-2.18 7.5-6.29l8.34 8.34q-3.27 4.93-9.87 8.97-6.54 3.98-16.8 3.98zm-88.67 25.39h-15.9V64.39h14.68l1.22 13.33zm45-60.72q0 10.13-3.13 18.15-3.08 7.95-9.1 12.56-5.97 4.62-14.63 4.62-8.72 0-14.49-4.23-5.7-4.3-8.9-11.8-3.21-7.5-4.43-17.12v-4.55q1.22-10.26 4.42-17.89 3.2-7.7 8.91-11.99 5.71-4.36 14.3-4.36 8.79 0 14.81 4.43 6.03 4.42 9.1 12.37 3.15 7.95 3.15 18.47zm-15.9-1.34q0-6.22-1.6-11.29-1.53-5.06-5-8.01-3.4-2.95-8.9-2.95-3.98 0-6.87 1.35-2.88 1.28-4.87 3.65-1.92 2.37-3.01 5.64-1.1 3.2-1.54 7.05v11.6q.77 4.62 2.56 8.47 1.8 3.85 5.13 6.16 3.4 2.24 8.72 2.24 5.51 0 8.91-3.08 3.4-3.14 4.94-8.2 1.54-5.13 1.54-11.29zm-122.51.06q0-10.13 3.84-18.08 3.85-7.95 11.03-12.57 7.25-4.68 17.38-4.68 10.25 0 17.5 4.68 7.24 4.62 11.03 12.57 3.84 7.95 3.84 18.08v1.35q0 10.06-3.84 18.08-3.79 7.95-11.03 12.56-7.18 4.62-17.38 4.62-10.19 0-17.43-4.62-7.25-4.61-11.1-12.56-3.84-8.02-3.84-18.08zm15.9 1.35q0 6.15 1.73 11.28 1.73 5.07 5.32 8.14 3.65 3.08 9.42 3.08 5.71 0 9.3-3.08 3.65-3.07 5.32-8.14 1.73-5.13 1.73-11.28v-1.35q0-6.09-1.73-11.22-1.67-5.13-5.32-8.2-3.65-3.15-9.42-3.15-5.71 0-9.36 3.14-3.6 3.08-5.33 8.21-1.66 5.13-1.66 11.22zm-29.69 33.98h-15.9V35.28h15.9zm-56.67 1.28q-10.33 0-17.83-4.42-7.5-4.5-11.54-12.06-4.04-7.63-4.04-17.05v-2.63q0-10.84 4.1-18.85 4.11-8.08 11.23-12.5 7.18-4.43 16.22-4.43 10 0 16.6 4.36 6.6 4.3 9.88 12 3.27 7.62 3.27 17.69V104H495.2V92.53h37.96v-1.22q-.13-4.04-1.54-7.56-1.41-3.53-4.49-5.7-3.01-2.19-8.08-2.19-5.06 0-8.52 2.89-3.47 2.82-5.26 8.01-1.8 5.13-1.8 12.12v2.63q0 5.9 2.18 10.58t6.35 7.43q4.17 2.7 9.94 2.7 5.58 0 9.87-2.18 4.36-2.18 7.5-6.29l8.34 8.34q-3.27 4.93-9.88 8.97-6.54 3.98-16.8 3.98zM464.3 64.39h16.48l-23.98 69.37h-10.26l1.03-12.57zm-12.25 57 .77 12.37h-10.19l-24.17-69.37H435zm-65.88 13.65q-10.32 0-17.82-4.42-7.5-4.5-11.54-12.06-4.04-7.63-4.04-17.05v-2.63q0-10.84 4.1-18.85 4.1-8.08 11.22-12.5 7.18-4.43 16.22-4.43 10 0 16.6 4.36 6.61 4.3 9.88 12 3.27 7.62 3.27 17.69V104H360.4V92.53h37.95v-1.22q-.12-4.04-1.53-7.56-1.42-3.53-4.5-5.7-3-2.19-8.07-2.19t-8.53 2.89q-3.46 2.82-5.26 8.01-1.8 5.13-1.8 12.12v2.63q0 5.9 2.19 10.58 2.18 4.68 6.35 7.43 4.16 2.7 9.93 2.7 5.58 0 9.88-2.18 4.36-2.18 7.5-6.29l8.33 8.34q-3.27 4.93-9.87 8.97-6.54 3.98-16.8 3.98zm-107.64-1.28.12-13.27h19.75q8.6 0 14.36-3.72 5.77-3.72 8.72-10.65 2.95-6.98 2.95-16.67v-4.87q0-9.94-2.95-16.8-2.88-6.86-8.59-10.45-5.7-3.59-13.91-3.59h-20.84V40.41h20.84q12.5 0 21.93 5.51 9.48 5.52 14.8 15.45 5.33 9.94 5.33 23.34v4.74q0 13.47-5.32 23.4-5.33 9.94-14.94 15.46-9.56 5.45-22.38 5.45zm9.23 0h-16.54V40.4h16.54z" />
+        <svg fill-rule="nonzero" viewBox="0 0 200 162.05">
+          <path
+            d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z" />
        </svg>
-        <svg class="nav-global-icon nav-global-icon-dropdown-toggle" height="100px" width="100px" viewBox="0 0 1000 1000">
-          <path d="m 206.53824,376.41174 a 42,42 0 0 1 71,-29 l 221,220 220,-220 a 42,42 0 1 1 59,59 l -250,250 a 42,42 0 0 1 -59,0 l -250,-250 a 42,42 0 0 1 -12,-30 z"/>
+        <strong>Developer</strong>
+        <svg class="nav-global-icon nav-global-icon-dropdown-toggle" height="100" width="100" viewBox="0 0 1000 1000">
+          <path
+            d="m 206.53824,376.41174 a 42,42 0 0 1 71,-29 l 221,220 220,-220 a 42,42 0 1 1 59,59 l -250,250 a 42,42 0 0 1 -59,0 l -250,-250 a 42,42 0 0 1 -12,-30 z" />
        </svg>
      </button>

-      <ul class="nav-global-nav-links nav-global-dropdown js-dropdown-menu" id="nav-global-nav-links">
+      <ul class="nav-global-nav-links nav-global-dropdown" id="nav-global-nav-links">
        <li>
          <a href="https://projects.blender.org" class="is-active">Projects</a>
        </li>
        <li>
-          <a href="https://wiki.blender.org">Docs</a>
+          <a href="https://developer.blender.org/docs/">Docs</a>
        </li>
        <li>
          <a href="https://code.blender.org">Blog</a>
@@ -528,9 +582,9 @@
        <li>
          <div class="nav-global-apps-dropdown-container">
            <button class="js-dropdown-toggle" data-toggle-menu-id="nav-global-apps-menu">
-              <svg class="nav-global-icon" height="100px" width="100px" viewBox="0 0 1000 1000">
+              <svg class="nav-global-icon" height="100" width="100" viewBox="0 0 1000 1000">
                <path
-                  d="m 150.5,899 a 50,50 0 0 1 -49,-50 V 749 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 450 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 151 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z"/>
+                  d="m 150.5,899 a 50,50 0 0 1 -49,-50 V 749 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 450 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 151 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z" />
              </svg>
            </button>

@@ -605,7 +659,7 @@
                  </a>
                </li>
                <li>
-                  <a href="https://wiki.blender.org/?utm_medium=nav-global" target="_blank">
+                  <a href="https://developer.blender.org/docs/?utm_medium=nav-global" target="_blank">
                    <div>
                      <h4>Documentation</h4>
                      <p>Guidelines, release notes and development docs.</p>
@@ -665,7 +719,6 @@
                </ul>
              </div>
            </div>
-
          </div>
        </li>
      </ul>
@@ -673,58 +726,88 @@
  </div>
 </div>

+<style>
+  /* Custom styling for projects.blender.org */
+  /* Make sure to start every line with ".nav-global"
+   * so changes affect the developer navbar only. */
+
+
+  /* TODO: remove if custom font 'Inter' is added to Gitea
+   * Don't try to load custom font 'Inter' */
+  .nav-global * {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  }
+
+  /* Limit navbar width on large screens. */
+  @media(min-width: 1200px) {
+    .nav-global .nav-global-container {
+      max-width: 1170px;
+    }
+  }
+
+  /* TODO: @web-assets incriease nav-global-logo height for better antialising on low pixel density screens
+   * .nav-global .nav-global-logo svg,
+   * .nav-global .nav-global-logo img {
+	 *   height: 22px;
+	 *   pointer-events: none;
+   *  }
+   */
+</style>
+
 <script>
-  const dropdownToggles = document.getElementsByClassName("js-dropdown-toggle");
-  const btnActiveClass = 'nav-global-btn-active';
-  const isVisibleClass = 'is-visible';
+  /* Simple dropdown toggle.
+  * Synced with 'navbar.js' manually. */
+  function dropdownToggle() {
+    let dropdownToggleBtn = this;
+    let dropdownMenuName;
+    let dropdownMenuItem;

-  /* Hide all dropdowns. */
-  function dropdownHideAll() {
-    const dropdownMenus = document.getElementsByClassName("js-dropdown-menu");
-
-    if (dropdownMenus) {
-      for (let i = 0; i < dropdownMenus.length; i++) {
-        dropdownMenus[i].classList.remove(isVisibleClass);
-      }
+    if (dropdownToggleBtn.hasAttribute('data-toggle-menu-id')) {
+      dropdownMenuName = dropdownToggleBtn.getAttribute('data-toggle-menu-id');
+      dropdownMenuItem = document.getElementById(dropdownMenuName);
+    } else {
+      dropdownMenuItem = dropdownToggleBtn.nextElementSibling;
    }

-    /* Remove styling from all dropdown toggles. */
-    for (let i = 0; i < dropdownToggles.length; i++) {
-      dropdownToggles[i].classList.remove(btnActiveClass);
+    if (!dropdownMenuItem) {
+      return;
    }
+
+    dropdownToggleBtn.classList.toggle('active');
+    dropdownMenuItem.classList.toggle('is-visible');
  }

-  for (let i = 0; i < dropdownToggles.length; i++) {
-    dropdownToggles[i].addEventListener("click", function (e) {
-      e.stopPropagation();
+  window.onload = function(e) {
+    const dropdownToggles = document.querySelectorAll('.js-dropdown-toggle, .js-show-toggle');

-      const dropdownId = this.getAttribute('data-toggle-menu-id');
-      const el = document.getElementById(dropdownId);
+    for (var i = 0; i < dropdownToggles.length; i++) {
+      dropdownToggles[i].addEventListener('click', dropdownToggle, false);
+    }

-      if (el) {
-        /* If the button is already active, remove styling. */
-        if (el.classList.contains(isVisibleClass)) {
-          dropdownHideAll();
-        } else {
-          /* Style button as active and show menu. */
-          this.classList.add(btnActiveClass);
-          el.classList.add(isVisibleClass);
+    /* Close all menus, to prevent multiple menus open at the same time. */
+    document.onclick = function (e) {
+      const targetMenuId = e.target.getAttribute('data-toggle-menu-id');
+      const targetMenuElement = document.getElementById(targetMenuId);
+
+      /* If the clicked element is not a menu, or it's not the menu
+      * that we are trying to open, close it. */
+      if (!e.target.classList.contains('.js-dropdown-toggle') || targetMenuElement && targetMenuElement.classList.contains('is-visible')) {
+        const dropdownMenus = document.querySelectorAll('.dropdown-menu, .js-dropdown-menu');
+
+        if (dropdownMenus.length == 0) { return };
+
+        for (var i = 0; i < dropdownMenus.length; i++) {
+          if (dropdownMenus[i].id && dropdownMenus[i].id != targetMenuId) {
+            dropdownMenus[i].classList.remove('is-visible', 'active');
+          }
        }
-      }
-    });
-  }

-  /* Hide all dropdowns when clicking anywhere except menus. */
-  document.body.addEventListener("click", function (e) {
-    if (!e.target.classList.contains("js-dropdown-menu")) {
-      dropdownHideAll();
+        for (var i = 0; i < dropdownToggles.length; i++) {
+          if (dropdownToggles[i].id && dropdownToggles[i].id != targetMenuId) {
+            dropdownToggles[i].classList.remove('is-active', 'active');
+          }
+        }
+      };
    }
-  });
-
-  /* Hide all dropdowns when pressing Esc. */
-  window.addEventListener('keydown', function (event) {
-    if (event.key === 'Escape') {
-      dropdownHideAll();
-    }
-  });
+  };
 </script>
--- a/templates/custom/extra_links.tmpl
+++ b/templates/custom/extra_links.tmpl
@@ -1,35 +1,42 @@
+<div class="ui dropdown jump item tooltip" data-content="Products">
+  Products
+  <span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
+  <div class="menu">
+    <a class="item" href="{{AppSubUrl}}/blender/blender/">Blender</a>
+    <a class="item" href="{{AppSubUrl}}/blender/blender-manual/">User Manual</a>
+    <a class="item" href="{{AppSubUrl}}/blender/blender-developer-docs/">Developer Documentation</a>
+    <div class="divider"></div>
+    <a class="item" href="{{AppSubUrl}}/infrastructure/blender-open-data/">Blender Benchmark</a>
+    <div class="divider"></div>
+    <a class="item" href="{{AppSubUrl}}/studio/">Blender Studio Tools</a>
+    <a class="item" href="{{AppSubUrl}}/studio/flamenco/">Flamenco</a>
+    <a class="item" href="{{AppSubUrl}}/studio/watchtower/">Watchtower</a>
+  </div>
+</div>
+
 <div class="ui dropdown jump item tooltip" data-content="Modules">
-  <span class="text">
-    Modules
-    <span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
-  </span>
+  Modules
+  <span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
  <div class="menu">
    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Animation & Rigging">Animation & Rigging</a>
-    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Asset Browser">Asset Browser</a>
+    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Asset System">Asset System</a>
    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Core">Core</a>
    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Grease Pencil">Grease Pencil</a>
    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Modeling">Modeling</a>
    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Nodes & Physics">Nodes & Physics</a>
-    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Pipeline, Assets & I/O">Pipeline, Assets & I/O</a>
+    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Pipeline & I/O">Pipeline & I/O</a>
    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Platforms, Builds, Tests & Devices">Platforms, Builds, Tests & Devices</a>
-
-    <div class="divider"></div>
-    <div class="header">Python & Add-ons</div>
    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Python API & Text Editor">Python API & Text Editor</a>
-    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Officially Maintained Add-ons">Officially Maintained Add-ons</a>
-    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Community Maintained Add-ons">Community Maintained Add-ons</a>
-    <div class="divider"></div>
-
-    <div class="header">Rendering</div>
-    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: EEVEE & Viewport">EEVEE & Viewport</a>
-    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Render & Cycles">Render & Cycles</a>
-    <div class="divider"></div>
-
    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Sculpt, Paint & Texture">Sculpt, Paint & Texture</a>
    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Triaging">Triaging</a>
    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: User Interface">User Interface</a>
    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: VFX & Video">VFX & Video</a>
+
+    <div class="divider"></div>
+    <div class="header">Rendering</div>
+    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Render & Cycles">Render & Cycles</a>
+    <a class="item" href="{{AppSubUrl}}/blender/blender/wiki/Module: Viewport & EEVEE">Viewport & EEVEE</a>
  </div>
 </div>

-<a class="item" href="{{AppSubUrl}}/blender/blender/issues/new?template=.gitea%2fissue_template%2fbug.yaml">{{.locale.Tr "Report a Bug"}}</a>
+<a class="item" href="{{AppSubUrl}}/blender/blender/issues/new?template=.gitea%2fissue_template%2fbug.yaml">Report a Bug</a>
--- a/templates/custom/header.tmpl
+++ b/templates/custom/header.tmpl
@@ -1,33 +1,9 @@
 <style>
-  /* bthree dark theme */
-  @font-face {
-    font-family: "Heebo";
-    src: url("/assets/fonts/Heebo-VariableFont_wght.ttf") format("truetype-variations");
-    font-weight: normal;
-    font-variation-settings: "wght" var(--font-weight);
-    font-style: normal
-  }
-
  :root {
-    /* Spacing. */
-    --spacer: 1rem;
-    --spacer-1: .25rem;
-    --spacer-2: .5rem;
-    --spacer-3: var(--spacer);
-    --spacer-4: 1.5rem;
-    --spacer-5: 3rem;
-
-    /* Override fonts. */
-    --fonts-override: 'Heebo', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    --font-weight-thin: 300;
-    --font-weight-bold: 600;
-
    --border-radius: .33rem;
-
-    --color-border: var(--color-secondary);
-
-    /* Transitions. */
    --transition-speed: 150ms;
+
+    --color-timeline: var(--color-secondary);
  }

  /* Light-theme specific. */
@@ -35,74 +11,38 @@
    --color-primary: hsl(204deg, 90%, 52%);
  }

-  /* Set weight variations. */
-  strong, b, h1, h2, h3, h4, h5, h6, .bold,
-  a.issue-title,
-  .ui.tabular.menu .active.item {
-    font-weight: normal !important;
-    font-variation-settings: "wght" var(--font-weight-bold);
-  }
-
-  .repository.view.issue .title .issue-title h1 {
-    font-variation-settings: "wght" var(--font-weight-thin);
-  }
-
-  @media (min-width: 1200px) {
-    /* Limit navbar width on large screens. */
-    .dashboard-navbar {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 1170px;
-    }
-  }
-
-  /* Revert the red color in dashboard eader buttons. */
+  /* Revert the red color in dashboard header buttons. */
  .dashboard.feeds .right.stackable.menu>.item.active,
  .dashboard.issues .right.stackable.menu>.item.active {
    color: unset;
  }

  /* Global tweaks (all themes) */
-  .ui.avatar {
+  /* Buttons. */
+  .ui.button,
+  a.ui.label {
+    transition: background-color var(--transition-speed), color var(--transition-speed);
+  }
+
+  /* Avatars. */
+  img.ui.avatar {
    border-radius: 50%;
  }

-  .ui.user.list .ui.avatar,
-  .ui.user.list .ui.avatar+.content {
-    display: inline-block;
-  }
-
-  /* Fix alignment and margin issues in avatars. */
-  .user.list img.avatar,
-  .comment-list .code-comment img.avatar,
-  .comment-list .comment img.avatar {
-    vertical-align: unset !important;
-  }
-
-  .user.list img.avatar,
-  .commit-list img.avatar,
-  .comment-list .code-comment img.avatar,
-  .comment-list .comment img.avatar,
-  .comment-list .timeline-item img.avatar {
-    margin-right: var(--spacer-2) !important;
-  }
-
-  .commit-list .author img.avatar {
-    margin-right: var(--spacer-3) !important;
-  }
-
-  /* Labels. e.g. issues count indicator in repo tabs. */
-  .ui.small.label {
-    border-radius: 2em;
-  }
-
  /* Hide the app logo (first link in "brand" div). */
  .following.bar #navbar .brand > a:first-child {
    display: none;
  }

-  .following.bar #navbar .brand #navbar-expand-toggle {
-    margin-left: var(--spacer-4);
+  /* Dim the "header" of sections in dropdown menus. */
+  .ui.dropdown .menu>.header:not(.ui) {
+    color: var(--color-text-light-3);
+  }
+
+  /* Homepage. */
+  /* By default Gitea colors links green */
+  .home a {
+    color: var(--color-primary);
  }

  /* Hide brand navbar completely when not in mobile. */
@@ -112,56 +52,12 @@
    }
  }

-  /* Notifications indicator. */
-  .notification_count {
-    border-radius: 0.6em;
-    font-size: 12px;
-    font-weight: normal !important;
-    font-variation-settings: "wght" var(--font-weight-bold);
-    line-height: unset;
-    margin-left: var(--spacer-1);
-    padding: 2px 4px;
-  }
-
-  /* Navigation tabs.
-  * e.g. Code, Issues pages in a repository. */
-  .ui.tabular.menu .item {
-    border: none;
-    border-bottom: 3px solid transparent;
-    border-radius: 0;
-    transition: border-bottom-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out;
-  }
-
-  .ui.tabular.menu .item:hover {
-    border-bottom-color: var(--color-text-dark);
-  }
-
-  .ui.tabular.menu .active.item {
-    background: transparent;
-    border: none;
-    border-bottom: 3px solid currentColor;
-    margin-bottom: unset;
-  }
-
-  .ui.tabular.menu .active.item:hover {
-    background: transparent;
-    border-color: var(--color-text-dark);
-    color: var(--color-text-dark);
+  /* Hide the navbar logo. */
+  #navbar #navbar-logo {
+    display: none;
  }

  /* Repository page. */
-  .repository .repo-title .repo-icon svg {
-    max-width: 22px;
-  }
-
-  .ui.table {
-    background: transparent;
-  }
-
-  .repository .ui.table a {
-    color: var(--color-text);
-  }
-
  .repository .file-view.markdown a {
    color: var(--color-primary);
  }
@@ -175,10 +71,6 @@
    color: currentColor;
  }

-  .ui.repo-topic.label {
-    border-radius: 2em;
-  }
-
  /* Repository stats. */
  .repository-summary-language-stats {
    height: unset;
@@ -190,18 +82,7 @@

  /* Repository: Activity page. */
  .stats-table {
-    border-radius: 2em;
    margin-bottom: var(--spacer);
-    overflow: hidden;
-  }
-
-  .issue.list {
-    border-radius: var(--border-radius);
-    border: thin solid var(--color-border);
-  }
-
-  .issue.list > .item {
-    padding: var(--spacer-2) var(--spacer) !important;
  }

  /* Hide branches from PR list. */
@@ -209,17 +90,6 @@
    display: none !important;
  }

-  .issue.list a.project,
-  .issue.list a.milestone {
-    margin-inline: var(--spacer-2) !important;
-  }
-
-  .issue.list a.project svg {
-    margin-right: var(--spacer-2) !important;
-    position: relative;
-    top: 2px;
-  }
-
  /* Footer. */
  footer {
    color: var(--color-footer-text);
@@ -255,6 +125,49 @@
  .restructuredtext section dl dt {
    font-style: normal;
  }
+
+  /* Alert blocks. */
+  blockquote.attention-note {
+    background-color: var(--color-info-bg);
+    border-left-color: var(--color-blue-dark-1);
+  }
+  strong.attention-note, span.attention-note {
+    color: var(--color-blue-dark-1);
+  }
+
+  blockquote.attention-tip {
+    background-color: var(--color-success-bg);
+    border-left-color: var(--color-success-text);
+  }
+  strong.attention-tip, span.attention-tip {
+    color: var(--color-success-text);
+  }
+
+  blockquote.attention-important {
+    background-color: var(--color-violet-dark-bg);
+    border-left-color: var(--color-violet-dark-1);
+  }
+
+  strong.attention-important, span.attention-important {
+    color: var(--color-violet-dark-1);
+  }
+
+  blockquote.attention-warning {
+    background-color: var(--color-warning-bg);
+    border-left-color: var(--color-warning-text);
+  }
+
+  strong.attention-warning, span.attention-warning {
+    color: var(--color-warning-text);
+  }
+
+  blockquote.attention-caution {
+    background-color: var(--color-error-bg);
+    border-left-color: var(--color-red-dark-1);
+  }
+  strong.attention-caution, span.attention-caution {
+    color: var(--color-red-dark-1);
+  }
 </style>

 <script defer data-domain="projects.blender.org" src="https://analytics.blender.org/js/script.js"></script>
--- a/templates/home.tmpl
+++ b/templates/home.tmpl
@@ -19,12 +19,12 @@
        <p>This portal hosts more than just the Blender sources, bug and patch tracker. Explore the other repositories and get involved!</p>
      </div>

+      {{template "blender_components/card_projects" .}}
      {{template "blender_components/card_repos" .}}

      <div class="ui stackable two column grid mb-4 pt-0">
        <div class="column">
            {{template "blender_components/card_releases" .}}
-            {{template "blender_components/card_projects" .}}
        </div>
        <div class="column">
            {{template "blender_components/card_modules" .}}
--- a/templates/user/dashboard/dashboard.tmpl
+++ b/templates/user/dashboard/dashboard.tmpl
@@ -4,57 +4,7 @@
 	<div class="ui container">
 		<div class="ui stackable grid">
 			<div class="ui container ten wide column">
-
-				<div class="ui">
-					<div class="ui stackable three column grid">
-						<div class="column">
-							<div class="ui card card-with-image card-with-icon">
-								<a href="{{AppSubUrl}}/blender/blender" class="image">
-									<img src="/assets/img/thumb_blender.jpg" style="width: 100%; height: 100%;">
-								</a>
-								<div class="content">
-									<a href="{{AppSubUrl}}/blender/blender">
-										<h4>Blender</h4>
-									</a>
-									<div class="description">
-										<p>The main repository for Blender's code and all its branches.</p>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="column">
-							<div class="ui card card-with-image card-with-icon">
-								<a href="{{AppSubUrl}}/blender/documentation" class="image">
-									<img src="/assets/img/thumb_manual.jpg" style="width: 100%; height: 100%;">
-								</a>
-								<div class="content">
-									<a href="{{AppSubUrl}}/blender/documentation">
-										<h4>User Manual</h4>
-									</a>
-									<div class="description">
-										<p>The official Blender manual, with references and examples.</p>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="column">
-							<div class="ui card card-with-image card-with-icon">
-								<a href="{{AppSubUrl}}/studio/flamenco" class="image">
-									<img src="/assets/img/thumb_flamenco.jpg" style="width: 100%; height: 100%;">
-								</a>
-								<div class="content">
-									<a href="{{AppSubUrl}}/studio/flamenco">
-										<h4>Flamenco</h4>
-									</a>
-									<div class="description">
-										<p>Free and open source render management software.</p>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
+				{{template "blender_components/card_projects" .}}
 			</div>
 			<div class="six wide column">
 				{{template "blender_components/card_releases" .}}
Author	SHA1	Message	Date
Márton Lente	1907fc951a	Fix: Template nav global icon dropdown toggle Change to inline SVG dropdown icon in navbar since project doesn't use Web Assets' icon set. Part of #9	2025-02-03 18:13:13 +01:00
Márton Lente	952b59ccc0	Chore: Update templawte nav-global markup to web-assets latest Part of #9	2025-02-03 16:18:15 +01:00
Márton Lente	8103dc5aec	Fix: Cleanup remove nav-global unused subcomponents list items Part of #9	2024-12-02 11:11:25 +01:00
Márton Lente	8e97fa7d45	Chore: Add style web-assets todo Part of #9	2024-12-02 10:42:42 +01:00
Márton Lente	844367b17f	Fix: Replace nav-global nav btn chevron for small screens Replace nav-global nav button's chevron icon from fontutti reference to inline SVG, as fontutti is not present in the project. Part of #9	2024-12-02 10:26:03 +01:00
Márton Lente	cbcd09fc69	Fix: Cleanup remove nav-global unused subcomponents Part of #9	2024-12-02 10:22:50 +01:00
Márton Lente	0e09625d98	Merge branch 'main' into ui/web-assets-v2-nav-global	2024-11-29 14:37:31 +01:00
Márton Lente	393f30f9ac	UI: Upgrade nav-global to latest web-assets v2 component v2.0.0-beta Part of #9	2024-11-29 14:31:41 +01:00
Bastien Montagne	206c4bdc08	Merge branch 'develop'	2024-11-27 18:34:02 +01:00
Bastien Montagne	72a13bdc74	Remove 'Asset' part from 'Pipeline & I/O' module 'Asset System' is now a "real" module.	2024-11-27 18:19:57 +01:00
Bastien Montagne	6a392a468c	Remove 'Asset' part from 'Pipeline & I/O' module 'Asset System' is now a "real" module.	2024-11-27 18:18:49 +01:00
Thomas Dinges	0b2490e115	Merge branch 'develop'	2024-11-19 15:53:53 +01:00
Thomas Dinges	a25a4813d9	Cards: Update for 4.3	2024-11-19 15:53:25 +01:00
Thomas Dinges	e36dfa2394	Merge branch 'develop'	2024-11-14 19:12:13 +01:00
Thomas Dinges	ea12833acf	Cards: Remove sculpting project and bump 4.3 to rc	2024-11-14 19:11:27 +01:00
Pablo Vazquez	201642f5db	Merge branch 'develop'	2024-10-15 17:52:13 +02:00
Pablo Vazquez	dc378e941c	Header Links: Add link to Developer Documentation Next to User Manual.	2024-10-15 17:51:20 +02:00
Pablo Vazquez	f5a39fd489	Header Links: Remove Add-ons links Remove links to: * Officially Maintained Add-ons * Community Maintained Add-ons Even though they may still be valid for 3.6 LTS, "Officially maintained" add-ons are now part of core, and "Community maintained" are not really maintained but moved to the Extensions platform.	2024-10-15 17:50:57 +02:00
Pablo Vazquez	7aa03b3ac1	Theme: Style menu header sections a little dimmer They are hard to read if they have the same color as all other links.	2024-10-15 17:48:24 +02:00
Thomas Dinges	2297a2dc75	Merge branch 'develop'	2024-10-10 12:23:38 +02:00
Thomas Dinges	6471fe4029	Ongoing Projects: Remove Extensions	2024-10-10 12:23:14 +02:00
Thomas Dinges	3e4becdaa3	Merge branch 'develop'	2024-10-02 12:49:11 +02:00
Thomas Dinges	6f183d9ab8	Update release cards for 4.3/4.4	2024-10-02 12:48:47 +02:00
Pablo Vazquez	c42c8214e9	Merge branch 'develop'	2024-09-04 15:17:28 +02:00
Pablo Vazquez	3826b50682	UI: Projects: Fix link to Sculpting Improvements	2024-09-04 15:17:18 +02:00
Pablo Vazquez	5766538848	Merge branch 'develop'	2024-09-04 15:07:57 +02:00
Pablo Vazquez	c80ae99e82	UI: Sort modules alphabetically	2024-09-04 15:07:43 +02:00
Pablo Vazquez	aedd4eec66	UI: Update Viewport & EEVEE module name The module has been renamed to follow Render & Cycles.	2024-09-04 15:05:12 +02:00
Pablo Vazquez	1cf1ca7b2f	UI: Projects: Remove EEVEE Next It's no longer a project, just good old EEVEE.	2024-09-04 15:04:30 +02:00
Pablo Vazquez	cf48a65b4e	UI: Releases: Shorten sentence about date It's still clear but with less text/noise.	2024-09-04 15:04:00 +02:00
Márton Lente	345c549da2	UI: Remove nav-global custom font Inter from font-stack Remove nav-global custom non-system font Inter from font-stack until Inter is not loaded for the entire UI. Part of #9	2024-08-19 12:47:39 +02:00
Márton Lente	d8f5e43cc2	Fix: Template custom component nav-global extra whitespace	2024-08-19 12:36:46 +02:00
Márton Lente	b47ddab672	Refactor: Cleanup and move web-assets navbar-global styles to markup script tag Move web-assets navbar-global styles to markup script tag, accordingly to component and web-assets instructions, to improve the component's portability. Part of #9	2024-08-19 12:30:19 +02:00
Márton Lente	db38fd6bbf	Fix: Post nav-global web-assets v2 component upgrade dropdown small screens Fix nav-global web-assets v2 component display issues on small screens after markup and style updates. Part of #9	2024-08-16 15:32:27 +02:00
Márton Lente	8532b5654e	UI: Upgrade nav-global to web-assets v2 component Upgrade nav-global markup and styles to web-assets v2's pre-compiled nav-global component to improve visual consistency with other sites.	2024-08-16 14:44:26 +02:00
Thomas Dinges	da25064cae	Merge branch 'develop'	2024-08-01 18:46:57 +02:00
Thomas Dinges	cddeafd6d9	Release cards: Change from BCon1 to Alpha.	2024-08-01 18:46:29 +02:00
Pablo Vazquez	4939a66de3	Merge branch 'develop'	2024-07-22 12:46:35 +02:00
Pablo Vazquez	a690061baf	Theme: Style alert blocks in bthree-dark theme Fixes #92	2024-07-22 12:45:32 +02:00
Pablo Vazquez	a91ef365d0	Theme: Style alert blocks in bthree-dark theme Fixes #92	2024-07-22 12:43:11 +02:00
Thomas Dinges	4046fb3138	Update release card for 4.2 LTS.	2024-07-16 15:26:08 +02:00
Thomas Dinges	929ae582ce	Update templates/blender_components/card_releases.tmpl	2024-07-10 16:09:25 +02:00
Francesco Siddi	d16b89f711	Fix typo card_projects.tmpl	2024-07-08 15:46:48 +02:00
Pablo Vazquez	d74c98c180	Merge branch 'develop'	2024-07-03 16:30:46 +02:00
Pablo Vazquez	ff0e16a2d1	Theme: Add missing code markup variable Add code markup variables missing in our theme. Fixes infrastructure/blender-projects-platform#88	2024-07-03 16:30:28 +02:00
Pablo Vazquez	9d58880934	Merge branch 'develop'	2024-07-01 13:02:16 +02:00
Pablo Vazquez	da8d0e876c	Theme: Add missing variables from upstream Add variables available in upstream but missing in our theme. Fixes infrastructure/blender-projects-platform#88	2024-07-01 13:00:33 +02:00
Brecht Van Lommel	878adcd989	Merge branch 'develop'	2024-06-20 10:35:17 +02:00
Thomas Dinges	8a094260e2	Update release card for Bcon3/Bcon1.	2024-06-05 12:45:50 +02:00
Thomas Dinges	0cdf137f88	Update release card for Bcon3/Bcon1.	2024-06-05 12:40:20 +02:00
Pablo Vazquez	829c083fbc	Cleanup: CSS and global styling In the latest releases, Gitea has fixed a lot of the styling issues we had manually fixed in the past. Additionally, the recent style adjustments they did look a lot better so it is better to remove our custom styling as much as possible, and follow stock Gitea. Making it easier to upgrade in the future. * Fix broken styling * Remove custom font * Cleanup unused variables * Add code comments	2024-05-30 12:18:04 +02:00
Pablo Vazquez	949885ab5e	Fix styling for tooltips and labels background Noticed by Brecht (thanks!) in Gitea 1.22	2024-05-30 10:43:21 +02:00
Francesco Siddi	d5133cebc5	Add Sculpting Improvements project	2024-05-29 21:20:49 +02:00
Brecht Van Lommel	8029efad98	Merge branch 'develop'	2024-05-29 19:14:57 +02:00
Brecht Van Lommel	e81dc72384	Fix: Broken user manual link	2024-05-29 19:14:15 +02:00
Pablo Vazquez	1375157807	Merge branch 'develop'	2024-05-28 16:33:59 +02:00
Pablo Vazquez	7597178483	Projects Card: Set Brush Assets to Feedback Wanted	2024-05-28 16:32:48 +02:00
Pablo Vazquez	6e99181b67	Projects Card: Display description instead of modules	2024-05-28 16:29:46 +02:00
Pablo Vazquez	ce02bb63cc	Fix typo in Products dropdown	2024-05-28 16:29:13 +02:00
Pablo Vazquez	8e8d4a5201	Homepage: Move list of ongoing projects up So it uses the full width and it's more visible what the team is working on.	2024-05-24 19:06:49 +02:00
Pablo Vazquez	d9630c65ef	Dashboard: Add list of ongoing projects	2024-05-24 19:06:09 +02:00
Pablo Vazquez	1740002e69	Projects Card: Update ongoing projects Use a table instead of a the <ul> with links to the blog posts.	2024-05-24 19:05:39 +02:00
Pablo Vazquez	8904b6b97f	Dashboard: Move large card links to header dropdown Move the cards "Blender, User Manual, Flamenco", to a "Products" dropdown in the header, together with other projects. We can add more in the future to give visibility to other projects.	2024-05-24 19:04:49 +02:00
Thomas Dinges	28dcdb41ee	Merge branch 'develop'	2024-05-02 10:34:07 +02:00
Thomas Dinges	a083144d04	Update release card for Bcon2	2024-05-02 10:33:49 +02:00
Márton Lente	b555bfe3c9	Docs: Update README with alternative setup with Docker Update README with alternative setup with Docker, detailing Docker-specific steps.	2024-04-25 16:24:05 +02:00
Márton Lente	71090ea488	UI: Hide the navbar logo in the secondary navbar (#8 ) Hide the redundant navbar logo in the secondary navbar that is already present in nav global. Reviewed-on: https://projects.blender.org/infrastructure/gitea-custom/pulls/8 Reviewed-by: Pablo Vazquez <pablovazquez@noreply.localhost>	2024-04-25 15:27:15 +02:00
Thomas Dinges	1f79ce586a	Release: Update card for 4.1	2024-03-26 14:27:24 +01:00
Thomas Dinges	daf629602e	Cards: Update 4.1 to Bcon4.	2024-03-13 16:04:41 +01:00
Thomas Dinges	5102b6441d	Update release cards for new release cycle	2024-02-07 13:17:31 +01:00
Brecht Van Lommel	0523b92903	Change navbar link from wiki to new docs	2024-01-18 20:34:39 +01:00
Damien Picard	d17c50ff65	Fix alignment in navbar	2024-01-17 15:15:56 +01:00
Thomas Dinges	d16be38b40	Fix links in menu and point release cycle to new docs	2024-01-17 13:09:49 +01:00
Thomas Dinges	76ecf6bfc3	Fix: Asset System link in modules header	2024-01-16 17:08:50 +01:00
Thomas Dinges	f53a7bdca2	Release: Bump to Bcon2 for 4.1	2024-01-04 17:41:25 +01:00
Brecht Van Lommel	771f37d356	Reduce project issue card title size	2023-11-28 17:40:54 +01:00
Arnd Marijnissen	9b708de650	Hiding logo seems to hide login	2023-11-28 17:12:58 +01:00
Brecht Van Lommel	013fbe1b18	Fix excessively bold text on project board issue cards	2023-11-28 16:25:13 +01:00
Brecht Van Lommel	a168b7d35a	Update for changes in Gitea 1.21 and 1.20	2023-11-28 15:27:18 +01:00
Thomas Dinges	8f2a59000b	Update release card for 4.0 release	2023-11-14 15:45:31 +01:00
Thomas Dinges	30aec05902	Update for 4.0 Bcon4	2023-11-09 11:45:02 +01:00
Thomas Dinges	391876ff30	Frontpage: Update milestones for 4.1 and 4.0	2023-09-27 12:58:38 +02:00
Dalai Felinto	e651a7f2d1	Revert "Navbar: style fixes for gitea 1.20" Changes that expected gitea 1.20 needs to be reverted 2/2. This reverts commit `f2717d098b`.	2023-08-24 18:04:26 +02:00
Dalai Felinto	035d316672	Revert "Fix missing CSS variable for gitea 1.20 (#3 )" Changes that expected gitea 1.20 needs to be reverted 1/2. This reverts commit `611e7e835f`.	2023-08-24 18:03:54 +02:00