Add cookie banner

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/_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/assets/css/website.css

@@ -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;

docs/shop.html

@@ -574,4 +574,5 @@ <h2 class="bd-hero-subtitle algolia-lvl1">
 <script src="https://unpkg.com/@shopify/[email protected]/dist/umd/storefront-api-client.min.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/umd/photoswipe.umd.min.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/umd/photoswipe-lightbox.umd.min.js"></script>
+{% include global/cupcake.html %}
 <script type="text/javascript" src="{{ site.url }}/assets/javascript/shop.js"></script>