Getting rid of patternlibrary submodule. Now lives in this repo directly

.gitignore

@@ -12,12 +12,6 @@ web/README.md
 ## So far we are using custom modules for migration only, which wouldn't technically
 ## ever be required on the platform.
 web/themes/contrib
-web/themes/custom/*/*.php
-web/themes/custom/*/*.js
-## Temporarily allow deployment of .theme (PHP) files
-## See web/themes/custom/agarica/agarica.theme
-# web/themes/custom/*/*.theme
-web/themes/custom/*/src
 vendor/
 
 ## Ignore folder for SQL dumps

web/themes/custom/agarica/patternlibrary

@@ -1 +0,0 @@
-Subproject commit 5a2b054beed26316d374a38802a4207be12104f6

web/themes/custom/agarica/patternlibrary/.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/package-lock.json

web/themes/custom/agarica/patternlibrary/.nvmrc

@@ -0,0 +1 @@
+v8.4.0

web/themes/custom/agarica/patternlibrary/Gruntfile.js

@@ -0,0 +1,80 @@
+module.exports = function (grunt) {
+    grunt.initConfig({
+        sass: {
+          dev: {
+            options: {
+              style: 'compact'
+            },
+            files: {
+              'agaric/css/agaric.css': 'agaric/sass/agaric.scss'
+            }
+          }
+        },
+        assemble: {
+              dev: {
+                options: {
+                    flatten: true,
+                    data: 'static-layouts/design-source/data/*.{json,yml}',
+                    layout: false,
+                    partials: 'static-layouts/design-source/templates/**/*.hbs'
+                },
+                files: [
+                    {
+                      expand: true,
+                      cwd: 'static-layouts/design-source/pages',
+                      src: '**/*.{hbs,md}',
+                      dest: 'static-layouts/design-output/'
+                    }
+                ]
+            }
+        },
+        clean: ['static-layouts/design-output/*.html'],
+        connect: {
+            preview: {
+                options: {
+                    base: ['./'],
+                    port: 9000,
+                    hostname: 'localhost',
+                    keepalive: false,
+                    livereload: 35729,
+                    open: 'http://0.0.0.0:9000/static-layouts/design-output'
+                }
+            }
+        },
+        watch: {
+            templates: {
+                files: [
+                  'static-layouts/design-source/templates/**/*.{hbs,md}',
+                  'static-layouts/design-source/pages/**/*.{hbs,md}',
+                  'static-layouts/design-source/data/**/*.json',
+                  'agaric/sass/**/*.scss',
+                ],
+                tasks: ['assemble','sass:dev']
+            },
+            livereload: {
+                options: {
+                    livereload: '<%= connect.preview.options.livereload %>'
+                },
+                files: ['static-layouts/design-output/**.*']
+            }
+        },
+        shell: {
+            target: {
+                command: './node_modules/.bin/kss --config styleguide/_source/styleguide-config.json --verbose'
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('assemble');
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-connect');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-sass');
+    grunt.loadNpmTasks('grunt-shell');
+    grunt.loadNpmTasks('grunt-kss');
+
+    grunt.registerTask('kss',['shell']);
+    grunt.registerTask('build', ['clean', 'assemble', 'sass:dev']);
+    grunt.registerTask('server', ['build','connect','watch']);
+    grunt.registerTask('default', ['server']);
+};

web/themes/custom/agarica/patternlibrary/README.md

@@ -0,0 +1,49 @@
+# About the Agaric Pattern Library & Style Guide
+
+This living styleguide is powered by the same styles as power the Agaric site itself.  Changes in `agaric/sass/agaric/` will be reflected both in the styleguide and ultimately on the live sites, so be cautious!
+
+## Set up
+
+#### Use the right version of node with:
+`nvm use`
+
+_This command will look at your `.nvmrc` file and use the version node.js specified in it. This ensures all developers use the same version of node for consistency._
+
+#### If that version of node isn't installed, install it with:
+`nvm install`
+
+#### Install npm dependencies with
+`npm install`
+
+_This command looks at `package.json` and installs all the npm dependencies specified in it.  Some of the dependencies include grunt and grunt-sass._
+
+## Usage
+
+### Compile CSS
+
+`grunt sass`
+
+See more available Grunt commands:
+
+`grunt --help`
+
+
+## Stuff we're not using
+
+### Rebuild the style guide
+
+`grunt kss`
+
+### Run the static design layouts
+
+`grunt`
+
+_This will open the static layouts in your browser.  At the bottom you can click between them and to the style guide._
+
+## Contents
+
+The `agaric` folder contains the styles, as Sass .scss files, that we expect to be applicable to all Agaric-branded web applications.
+
+### Markup examples and static layouts
+
+See `styleguide/index.html` for project info.

web/themes/custom/agarica/patternlibrary/agaric/css/prism.css

@@ -0,0 +1,124 @@
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+django+markup-templating+php+php-extras+python+yaml+twig */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #ccc;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2d2d2d;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+	color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.inserted {
+	color: green;
+}
+

web/themes/custom/agarica/patternlibrary/agaric/fonts/slick.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="slick" horiz-adv-x="512">
+<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512" />
+
+<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
+</font></defs></svg>

web/themes/custom/agarica/patternlibrary/agaric/images/agaric-logo.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 95 37" style="enable-background:new 0 0 95 37;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M13,8.8c-0.7-0.8-1.5-1.3-2.4-1.7C9.7,6.7,8.8,6.5,7.8,6.5c-2.2,0-4,0.8-5.5,2.5C0.8,10.6,0,12.7,0,15.3
+		c0,2.5,0.8,4.5,2.3,6.2c1.6,1.7,3.4,2.5,5.5,2.5c1,0,1.8-0.2,2.7-0.5c0.8-0.3,1.6-0.9,2.4-1.7v1.8h4.2V6.9H13V8.8z M11.9,18.8
+		c-0.9,0.9-1.9,1.4-3.2,1.4c-1.3,0-2.3-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.5c0-1.4,0.4-2.6,1.3-3.5c0.8-0.9,1.9-1.4,3.2-1.4
+		c1.3,0,2.4,0.4,3.3,1.3c0.9,0.9,1.3,2.1,1.3,3.5C13.2,16.7,12.7,17.9,11.9,18.8z"/>
+	<path class="st0" d="M55.5,23.5V6.9h-4.2v1.8c-0.7-0.8-1.5-1.3-2.4-1.7c-0.9-0.4-1.8-0.6-2.8-0.6c-2.2,0-4,0.8-5.5,2.5
+		c-1.5,1.6-2.3,3.7-2.3,6.3c0,2.5,0.8,4.5,2.3,6.2c1.6,1.7,3.4,2.5,5.5,2.5c1,0,1.8-0.2,2.7-0.5c0.8-0.3,1.6-0.9,2.4-1.7v1.8H55.5z
+		 M50.2,18.8c-0.9,0.9-1.9,1.4-3.2,1.4c-1.3,0-2.3-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.5c0-1.4,0.4-2.6,1.3-3.5
+		c0.8-0.9,1.9-1.4,3.2-1.4c1.3,0,2.4,0.4,3.3,1.3c0.9,0.9,1.3,2.1,1.3,3.5C51.5,16.7,51.1,17.9,50.2,18.8z"/>
+	<path class="st0" d="M86.8,20.1c-1.5,0-2.7-0.4-3.6-1.3c-0.9-0.9-1.4-2-1.4-3.4c0-1.4,0.5-2.6,1.4-3.6c1-0.9,2.2-1.4,3.8-1.4
+		c0.9,0,1.6,0.1,2.2,0.4c0.6,0.3,1.3,0.7,1.9,1.4l3.5-1.9c-0.8-1.2-1.9-2.1-3.2-2.8c-1.3-0.7-2.8-1-4.4-1c-1.8,0-3.4,0.4-4.8,1.2
+		c-1.4,0.8-2.6,1.8-3.4,3.2c-0.8,1.3-1.2,2.8-1.2,4.4c0,2.3,0.8,4.3,2.5,6.1c1.6,1.7,3.9,2.6,6.8,2.6c3.2,0,5.7-1.2,7.5-3.5
+		l-3.3-2.2C90.1,19.5,88.6,20.1,86.8,20.1z"/>
+	<path class="st0" d="M34.2,5.7l-1.7,1.7c-1.1-0.6-2.4-1-3.7-1c-7.6,0-9.1,5.6-9.1,8.7c0,1.6,0.4,3.9,1.9,5.7
+		c-1.4,2.2-2.9,6.2-1.7,9.8c0.3,1.4,1.1,2.6,2.3,3.7c1.6,1.5,3.6,2.2,5.9,2.2c0,0,0,0,0,0c0,0,0,0,0,0c2.3,0,4.3-0.7,5.9-2.2
+		c1.6-1.5,2.4-3.3,2.4-5.4c0-2.2-1.4-3.2-3.3-3.2h-9.7c0.3-1.1,0.7-2.1,1.1-2.7c1.2,0.5,2.6,0.8,4.3,0.8c2.2,0,4.1-0.8,5.6-2.5
+		c1.5-1.6,2.3-3.7,2.3-6.2c0-2-0.5-3.7-1.4-5.1l1.7-1.7L34.2,5.7z M32.6,29.5c-0.1,0.9-0.5,1.6-1.2,2.2c-0.9,0.9-2,1.3-3.4,1.3
+		c0,0,0,0-0.1,0l0,0l0,0c0,0,0,0-0.1,0c-1.4,0-2.4-0.4-3.4-1.3c-0.7-0.7-1.1-1.4-1.2-2.2H32.6z M31.2,18.7c-0.9,0.9-1.9,1.4-3.2,1.4
+		c-1.3,0-2.4-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.6c0-1.4,0.4-2.6,1.3-3.5c0.9-0.9,1.9-1.3,3.3-1.3c1.3,0,2.4,0.5,3.2,1.4
+		c0.8,0.9,1.3,2.1,1.3,3.5C32.5,16.6,32.1,17.8,31.2,18.7z"/>
+	<rect x="71.4" y="6.9" class="st0" width="4.2" height="16.6"/>
+	<circle class="st0" cx="73.5" cy="2.7" r="2.7"/>
+	<rect x="38.3" y="25.9" class="st0" width="55.6" height="3.6"/>
+	<rect x="0.8" y="25.9" class="st0" width="16.4" height="3.6"/>
+	<path class="st0" d="M58.3,6.9v16.6h4.1v-8.6c0-3.2,1-4.7,3.1-4.7c0.7,0,1.4,0.3,2.1,0.8l1.8-3.5c-1.1-0.7-2.2-1-3.2-1
+		c-0.8,0-1.4,0.1-2,0.4c-0.5,0.3-1.2,0.8-1.9,1.5V6.9H58.3z"/>
+</g>
+</svg>

web/themes/custom/agarica/patternlibrary/agaric/js/script.js

@@ -0,0 +1,51 @@
+(function ($) {
+$(document).ready(function(){
+  // Open side navbar for handsets
+  $('.navbar-burger').on('click tap', function(e) {
+    $(this).toggleClass('is-active');
+    $(this).parent().parent().find('#navbar-menu').toggleClass('is-active');
+  });
+
+  // Swap navbar colors with ScrollMagic.js
+  var controller = new ScrollMagic.Controller();
+  var sections = $('section[data-headerbg]');
+  $.each(sections, function(index,item){
+    var el = $(item),
+      elClass = el.data('headerbg') + '-header',
+      headerEl = $('#navbar');
+    new ScrollMagic.Scene({
+        triggerElement: el,
+        triggerHook: 'onLeave',
+        duration: el.outerHeight()
+      })
+      .offset(el.offset().top - headerEl.outerHeight())
+      .on("enter",function(e){headerEl.addClass(elClass)})
+      // Minimize flash of different navbar color by not having it transition in
+      // the first time, but really we need a full fix not a meh mitigation.
+      .on("leave",function(e){headerEl.removeClass(elClass); headerEl.addClass('navbar-transition')})
+      .addTo(controller);
+  });
+
+  // Slick carousel
+  $('.carousel').slick({
+    arrows: false,
+    centerMode: true,
+    centerPadding: '0',
+    slidesToShow: 3,
+    dots: true,
+    responsive: [
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1
+        }
+      }
+    ]
+  });
+
+  $('.navbar-search-swap').hover(function() {
+    $(this).find('input').focus();
+  });
+
+});
+})(jQuery);

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric.scss

@@ -0,0 +1,70 @@
+@charset "UTF-8";
+
+// Global Variables
+//
+// Custom overrides of `bulma/utilities/initial-variables.sass`.
+//
+// Weight: 1
+//
+// Styleguide: Base.Variables
+
+@import "agaric/variables";
+
+
+// Vendor imports
+
+@import "../../node_modules/bulma/bulma";
+@import "../../node_modules/slick-carousel/slick/slick.scss";
+@import "../../node_modules/slick-carousel/slick/slick-theme.scss";
+
+
+// Base
+//
+// Styling for basic HTML block and inline elements.
+//
+// Weight: 2
+//
+// Styleguide: Base
+
+@import "agaric/base.typography";
+@import "agaric/base.elements";
+@import "agaric/base.figure";
+@import "agaric/base.form";
+@import "agaric/base.blockquote";
+
+
+// Layout
+//
+// Styling that determines the position of content on the page.
+//
+// Weight: 3
+//
+// Styleguide: Layout
+
+@import "agaric/layout.columns";
+@import "agaric/layout.flow";
+
+
+// Component
+//
+// Custom structures.
+//
+// Weight: 4
+//
+// Styleguide: Component
+
+@import "agaric/component.agaricons";
+@import "agaric/component.navbar";
+@import "agaric/component.titlebar";
+@import "agaric/component.tile";
+@import "agaric/component.tabs";
+@import "agaric/component.card";
+@import "agaric/component.media";
+@import "agaric/component.teaser";
+@import "agaric/component.hero";
+@import "agaric/component.carousel";
+@import "agaric/component.pagination";
+@import "agaric/component.iconlist";
+@import "agaric/component.related";
+@import "agaric/component.footer";
+@import "agaric/component.code";

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_base.blockquote.scss

@@ -0,0 +1,23 @@
+// Blockquote
+//
+// Intended for use on node pages such as blog posts and case studies.
+//
+// Styleguide: Base.Blockquote
+
+.content blockquote {
+  color: currentColor;
+  //
+  * {
+    color: currentColor;
+  }
+  //
+  cite {
+    display: block;
+    font-style: normal;
+    font-weight: 700;
+    //
+    &::before {
+      content: "\2014 ";
+    }
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_base.elements.scss

@@ -0,0 +1,193 @@
+// Elements
+//
+// Extend Bulma basic HTML elements in `.content` blocks. It includes color classes.
+//
+// .is-blue - color
+// .is-marine - color
+// .is-berry - color
+// .is-cinnamon - color
+// .is-dark - color
+// .is-grey - color
+// .is-dandelion - color
+//
+// Styleguide: Base.Elements
+
+.content {
+  blockquote,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    &.is-blue {
+      color: $blue;
+    }
+    &.is-marine {
+      color: $marine;
+    }
+    &.is-berry {
+      color: $berry;
+    }
+    &.is-cinnamon {
+      color: $cinnamon;
+    }
+    &.is-dark {
+      color: $dark;
+    }
+    &.is-grey {
+      color: $grey;
+    }
+    &.is-dandelion {
+      color: $dandelion;
+    }
+  }
+}
+
+p {
+  label {
+    font-variant-caps: all-small-caps;
+  }
+  label::after {
+    content: ':';
+  }
+}
+
+// Links
+
+
+a {
+  font-weight: bold;
+  padding: $link-hover-padding;
+  margin: -$link-hover-padding;
+  &:hover {
+    color: $link-hover;
+    background-color: $link-hover-background;
+  }
+  &:focus {
+    color: $link-focus;
+    background-color: $link-hover-background;
+  }
+  &:active {
+    color: $link-active;
+    background-color: $link-hover-background;
+  }
+}
+
+// Rule
+//
+// Adds big border
+//
+// Styleguide: Base.Elements.Rule
+
+%bigborder {
+  border-top: 4px solid $blue-dark;
+}
+
+hr {
+  @extend %bigborder;
+}
+
+
+// Titles
+//
+// Extends Bulma `.title` and `.subtitle` classes
+//
+// .is-compact - remove margins and spacing
+//
+// Styleguide: Base.Elements.Titles
+
+.is-compact {
+  &.subtitle,
+  &.title {
+    margin-bottom: 0;
+  }
+}
+
+
+// Byline
+//
+// Styleguide: Base.Elements.Byline
+
+.byline {
+  color: $blue-light;
+  a {
+    &:hover {
+      color: $blue;
+      text-decoration: underline;
+    }
+  }
+}
+
+// Give a special hover style for the logo
+
+.navbar-brand a.navbar-item {
+  &:focus,
+  &:hover {
+    color: $dandelion-light;
+  }
+}
+
+.light-header .navbar-brand a.navbar-item {
+  &:focus,
+  &:hover {
+    color: $dandelion-light;
+    background: inherit;
+  }
+}
+
+// Ensure embedded media is responsive
+
+iframe {
+  width: 100%;
+}
+
+// No spacing on main heading to avoid gap at top of page
+
+a#main-content {
+  margin: 0;
+  padding: 0;
+}
+
+// Positioning witchcraft to allow editing in the presence of heroes
+
+@mixin localfloaters {
+  position: absolute;
+  z-index: 999;
+  padding-top: 1rem;
+  ul li a {
+    color: white;
+  }
+}
+
+// Logged in users need a nice view of the edit tabs
+
+.gin--horizontal-toolbar {
+
+  .section:has(#block-agarica-local-tasks) {
+    padding-block: 0;
+  }
+
+  &:has(.hero-project) {
+    #navbar {
+      background-color: transparent;
+    }
+    .hero {
+      margin-top: -8rem;
+    }
+
+    section:has(#block-agarica-local-tasks) {
+      @include localfloaters();
+    }
+  }
+
+  &:has([data-history-node-id]):has(.hero-main){
+    article[data-history-node-id] {
+      margin-top: 4rem;
+    }
+    .section:has(#block-agarica-local-tasks) {
+      @include localfloaters();
+    }
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_base.figure.scss

@@ -0,0 +1,36 @@
+// Figures and Images
+//
+// ...
+//
+// Weight: 2
+//
+// Styleguide: Base.Figure
+
+.content .image {
+  margin: 0;
+  padding: 0;
+}
+
+.image img {
+  width: 100%;
+  height: auto;
+}
+
+.image figcaption {
+  margin-top: 1em;
+  font-family: $family-monospace;
+  font-size: $size-6;
+  line-height: 1.2em;
+  text-align: left;
+  color: $dark;
+}
+
+.license img {
+  float: left;
+  margin-right: 10px;
+}
+
+/* Give inline centered images the same spacing as paragraphs. */
+.align-center {
+  margin-bottom: 1em;
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_base.form.scss

@@ -0,0 +1,55 @@
+// Form
+//
+// Extends Bulma Form classes.
+//
+// Styleguide: Base.Form
+
+.label {
+  color: currentColor;
+  font-size: 1rem;
+}
+
+.label:not(:last-child) {
+  margin-bottom: 0.25em;
+}
+
+.is-dark {
+  .select {
+    select {
+      border-color: $dark;
+      color: $white;
+      background-color: $dark;
+    }
+    &:not(.is-multiple)::after {
+      border-color: currentColor;
+    }
+  }
+}
+
+.form-item {
+  margin-bottom: .6rem;
+}
+
+.content p.form-label,
+.form-label {
+  margin-top: 1.25rem;
+  margin-bottom: .6rem;
+}
+
+// Webforms
+
+.webform-form,
+.webform-submission-form {
+  border-left: 4px solid $blue-dark;
+  border-right: 4px solid $blue-dark;
+  margin: .1rem 1.5rem .1rem 1.5rem;
+  padding: 0 1.5rem;
+  @include widescreen {
+    margin: .5rem 6rem .5rem 6rem;
+    padding: 0 6rem;
+  }
+}
+
+.help {
+  font-size: $size-6;
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_base.typography.scss

@@ -0,0 +1,173 @@
+// Typography
+//
+// ...
+//
+// .is-sans - sans serif @font-face {
+// .is-mono - monospace font
+//
+// Styleguide: Base.Typography
+
+.section,
+.is-sans {
+  font-family: $family-sans-serif;
+  font-weight: 400;
+}
+
+.is-mono {
+  font-family: $family-monospace;
+}
+
+
+// Title
+//
+// Styleguide: Base.Typography.Title
+
+.title,
+.content .title {
+  font-weight: 700;
+  color: $dark;
+}
+
+.title.is-1 {
+  font-size: $size-2;
+  @include desktop {
+    font-size: $size-1;
+  }
+  line-height: 1.07em;
+}
+
+.title.is-2 {
+  font-size: $size-3;
+  @include desktop {
+    font-size: $size-2;
+  }
+  line-height: 1.14em;
+}
+
+.title.is-3 {
+  font-size: $size-4;
+  @include desktop {
+    font-size: $size-3;
+  }
+  line-height: 1.2em;
+}
+
+.title.is-4 {
+  font-size: $size-5;
+  @include desktop {
+    font-size: $size-4;
+  }
+  line-height: 1.43em;
+}
+
+.title.is-5 {
+  font-size: 1.1rem;
+  @include desktop {
+    font-size: $size-5;
+  }
+  line-height: 1.2em;
+}
+
+.title.is-6 {
+  font-size: $size-6;
+  line-height: 1.43em;
+}
+
+.title.is-7 {
+  font-size: $size-7;
+  line-height: 1.2em;
+}
+
+
+// Headings
+//
+// Styleguide: Base.Typography.Headings
+
+.content {
+  h1 {
+    &:not(:first-child) {
+      margin-top: 1em;
+    }
+    margin-bottom: 0.5em;
+    font-size: 2em;
+    font-weight: 700;
+  }
+  h2 {
+    &:not(:first-child) {
+      margin-top: 1.1428em;
+    }
+    margin-bottom: 0.5714em;
+    font-size: 1.75em;
+    font-weight: 700;
+  }
+  h3 {
+    &:not(:first-child) {
+      margin-top: 1.3333em;
+    }
+    margin-bottom: 0.6666em;
+    font-size: 1.5em;
+    font-weight: 700;
+  }
+  h4 {
+    margin-bottom: 0.8em;
+    font-size: 1.25em;
+    font-weight: 700;
+  }
+  h5 {
+    margin-bottom: 0.8888em;
+    font-size: 1.125em;
+    font-weight: 700;
+  }
+  h6 {
+    margin-bottom: 1em;
+    font-size: 1em;
+    font-weight: 700;
+  }
+}
+
+// Tags ("More about")
+
+.more-about-label,
+.more-about-label:not(:last-child) {
+  margin-bottom: 0.666rem;
+}
+
+
+// Paragraph
+//
+// Styleguide: Base.Typography.Paragraph
+
+
+// Blockquote
+//
+// Styleguide: Base.Typography.Blockquote
+
+
+// Ordered List
+//
+// Styleguide: Base.Typography.OrderedList
+
+
+// Unordered List
+//
+// Styleguide: Base.Typography.UnorderedList
+
+
+// Definition List
+//
+// Styleguide: Base.Typography.DefinitionList
+
+
+// Link
+//
+// Styleguide: Base.Typography.Link
+
+
+// Table
+//
+// Styleguide: Base.Typography.Table
+
+
+// Horizontal Rule
+//
+// Styleguide: Base.Typography.HorizontalRule

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.agaricons.scss

@@ -0,0 +1,234 @@
+// Agaricons
+//
+// Extends Bulma icon classes.
+//
+// Styleguide: Component.Agaricons
+
+$agaricon-path: 'fonts' !default;
+@font-face {
+  font-family: 'Agaricons';
+  src: url("#{$agaricon-path}/agariccons.eot");
+  src: url("#{$agaricon-path}/agariccons.woff2") format('woff2'), url("#{$agaricon-path}/agariccons.woff") format('woff'), url("#{$agaricon-path}/agariccons.otf") format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+.agc {
+  display: inline-block;
+  font-family: Agaricons;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  text-rendering: auto;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.agc-logo::before {
+  content: "\e000";
+}
+
+.agc-video::before {
+  content: "\e001";
+}
+
+.agc-photo::before {
+  content: "\e002";
+}
+
+.agc-print::before {
+  content: "\e003";
+}
+
+.agc-locked::before {
+  content: "\e004";
+}
+
+.agc-search::before {
+  content: "\e005";
+}
+
+.agc-zoom-in::before {
+  content: "\e006";
+}
+
+.agc-zoom-out::before {
+  content: "\e007";
+}
+
+.agc-help::before {
+  content: "\e008";
+}
+
+.agc-alert::before {
+  content: "\e009";
+}
+
+.agc-gear-1::before {
+  content: "\e00A";
+}
+
+.agc-gear-2::before {
+  content: "\e00B";
+}
+
+.agc-cloud-1::before {
+  content: "\e00C";
+}
+
+.agc-cloud-2::before {
+  content: "\e00D";
+}
+
+.agc-chart-up::before {
+  content: "\e00E";
+}
+
+.agc-target-1::before {
+  content: "\e00F";
+}
+
+.agc-target-2::before {
+  content: "\e010";
+}
+
+.agc-at::before {
+  content: "\e011";
+}
+
+.agc-hash::before {
+  content: "\e012";
+}
+
+.agc-quote-1::before {
+  content: "\e013";
+}
+
+.agc-quote-2::before {
+  content: "\e014";
+}
+
+.agc-mail::before {
+  content: "\e015";
+}
+
+.agc-rss::before {
+  content: "\e016";
+}
+
+.agc-youtube::before {
+  content: "\e017";
+}
+
+.agc-check::before {
+  content: "\e018";
+}
+
+.agc-alarm::before {
+  content: "\e019";
+}
+
+.agc-clock::before {
+  content: "\e01A";
+}
+
+.agc-x::before {
+  content: "\e01B";
+}
+
+.agc-plus::before {
+  content: "\e01C";
+}
+
+.agc-crossbar::before {
+  content: "\e01D";
+}
+
+.agc-xbar::before {
+  content: "\e01E";
+}
+
+.agc-document::before {
+  content: "\e01F";
+}
+
+.agc-server::before {
+  content: "\e020";
+}
+
+.agc-phone::before {
+  content: "\e021";
+}
+
+.agc-python::before {
+  content: "\e022";
+}
+
+.agc-facebook::before {
+  content: "\e023";
+}
+
+.agc-twitter::before {
+  content: "\e024";
+}
+
+.agc-happy::before {
+  content: "\e025";
+}
+
+.agc-sad::before {
+  content: "\e026";
+}
+
+.agc-coop::before {
+  content: "\e027";
+}
+
+.agc-d8::before {
+  content: "\e028";
+}
+
+.agc-drop-1::before {
+  content: "\e029";
+}
+
+.agc-drop-2::before {
+  content: "\e02A";
+}
+
+.agc-arcade-1::before {
+  content: "\e02B";
+}
+
+.agc-arcade-2::before {
+  content: "\e02C";
+}
+
+.agc-arcade-3::before {
+  content: "\e02D";
+}
+
+.agc-arcade-4::before {
+  content: "\e02E";
+}
+
+.agc-arcade-5::before {
+  content: "\e02F";
+}
+
+.agc-arcade-6::before {
+  content: "\e030";
+}
+
+.agc-mushroom::before {
+  content: "\e031";
+}
+
+/* Extra styling for Ionicons */
+
+ion-icon {
+  vertical-align: text-bottom;
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.card.scss

@@ -0,0 +1,262 @@
+// Card
+//
+// Extension of the Bulma card componnet.
+//
+// .card-project - for projects, 50% image, text on the right
+// .card-initiative - for initiaitives, image on top
+//
+// Styleguide: Component.Card
+// Allow linking the entire object
+
+a.card {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+// colors
+.card.is-blue {
+  color: $white;
+  background-color: $blue;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($blue, .5);
+  }
+}
+
+a.card.is-blue:hover {
+  color: $white;
+  background-color: darken($blue, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
+}
+
+.card.is-marine {
+  color: $white;
+  background-color: $marine;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($marine, .5);
+  }
+}
+
+a.card.is-marine:hover {
+  color: $white;
+  background-color: darken($marine, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
+}
+
+.card.is-berry {
+  color: $white;
+  background-color: $berry;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($berry, .5);
+  }
+}
+
+a.card.is-berry:hover {
+  color: $white;
+  background-color: darken($berry, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
+}
+
+.card.is-cinnamon {
+  color: $white;
+  background-color: $cinnamon;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($cinnamon, .5);
+  }
+}
+
+a.card.is-cinnamon:hover {
+  color: $white;
+  background-color: darken($cinnamon, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
+}
+
+.card.is-dark {
+  color: $white;
+  background-color: $dark;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($dark, .5);
+  }
+}
+
+a.card.is-dark:hover {
+  color: $white;
+  background-color: darken($dark, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
+}
+
+.card.is-grey {
+  color: $white;
+  background-color: $grey;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($grey, .5);
+  }
+}
+
+a.card.is-grey:hover {
+  color: $white;
+  background-color: darken($grey, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
+}
+
+.card.is-dandelion {
+  color: $white;
+  background-color: $dandelion;
+  & > .card-image {
+    box-shadow: inset 0 0 0 100vmax rgba($dandelion, .5);
+  }
+}
+
+a.card.is-dandelion:hover {
+  color: $white;
+  background-color: darken($dandelion, 5%);
+  & > .card-image {
+    box-shadow: none;
+  }
+}
+
+// Project
+.card-project {
+  position: relative;
+  color: $white;
+  background-color: $dark;
+  box-shadow: none;
+  min-height: 200px;
+
+  &.is-small {
+    max-width: 30em;
+  }
+
+  &.is-large {
+    max-width: 60em;
+
+    .card-content {
+      .title {
+        font-size: $size-2;
+      }
+
+      .subtitle {
+        font-size: $size-4;
+      }
+    }
+  }
+  //
+  .card-image {
+    position: absolute;
+    top: 0;
+    right: 50%;
+    bottom: 0;
+    left: 0;
+    background-position: center;
+    background-size: cover;
+    background-clip: content-box;
+  }
+
+  .card-content {
+    box-sizing: border-box;
+    padding: 0 0 0 50%;
+    color: inherit;
+
+    .title {
+      padding: 1em 0 0.5rem;
+      margin-bottom: 0;
+      font-size: $size-4;
+      line-height: 1em;
+      transform: translateX(-2rem);
+      color: inherit;
+      margin-right: -1.2em;
+      overflow-wrap: break-word;
+    }
+
+    .title + .subtitle {
+      margin-top: 0.5rem;
+    }
+
+    .subtitle {
+      padding: 0.5rem 0.5rem 0.5rem 1rem;
+      color: inherit;
+      font-family: $family-monospace;
+      font-size: $size-6;
+      margin-right: -0.5em;
+      overflow-wrap: break-word;
+    }
+  }
+
+  .card-content::before {
+    content: "";
+    width: 1px;
+    margin-left: -1px;
+    float: left;
+    height: 0;
+    padding-top: 100%;
+  }
+
+  .card-content::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+a.card-project {
+  &:hover {
+    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+  }
+}
+// Initiative
+.card-initiative {
+  padding: 0.5em;
+  max-width: 30em;
+  color: $white;
+  background-color: $dark;
+  box-shadow: none;
+
+  .card-image {
+    padding-bottom: 50%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  .card-content {
+    position: relative;
+    z-index: +1;
+    padding: 0;
+
+    .title {
+      color: inherit;
+      margin-top: -0.625em;
+      margin-bottom: 0;
+      margin-left: 2rem;
+      font-size: $size-4;
+    }
+
+    .title + .subtitle {
+      margin-top: 1em;
+    }
+
+    .subtitle {
+      color: inherit;
+      font-family: $family-monospace;
+      font-size: $size-6;
+    }
+  }
+}
+
+a.card-initiative {
+  &:hover {
+    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.carousel.scss

@@ -0,0 +1,46 @@
+// Carousel
+//
+// Extension of `slick-theme.scss` from [Slick Carousel](https://kenwheeler.github.io/slick/).
+//
+// Styleguide: Component.Carousel
+
+
+.carousel {
+  padding-top: $gap * 2;
+  padding-bottom: $gap * 2;
+}
+
+// Update `slick-theme.scss`
+
+.slick-slider {
+  position: relative;
+}
+
+.slick-track:after {
+  clear: both;
+}
+
+.slick-slide {
+  outline: 0;
+  padding: 0 #{$gap / 2};
+  @include tablet {
+    padding: 0 $gap;
+  }
+}
+
+ul.slick-dots {
+  bottom: $gap / 3;
+  li {
+    button {
+      width: 0.875rem;
+      height: 0.875rem;
+      &::before {
+        content: '';
+        border-radius: 50%;
+        width: 0.875rem;
+        height: 0.875rem;
+        background: $dark;
+      }
+    }
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.code.scss

@@ -0,0 +1,22 @@
+// Fixes https://github.com/jgthms/bulma/issues/1708
+code .tag, code .number {
+  display: inline;
+  padding: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  text-align: inherit;
+  vertical-align: inherit;
+  border-radius: inherit;
+  font-weight: inherit;
+  white-space: inherit;
+  background: inherit;
+  margin: inherit;
+}
+
+// Try to undo what presumably prism styling is doing to our in-text code:
+code {
+  background-color: inherit;
+  color: inherit;
+  font-size: inherit;
+  padding: 0.2em 0.25em;
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.footer.scss

@@ -0,0 +1,35 @@
+// Footer
+//
+// Extends Bulma footer component.
+//
+// Styleguide: Component.Footer
+
+.footer {
+  font-size: $size-6;
+  font-weight: 700;
+  color: $dark;
+  padding: 0 1.5rem 3rem 1.5rem;
+  //
+  a {
+    color: currentColor;
+  }
+  a:hover {
+    color: $blue;
+    text-decoration: underline;
+    background-color: transparent;
+  }
+  //
+  .container {
+    padding-top: 3em;
+    @extend %bigborder;
+  }
+  .footer-logo .icon {
+    display: inline-block;
+    margin-top: -0.325em;
+    font-size: 4.5em;
+    //
+    .agc {
+      display: block;
+    }
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.hero.scss

@@ -0,0 +1,322 @@
+// Hero
+//
+// Extends Bulma hero.
+//
+// .hero-main - full image
+// .hero-project - large left image
+// .hero-initiative - medium left image
+// .hero-person - pers image with nav overlay
+//
+// Styleguide: Componenet.Hero
+
+.hero.is-light {
+  background: $grey;
+}
+
+.hero-main {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  margin-top: -4rem;
+  &::before {
+    position: absolute;
+    display: block;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 11em;
+    content: "";
+    background: linear-gradient(to bottom, rgba(13,30,52,1) 25%,rgba(13,30,52,0) 100%);
+  }
+  a .icon {
+    color: $dandelion;
+  }
+  a:hover,
+  a:focus {
+    .icon {
+      color: $dandelion-light;
+    }
+  }
+}
+
+.hero.is-blue {
+  color: $white;
+  background-color: $blue;
+  -moz-transition: all .2s linear;
+  -webkit-transition: all .2s linear;
+  -ms-transition: all .2s linear;
+  -o-transition: all .2s linear;
+  transition: all .2s linear;
+  // This is the same as we do for all cards at sass/agaric/_component.card.scss
+  // but we're only doing this for people so far, who are hard-coded to blue.
+  & > .container > .hero-image > .hero-image-shadow {
+    position: relative;
+  }
+  & > .container > .hero-image > .hero-image-shadow:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-shadow: inset 0 0 0 100vmax rgba($blue, .5);
+  }
+  &:hover,
+  &:focus {
+    color: $white;
+    background-color: darken($blue, 5%);
+    & > .container > .hero-image > .hero-image-shadow:before {
+      box-shadow: none;
+    }
+  }
+}
+
+.hero.is-marine {
+  color: $white;
+  background-color: $marine;
+}
+
+.hero.is-berry {
+  color: $white;
+  background-color: $berry;
+}
+
+.hero.is-cinnamon {
+  color: $white;
+  background-color: $cinnamon;
+}
+
+.hero.is-dark {
+  color: $white;
+  background-color: $dark;
+}
+
+.hero.is-grey {
+  color: $white;
+  background-color: $grey;
+}
+
+.hero.is-dandelion {
+  color: $white;
+  background-color: $dandelion;
+}
+
+.hero.is-blue,
+.hero.is-marine,
+.hero.is-berry,
+.hero.is-cinnamon,
+.hero.is-dark,
+.hero.is-dandelion {
+  a {
+    color: $text-light;
+    &:hover,
+    &:focus {
+      color: $blue-light;
+      background-color: $white;
+    }
+  }
+}
+
+.hero.is-light,
+.hero.is-grey {
+  a:not(.button):not(.dropdown-item):not(.tag) {
+    color: $link;
+  }
+}
+
+.hero.is-light,
+.hero.is-grey {
+  a:hover,
+  a:focus {
+    color: $blue-light;
+    background-color: $white;
+  }
+}
+
+.hero-project,
+.hero-person {
+  margin-top: -6rem;
+}
+
+// Project
+
+.hero-project {
+  .container {
+    .hero-body {
+      .title {
+        color: currentColor;
+        font-size: $size-3;
+        line-height: 1em;
+      }
+      .subtitle {
+        color: currentColor;
+        font-family: $family-monospace;
+        font-size: $size-5;
+        line-height: 1.4em;
+      }
+      .title + .subtitle {
+        margin-top: 1em;
+      }
+    }
+    @include tablet {
+      display: flex;
+      flex-direction: row;
+      .hero-image {
+        width: 50%;
+        img {
+          display: block;
+        }
+      }
+      .hero-body {
+        padding: 2rem 2rem 2rem 1rem;
+        z-index: +1;
+        width: 50%;
+        .title {
+          margin-top: 0.25em;
+          margin-left: -1.25em;
+          max-width: 12em;
+        }
+        .subtitle {
+          font-size: $size-5;
+        }
+      }
+    }
+    @include desktop {
+      .hero-body {
+        padding: 3rem 3rem 3rem 1.5rem;
+        .title {
+          margin-top: 0.25em;
+          font-size: $size-2;
+        }
+        .subtitle {
+          font-size: $size-4;
+        }
+      }
+    }
+  }
+}
+
+// Initiative
+
+.hero-initiative .container {
+  .hero-body {
+    .title {
+      color: currentColor;
+      font-size: $size-3;
+      line-height: 1em;
+    }
+    .subtitle {
+      color: currentColor;
+      font-family: $family-monospace;
+      font-size: $size-5;
+      line-height: 1.4em;
+    }
+    .title + .subtitle {
+      margin-top: 1em;
+    }
+  }
+  @include tablet {
+    display: flex;
+    flex-direction: row;
+    .hero-image {
+      box-sizing: border-box;
+      padding-top: 3rem;
+      padding-bottom: 3rem;
+      padding-left: 3rem;
+      width: 50%;
+      img {
+        display: block;
+      }
+    }
+    .hero-body {
+      padding: 3rem 3rem 3rem 1.5rem;
+      width: 50%;
+      z-index: +1;
+      .title {
+        display: inline-block;
+        margin-top: 0.5em;
+        margin-left: -1.25em;
+      }
+      .subtitle {
+        font-size: $size-5;
+      }
+      .title + .subtitle {
+        margin-top: 1em;
+      }
+    }
+  }
+  @include desktop {
+    .hero-body {
+      padding: 3rem 3rem 3rem 1.5rem;
+      .title {
+        margin-top: 0.25em;
+        font-size: $size-2;
+      }
+      .subtitle {
+        font-size: $size-4;
+      }
+    }
+  }
+}
+
+// Person
+
+.hero-person .container {
+  .title {
+    padding: 0.5em;
+    color: currentColor;
+    font-size: $size-3;
+    line-height: 1em;
+  }
+  .subtitle {
+    color: currentColor;
+    font-size: $size-5;
+    line-height: 1em;
+  }
+  .hero-body {
+    padding-top: 0;
+  }
+  p {
+    font-family: $family-monospace;
+  }
+  p + p {
+    margin-top: 1.2em;
+  }
+  @include tablet {
+    display: flex;
+    flex-direction: row;
+    .hero-image {
+      box-sizing: border-box;
+      padding: 3rem 3rem 3rem 6rem;
+      width: 50%;
+      img {
+        display: block;
+      }
+      .title {
+        // Needed to stay on top of the relative positioned .hero-image-shadow
+        // which is relatively positioned to make its :before box-shadow work.
+        position: relative;
+        margin-top: -1.5em;
+        margin-left: -1.25em;
+        padding-bottom: 0.5em;
+        z-index: +1;
+      }
+    }
+    .hero-body {
+      padding: 3rem 3rem 3rem 1.5rem;
+      width: 50%;
+      .subtitle {
+        font-weight: bold;
+      }
+      .subtitle + p {
+        margin-top: 1.2em;
+      }
+    }
+  }
+  @include desktop {
+    .subtitle {
+      font-size: $size-4;
+    }
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.iconlist.scss

@@ -0,0 +1,94 @@
+// Icon List
+//
+// Lists with icons to the left. Extends the agaricons component.
+// You can select any icon in `_component.agaricons.scss`
+//
+// Styleguide: Component.IconList
+
+.content ul.icon-list {
+  margin-left: 0;
+}
+
+.icon-list {
+  list-style: none;
+  padding-left: 0;
+  //
+  li {
+    list-style: none;
+  }
+}
+
+.icon-list-cols {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  //
+  li {
+    position: relative;
+    padding-left: 4rem;
+  }
+  li::before {
+    float: left;
+    margin-left: -4rem;
+    display: block;
+    font-family: Agaricons;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    text-rendering: auto;
+    line-height: 1;
+    font-size: 3em;
+    text-align: center;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    width: 3rem;
+  }
+  //
+  li {
+    position: relative;
+    padding-bottom: $gap;
+  }
+  li + li {
+    margin-top: 0;
+  }
+  @include tablet {
+    li:nth-child(2n+1) {
+      margin-right: 4%;
+    }
+    li:nth-last-child(1),
+    li:nth-last-child(2) {
+      padding-bottom: 0;
+    }
+    li {
+      padding-bottom: $gap * 2;
+      width: 48%;
+    }
+  }
+}
+
+
+.icon-list-cols li {
+  &.is-blue::before {
+    color: $blue;
+  }
+  &.is-marine::before {
+    color: $marine;
+  }
+  &.is-berry::before {
+    color: $berry;
+  }
+  &.is-cinnamon::before {
+    color: $cinnamon;
+  }
+  &.is-dark::before {
+    color: $dark;
+  }
+  &.is-grey::before {
+    color: $grey;
+  }
+  &.is-dandelion::before {
+    color: $dandelion;
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.media.scss

@@ -0,0 +1,62 @@
+// Media
+//
+// Extends Bulma media object.
+//
+// Styleguide: Component.Media
+
+.media + .media,
+.media .media {
+  padding-top: 0;
+  border-top: 0;
+}
+
+
+// Comments
+//
+// Extends Bulma media object for use in blog comments.
+//
+// Styleguide: Component.Media.Comment
+
+.media.media-comment {
+  display: block;
+  @extend %bigborder;
+  border-top-width: 2px;
+  border-top-color: $grey;
+  padding-top: $gap;
+  padding-bottom: $gap;
+  & + .media.media-comment,
+  & .media.media-comment {
+    @extend %bigborder;
+    border-top-width: 2px;
+    border-top-color: $grey;
+  }
+  .media-left {
+    font-family: $family-monospace;
+    color: $blue-light;
+    padding-bottom: 1rem;
+  }
+  .media-comment {
+    margin-top: $gap;
+    margin-bottom: $gap * -1.5;
+  }
+  @include tablet {
+    display: flex;
+    .media-left {
+      width: 12em;
+    }
+  }
+}
+
+// Media List
+//
+// Extends Bulma media object for use in blog teaser list.
+//
+// Styleguide: Component.Media.List
+
+.media-list {
+  .media,
+  .media + .media {
+    margin-top: $gap;
+    margin-bottom: $gap * 2;
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.navbar.scss

@@ -0,0 +1,294 @@
+// Navbar
+//
+// Customize Bulma navbar. Uses [ScrollMagic](http://scrollmagic.io) to change
+// background colors for optimal legibility against various backgrounds.
+//
+// Styleguide: Component.Navbar
+
+// Fixed container
+
+.is-fixed {
+  position: sticky;
+  top:  var(--gin-toolbar-height, 0px);
+  left: 0;
+  right: 0;
+  z-index: +400;
+  //
+  #logo .logo-color {
+    fill: currentColor;
+  }
+  & + div[data-drupal-messages-fallback] + section {
+    padding-top: 3.3125em;
+    @include desktop {
+      padding-top: 5.875em;
+    }
+  }
+}
+
+// If the toolbar is present, the is-fixed block must be displayed below the tool bar:
+.toolbar-tray-open.toolbar-horizontal {
+  .is-fixed {
+    padding-top: 79px;
+  }
+}
+
+// Attempt to keep anchor targets below the fixed header rather than having its
+// associated content hidden behind the header; hence the height and negative
+// margin here match the fixed header height at different breakpoints.
+:target::before {
+  content: "";
+  display: block;
+  height: 3.3125em;
+  margin: -3.3125em 0 0;
+  @include desktop {
+    height: 5.875em;
+    margin: -5.875em 0 0;
+  }
+}
+
+a:target,
+a:target:hover {
+  padding: 0;
+  margin: 0;
+}
+
+// Keep status messages out from under the fixed navbar.
+.message {
+  margin-top: 3.3125rem;
+  @include desktop {
+    margin-top: 5.875rem;
+  }
+}
+
+.navbar {
+  color: $white;
+  background-color: $dark;
+  @include desktop {
+    padding: 1.25em 0;
+  }
+  z-index: +9;
+}
+
+.navbar-transition {
+  @include tablet {
+    transition-property: color, background-color;
+    transition-timing-function: ease-out;
+    transition-duration: 500ms;
+  }
+}
+
+// Header colors
+
+.transparent-header {
+  @include tablet {
+    color: $white;
+    background-color: transparent;
+  }
+}
+
+.dark-header {
+  @include tablet {
+    color: $white;
+    background-color: $dark;
+  }
+}
+
+.light-header {
+  @include tablet {
+    color: $dark;
+    background-color: $white;
+  }
+}
+
+// Navbar child elements
+
+.navbar-brand #logo {
+  width: 95px;
+  height: 37px;
+}
+
+.navbar-burger {
+  color: currentColor;
+  span {
+    margin-left: -11px;
+    width: 22px;
+    height: 3.6px;
+    transition-property: top, left, width, transform;
+  }
+  span:nth-child(1) {
+    margin-top: -11px;
+  }
+  span:nth-child(2) {
+    margin-top: -2px;
+  }
+  span:nth-child(3) {
+    margin-top: 7px;
+  }
+  &.burger.is-active span:nth-child(1) {
+    margin-top: -11px;
+    margin-left: -8.5px;
+    width: 28px;
+  }
+  &.is-active span:nth-child(3) {
+    margin-top: 7.5px;
+    margin-left: -8.5px;
+    width: 28px;
+  }
+}
+
+.navbar-menu {
+  @include mobile {
+    background-color: $dark;
+  }
+}
+
+.navbar-dropdown {
+  border: 0;
+  padding: 0 1em;
+  border-radius: 0;
+  @include tablet {
+    border-top: 3px solid $dark;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.navbar-dropdown a.navbar-item {
+  padding: 1em;
+  &:first-child {}
+  &:last-child {}
+  @include tablet {
+    color: $dark;
+  }
+}
+
+.navbar-dropdown a:hover.navbar-item,
+.navbar-dropdown a:focus.navbar-item {
+  border-color: $white;
+  @include tablet {
+    color: $white;
+    background-color: $dark;
+  }
+}
+
+.navbar-dropdown .navbar-item:first-child {
+  border-top: 3px solid $white;
+  @include tablet {
+    border-top: 0;
+  }
+}
+
+.navbar-dropdown .navbar-item:last-child {
+  border-bottom: 3px solid $white;
+  @include tablet {
+    border-bottom: 0;
+  }
+}
+
+.navbar-dropdown .navbar-item {
+  padding-left: 3em;
+  @include tablet {
+    padding-left: 1em;
+  }
+}
+
+.navbar-link {
+  padding-right: 1rem;
+  color: currentColor;
+  &::after {
+    display: none;
+  }
+}
+
+.navbar-item {
+  color: currentColor;
+  font-weight: bold;
+}
+
+a.navbar-item.is-active,
+a.navbar-link.is-active {
+  color: $blue-light;
+  background-color: transparent;
+  @include tablet {
+    color: currentColor;
+    &::before {
+      display: block;
+      content: '' !important;
+      position: absolute;
+      left: 1em;
+      right: 1em;
+      bottom: 6px;
+      border-top: 3px solid currentColor;
+    }
+    &:hover,
+    &:focus {
+      color: $white;
+      background-color: $dark;
+      &::before {
+        display: none;
+      }
+    }
+  }
+}
+
+.navbar-item.has-dropdown:hover .navbar-link,
+.navbar-item.has-dropdown:focus .navbar-link,
+.navbar-item.has-dropdown.is-active .navbar-link {
+  @include tablet {
+    color: $white;
+    background-color: $dark;
+  }
+}
+
+a.navbar-item:hover,
+a.navbar-link:hover,
+a.navbar-item:focus,
+a.navbar-link:focus,
+.hero.is-dark a.navbar-item:not(.button):not(.dropdown-item):not(.tag):hover,
+.hero.is-dark a.navbar-item:not(.button):not(.dropdown-item):not(.tag):focus
+{
+  color: $dark;
+  background-color: $white;
+}
+
+.light-header {
+  a.navbar-item:hover,
+  a.navbar-link:hover,
+  a.navbar-item:focus,
+  a.navbar-link:focus {
+    color: $white;
+    background-color: $dark;
+  }
+}
+
+.navbar-link, .navbar-item {
+  .navbar-item.is-active::before {
+    display: none;
+  }
+}
+
+// Navbar search
+
+.navbar .ion-search {
+  font-size: 1.25em;
+}
+
+.navbar-search {
+  position: relative;
+  .navbar-search-swap form {
+    position: absolute;
+    top: -9rem;
+    transition-property: top;
+    transition-duration: 0.4s;
+    right: -0.5rem;
+    padding: 3.5rem 1rem 0.666rem 1rem;
+    background-color: $dark;
+  }
+  .navbar-search-swap:hover form,
+  form:focus-within {
+    top: -3rem;
+  }
+  .navbar-search-swap form .form-item .control .form-text.input {
+    width: 18rem;
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.pagination.scss

@@ -0,0 +1,22 @@
+// Pagination
+//
+// Extend Bulma pagination.
+//
+// Styleguide: Component.Pagination
+
+.pagination {
+  .pagination-previous,
+  .pagination-next,
+  .pagination-link {
+    border: 0;
+    font-weight: 700;
+    &:hover {
+      color: $white;
+      background-color: $dark;
+    }
+    &[disabled] {
+      color: $dark;
+      background-color: inherit;
+    }
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.related.scss

@@ -0,0 +1,27 @@
+// Related
+//
+// Block of three related items.
+//
+// Styleguide: Component.Related
+
+.related {
+  padding-top: 0;
+  .media {
+    .media-left {
+      max-width: 9em;
+    }
+  }
+}
+
+.hero + .section.related {
+  margin-top: -3rem;
+  .titlebar-bigborder {
+    border-top: 0;
+  }
+}
+
+.section.related .title.is-5 {
+  font-size: 1.1rem;
+  line-height: 1.25em;
+  font-weight: normal; // TODO just remove the '.title' instead.
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.tabs.scss

@@ -0,0 +1,21 @@
+// Tabs
+//
+// Extends Bulma Tabs component.
+//
+// Styleguide: Component.Tabs
+
+.tabs {}
+
+.hero.is-dark,
+.is-dark {
+  .tabs {
+    a {
+      color: $blue-light;
+    }
+    //
+    .is-active a,
+    a:hover {
+      color: $white;
+    }
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.teaser.scss

@@ -0,0 +1,70 @@
+// Teaser
+//
+// Styles for teasers, typically lists of linked excerpts.
+//
+// Styleguide: Component.Teaser
+
+a.teaser {
+  display: block;
+  //
+  &:hover {
+    outline: 0.5em solid lighten($grey,5%);
+    background: lighten($grey,5%);
+    //
+    .title,
+    .subtitle {
+      color: $blue;
+    }
+  }
+}
+
+.content .teaser,
+.teaser {
+  *.title {
+    margin-bottom: 0;
+  }
+  //
+  .subtitle {}
+  .title + .subtitle {
+    margin-top: 1em;
+  }
+}
+
+.teaser + .teaser {
+  margin-top: $gap;
+}
+
+.media.teaser {
+  .media-left {
+    width: 12em;
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.media-list .media,
+.media-list .media + .media {
+  margin-bottom: $gap;
+}
+
+.media-list .teaser {
+  .media-left {
+    height: 7rem;
+    overflow: hidden;
+    img + .byline {
+      display: none;
+    }
+  }
+  &:hover {
+    .media-left {
+      img {
+        display: none;
+      }
+      .byline {
+        display: block;
+      }
+    }
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.tile.scss

@@ -0,0 +1,8 @@
+// Tile
+//
+// Extends Bulma Tile component.
+//
+// Styleguide: Component.Tile
+
+article.tile {
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_component.titlebar.scss

@@ -0,0 +1,65 @@
+// Titlebar
+//
+// Structure to title a section with the title to the left and links
+// to the right.
+//
+// .titlebar-bigborder - border at the top
+// .titlebar-padded - padding at the bottom
+//
+// Styleguide: Component.Titlebar
+
+.titlebar {
+  @include tablet {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+  //
+  .titlebar_title {
+    @include tablet {
+      .subtitle,
+      .title {
+        margin: 0;
+        color: currentColor;
+      }
+    }
+  }
+  .titlebar_links {
+    color: currentColor;
+    font-size: $size-6;
+    font-weight: 700;
+    //
+    a {
+      color: currentColor;
+    }
+    a:hover {
+      color: $blue;
+    }
+  }
+}
+
+.titlebar-bigborder {
+  margin-top: $column-gap * 2;
+  padding-top: $column-gap * 2;
+  @extend %bigborder;
+}
+
+.titlebar-padded {
+  padding-bottom: $column-gap * 2;
+}
+
+.titlebar + .byline {
+  margin-top: 1.5rem;
+}
+
+.header-search {
+  .form-submit.button {
+    @include control-medium;
+  }
+  .form-text.input {
+    @include control-medium;
+    @include tablet {
+      width: 20em;
+    }
+  }
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_layout.columns.scss

@@ -0,0 +1,16 @@
+// Columns
+//
+// Extends Bulma Columns
+//
+// .is-equal-height - equal height child lements
+// .is-centered-vert - vertical center child content
+//
+// Styleguide: Layout.Columns
+
+.is-equal-height .column {
+  display: flex;
+}
+
+.is-centered-vert {
+  align-items: center;
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_layout.flow.scss

@@ -0,0 +1,121 @@
+// Flow Layout
+//
+// Flow layouts are intended for use with the Drupal Paragraphs module
+//
+// .flow-thirds - add to parent element, use three columns
+// .flow_middle - center column (default)
+// .flow_left - float to left column
+// .flow_right - float to right column
+// .flow_full - full-width column
+//
+// Styleguide: Layout.Flow
+
+.flow {
+  clear: both;
+  @include tablet {
+    margin-left: calc(16.3% - #{$column-gap / 2});
+    margin-right: calc(16.3% - #{$column-gap / 2});
+    margin-top: -$column-gap;
+    //
+    &:last-child {
+      margin-bottom: -$column-gap;
+    }
+    &:not(:last-child) {
+      margin-bottom: calc(1.5rem - #{$column-gap});
+    }
+  }
+  @include desktop {
+    .flow_breakout {
+      box-sizing: border-box;
+      padding: 3em;
+      background: pink;
+      margin-left: calc(50% - 50vw + 0.5em);
+      margin-right: calc(50% - 50vw + 0.5em);
+    }
+  }
+  [class^=flow] {
+    box-sizing: border-box;
+    margin-top: 1rem; // Top and bottom will collapse to 1em if two paragraphs
+    margin-bottom: 1rem; // in a row, matching the p bottom margin.
+    @include tablet {
+      margin-left: $column-gap;
+      margin-right: $column-gap;
+    }
+    + [class^=flow] {
+      h2:first-child {
+        margin-top: 1.1428em;
+      }
+      .columns h2:first-child {
+        margin-top: inherit;
+      }
+    }
+  }
+  .flow_full {
+    @include tablet {
+      margin-left: -25%;
+      margin-right: -25%;
+    }
+  }
+  .flow_middle {
+    @include tablet {}
+  }
+  .flow_left {
+    @include tablet {
+      float: left;
+      margin-left: -25%;
+      width: 25%;
+    }
+  }
+  .flow_right {
+    @include tablet {
+      float: right;
+      margin-right: -25%;
+      width: 25%;
+    }
+  }
+}
+
+.flow-thirds {
+  @include tablet {
+    margin-left: calc(25% - #{$column-gap / 2});
+    margin-right: calc(25% - #{$column-gap / 2});
+  }
+  //
+  .flow_full {
+    @include tablet {
+      margin-left: -50%;
+      margin-right: -50%;
+    }
+  }
+  .flow_middle {
+    @include tablet {}
+  }
+  .flow_left {
+    @include tablet {
+      float: left;
+      margin-left: -50%;
+      width: 50%;
+    }
+  }
+  .flow_right {
+    @include tablet {
+      float: right;
+      margin-right: -50%;
+      width: 50%;
+    }
+  }
+}
+
+// Center-align standalone image paragraphs.
+.flow_middle > img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Adding this so the comment box at the bottom isn't unnaturally small.
+// Applying more generally breaks node content layout.
+
+.media-comment > .flow.content {
+  width: 100%;
+}

web/themes/custom/agarica/patternlibrary/agaric/sass/agaric/_variables.scss

@@ -0,0 +1,196 @@
+// Bulma Variables
+//
+// Customize Bulma variables
+//
+// Styleguide: Base.Variables
+
+// Font directory
+$font-dir: "../fonts" !default;
+// Agaric icons config path
+$agaricon-path: $font-dir !default;
+
+// Colors
+//
+// Assign colors
+//
+// Styleguide: Base.Variables.Colors
+
+// Design colors
+$blue: #26599B;
+$blue-light: #3276CF;
+$blue-dark: #193B68;
+$marine-light: #4EC6B0;
+$marine: #3DB5A0;
+$marine-dark: #47A191;
+$berry-light: #9B6187;
+$berry: #823A69;
+$berry-dark: #622C4F;
+$cinnamon-light: #EC623B;
+$cinnamon: #DB512A;
+$cinnamon-dark: #CA4019;
+$dark: #0D1E34;
+$grey: #E4E5E7;
+$white: #FFFFFF;
+$dandelion-light: #CBC219;
+$dandelion: #BAB108;
+$dandelion-dark: #A59E20;
+
+// Bulma body color
+$body-background: $white !default;
+
+// Bulma primary colors
+$primary: $blue !default;
+$info: $blue !default;
+$success: $marine !default;
+$warning: $dandelion-light !default;
+$danger: $cinnamon !default;
+$light: $white !default;
+$dark: $dark !default;
+
+// Bulma invert colors
+$orange-invert: $white !default;
+$yellow-invert: $white !default;
+$green-invert: $white !default;
+$turquoise-invert: $white !default;
+$blue-invert: $white !default;
+$purple-invert: $white !default;
+$red-invert: $white !default;
+$primary-invert: $turquoise-invert !default;
+$info-invert: $blue-invert !default;
+$success-invert: $green-invert !default;
+$warning-invert: $yellow-invert !default;
+$danger-invert: $red-invert !default;
+$light-invert: $dark !default;
+$dark-invert: $white !default;
+
+// Bulma general colors
+$background: $white !default;
+$border: $grey !default;
+$border-hover: $grey !default;
+
+// Bulma text colors
+$text: $dark !default;
+$text-invert: $white !default;
+$text-light: $grey !default;
+$text-strong: $dark !default;
+
+// Bulma code colors
+$code: $cinnamon !default;
+$code-background: $background !default;
+$pre: $text !default;
+$pre-background: $background !default;
+
+// Bulma link colors
+$link: $primary !default;
+$link-invert: $primary-invert !default;
+$link-visited: $berry-dark !default;
+$link-hover: $white !default;
+$link-hover-border: $cinnamon-dark !default;
+$link-focus: $white !default;
+$link-focus-border: $primary !default;
+$link-active: $dandelion-light  !default;
+$link-active-border: $blue-light !default;
+// Our added link colors
+$link-hover-background: $primary !default;
+$link-hover-padding: 0.25em !default;
+
+
+// Fonts
+//
+// Set fonts
+//
+// Styleguide: Base.Variables.Fonts
+
+@font-face {
+  font-family: 'Poppins';
+  src: url("#{$font-dir}/Poppins-400.woff2") format('woff2'), url("#{$font-dir}/Poppins-400.woff") format('woff'), url("#{$font-dir}/Poppins-400.ttf") format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Poppins';
+  src: url("#{$font-dir}/Poppins-700.woff2") format('woff2'), url("#{$font-dir}/Poppins-700.woff") format('woff'), url("#{$font-dir}/Poppins-700.ttf") format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Anonymous Pro';
+  src: url("#{$font-dir}/AnonymousPro-400.woff2") format('woff2'), url("#{$font-dir}/AnonymousPro-400.woff") format('woff'), url("#{$font-dir}/AnonymousPro-400.ttf") format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+$family-sans-serif: 'Poppins','Century Gothic',CenturyGothic,AppleGothic,sans-serif !default;
+$family-monospace: 'Anonymous Pro', 'Andale Mono', AndaleMono, monospace !default;
+$render-mode: optimizeLegibility !default;
+
+
+// Typography
+//
+// Customize type sizes and weights
+//
+// Weight: 3
+//
+// Styleguide: Base.Variables.Typography
+
+// Bulma sizes
+$size-1: 5.63rem !default;
+$size-2: 3.5rem !default;
+$size-3: 2.5rem !default;
+$size-4: 1.75rem !default;
+$size-5: 1.25rem !default;
+$size-6: 0.88rem !default;
+$size-7: 0.63rem !default;
+
+// Bulma weights
+$weight-light: 4300 !default;
+$weight-normal: 400 !default;
+$weight-medium: 400 !default;
+$weight-semibold: 700 !default;
+$weight-bold: 700 !default;
+
+
+// Grid
+//
+// Customize grid dimensions
+//
+// Styleguide: Base.Variables.Grid
+
+$column-gap: 1.5rem !default;
+
+
+// Breakpoints
+//
+// Set responsive breakpoints
+//
+// Styleguide: Base.Variables.Breakpoints
+
+// The container horizontal gap, which acts as the offset for breakpoints
+$gap: 32px !default; // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$tablet: 769px !default; // 960px container + 3rem
+$desktop: 960px + (2 * $gap) !default; // 1152px container + 3rem
+$widescreen: 1152px + (2 * $gap) !default; // 1344px container + 3rem
+$fullhd: 1344px + (2 * $gap) !default;
+
+$navbar-breakpoint: $tablet !default;
+
+
+// Animation
+//
+// Animation timing
+//
+// Styleguide: Base.Variables.Animation
+
+$easing: ease-out !default;
+$speed: 86ms !default;
+
+
+// Borders
+//
+// Border radius
+//
+// Styleguide: Base.Variables.Borders
+
+$radius-small: 0 !default;
+$radius: 0 !default;
+$radius-large: 0 !default;

web/themes/custom/agarica/patternlibrary/agaric/templates/block/block--content-bottom.html.twig

@@ -0,0 +1,7 @@
+{# See "@stable/block/block.html.twig" #}
+{# TODO probably let this go back to inheriting from Octavia/Bulma #}
+<div {{ attributes.addClass('column') }}>
+{% block content %}
+  {{ content }}
+{% endblock %}
+</div>

web/themes/custom/agarica/patternlibrary/agaric/templates/block/block--core.html.twig

@@ -0,0 +1,8 @@
+{# See "@stable/block/block.html.twig" #}
+{# TODO probably let this go back to inheriting from Octavia/Bulma,
+   or include a pattern. #}
+<div {{ attributes }}>
+{% block content %}
+  {{ content }}
+{% endblock %}
+</div>

web/themes/custom/agarica/patternlibrary/agaric/templates/block/block--header-search.html.twig

@@ -0,0 +1,32 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+<div{{ attributes.addClass('header-search') }}>
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>

web/themes/custom/agarica/patternlibrary/agaric/templates/block/block--highlighted.html.twig

@@ -0,0 +1,20 @@
+{# See "@stable/block/block.html.twig" #}
+{%
+  set classes = [
+    'hero',
+    'is-light',
+  ]
+%}
+{% set attributes = attributes.addClass(classes).setAttribute('data-headerbg', 'light') %}
+<section{{ attributes }}>
+  <div class="hero-body subtitle is-mono is-4 container">
+    {{ title_prefix }}
+    {% if label %}
+      <h2{{ title_attributes }}>{{ label }}</h2>
+    {% endif %}
+    {{ title_suffix }}
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+  </div>
+</section>

web/themes/custom/agarica/patternlibrary/agaric/templates/block/block--languageswitcher.html.twig

@@ -0,0 +1,8 @@
+{{ title_prefix }}
+{% if label %}
+  {{ label }}
+{% endif %}
+{{ title_suffix }}
+{% block content %}
+  {{ content }}
+{% endblock %}

web/themes/custom/agarica/patternlibrary/agaric/templates/block/block--page-title-block.html.twig

@@ -0,0 +1,8 @@
+{# Overrides octavia/src/templates/block/block.html.twig #}
+{% extends '@bulma/block/block.html.twig' %}
+{%
+  set classes = [
+    'titlebar_title'
+  ]
+%}
+{% set attributes = attributes.addClass(classes) %}

web/themes/custom/agarica/patternlibrary/agaric/templates/block/block--system-branding-block.html.twig

@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a branding block.
+ *
+ * Each branding element variable (logo, name, slogan) is only available if
+ * enabled in the block configuration.
+ *
+ * Available variables:
+ * - site_logo: Logo for site as defined in Appearance or theme settings.
+ * - site_name: Name for site as defined in Site information settings.
+ * - site_slogan: Slogan for site as defined in Site information settings.
+ *
+ * @ingroup themeable
+ */
+#}
+{% block content %}
+<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+  viewBox="0 0 95 37" style="enable-background:new 0 0 95 37;" xml:space="preserve" role="img" aria-label="agaric">
+  <title>agaric</title>
+  <path class="logo-color" d="M13,8.8c-0.7-0.8-1.5-1.3-2.4-1.7C9.7,6.7,8.8,6.5,7.8,6.5c-2.2,0-4,0.8-5.5,2.5C0.8,10.6,0,12.7,0,15.3
+    c0,2.5,0.8,4.5,2.3,6.2c1.6,1.7,3.4,2.5,5.5,2.5c1,0,1.8-0.2,2.7-0.5c0.8-0.3,1.6-0.9,2.4-1.7v1.8h4.2V6.9H13V8.8z M11.9,18.8
+    c-0.9,0.9-1.9,1.4-3.2,1.4c-1.3,0-2.3-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.5c0-1.4,0.4-2.6,1.3-3.5c0.8-0.9,1.9-1.4,3.2-1.4
+    c1.3,0,2.4,0.4,3.3,1.3c0.9,0.9,1.3,2.1,1.3,3.5C13.2,16.7,12.7,17.9,11.9,18.8z"/>
+  <path class="logo-color" d="M55.5,23.5V6.9h-4.2v1.8c-0.7-0.8-1.5-1.3-2.4-1.7c-0.9-0.4-1.8-0.6-2.8-0.6c-2.2,0-4,0.8-5.5,2.5
+    c-1.5,1.6-2.3,3.7-2.3,6.3c0,2.5,0.8,4.5,2.3,6.2c1.6,1.7,3.4,2.5,5.5,2.5c1,0,1.8-0.2,2.7-0.5c0.8-0.3,1.6-0.9,2.4-1.7v1.8H55.5z
+     M50.2,18.8c-0.9,0.9-1.9,1.4-3.2,1.4c-1.3,0-2.3-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.5c0-1.4,0.4-2.6,1.3-3.5
+    c0.8-0.9,1.9-1.4,3.2-1.4c1.3,0,2.4,0.4,3.3,1.3c0.9,0.9,1.3,2.1,1.3,3.5C51.5,16.7,51.1,17.9,50.2,18.8z"/>
+  <path class="logo-color" d="M86.8,20.1c-1.5,0-2.7-0.4-3.6-1.3c-0.9-0.9-1.4-2-1.4-3.4c0-1.4,0.5-2.6,1.4-3.6c1-0.9,2.2-1.4,3.8-1.4
+    c0.9,0,1.6,0.1,2.2,0.4c0.6,0.3,1.3,0.7,1.9,1.4l3.5-1.9c-0.8-1.2-1.9-2.1-3.2-2.8c-1.3-0.7-2.8-1-4.4-1c-1.8,0-3.4,0.4-4.8,1.2
+    c-1.4,0.8-2.6,1.8-3.4,3.2c-0.8,1.3-1.2,2.8-1.2,4.4c0,2.3,0.8,4.3,2.5,6.1c1.6,1.7,3.9,2.6,6.8,2.6c3.2,0,5.7-1.2,7.5-3.5
+    l-3.3-2.2C90.1,19.5,88.6,20.1,86.8,20.1z"/>
+  <path class="logo-color" d="M34.2,5.7l-1.7,1.7c-1.1-0.6-2.4-1-3.7-1c-7.6,0-9.1,5.6-9.1,8.7c0,1.6,0.4,3.9,1.9,5.7
+    c-1.4,2.2-2.9,6.2-1.7,9.8c0.3,1.4,1.1,2.6,2.3,3.7c1.6,1.5,3.6,2.2,5.9,2.2c0,0,0,0,0,0c0,0,0,0,0,0c2.3,0,4.3-0.7,5.9-2.2
+    c1.6-1.5,2.4-3.3,2.4-5.4c0-2.2-1.4-3.2-3.3-3.2h-9.7c0.3-1.1,0.7-2.1,1.1-2.7c1.2,0.5,2.6,0.8,4.3,0.8c2.2,0,4.1-0.8,5.6-2.5
+    c1.5-1.6,2.3-3.7,2.3-6.2c0-2-0.5-3.7-1.4-5.1l1.7-1.7L34.2,5.7z M32.6,29.5c-0.1,0.9-0.5,1.6-1.2,2.2c-0.9,0.9-2,1.3-3.4,1.3
+    c0,0,0,0-0.1,0l0,0l0,0c0,0,0,0-0.1,0c-1.4,0-2.4-0.4-3.4-1.3c-0.7-0.7-1.1-1.4-1.2-2.2H32.6z M31.2,18.7c-0.9,0.9-1.9,1.4-3.2,1.4
+    c-1.3,0-2.4-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.6c0-1.4,0.4-2.6,1.3-3.5c0.9-0.9,1.9-1.3,3.3-1.3c1.3,0,2.4,0.5,3.2,1.4
+    c0.8,0.9,1.3,2.1,1.3,3.5C32.5,16.6,32.1,17.8,31.2,18.7z"/>
+  <rect x="71.4" y="6.9" class="logo-color" width="4.2" height="16.6"/>
+  <circle class="logo-color" cx="73.5" cy="2.7" r="2.7"/>
+  <rect x="38.3" y="25.9" class="logo-color" width="55.6" height="3.6"/>
+  <rect x="0.8" y="25.9" class="logo-color" width="16.4" height="3.6"/>
+  <path class="logo-color" d="M58.3,6.9v16.6h4.1v-8.6c0-3.2,1-4.7,3.1-4.7c0.7,0,1.4,0.3,2.1,0.8l1.8-3.5c-1.1-0.7-2.2-1-3.2-1
+    c-0.8,0-1.4,0.1-2,0.4c-0.5,0.3-1.2,0.8-1.9,1.5V6.9H58.3z"/>
+</svg>
+{% endblock %}