Merge pull request #3838 from jgthms/shop

Shop

docs/_data/links.json

@@ -64,6 +64,13 @@
       "icon": "fa-brands fa-patreon",
       "path": "/become-a-bulma-sponsor/"
     },
+    "shop": {
+      "name": "Shop",
+      "subtitle": "The Official Bulma Shop",
+      "color": "success",
+      "icon": "fa-solid fa-store",
+      "path": "/shop/"
+    },
     "brand": {
       "name": "Bulma Brand",
       "subtitle": "The official Bulma logos",
@@ -750,7 +757,7 @@
       "path": "/documentation/helpers/other-helpers/"
     }
   },
-  "navbar": ["docs", "expo", "love", "sponsor"],
+  "navbar": ["docs", "expo", "love", "sponsor", "shop"],
   "navbar_icons": ["github", "twitter"],
   "navbar_more": ["made-with-bulma", "backers", "brand", "extensions"],
   "category_ids": [

docs/_includes/docs/hero.html

@@ -24,7 +24,9 @@ <h2 class="bd-hero-subtitle algolia-lvl1">
     {% endif %}
   </div>
 
-  <div class="bd-hero-carbon">
-    {% include website/carbon.html %}
-  </div>
+  {% unless include.hide_carbon == true %}
+    <div class="bd-hero-carbon">
+      {% include website/carbon.html %}
+    </div>
+  {% endunless %}
 </section>

docs/_includes/global/cupcake.html

@@ -0,0 +1,12 @@
+<script src="{{ site.url }}/assets/vendor/cupcakes-3.1.0.min.js"></script>
+
+<script>
+  window.addEventListener("load", function(){
+  window.cupcakeconsent.initialise({
+    "content": {
+      "message": "Just so you know, this website uses cookies.",
+      "dismiss": "<span>👍</span> Got it!",
+      "link": "What are cookies?"
+    }
+  })});
+</script>

docs/_includes/global/nav-item.html

@@ -36,6 +36,9 @@
       {% else %}
         {{ link.name }}
       {% endif %}
+      {% if include.link_id == "shop" %}
+        <span class="tag is-success ml-1">New!</span>
+      {% endif %}
     </span>
   {% endunless %}
 </a>

docs/_layouts/default.html

@@ -12,8 +12,11 @@
       {% endfor %}
     {% endif %}
 
-    {% include global/support.html %}
-    {% include global/native.html %}
+    {% unless page.hide_footer %}
+      {% include global/support.html %}
+      {% include global/native.html %}
+    {% endunless %}
+
     {% include global/about.html %}
 
     <script src="{{ site.url }}/assets/vendor/clipboard-2.0.11.min.js"></script>

docs/_sass/docs/_index.scss

@@ -3,6 +3,7 @@
 @forward "brand";
 @forward "call";
 @forward "code";
+@forward "cupcake";
 @forward "docs";
 @forward "drawing";
 @forward "example";

docs/_sass/docs/cupcake.scss

@@ -0,0 +1,74 @@
+@use "sass/utilities/css-variables" as cv;
+@use "sass/utilities/extends";
+@use "sass/utilities/mixins" as mx;
+
+.cpck-window {
+  background-color: var(--bulma-background);
+  box-shadow: 0 0 1em rgba(black, 0.1);
+  padding: 1em 1.5em;
+  position: fixed;
+  z-index: 60;
+}
+
+.cpck-invisible {
+  display: none !important;
+}
+
+.cpck-link {
+  border-bottom: 1px solid var(--bulma-link);
+  padding-bottom: 2px;
+
+  &:hover {
+    border-bottom-width: 2px;
+  }
+
+  &:active {
+    background-color: var(--bulma-link-light);
+  }
+}
+
+.cpck-compliance {
+  margin-top: 1em;
+}
+
+.cpck-btn {
+  border: 2px solid var(--bulma-success);
+  border-radius: var(--bulma-radius);
+  color: var(--bulma-success);
+  display: inline-block;
+  font-weight: var(--bulma-weight-bold);
+  padding: 0.5em 1em;
+  vertical-align: top;
+
+  span {
+    margin-left: -0.125em;
+    margin-right: 0.5em;
+  }
+
+  &:hover {
+    background-color: var(--bulma-success-light);
+    color: var(--bulma-success-dark);
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
+@include mx.mobile {
+  .cpck-window {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+@include mx.tablet {
+  .cpck-window {
+    border-radius: var(--bulma-radius);
+    bottom: 1em;
+    right: 1em;
+    width: 20rem;
+  }
+}

docs/_sass/global/nav.scss

@@ -54,7 +54,7 @@
   }
 
   &.is-system,
-  &.is-docs {
+  &.is-shop {
     --h: #{cv.getVar("success-h")};
     --s: #{cv.getVar("success-s")};
     --l: #{cv.getVar("success-l")};

docs/assets/css/main.css

@@ -1,15 +1,3 @@
-:root {
-  --zlog-h: 221deg;
-  --zlog-s: 40%;
-  --zlog-l: 30%;
-  --zlog: hsl(var(--zlog-h), var(--zlog-s), var(--zlog-l));
-}
-
-.zlog {
-  color: var(--zlog);
-  display: none;
-}
-
 body {
   align-content: flex-start;
   /* display: grid; */

docs/assets/css/website.css

@@ -34259,7 +34259,7 @@ has-background-moon.is-hoverable:active {
   --s: var(--bulma-info-s);
   --l: var(--bulma-info-l);
 }
-.bd-nav-item.is-system, .bd-nav-item.is-docs {
+.bd-nav-item.is-system, .bd-nav-item.is-shop {
   --h: var(--bulma-success-h);
   --s: var(--bulma-success-s);
   --l: var(--bulma-success-l);
@@ -35708,6 +35708,69 @@ has-background-moon.is-hoverable:active {
     padding-bottom: var(--snippet-spacing);
   }
 }
+.cpck-window {
+  background-color: var(--bulma-background);
+  box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
+  padding: 1em 1.5em;
+  position: fixed;
+  z-index: 60;
+}
+
+.cpck-invisible {
+  display: none !important;
+}
+
+.cpck-link {
+  border-bottom: 1px solid var(--bulma-link);
+  padding-bottom: 2px;
+}
+.cpck-link:hover {
+  border-bottom-width: 2px;
+}
+.cpck-link:active {
+  background-color: var(--bulma-link-light);
+}
+
+.cpck-compliance {
+  margin-top: 1em;
+}
+
+.cpck-btn {
+  border: 2px solid var(--bulma-success);
+  border-radius: var(--bulma-radius);
+  color: var(--bulma-success);
+  display: inline-block;
+  font-weight: var(--bulma-weight-bold);
+  padding: 0.5em 1em;
+  vertical-align: top;
+}
+.cpck-btn span {
+  margin-left: -0.125em;
+  margin-right: 0.5em;
+}
+.cpck-btn:hover {
+  background-color: var(--bulma-success-light);
+  color: var(--bulma-success-dark);
+}
+.cpck-btn:active, .cpck-btn:focus {
+  outline: none;
+}
+
+@media screen and (max-width: 768px) {
+  .cpck-window {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+@media screen and (min-width: 769px), print {
+  .cpck-window {
+    border-radius: var(--bulma-radius);
+    bottom: 1em;
+    right: 1em;
+    width: 20rem;
+  }
+}
 .bd-docs {
   --p: 2rem;
   --scale: 1;
@@ -38839,9 +38902,9 @@ has-background-moon.is-hoverable:active {
 }
 
 .bd-theme-docs {
-  --theme-h: var(--bulma-success-h);
-  --theme-s: var(--bulma-success-s);
-  --theme-l: var(--bulma-success-l);
+  --theme-h: var(--bulma-primary-h);
+  --theme-s: var(--bulma-primary-s);
+  --theme-l: var(--bulma-primary-l);
   --theme-color: hsl(var(--theme-h), var(--theme-s), var(--theme-l));
 }
 
@@ -38852,6 +38915,13 @@ has-background-moon.is-hoverable:active {
   --theme-color: hsl(var(--theme-h), var(--theme-s), var(--theme-l));
 }
 
+.bd-theme-shop {
+  --theme-h: var(--bulma-success-h);
+  --theme-s: var(--bulma-success-s);
+  --theme-l: var(--bulma-success-l);
+  --theme-color: hsl(var(--theme-h), var(--theme-s), var(--theme-l));
+}
+
 .bd-theme-features {
   --theme-h: var(--bulma-danger-h);
   --theme-s: var(--bulma-danger-s);