wip

source/_assets/js/main.js

@@ -0,0 +1,17 @@
+window.docsearch = require('docsearch.js');
+
+import hljs from 'highlight.js/lib/highlight';
+
+hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'));
+hljs.registerLanguage('css', require('highlight.js/lib/languages/css'));
+hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));
+hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
+hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));
+hljs.registerLanguage('markdown', require('highlight.js/lib/languages/markdown'));
+hljs.registerLanguage('php', require('highlight.js/lib/languages/php'));
+hljs.registerLanguage('scss', require('highlight.js/lib/languages/scss'));
+hljs.registerLanguage('yaml', require('highlight.js/lib/languages/yaml'));
+
+document.querySelectorAll('pre code').forEach((block) => {
+    hljs.highlightBlock(block);
+});

source/_assets/sass/_base.scss

@@ -0,0 +1,130 @@
+body {
+    font-size: 17px;
+}
+
+a {
+    @apply .font-semibold;
+    @apply .no-underline;
+    @apply .text-blue-dark;
+
+    &:hover {
+        @apply .text-blue-darker;
+    }
+}
+
+blockquote {
+    @apply .border-blue-light;
+    @apply .border-l-4;
+    @apply .font-normal;
+    @apply .italic;
+    @apply .my-8;
+    @apply .pl-6;
+    @apply .text-grey-darker;
+    @apply .text-lg;
+}
+
+code {
+    @apply .bg-grey-light;
+    @apply .px-2;
+    @apply .py-px;
+    @apply .rounded;
+    @apply .text-sm;
+}
+
+code.hljs {
+    @apply .bg-transparent;
+    @apply .p-0;
+
+    .hljs-comment,
+    .hljs-keyword,
+    .hljs-meta {
+        @apply .font-normal;
+        @apply .roman;
+    }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    @apply .leading-tight;
+    @apply .mb-4;
+    @apply .mt-8;
+    @apply .text-black;
+
+    &:first-child {
+        @apply .mt-0;
+    }
+}
+
+h1 {
+    @apply .font-extrabold;
+    @apply .text-5xl;
+}
+
+h2 {
+    @apply .font-bold;
+    @apply .text-4xl;
+}
+
+h3 {
+    @apply .font-bold;
+    @apply .text-3xl;
+}
+
+h4 {
+    @apply .font-normal;
+    @apply .text-2xl;
+}
+
+h5 {
+    @apply .font-normal;
+    @apply .text-xl;
+}
+
+h6 {
+    @apply .font-light;
+    @apply .text-lg;
+}
+
+hr {
+    @apply .border-b;
+    @apply .border-blue-lighter;
+    @apply .my-12;
+    @apply .rounded-full;
+}
+
+li {
+    ul,
+    ol {
+        @apply .my-0;
+    }
+}
+
+ol,
+ul {
+    @apply .my-4;
+}
+
+p {
+    @apply .my-6;
+}
+
+pre {
+    @apply .bg-grey-lighter;
+    @apply .leading-loose;
+    @apply .my-6;
+    @apply .overflow-x-auto;
+    @apply .p-4;
+    @apply .rounded;
+    @apply .shadow;
+    @apply .text-base;
+
+    code {
+        @apply .bg-transparent;
+        @apply .block;
+        @apply .p-0;
+    }
+}

source/_assets/sass/_documentation.scss

@@ -0,0 +1 @@
+// Add your custom styles here

source/_assets/sass/_navigation.scss

@@ -0,0 +1,34 @@
+.nav-menu {
+    @apply .-mt-12;
+    @apply .-mx-8;
+    @apply .bg-grey-lighter;
+    @apply .mb-8;
+    @apply .pb-4;
+    @apply .pt-8;
+    @apply .px-4;
+    @apply .shadow;
+    @apply .w-auto;
+
+    @screen lg {
+        @apply .-mx-4;
+        @apply .bg-transparent;
+        @apply .block;
+        @apply .border-b-0;
+        @apply .mt-1;
+        @apply .pl-0;
+        @apply .pr-4;
+        @apply .pt-0;
+        @apply .shadow-none;
+        @apply .w-1/4;
+    }
+}
+
+.nav-menu__item {
+    @apply .block;
+    @apply .list-reset;
+    @apply .no-underline;
+    @apply .mb-3;
+    @apply .mt-0;
+    @apply .text-grey-darkest;
+    @apply .text-sm;
+}

source/_assets/sass/_search.scss

@@ -0,0 +1,76 @@
+.docsearch-input {
+    background-image: url('/assets/img/magnifying-glass.svg');
+    background-position: 0.8em;
+    background-repeat: no-repeat;
+    text-indent: 1.2em;
+
+    @screen lg {
+        &:focus {
+            @apply .w-2/3;
+        }
+    }
+
+    @screen xl {
+        &:focus {
+            @apply .w-1/2;
+        }
+    }
+
+    &__wrapper {
+        @apply absolute;
+        @apply bg-white;
+        @apply mt-7;
+        @apply pin-l;
+        @apply pin-t;
+        @apply px-4;
+        @apply w-full;
+        @apply z-10;
+
+        @screen md {
+            @apply mt-0;
+            @apply px-0;
+            @apply relative;
+        }
+    }
+}
+
+.algolia-autocomplete {
+    @apply .text-right;
+    @apply .w-full;
+
+    .ds-dropdown-menu {
+        @apply .w-full;
+
+        max-width: 750px !important;
+        min-width: auto !important;
+
+        .algolia-docsearch-suggestion {
+            .algolia-docsearch-suggestion--content {
+                @apply .w-full;
+
+                @screen md {
+                    @apply .w-2/3;
+                }
+            }
+
+            .algolia-docsearch-suggestion--text {
+                @apply .font-normal;
+
+                line-height: 1.4;
+            }
+
+            .algolia-docsearch-suggestion--wrapper {
+                @apply .py-3;
+            }
+
+            .algolia-docsearch-suggestion--subcategory-column {
+                @apply .hidden;
+
+                @screen md {
+                    @apply .w-1/3;
+                    @apply .inline-block;
+                }
+            }
+        }
+    }
+}

source/_assets/sass/main.scss

@@ -0,0 +1,13 @@
+@tailwind preflight;
+@tailwind components;
+
+// Code syntax highlighting,
+// powered by https://highlightjs.org
+@import '~highlight.js/styles/a11y-light.css';
+
+@import 'base';
+@import 'navigation';
+@import 'documentation';
+@import 'search';
+
+@tailwind utilities;