jekyll-theme-amethyst 0.2.0

data/_posts/2006-01-26-announcing-the-blog.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Announcing the blog!
+author: Alice Fitzgerald
+tags:
+- event
+---
+
+Nulla ut neque quis ante tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2006-10-18-foo-110.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 1.1.0
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2007-10-18-foo-112.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 1.2.1
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2008-10-18-foo-126.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 1.2.6
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2009-10-18-foo-132.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 1.3.2
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2010-10-18-foo-143.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 1.4.3
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2011-10-18-foo-171.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 1.7.1
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2012-10-18-foo-183.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 1.8.3
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2013-10-18-foo-191.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 1.9.1
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2014-10-18-foo-211.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 2.1.1
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2015-10-18-foo-300.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 3.0.0
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2017-10-18-foo-321.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 3.2.1 Released
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+No demo posts in 2016. Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2018-10-18-foo-331.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 3.3.1
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2019-10-18-foo-341.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 3.4.1
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2020-04-01-foo-350.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 3.5.0
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2020-10-18-foo-351.md

@@ -0,0 +1,13 @@
+---
+layout: post
+title: Foo 3.5.1
+author: Alice Fitzgerald
+tags:
+- release
+---
+
+Tristique vehicula ut sit amet sem.
+
+## Integer et tempus
+
+Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_posts/2021-04-01-hello-world.md

@@ -0,0 +1,51 @@
+---
+layout: post
+title: Hello, World!
+author: Alice Fitzgerald
+tags:
+- event
+amethyst:
+  comments:
+    - author: Jay
+      date: 2021-03-03
+      content: |
+        Good stuff. I need to do a whole lot of reading on this!
+    - author: David
+      date: 2021-03-03
+      gravatar: a4b69ef5ee0bd367f53c6e64a4c3d4b6
+      content: |
+        Great, thanks for the release, upgraded without any issues, which is one of the many advantages of jQuery.
+---
+
+Lorem ipsum [dolor sit amet](https://en.wikipedia.org/wiki/Lorem_ipsum), consectetur adipiscing elit.
+
+### Duis fringilla
+
+Aliquam efficitur _arcu a nisl_ egestas molestie. Nulla ut neque quis ante tristique vehicula ut sit amet sem. Aliquam turpis enim, elementum volutpat auctor in, scelerisque sed quam. Morbi vulputate mattis vehicula. Etiam volutpat fringilla arcu, in vehicula lorem facilisis sed. In gravida enim arcu. Mauris **elit** purus, congue id dignissim a, vestibulum auctor neque.
+
+## Cras maximus
+
+Mi ac semper maximus. Ut eget libero accumsan, vestibulum nibh at, rhoncus erat. Donec nibh lorem, elementum  `lacini()`, laoreet eget risus.
+
+```js
+elem1.on( "maximus", function() {
+  elem2.lacini();
+} );
+```
+
+### Donec ut
+
+* In a augue accumsan, dictum libero at, fringilla erat.
+* Quisque ante massa, rutrum et scelerisque eu, varius sed orci.
+* Fusce eget erat lacinia, fringilla tellus et.
+* Sed a massa leo.
+
+### Cras venenatis
+
+* Sed vel erat sapien. ([QUnit](https://qunitjs.com/))
+* Phasellus et convallis quam.  ([ESLint](https://eslint.org/))
+* Pellentesque sed nulla ipsum, posuere nisi. ([jQuery](https://jquery.com/))
+
+### Nunc tristique
+
+Integer et tempus lectus. Vivamus risus tellus, porta in aliquet ac, egestas sed risus. Aliquam bibendum ac dui eu tempus. Mauris rutrum et enim a viverra. Nunc ac sapien dolor. Vestibulum ultrices nibh vel tortor congue, nec tempus lacus sagittis. Cras a turpis eros. Nulla facilisi. Aenean ac lobortis libero. Quisque sagittis ultricies congue. Proin id velit sit amet ipsum euismod laoreet quis ac lacus. Praesent ut pellentesque ex. Sed dolor nulla, consectetur ac arcu id, placerat pharetra justo.

data/_sass/amethyst-variables.scss

@@ -0,0 +1,22 @@
+// Amethyst theme variables
+
+// Primary color
+//
+// Usage: link text color, primary button background.
+$color-vibrant: hsl(280, 70%, 40%);
+
+// Dark shade
+//
+// Generally same hue as $color-vibrant,
+// and within the following range: `hsl(???, 58-90%, 14-16%)`
+//
+// Usage: navigation background, heading text color
+$color-accent: hsl(280, 58%, 14%);
+
+// Bright color
+//
+// Very close to white, generally within 20 hue points of $color-vibrant,
+// and within the following range: `hsl(???, 80-84%, 72-92%)`
+//
+// Usage: navigation link color, search result highlight background
+$color-bright: hsl(260, 84%, 92%);

data/_sass/amethyst.scss

@@ -0,0 +1,906 @@
+@charset "UTF-8";
+
+// Amethyst theme for Jekyll
+
+$size-sm: 0.8rem;
+$size-1: 1rem;
+$size-2: 1.333rem;
+$size-3: 1.777rem;
+$size-4: 2.369rem;
+$size-5: 3.157rem;
+$size-spacing: $size-2;
+$box-spacing: $size-1;
+
+$color-white: #fff;
+$color-light: #f4f4f4;
+$color-off-white: #cdcdcd;
+$color-darkgrey: #63676d; // based on 2015 api.jquery.com design
+$color-black: #333;
+
+$screen-s: 480px;
+$screen-m: 768px;
+$screen-l: 992px;
+$screen-xl: 1200px;
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    // This is the background for the footer.
+    // Set here in order to fill any empty space after the footer, on short pages.
+    background: $color-light;
+}
+
+body {
+    background: $color-white;
+    color: $color-black;
+    font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+    line-height: 1.5;
+    margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: $color-black;
+    font-weight: bold;
+    margin: 0;
+    margin-bottom: $size-spacing;
+}
+h1 { font-size: $size-4; color: $color-accent; }
+h2 { font-size: $size-3; }
+h3 { font-size: $size-2; color: $color-darkgrey; }
+h4 { font-size: $size-1; color: $color-darkgrey; }
+h5 { font-size: $size-1; color: $color-darkgrey; }
+h6 { font-size: $size-1; color: $color-darkgrey; }
+
+p {
+    margin: 0;
+    margin-bottom: $size-spacing;
+}
+
+a {
+    color: $color-vibrant;
+    text-decoration: none;
+
+    &:active,
+    &:hover,
+    &:focus {
+        text-decoration: underline;
+    }
+}
+.content a:not(.button) {
+    border-bottom: 0.1em solid currentColor;
+
+    &:active,
+    &:hover,
+    &:focus {
+        text-decoration: none;
+
+        box-shadow: 0px 0px 0px 4px $color-bright;
+        background-color: $color-bright;
+        color: $color-accent;
+        border-bottom-color: $color-vibrant;
+        border-bottom-width: 0.13em;
+
+        code {
+            background-color: transparent;
+        }
+    }
+}
+
+pre, code {
+    // Menlo – macOS 10.6+. Preferred instead of Monaco which doesn't do bolding very well.
+    // Consolas – Windows Vista & newer
+    // DejaVu Sans Mono – Ubuntu, Fedora
+    font-family: Menlo, Consolas, DejaVu Sans Mono, monospace;
+}
+
+code {
+    font-size: 90%;
+    background: $color-light;
+    padding: 0.2em 0.4em;
+}
+
+pre.highlight {
+    border: 1px solid #ddd;
+    border-left: 4px solid $color-vibrant;
+    border-radius: 4px;
+    margin: 0 0 $size-spacing 0;
+    padding: 0.5rem 1rem;
+    font-size: 95%;
+    line-height: 140%;
+    overflow-x: auto;
+}
+.highlight code {
+    padding: 0;
+    background: transparent;
+}
+
+hr {
+    margin: $size-5 0;
+    border: none;
+    border-top: 1px solid #ddd;
+}
+
+iframe {
+    width: 100%;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+}
+
+.wrapper {
+    max-width: 65rem;
+    margin: 0 auto;
+    padding: 0 $size-spacing;
+}
+
+.main {
+    padding: $size-spacing;
+}
+
+// Allow layouts to have a sidebar
+.sidebar {
+    display: none;
+}
+@media (min-width: $screen-m) {
+    .main--columns {
+        display: flex;
+    }
+    .content {
+        // Take up available space even if the lines of text are short.
+        // This affects where right-floated boxes go, such as on page-api.
+        width: 100%;
+        // Fix a quirk with scrollable overflow in content children,
+        // such as <table> or <pre>.
+        // Because content is a flex child, without 'min-width: 0',
+        // we have 'min-width: auto', which causes the viewport to
+        // get a needless vertical scrollbar.
+        // Test plan: Page with page-api layout and some <pre> code
+        // that is wider than your window.
+        min-width: 0;
+    }
+    .sidebar {
+        display: block;
+        flex: 0 0 220px;
+        margin-right: 20px;
+    }
+}
+
+.lead {
+    font-size: $size-2;
+}
+.lead--center {
+    text-align: center;
+}
+
+.note {
+    // Clear float to avoid clash with `.version-details` box
+    clear: both;
+    padding: 0.5em $box-spacing;
+    margin: $box-spacing;
+
+    background: #fff;
+    border: 1px solid #5293e6;
+    border-left-width: 4px;
+    border-radius: 4px;
+}
+.note--warning {
+    background: #fdf5c5;
+    border-color: #e6d252;
+}
+
+.button {
+    background: #fff;
+    border: 1px solid #fff;
+    border-radius: 4px;
+    color: $color-vibrant;
+    display: inline-block;
+    margin: 0.5rem;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &.secondary {
+        background: transparent;
+        color: white;
+        font-weight: 100;
+    }
+
+    &:hover {
+        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    }
+}
+
+.grid {
+    display: grid;
+    grid-gap: $size-4;
+    grid-template-columns: 1fr;
+}
+
+@media (min-width: $screen-m) {
+    .grid--small {
+        // upto three tiles per row
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    .grid--small > :last-child:nth-child(3n+4) {
+        // if last item is lonely, center it
+        grid-column: 2 / span 2;
+    }
+
+    .grid--split {
+        // upto two large columns
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+/* Content table */
+
+table {
+    // Reset
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    background: $color-white;
+    margin-bottom: $size-spacing;
+
+    @media (max-width: $screen-m) {
+        display: block;
+        overflow: auto;
+    }
+
+    th,
+    td {
+        border: 1px solid $color-off-white;
+        text-align: left;
+        padding: 0.3em 0.4em;
+    }
+    th {
+        background: $color-light;
+        font-weight: bold;
+    }
+    // Collapse margin from paragraph (or other block) with the cell padding
+    th :first-child,
+    td :first-child {
+        margin-top: 0;
+    }
+    th :last-child,
+    td :last-child {
+        margin-bottom: 0;
+    }
+}
+
+.screen-reader-text {
+    clip: rect(1px, 1px, 1px, 1px);
+    position: absolute !important;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+/* Site header */
+
+.site-header {
+    background: $color-accent;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    // Ensure shadow overlaps hero (next sibling)
+    position: relative;
+}
+
+.site-header-wrapper {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+}
+
+.site-logo {
+    color: $color-white;
+    display: flex;
+    align-items: center;
+    font-size: $size-2;
+    font-weight: bold;
+    padding: $size-1 0;
+    text-decoration: none;
+    transition: color 0.3s;
+
+    img {
+        width: auto;
+        height: $size-4;
+        margin-right: $size-spacing / 2;
+    }
+}
+
+.site-logo:hover {
+    color: $color-white;
+}
+
+/* Site navigation */
+
+.site-nav {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: $color-white;
+    border-top: 1px solid $color-off-white;
+    z-index: 1;
+
+    &.opened {
+        display: block;
+    }
+
+    @media (min-width: $screen-m) {
+        display: block;
+        position: relative;
+        align-self: center;
+        background: transparent;
+        border-top: 0;
+    }
+}
+
+.site-nav-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+
+    @media (min-width: $screen-m) {
+        box-shadow: none;
+    }
+}
+
+.site-nav-item {
+    display: block;
+    height: 100%;
+    border-bottom: 1px solid $color-off-white;
+
+    @media (min-width: $screen-m) {
+        display: inline-block;
+        border-bottom: 0;
+        position: relative;
+    }
+}
+
+.site-nav-link {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    padding: $size-1;
+    text-decoration: none;
+
+    @media (min-width: $screen-m) {
+        color: $color-bright;
+
+        &:active,
+        &:hover,
+        &:focus {
+            color: $color-white;
+            text-decoration: none;
+        }
+    }
+}
+
+.site-nav-link.has-sub-list::after {
+    content: '▼';
+    font-size: 0.75rem;
+    margin-left: 0.5rem;
+}
+
+.site-nav-sub-list {
+    display: none;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    background: $color-white;
+    border-radius: 3px;
+
+    @media (min-width: $screen-m) {
+        position: absolute;
+        // Align right so that when a submenu item is wider
+        // than its main parent, it can overflow to the left
+        // instead of causing horizontal page overflow.
+        left: auto;
+        right: 0;
+        // Avoid line breaks, if possible
+        // (This is like 'white-space: nowrap' but with fallback
+        // to wrap if the screen is not wide enough)
+        width: max-content;
+        max-width: 90vw;
+
+        padding: 0.5rem 1rem;
+        margin-top: 6px;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+    }
+}
+
+.site-nav-item.is-open .site-nav-sub-list {
+    display: block;
+}
+
+.site-sub-nav-link {
+    display: block;
+    padding: 0.5rem 2rem;
+    text-decoration: none;
+
+    @media (min-width: $screen-m) {
+        padding: 0.5rem;
+    }
+}
+
+/* Search */
+
+.site-search {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100vw;
+    height: 100%;
+    z-index: 1;
+    border-top: 1px solid $color-off-white;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+
+    &.opened {
+        display: block;
+    }
+
+    @media (min-width: $screen-m) {
+        display: block;
+        align-self: center;
+        position: relative;
+        flex: 1;
+        max-width: 20rem;
+        margin: 0 $size-spacing;
+        border: none;
+        box-shadow: none;
+    }
+}
+
+.algolia-autocomplete {
+    width: 100%;
+    height: 100%;
+}
+
+.aa-input-search {
+    width: 100%;
+    height: 100%;
+    padding: 12px 28px 12px 12px;
+    border: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    font-size: $size-1;
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+        display: none;
+    }
+
+    @media (min-width: $screen-m) {
+        border-radius: 3px;
+        &:not(:focus) {
+            background: lighten($color-accent, 12%);
+            color: $color-white;
+        }
+    }
+}
+
+// On wide viewports, when the search field is not focussed,
+// the search field has a dark background. Override the default
+// user agent styles for placeholders (which are often mid-grey,
+// and thus blend into the background too much) to use a bright
+// color instead.
+//
+// When focussed, or when toggling on narrow viewports, the search
+// field has a bright background, so don't apply this there!
+@media (min-width: $screen-m) {
+    .site-search:not(:focus-within) .aa-input-search::placeholder {
+        color: $color-bright;
+        opacity: 0.6;
+    }
+}
+
+// Only displayed when the optional JS code was supported in the current browser
+// and run to completion. Also, don't show on narrow viewports (e.g. mobile)
+// where keyboard shortcuts are typically not used.
+// Avoid using device type or pointer support, because one can have a large
+// "mobile"-like device with external keyboard.
+.site-search--bound:not(:focus-within):after {
+    @media (min-width: $screen-m) {
+        content: '/';
+        display: inline-block;
+
+        font-size: 60%;
+        line-height: 2.5;
+        text-align: center;
+        width: 2.5em;
+        height: 2.5em;
+        position: absolute;
+        top: 50%;
+        right: 48px;
+        transform: translateY(-50%);
+
+        border-radius: 3px;
+        border: 1px solid $color-bright;
+        color: $color-bright;
+        opacity: 0.6;
+    }
+}
+
+.aa-input-icon {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 50%;
+    right: 16px;
+    transform: translateY(-50%);
+    fill: $color-accent;
+
+    @media (min-width: $screen-m) {
+        .site-search:not(:focus-within) & {
+            fill: $color-bright;
+        }
+    }
+}
+
+.aa-dropdown-menu {
+    background: $color-white;
+    border-top: 1px solid $color-off-white;
+    width: 100%;
+    max-height: 60vh;
+    overflow: auto;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+
+    @media (min-width: $screen-m) {
+        border-radius: 3px;
+        border-top: none;
+        min-width: 500px;
+        margin-top: $size-spacing;
+    }
+}
+
+.aa-footer {
+    // A sticky element is normally at the start of the content,
+    // but since this is a footer, the space of the sticky element
+    // is naturally preserved at the end of the list and thus won't
+    // overlap the last suggestion.
+    // If this were a ::before or -header instead, then this would need:
+    //   .aa-header {
+    //     margin-top: -2.4rem;
+    //   }
+    //
+    // and
+    //
+    //   .aa-dropdown-menu::after {
+    //     display: block;
+    //     content: "";
+    //     height: 2.4rem;
+    //   }
+    position: sticky;
+    left: 0;
+    right: 0;
+    box-shadow: 0 0 6px rgba(0,0,0,0.19);
+
+    top: calc(100% - 2.4rem);
+    padding: 0.8rem 1rem;
+    font-size: $size-sm;
+    line-height: 1;
+
+    color: $color-darkgrey;
+    text-align: right;
+
+    .aa-logo {
+        // Replace alt text with image
+        line-height: 0;
+        font-size: 0;
+    }
+    .aa-logo::after {
+        content: '';
+        display: inline-block;
+        vertical-align: top;
+        // Nominal size is 485x120
+        background: url(./logo-algolia.svg);
+        width: (485 / 120) * 0.8rem;
+        height: 0.8rem;
+    }
+}
+
+.aa-empty {
+    padding: $size-spacing;
+}
+
+.aa-suggestion {
+    padding: $box-spacing;
+    cursor: pointer;
+    border-top: 1px solid $color-off-white;
+    border-left: 2px solid transparent;
+
+    a {
+        // reset default link style
+        text-decoration: none;
+    }
+
+    &:hover,
+    &.aa-cursor {
+        background: $color-bright;
+        border-left: 2px solid $color-vibrant;
+    }
+}
+
+.ais-Highlight {
+    font-style: normal;
+    font-weight: bold;
+}
+
+.aa-suggestion_title,
+.aa-suggestion_content {
+    // reset paragraph margin
+    margin: 0;
+    // clip title chunks and content match to one line
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.aa-suggestion_title {
+    color: $color-accent;
+}
+.aa-suggestion_content {
+    font-size: $size-sm;
+    color: $color-darkgrey;
+}
+
+/* Site header: Mobile toggle controls */
+
+.site-toggles {
+    display: flex;
+
+    @media (min-width: $screen-m) {
+        display: none;
+    }
+}
+
+.toggle {
+    display: block;
+    height: 100%;
+    font-size: $box-spacing;
+    padding: $box-spacing;
+    border: none;
+    background: transparent;
+    color: $color-bright;
+    cursor: pointer;
+}
+
+.icon {
+    position: static;
+    display: inline-block;
+    fill: currentColor;
+    vertical-align: middle;
+    width: $size-2;
+    height: $size-2;
+    transform: none;
+}
+
+.opened .icon {
+    fill: $color-white;
+}
+
+/* Sidebar */
+
+.sidebar h4 {
+    font-size: $size-1;
+    margin: $size-spacing 0 #{$box-spacing / 2} 0;
+    padding-left: 4px;
+}
+
+.sidebar-list {
+    margin-top: 0;
+    padding: 0;
+    list-style: none;
+}
+.sidebar-item {
+    border-left: 4px solid transparent;
+}
+.sidebar-item-active {
+    border-left-color: $color-vibrant;
+}
+
+.sidebar-item a {
+    border-left: 1px solid $color-bright;
+    // Larger and more consistent click target
+    display: block;
+
+    padding: $box-spacing / 2 $box-spacing / 2;
+
+    color: $color-accent;
+    text-decoration: none;
+}
+.sidebar-item-active a,
+.sidebar-item a:active,
+.sidebar-item a:hover,
+.sidebar-item a:focus {
+    background: $color-bright;
+    text-decoration: none;
+}
+
+/* Layout: page */
+
+.hero {
+    margin-bottom: $size-spacing;
+    background-color: darken($color-vibrant, 12%);
+    background-image: linear-gradient(135deg, darken($color-vibrant, 12%), $color-vibrant );
+    padding: ($size-4 * 2) 0;
+    text-align: center;
+}
+
+.hero-title {
+    font-size: $size-5;
+}
+
+.hero-title img {
+    height: 1em;
+}
+
+.hero-title,
+.hero-description {
+    color: $color-white;
+    margin: 0;
+}
+
+.hero-description {
+    font-weight: 100;
+    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.24);
+}
+
+.hero-button {
+    font-size: $size-2;
+    margin-top: $size-4;
+}
+
+/* Layout: page-api */
+
+.version-details {
+    font-size: $size-sm;
+    font-weight: bold;
+    padding: 0.2em 0.4em;
+
+    @media (min-width: $screen-m) {
+        clear: right;
+        float: right;
+        margin-left: 1.333rem;
+        text-align: left;
+        border-width: 1px;
+        border-style: solid;
+    }
+}
+.version-details:not(.note--warning) {
+    background: $color-light;
+    border-color: $color-off-white;
+}
+
+/* Layout: home */
+
+.layout-home {
+    h2, h3 {
+        text-align: center;
+        font-weight: 300;
+        + .lead {
+            margin-top: -$size-spacing;
+        }
+    }
+}
+
+.home-highlights {
+    text-align: center;
+}
+
+.example-result iframe,
+.example-result pre {
+    height: 360px;
+}
+
+/* Layout: post, posts */
+
+article > header {
+    border-bottom: 4px solid $color-off-white;
+    margin-bottom: $size-spacing;
+}
+
+.post-meta,
+.comment-meta {
+    font-size: $size-sm;
+    color: $color-darkgrey;
+}
+
+.comments {
+    margin-top: $size-spacing;
+    border-top: 4px solid $color-off-white;
+    padding-top: $size-spacing;
+}
+
+.comment-list {
+    margin: 0;
+    padding: 0;
+}
+
+.comment {
+    border: 1px solid $color-off-white;
+    border-radius: 1em;
+    background: $color-light;
+    padding: $size-1 $size-1 0 $size-1;
+    margin: 0 0 $size-1 102px;
+
+    position: relative;
+    min-height: 68px;
+
+    list-style: none;
+}
+
+.comment:before {
+    position: absolute;
+    top: 1px;
+    left: -25px;
+    height: $size-spacing;
+    width: $size-spacing;
+    border-radius: 100%;
+    background: $color-light;
+
+    color: $color-darkgrey;
+    font-size: $size-sm;
+    line-height: $size-spacing;
+    text-align: center;
+
+    counter-increment: li;
+    content: counter(li);
+}
+
+.comment-avatar {
+    position: absolute;
+    top: 0;
+    left: -102px;
+    border: 1px solid $color-light;
+    border-radius: 3px;
+}
+
+/* Layout: posts */
+
+
+.post-row h2 {
+    margin-bottom: $size-1;
+}
+
+.post-row .post-meta {
+    margin-bottom: $size-sm;
+}
+
+/* Site footer */
+
+.site-footer {
+    border-top: 1px solid $color-off-white;
+    margin-top: $size-4;
+    background: $color-light;
+    padding: $size-4 0;
+}
+
+.site-footer .wrapper {
+    display: flex;
+    justify-content: space-between;
+}
+
+.external-links a {
+    // Larger click target for mobile
+    padding: 1rem 0.5rem;
+}
+
+.cta {
+    text-align: center;
+    font-size: 1.777rem;
+}
+
+.cta .button {
+    background: $color-vibrant;
+    border-color: $color-vibrant;
+    color: white;
+    font-weight: 100;
+}