Add link

docs/_data/links.json

@@ -600,6 +600,14 @@
       "icon": "rss",
       "path": "/blog/"
     },
+    "brand": {
+      "name": "Brand",
+      "title": "Brand",
+      "subtitle": "The official Bulma logos",
+      "color": "primary",
+      "icon": "medal",
+      "path": "/brand/"
+    },
     "expo": {
       "name": "Expo",
       "title": "Expo",
@@ -676,6 +684,7 @@
     "extensions",
     "bulma-book",
     "blog",
+    "brand",
     "bulma-start",
     "made-with-bulma"
   ],
@@ -683,6 +692,7 @@
     "extensions",
     "bulma-book",
     "blog",
+    "brand",
     "bulma-start",
     "made-with-bulma",
     "bootstrap"

docs/_sass/components/navbar.scss

@@ -92,6 +92,11 @@
     --color-dark: var(--rss-dark);
   }
 
+  &.bd-navbar-item-brand {
+    --color-light: var(--primary-light);
+    --color-dark: var(--primary-dark);
+  }
+
   &.bd-navbar-item-extensions {
     --color-light: var(--extensions-light);
     --color-dark: var(--extensions-dark);

docs/brand.html

@@ -12,37 +12,13 @@ breadcrumb:
 {%
   include components/hero.html
   color="primary"
-  icon="fas fa-copyright"
+  icon="fas fa-medal"
   title="The Bulma **Brand**"
   subtitle="Download the official Bulma logo"
 %}
 
 <div class="bd-brand">
   <div class="bd-logos">
-    <p class="bd-logos-label title is-5">
-      Color
-    </p>
-
-    <div class="bd-logos-color has-background-primary"></div>
-
-    <div class="bd-logos-codes">
-      <div class="bd-logos-code">
-        <p>Hex</p>
-        <p><strong>#00D1B2</strong></p>
-        <button class="bd-clipboard button is-primary is-small is-light" data-clipboard-text="#00D1B2">Copy</button>
-      </div>
-      <div class="bd-logos-code">
-        <p>RGB</p>
-        <p><strong>rgb(0, 209, 178)</strong></p>
-        <button class="bd-clipboard button is-primary is-small is-light" data-clipboard-text="rgb(0, 209, 178)">Copy</button>
-      </div>
-      <div class="bd-logos-code">
-        <p>HSL</p>
-        <p><strong>hsl(171, 100%, 41%)</strong></p>
-        <button class="bd-clipboard button is-primary is-small is-light" data-clipboard-text="hsl(171, 100%, 41%)">Copy</button>
-      </div>
-    </div>
-
     <p class="bd-logos-label title is-5">
       Icon
     </p>
@@ -105,5 +81,29 @@ breadcrumb:
       unsplash="RMypptC8-B0"
       asset="Bulma Logo White"
     %}
+
+    <p class="bd-logos-label title is-5">
+      Color
+    </p>
+
+    <div class="bd-logos-color has-background-primary"></div>
+
+    <div class="bd-logos-codes">
+      <div class="bd-logos-code">
+        <p>Hex</p>
+        <p><strong>#00D1B2</strong></p>
+        <button class="bd-clipboard button is-primary is-small is-light" data-clipboard-text="#00D1B2">Copy</button>
+      </div>
+      <div class="bd-logos-code">
+        <p>RGB</p>
+        <p><strong>rgb(0, 209, 178)</strong></p>
+        <button class="bd-clipboard button is-primary is-small is-light" data-clipboard-text="rgb(0, 209, 178)">Copy</button>
+      </div>
+      <div class="bd-logos-code">
+        <p>HSL</p>
+        <p><strong>hsl(171, 100%, 41%)</strong></p>
+        <button class="bd-clipboard button is-primary is-small is-light" data-clipboard-text="hsl(171, 100%, 41%)">Copy</button>
+      </div>
+    </div>
   </div>
 </div>

docs/css/bulma-docs.css

@@ -18521,6 +18521,11 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   --color-dark: var(--rss-dark);
 }
 
+.bd-navbar-item.bd-navbar-item-brand {
+  --color-light: var(--primary-light);
+  --color-dark: var(--primary-dark);
+}
+
 .bd-navbar-item.bd-navbar-item-extensions {
   --color-light: var(--extensions-light);
   --color-dark: var(--extensions-dark);