3.x redesign

source/_assets/css/_base.css

@@ -0,0 +1,102 @@
+body {
+    font-size: 17px;
+}
+
+
+
+.markdown {
+
+    a {
+        @apply font-semibold text-indigo-700 no-underline;
+
+        &:hover {
+            @apply text-indigo-500;
+        }
+    }
+
+    blockquote {
+        @apply pl-6 my-8 text-lg italic font-normal text-gray-800 border-l-4 border-blue-100;
+    }
+
+    code {
+        @apply px-2 py-px text-sm bg-gray-200 rounded;
+    }
+
+    pre {
+        @apply p-4 my-4 text-base leading-loose bg-gray-900 rounded;
+
+        code {
+            @apply block p-0 bg-transparent;
+        }
+    }
+
+    code.hljs {
+        @apply p-0 bg-transparent;
+
+        .hljs-comment,
+        .hljs-keyword,
+        .hljs-meta {
+            @apply font-normal;
+            /* @apply roman; */
+        }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply mt-8 mb-4 leading-tight text-black;
+
+        &:first-child {
+            @apply mt-0;
+        }
+    }
+
+    h1 {
+        @apply text-5xl font-extrabold;
+    }
+
+    h2 {
+        @apply text-4xl font-bold;
+    }
+
+    h3 {
+        @apply text-3xl font-bold;
+    }
+
+    h4 {
+        @apply text-2xl font-normal;
+    }
+
+    h5 {
+        @apply text-xl font-normal;
+    }
+
+    h6 {
+        @apply text-lg font-light;
+    }
+
+    hr {
+        @apply my-12 border-b border-blue-200 rounded-full;
+    }
+
+    li {
+        @apply ml-5 leading-loose;
+
+        ul,
+        ol {
+            @apply my-0;
+        }
+    }
+
+    ol,
+    ul {
+        @apply my-4 list-disc;
+    }
+
+    p {
+        @apply my-6;
+    }
+}

source/_assets/css/_dracula.css

@@ -0,0 +1,79 @@
+/* Dracula Theme v1.2.5
+ *
+ * https://github.com/dracula/highlightjs
+ *
+ * Copyright 2016-present, All rights reserved
+ *
+ * Code licensed under the MIT license
+ *
+ * @author Denis Ciccale <dciccale@gmail.com>
+ * @author Zeno Rocha <hi@zenorocha.com>
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #282a36;
+}
+
+.hljs-built_in,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-link {
+  color: #8be9fd;
+}
+
+.hljs-keyword {
+  color: #ff79c6;
+}
+
+.hljs,
+.hljs-subst {
+  color: #f8f8f2;
+}
+
+.hljs-title {
+  color: #50fa7b;
+}
+
+.hljs-string,
+.hljs-meta,
+.hljs-name,
+.hljs-type,
+.hljs-attr,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #f1fa8c;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion {
+  color: #6272a4;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-literal,
+.hljs-number {
+  color: #bd93f9;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}

source/_assets/css/_highlight.css

@@ -0,0 +1,99 @@
+/* a11y-light theme */
+/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
+/* @author: ericwbailey */
+
+/* Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #696969;
+}
+
+/* Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #d91e18;
+}
+
+/* Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #aa5d00;
+}
+
+/* Yellow */
+.hljs-attribute {
+  color: #aa5d00;
+}
+
+/* Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #008000;
+}
+
+/* Blue */
+.hljs-title,
+.hljs-section {
+  color: #007faa;
+}
+
+/* Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #7928a1;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #fefefe;
+  color: #545454;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-built_in,
+  .hljs-builtin-name,
+  .hljs-bullet,
+  .hljs-comment,
+  .hljs-link,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-params,
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-type,
+  .hljs-quote {
+        color: highlight;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+        font-weight: bold;
+    }
+}

source/_assets/css/_navigation.css

@@ -0,0 +1,32 @@
+.nav-menu {
+    @apply mb-4;
+
+    @screen lg {
+        @apply block pr-4 bg-transparent border-b-0 shadow-none;
+    }
+}
+
+.nav-menu__item {
+    @apply block mt-4 text-base font-normal leading-loose tracking-wide text-gray-600 no-underline uppercase;
+}
+
+a.nav-menu__item {
+    @apply inline mt-0 font-medium tracking-normal text-indigo-800 normal-case;
+}
+
+a.nav-menu__item:hover {
+    @apply text-indigo-600;
+}
+
+.nav-menu .active {
+    @apply font-semibold text-indigo-600;
+}
+
+ul.list-reset ul.list-reset {
+    @apply pl-4;
+}
+
+.turbolinks-progress-bar {
+	@apply bg-indigo-500;
+	height: 3px;
+}

source/_assets/css/_search.css

@@ -0,0 +1,77 @@
+
+/*
+.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-3/4;
+        }
+    }
+
+     &__wrapper {
+        @apply absolute top-0 left-0 z-10 w-full px-4 mt-8 bg-white;
+
+        @screen md {
+            @apply relative px-0 mt-0;
+        }
+    }
+}*/
+
+.algolia-autocomplete {
+
+
+    @apply w-full text-right;
+
+    input#docsearch:focus {
+        @apply border-2 border-indigo-500 outline-none;
+    }
+
+    .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 inline-block w-1/3;
+                }
+            }
+        }
+    }
+}
+
+
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+    @apply text-indigo-700;
+}

source/_assets/css/main.css

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+
+
+/* @import 'highlight'; */
+@import 'dracula';
+@import 'base';
+@import 'navigation';
+@import 'search';
+
+
+@tailwind utilities;