Reorganize styleguide (pattern library) to distinguish static layouts, styleguide from Sass powering it

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>

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>

agaric/js/script.js

@@ -0,0 +1,45 @@
+$( 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)})
+      .on("leave",function(e){headerEl.removeClass(elClass)})
+      .addTo(controller);
+  });
+
+  // Slick carousel
+  $('.carousel').slick({
+    arrows: false,
+    centerMode: true,
+    centerPadding: '0',
+    slidesToShow: 3,
+    dots: true,
+    responsive: [
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1
+        }
+      }
+    ]
+  });
+
+});

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 "vendor/bulma/bulma";
+@import "vendor/slick/slick";
+@import "vendor/slick/slick-theme";
+@import "vendor/ionicons/ionicons";
+
+
+// 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";

agaric/sass/agaric/_base.blockquote.scss

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

agaric/sass/agaric/_base.elements.scss

@@ -0,0 +1,77 @@
+// 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;
+    }
+  }
+}
+
+
+// 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;
+  }
+}

agaric/sass/agaric/_base.figure.scss

@@ -0,0 +1,26 @@
+// 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;
+}

agaric/sass/agaric/_base.form.scss

@@ -0,0 +1,22 @@
+// Form
+//
+// Extends Bulma Form classes.
+//
+// Styleguide: Base.Form
+
+.is-dark {
+  .field {}
+  .label {
+    color: currentColor;
+  }
+  .select {
+    select {
+      border-color: $dark;
+      color: $white;
+      background-color: $dark;
+    }
+    &:not(.is-multiple)::after {
+      border-color: currentColor;
+    }
+  }
+}

agaric/sass/agaric/_base.typography.scss

@@ -0,0 +1,151 @@
+// 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-1;
+  line-height: 1.07em;
+}
+
+.title.is-2 {
+  font-size: $size-2;
+  line-height: 1.14em;
+}
+
+.title.is-3 {
+  font-size: $size-3;
+  line-height: 1.2em;
+}
+
+.title.is-4 {
+  font-size: $size-4;
+  line-height: 1.43em;
+}
+
+.title.is-5 {
+  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;
+  }
+}
+
+
+// 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

agaric/sass/agaric/_component.agaricons.scss

@@ -0,0 +1,228 @@
+// Agaricons
+//
+// Extends Bulma icon classes.
+//
+// Styleguide: Component.Agaricons
+
+$agaricon-path: 'fonts/';
+@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";
+}

agaric/sass/agaric/_component.card.scss

@@ -0,0 +1,212 @@
+// 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;
+}
+
+// colors
+.card.is-blue {
+  color: $white;
+  background-color: $blue;
+}
+
+a.card.is-blue:hover {
+  color: $white;
+  background-color: darken($blue, 5%);
+}
+
+.card.is-marine {
+  color: $white;
+  background-color: $marine;
+}
+
+a.card.is-marine:hover {
+  color: $white;
+  background-color: darken($marine, 5%);
+}
+
+.card.is-berry {
+  color: $white;
+  background-color: $berry;
+}
+
+a.card.is-berry:hover {
+  color: $white;
+  background-color: darken($berry, 5%);
+}
+
+.card.is-cinnamon {
+  color: $white;
+  background-color: $cinnamon;
+}
+
+a.card.is-cinnamon:hover {
+  color: $white;
+  background-color: darken($cinnamon, 5%);
+}
+
+.card.is-dark {
+  color: $white;
+  background-color: $dark;
+}
+
+a.card.is-dark:hover {
+  color: $white;
+  background-color: darken($dark, 5%);
+}
+
+.card.is-grey {
+  color: $white;
+  background-color: $grey;
+}
+
+a.card.is-grey:hover {
+  color: $white;
+  background-color: darken($grey, 5%);
+}
+
+.card.is-dandelion {
+  color: $white;
+  background-color: $dandelion;
+}
+
+a.card.is-dandelion:hover {
+  color: $white;
+  background-color: darken($dandelion, 5%);
+}
+// Project
+.card-project {
+  position: relative;
+  color: $white;
+  background-color: $dark;
+  box-shadow: none;
+
+  &.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;
+    }
+
+    .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;
+    }
+  }
+
+  .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);
+  }
+}

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;
+      }
+    }
+  }
+}

agaric/sass/agaric/_component.footer.scss

@@ -0,0 +1,34 @@
+// 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;
+  }
+  //
+  .container {
+    padding-top: 3em;
+    @extend %bigborder;
+  }
+  .footer-logo .icon {
+    display: inline-block;
+    margin-top: -0.325em;
+    font-size: 4.5em;
+    //
+    .agc {
+      display: block;
+    }
+  }
+}

agaric/sass/agaric/_component.hero.scss

@@ -0,0 +1,252 @@
+// 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;
+  //
+  &::before {
+    position: absolute;
+    display: block;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 11em;
+    content: "";
+    background: -webkit-linear-gradient(top, rgba(13,30,52,1) 25%,rgba(13,30,52,0) 100%);
+    background: -moz-linear-gradient(top, rgba(13,30,52,1) 25%, rgba(13,30,52,0) 100%);
+    background: linear-gradient(to bottom, rgba(13,30,52,1) 25%,rgba(13,30,52,0) 100%);
+  }
+  //
+  a .icon {
+    color: $dandelion;
+  }
+  a:hover .icon {
+    color: $dandelion-light;
+  }
+}
+
+.hero.is-blue {
+  color: $white;
+  background-color: $blue;
+}
+
+.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;
+}
+
+// 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: 6em;
+      }
+      .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 {
+        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;
+    }
+  }
+}

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;
+  }
+}

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;
+  }
+}

agaric/sass/agaric/_component.navbar.scss

@@ -0,0 +1,216 @@
+// 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: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: +999;
+  //
+  #logo .logo-color {
+    fill: currentColor;
+  }
+  & + section {
+    padding-top: 3.3125em;
+    @include desktop {
+      padding-top: 5.875em;
+    }
+  }
+}
+
+.navbar {
+  color: $white;
+  background-color: $dark;
+  @include tablet {
+    transition-property: color, background-color;
+    transition-timing-function: ease-out;
+    transition-duration: 500ms;
+  }
+  @include desktop {
+    padding: 1.25em 0;
+    background-color: transparent;
+  }
+  z-index: +9;
+}
+
+// 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 {
+  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 .ion-search {
+  font-size: 1.25em;
+}
+
+.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 {
+  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: -3px;
+      border-top: 3px solid currentColor;
+    }
+    &:hover {
+      color: $white;
+      background-color: $dark;
+      &::before {
+        display: none;
+      }
+    }
+  }
+}
+
+.navbar-item.has-dropdown:hover .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 {
+  color: $white;
+  background-color: $dark;
+}
+
+.navbar-link, .navbar-item {
+  .navbar-item.is-active::before {
+    display: none;
+  }
+}

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;
+    }
+  }
+}

agaric/sass/agaric/_component.related.scss

@@ -0,0 +1,21 @@
+// 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;
+  }
+}

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;
+    }
+  }
+}

agaric/sass/agaric/_component.teaser.scss

@@ -0,0 +1,49 @@
+// 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 {
+  display: flex;
+  //
+  .media-left {
+    width: 12em;
+    //
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+}

agaric/sass/agaric/_component.tile.scss

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

agaric/sass/agaric/_component.titlebar.scss

@@ -0,0 +1,49 @@
+// 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;
+}

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;
+}

agaric/sass/agaric/_layout.flow.scss

@@ -0,0 +1,97 @@
+// 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;
+    @include tablet {
+      padding: $column-gap;
+    }
+  }
+  .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%;
+    }
+  }
+}

agaric/sass/agaric/_variables.scss

@@ -0,0 +1,189 @@
+// Bulma Variables
+//
+// Customize Bulma variables
+//
+// Styleguide: Base.Variables
+
+// Ionicons config path
+$ionicons-font-path: "fonts" !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;
+
+// Bulmla link colors
+$link: $primary !default;
+$link-invert: $primary-invert !default;
+$link-visited: $blue-dark !default;
+$link-hover: $grey !default;
+$link-hover-border: $grey !default;
+$link-focus: $grey !default;
+$link-focus-border: $primary !default;
+$link-active: $blue-light !default;
+$link-active-border: $blue-light !default;
+
+
+// Fonts
+//
+// Set fonts
+//
+// Styleguide: Base.Variables.Fonts
+
+@font-face {
+  font-family: "Ionicons";
+  src: url("fonts/ionicons.eot");
+  src: url("fonts/ionicons.eot#iefix") format("embedded-opentype"), url("fonts/ionicons.ttf") format("truetype"), url("fonts/ionicons.woff") format("woff"), url("fonts/ionicons.svg#Ionicons") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Poppins';
+  src: url("fonts/Poppins-400.woff2") format('woff2'), url("fonts/Poppins-400.woff") format('woff'), url("fonts/Poppins-400.ttf") format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Poppins';
+  src: url("fonts/Poppins-700.woff2") format('woff2'), url("fonts/Poppins-700.woff") format('woff'), url("fonts/Poppins-700.ttf") format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Anonymous Pro';
+  src: url("fonts/AnonymousPro-400.woff2") format('woff2'), url("fonts/AnonymousPro-400.woff") format('woff'), url("fonts/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;
+
+
+// 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;

agaric/sass/vendor/bulma/bulma.sass

@@ -0,0 +1,8 @@
+@charset "utf-8"
+/*! bulma.io v0.5.3 | MIT License | github.com/jgthms/bulma */
+@import "sass/utilities/_all"
+@import "sass/base/_all"
+@import "sass/elements/_all"
+@import "sass/components/_all"
+@import "sass/grid/_all"
+@import "sass/layout/_all"

agaric/sass/vendor/bulma/sass/base/_all.sass

@@ -0,0 +1,5 @@
+@charset "utf-8"
+
+@import "minireset.sass"
+@import "generic.sass"
+@import "helpers.sass"

agaric/sass/vendor/bulma/sass/base/generic.sass

@@ -0,0 +1,127 @@
+$body-background-color: #fff !default
+$body-size: 16px !default
+$body-rendering: optimizeLegibility !default
+$body-family: $family-primary !default
+$body-color: $text !default
+$body-weight: $weight-normal !default
+$body-line-height: 1.5 !default
+
+$code-family: $family-code !default
+$code-padding: 0.25em 0.5em 0.25em !default
+$code-weight: normal !default
+$code-size: 0.875em !default
+
+$hr-background-color: $border !default
+$hr-height: 1px !default
+$hr-margin: 1.5rem 0 !default
+
+$strong-color: $text-strong !default
+$strong-weight: $weight-bold !default
+
+html
+  background-color: $body-background-color
+  font-size: $body-size
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
+  min-width: 300px
+  overflow-x: hidden
+  overflow-y: scroll
+  text-rendering: $body-rendering
+  text-size-adjust: 100%
+
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+section
+  display: block
+
+body,
+button,
+input,
+select,
+textarea
+  font-family: $body-family
+
+code,
+pre
+  -moz-osx-font-smoothing: auto
+  -webkit-font-smoothing: auto
+  font-family: $code-family
+
+body
+  color: $body-color
+  font-size: 1rem
+  font-weight: $body-weight
+  line-height: $body-line-height
+
+// Inline
+
+a
+  color: $link
+  cursor: pointer
+  text-decoration: none
+  strong
+    color: currentColor
+  &:hover
+    color: $link-hover
+
+code
+  background-color: $code-background
+  color: $code
+  font-size: $code-size
+  font-weight: $code-weight
+  padding: $code-padding
+
+hr
+  background-color: $hr-background-color
+  border: none
+  display: block
+  height: $hr-height
+  margin: $hr-margin
+
+img
+  height: auto
+  max-width: 100%
+
+input[type="checkbox"],
+input[type="radio"]
+  vertical-align: baseline
+
+small
+  font-size: 0.875em
+
+span
+  font-style: inherit
+  font-weight: inherit
+
+strong
+  color: $strong-color
+  font-weight: $strong-weight
+
+// Block
+
+pre
+  +overflow-touch
+  background-color: $pre-background
+  color: $pre
+  font-size: 0.875em
+  overflow-x: auto
+  padding: 1.25rem 1.5rem
+  white-space: pre
+  word-wrap: normal
+  code
+    background-color: transparent
+    color: currentColor
+    font-size: 1em
+    padding: 0
+
+table
+  td,
+  th
+    text-align: left
+    vertical-align: top
+  th
+    color: $text-strong

agaric/sass/vendor/bulma/sass/base/helpers.sass

@@ -0,0 +1,203 @@
+// Float
+
+.is-clearfix
+  +clearfix
+
+.is-pulled-left
+  float: left !important
+
+.is-pulled-right
+  float: right !important
+
+// Overflow
+
+.is-clipped
+  overflow: hidden !important
+
+// Overlay
+
+.is-overlay
+  +overlay
+
+// Typography
+
+=typography-size($target:'')
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
+      font-size: $size !important
+
++typography-size()
+
++mobile
+  +typography-size('mobile')
+
++tablet
+  +typography-size('tablet')
+
++touch
+  +typography-size('touch')
+
++desktop
+  +typography-size('desktop')
+
++widescreen
+  +typography-size('widescreen')
+
++fullhd
+  +typography-size('fullhd')
+
+$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
+
+@each $alignment, $text-align in $alignments
+  .has-text-#{$alignment}
+    text-align: #{$text-align} !important
+  +mobile
+    .has-text-#{$alignment}-mobile
+      text-align: #{$text-align} !important
+  +tablet
+    .has-text-#{$alignment}-tablet
+      text-align: #{$text-align} !important
+  +tablet-only
+    .has-text-#{$alignment}-tablet-only
+      text-align: #{$text-align} !important
+  +touch
+    .has-text-#{$alignment}-touch
+      text-align: #{$text-align} !important
+  +desktop
+    .has-text-#{$alignment}-desktop
+      text-align: #{$text-align} !important
+  +desktop-only
+    .has-text-#{$alignment}-desktop-only
+      text-align: #{$text-align} !important
+  +widescreen
+    .has-text-#{$alignment}-widescreen
+      text-align: #{$text-align} !important
+  +widescreen-only
+    .has-text-#{$alignment}-widescreen-only
+      text-align: #{$text-align} !important
+  +fullhd
+    .has-text-#{$alignment}-fullhd
+      text-align: #{$text-align} !important
+
+.is-capitalized
+  text-transform: capitalize !important
+
+.is-lowercase
+  text-transform: lowercase !important
+
+.is-uppercase
+  text-transform: uppercase !important
+
+@each $name, $pair in $colors
+  $color: nth($pair, 1)
+  .has-text-#{$name}
+    color: $color !important
+  a.has-text-#{$name}
+    &:hover,
+    &:focus
+      color: darken($color, 10%) !important
+
+@each $name, $shade in $shades
+  .has-text-#{$name}
+    color: $shade !important
+
+.has-text-weight-light
+  font-weight: $weight-light !important
+.has-text-weight-normal
+  font-weight: $weight-normal !important
+.has-text-weight-semibold
+  font-weight: $weight-semibold !important
+.has-text-weight-bold
+  font-weight: $weight-bold !important
+
+// Visibility
+
+$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
+
+@each $display in $displays
+  .is-#{$display}
+    display: #{$display} !important
+  +mobile
+    .is-#{$display}-mobile
+      display: #{$display} !important
+  +tablet
+    .is-#{$display}-tablet
+      display: #{$display} !important
+  +tablet-only
+    .is-#{$display}-tablet-only
+      display: #{$display} !important
+  +touch
+    .is-#{$display}-touch
+      display: #{$display} !important
+  +desktop
+    .is-#{$display}-desktop
+      display: #{$display} !important
+  +desktop-only
+    .is-#{$display}-desktop-only
+      display: #{$display} !important
+  +widescreen
+    .is-#{$display}-widescreen
+      display: #{$display} !important
+  +widescreen-only
+    .is-#{$display}-widescreen-only
+      display: #{$display} !important
+  +fullhd
+    .is-#{$display}-fullhd
+      display: #{$display} !important
+
+.is-hidden
+  display: none !important
+
++mobile
+  .is-hidden-mobile
+    display: none !important
+
++tablet
+  .is-hidden-tablet
+    display: none !important
+
++tablet-only
+  .is-hidden-tablet-only
+    display: none !important
+
++touch
+  .is-hidden-touch
+    display: none !important
+
++desktop
+  .is-hidden-desktop
+    display: none !important
+
++desktop-only
+  .is-hidden-desktop-only
+    display: none !important
+
++widescreen
+  .is-hidden-widescreen
+    display: none !important
+
++widescreen-only
+  .is-hidden-widescreen-only
+    display: none !important
+
++fullhd
+  .is-hidden-fullhd
+    display: none !important
+
+// Other
+
+.is-marginless
+  margin: 0 !important
+
+.is-paddingless
+  padding: 0 !important
+
+.is-radiusless
+  border-radius: 0 !important
+
+.is-shadowless
+  box-shadow: none !important
+
+.is-unselectable
+  +unselectable

agaric/sass/vendor/bulma/sass/base/minireset.sass

@@ -0,0 +1,80 @@
+/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  margin: 0
+  padding: 0
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  font-size: 100%
+  font-weight: normal
+
+// List
+ul
+  list-style: none
+
+// Form
+button,
+input,
+select,
+textarea
+  margin: 0
+
+// Box sizing
+html
+  box-sizing: border-box
+
+*
+  box-sizing: inherit
+  &:before,
+  &:after
+    box-sizing: inherit
+
+// Media
+img,
+embed,
+object,
+audio,
+video
+  max-width: 100%
+
+// Iframe
+iframe
+  border: 0
+
+// Table
+table
+  border-collapse: collapse
+  border-spacing: 0
+
+td,
+th
+  padding: 0
+  text-align: left

agaric/sass/vendor/bulma/sass/components/_all.sass

@@ -0,0 +1,15 @@
+@charset "utf-8"
+
+@import "breadcrumb.sass"
+@import "card.sass"
+@import "dropdown.sass"
+@import "level.sass"
+@import "media.sass"
+@import "menu.sass"
+@import "message.sass"
+@import "modal.sass"
+@import "nav.sass"
+@import "navbar.sass"
+@import "pagination.sass"
+@import "panel.sass"
+@import "tabs.sass"

agaric/sass/vendor/bulma/sass/components/breadcrumb.sass

@@ -0,0 +1,74 @@
+$breadcrumb-item-color: $text-light !default
+$breadcrumb-item-hover-color: $link-hover !default
+$breadcrumb-item-active-color: $text-strong !default
+
+$breadcrumb-item-separator-color: $text !default
+
+.breadcrumb
+  +block
+  +unselectable
+  align-items: stretch
+  display: flex
+  font-size: $size-normal
+  overflow: hidden
+  overflow-x: auto
+  white-space: nowrap
+  a
+    align-items: center
+    color: $breadcrumb-item-color
+    display: flex
+    justify-content: center
+    padding: 0.5em 0.75em
+    &:hover
+      color: $breadcrumb-item-hover-color
+  li
+    align-items: center
+    display: flex
+    &:first-child a
+      padding-left: 0
+    &.is-active
+      a
+        color: $breadcrumb-item-active-color
+        cursor: default
+        pointer-events: none
+    & + li::before
+      color: $breadcrumb-item-separator-color
+      content: "\0002f"
+  ul, ol
+    align-items: center
+    display: flex
+    flex-grow: 1
+    flex-shrink: 0
+    justify-content: flex-start
+  .icon
+    &:first-child
+      margin-right: 0.5em
+    &:last-child
+      margin-left: 0.5em
+  // Alignment
+  &.is-centered
+    ol, ul
+      justify-content: center
+  &.is-right
+    ol, ul
+      justify-content: flex-end
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+  // Styles
+  &.has-arrow-separator
+    li + li::before
+      content: "\02192"
+  &.has-bullet-separator
+    li + li::before
+      content: "\02022"
+  &.has-dot-separator
+    li + li::before
+      content: "\000b7"
+  &.has-succeeds-separator
+    li + li::before
+      content: "\0227B"

agaric/sass/vendor/bulma/sass/components/card.sass

@@ -0,0 +1,67 @@
+$card-color: $text !default
+$card-background-color: $white !default
+$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+
+$card-header-color: $text-strong !default
+$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
+$card-header-weight: $weight-bold !default
+
+$card-footer-border-top: 1px solid $border !default
+
+.card
+  background-color: $card-background-color
+  box-shadow: $card-shadow
+  color: $card-color
+  max-width: 100%
+  position: relative
+
+.card-header
+  align-items: stretch
+  box-shadow: $card-header-shadow
+  display: flex
+
+.card-header-title
+  align-items: center
+  color: $card-header-color
+  display: flex
+  flex-grow: 1
+  font-weight: $card-header-weight
+  padding: 0.75rem
+  &.is-centered
+    justify-content: center
+
+.card-header-icon
+  align-items: center
+  cursor: pointer
+  display: flex
+  justify-content: center
+  padding: 0.75rem
+
+.card-image
+  display: block
+  position: relative
+
+.card-content
+  padding: 1.5rem
+
+.card-footer
+  border-top: $card-footer-border-top
+  align-items: stretch
+  display: flex
+
+.card-footer-item
+  align-items: center
+  display: flex
+  flex-basis: 0
+  flex-grow: 1
+  flex-shrink: 0
+  justify-content: center
+  padding: 0.75rem
+  &:not(:last-child)
+    border-right: $card-footer-border-top
+
+// Combinations
+
+.card
+  .media:not(:last-child)
+    margin-bottom: 0.75rem

agaric/sass/vendor/bulma/sass/components/dropdown.sass

@@ -0,0 +1,68 @@
+$dropdown-content-background-color: $white !default
+$dropdown-content-arrow: $link !default
+$dropdown-content-offset: 4px !default
+$dropdown-content-radius: $radius !default
+$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$dropdown-content-z: 20 !default
+
+$dropdown-item-color: $grey-dark !default
+$dropdown-item-hover-color: $black !default
+$dropdown-item-hover-background-color: $background !default
+$dropdown-item-active-color: $primary-invert !default
+$dropdown-item-active-background-color: $primary !default
+
+$dropdown-divider-background-color: $border !default
+
+.dropdown
+  display: inline-flex
+  position: relative
+  vertical-align: top
+  &.is-active,
+  &.is-hoverable:hover
+    .dropdown-menu
+      display: block
+  &.is-right
+    .dropdown-menu
+      left: auto
+      right: 0
+
+.dropdown-menu
+  display: none
+  left: 0
+  min-width: 12rem
+  padding-top: $dropdown-content-offset
+  position: absolute
+  top: 100%
+  z-index: $dropdown-content-z
+
+.dropdown-content
+  background-color: $dropdown-content-background-color
+  border-radius: $dropdown-content-radius
+  box-shadow: $dropdown-content-shadow
+  padding-bottom: 0.5rem
+  padding-top: 0.5rem
+
+.dropdown-item
+  color: $dropdown-item-color
+  display: block
+  font-size: 0.875rem
+  line-height: 1.5
+  padding: 0.375rem 1rem
+  position: relative
+
+a.dropdown-item
+  padding-right: 3rem
+  white-space: nowrap
+  &:hover
+    background-color: $dropdown-item-hover-background-color
+    color: $dropdown-item-hover-color
+  &.is-active
+    background-color: $dropdown-item-active-background-color
+    color: $dropdown-item-active-color
+
+.dropdown-divider
+  background-color: $dropdown-divider-background-color
+  border: none
+  display: block
+  height: 1px
+  margin: 0.5rem 0

agaric/sass/vendor/bulma/sass/components/level.sass

@@ -0,0 +1,74 @@
+.level
+  +block
+  align-items: center
+  justify-content: space-between
+  code
+    border-radius: $radius
+  img
+    display: inline-block
+    vertical-align: top
+  // Modifiers
+  &.is-mobile
+    display: flex
+    .level-left,
+    .level-right
+      display: flex
+    .level-left + .level-right
+      margin-top: 0
+    .level-item
+      &:not(:last-child)
+        margin-bottom: 0
+      &:not(.is-narrow)
+        flex-grow: 1
+  // Responsiveness
+  +tablet
+    display: flex
+    & > .level-item
+      &:not(.is-narrow)
+        flex-grow: 1
+
+.level-item
+  align-items: center
+  display: flex
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
+  justify-content: center
+  .title,
+  .subtitle
+    margin-bottom: 0
+  // Responsiveness
+  +mobile
+    &:not(:last-child)
+      margin-bottom: 0.75rem
+
+.level-left,
+.level-right
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
+  .level-item
+    // Modifiers
+    &.is-flexible
+      flex-grow: 1
+    // Responsiveness
+    +tablet
+      &:not(:last-child)
+        margin-right: 0.75rem
+
+.level-left
+  align-items: center
+  justify-content: flex-start
+  // Responsiveness
+  +mobile
+    & + .level-right
+      margin-top: 1.5rem
+  +tablet
+    display: flex
+
+.level-right
+  align-items: center
+  justify-content: flex-end
+  // Responsiveness
+  +tablet
+    display: flex

agaric/sass/vendor/bulma/sass/components/media.sass

@@ -0,0 +1,44 @@
+.media
+  align-items: flex-start
+  display: flex
+  text-align: left
+  .content:not(:last-child)
+    margin-bottom: 0.75rem
+  .media
+    border-top: 1px solid rgba($border, 0.5)
+    display: flex
+    padding-top: 0.75rem
+    .content:not(:last-child),
+    .control:not(:last-child)
+      margin-bottom: 0.5rem
+    .media
+      padding-top: 0.5rem
+      & + .media
+        margin-top: 0.5rem
+  & + .media
+    border-top: 1px solid rgba($border, 0.5)
+    margin-top: 1rem
+    padding-top: 1rem
+  // Sizes
+  &.is-large
+    & + .media
+      margin-top: 1.5rem
+      padding-top: 1.5rem
+
+.media-left,
+.media-right
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
+
+.media-left
+  margin-right: 1rem
+
+.media-right
+  margin-left: 1rem
+
+.media-content
+  flex-basis: auto
+  flex-grow: 1
+  flex-shrink: 1
+  text-align: left

agaric/sass/vendor/bulma/sass/components/menu.sass

@@ -0,0 +1,50 @@
+$menu-item-color: $text !default
+$menu-item-radius: $radius-small !default
+$menu-item-hover-color: $text-strong !default
+$menu-item-hover-background-color: $background !default
+$menu-item-active-color: $link-invert !default
+$menu-item-active-background-color: $link !default
+
+$menu-list-border-left: 1px solid $border !default
+
+$menu-label-color: $text-light !default
+
+.menu
+  font-size: $size-normal
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+
+.menu-list
+  line-height: 1.25
+  a
+    border-radius: $menu-item-radius
+    color: $menu-item-color
+    display: block
+    padding: 0.5em 0.75em
+    &:hover
+      background-color: $menu-item-hover-background-color
+      color: $menu-item-hover-color
+    // Modifiers
+    &.is-active
+      background-color: $menu-item-active-background-color
+      color: $menu-item-active-color
+  li
+    ul
+      border-left: $menu-list-border-left
+      margin: 0.75em
+      padding-left: 0.75em
+
+.menu-label
+  color: $menu-label-color
+  font-size: 0.75em
+  letter-spacing: 0.1em
+  text-transform: uppercase
+  &:not(:first-child)
+    margin-top: 1em
+  &:not(:last-child)
+    margin-bottom: 1em

agaric/sass/vendor/bulma/sass/components/message.sass

@@ -0,0 +1,79 @@
+$message-background-color: $background !default
+$message-radius: $radius !default
+
+$message-header-background-color: $text !default
+$message-header-color: $text-invert !default
+$message-header-padding: 0.5em 0.75em !default
+$message-header-radius: $radius !default
+
+$message-body-border: 1px solid $border !default
+$message-body-color: $text !default
+$message-body-padding: 1em 1.25em !default
+$message-body-radius: $radius !default
+
+$message-body-pre-background-color: $white !default
+$message-body-pre-code-background-color: transparent !default
+
+.message
+  +block
+  background-color: $message-background-color
+  border-radius: $message-radius
+  font-size: $size-normal
+  strong
+    color: currentColor
+  a:not(.button):not(.tag)
+    color: currentColor
+    text-decoration: underline
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+    $color-luminance: colorLuminance($color)
+    $darken-percentage: $color-luminance * 70%
+    $desaturate-percentage: $color-luminance * 30%
+    &.is-#{$name}
+      background-color: lighten($color, $color-lightning)
+      .message-header
+        background-color: $color
+        color: $color-invert
+      .message-body
+        border-color: $color
+        color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+
+.message-header
+  align-items: center
+  background-color: $message-header-background-color
+  border-radius: $message-header-radius $message-header-radius 0 0
+  color: $message-header-color
+  display: flex
+  justify-content: space-between
+  line-height: 1.25
+  padding: $message-header-padding
+  position: relative
+  .delete
+    flex-grow: 0
+    flex-shrink: 0
+    margin-left: 0.75em
+  & + .message-body
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+    border-top: none
+
+.message-body
+  border: $message-body-border
+  border-radius: $message-body-radius
+  color: $message-body-color
+  padding: $message-body-padding
+  code,
+  pre
+    background-color: $message-body-pre-background-color
+  pre code
+    background-color: $message-body-pre-code-background-color

agaric/sass/vendor/bulma/sass/components/modal.sass

@@ -0,0 +1,111 @@
+$modal-z: 20 !default
+
+$modal-background-background-color: rgba($black, 0.86) !default
+
+$modal-content-width: 640px !default
+$modal-content-margin-mobile: 20px !default
+$modal-content-spacing-mobile: 160px !default
+$modal-content-spacing-tablet: 40px !default
+
+$modal-close-dimensions: 40px !default
+$modal-close-right: 20px !default
+$modal-close-top: 20px !default
+
+$modal-card-spacing: 40px !default
+
+$modal-card-head-background-color: $background !default
+$modal-card-head-border-bottom: 1px solid $border !default
+$modal-card-head-padding: 20px !default
+$modal-card-head-radius: $radius-large !default
+
+$modal-card-title-color: $text-strong !default
+$modal-card-title-line-height: 1 !default
+$modal-card-title-size: $size-4 !default
+
+$modal-card-foot-radius: $radius-large !default
+$modal-card-foot-border-top: 1px solid $border !default
+
+$modal-card-body-background-color: $white !default
+$modal-card-body-padding: 20px !default
+
+.modal
+  +overlay
+  align-items: center
+  display: none
+  justify-content: center
+  overflow: hidden
+  position: fixed
+  z-index: $modal-z
+  // Modifiers
+  &.is-active
+    display: flex
+
+.modal-background
+  +overlay
+  background-color: $modal-background-background-color
+
+.modal-content,
+.modal-card
+  margin: 0 $modal-content-margin-mobile
+  max-height: calc(100vh - #{$modal-content-spacing-mobile})
+  overflow: auto
+  position: relative
+  width: 100%
+  // Responsiveness
+  +tablet
+    margin: 0 auto
+    max-height: calc(100vh - #{$modal-content-spacing-tablet})
+    width: $modal-content-width
+
+.modal-close
+  +delete
+  background: none
+  height: $modal-close-dimensions
+  position: fixed
+  right: $modal-close-right
+  top: $modal-close-top
+  width: $modal-close-dimensions
+
+.modal-card
+  display: flex
+  flex-direction: column
+  max-height: calc(100vh - #{$modal-card-spacing})
+  overflow: hidden
+
+.modal-card-head,
+.modal-card-foot
+  align-items: center
+  background-color: $modal-card-head-background-color
+  display: flex
+  flex-shrink: 0
+  justify-content: flex-start
+  padding: $modal-card-head-padding
+  position: relative
+
+.modal-card-head
+  border-bottom: $modal-card-head-border-bottom
+  border-top-left-radius: $modal-card-head-radius
+  border-top-right-radius: $modal-card-head-radius
+
+.modal-card-title
+  color: $modal-card-title-color
+  flex-grow: 1
+  flex-shrink: 0
+  font-size: $modal-card-title-size
+  line-height: $modal-card-title-line-height
+
+.modal-card-foot
+  border-bottom-left-radius: $modal-card-foot-radius
+  border-bottom-right-radius: $modal-card-foot-radius
+  border-top: $modal-card-foot-border-top
+  .button
+    &:not(:last-child)
+      margin-right: 10px
+
+.modal-card-body
+  +overflow-touch
+  background-color: $modal-card-body-background-color
+  flex-grow: 1
+  flex-shrink: 1
+  overflow: auto
+  padding: $modal-card-body-padding