Replace Mix with Encore

assets/css/base.css

@@ -0,0 +1,27 @@
+h1, h2, h3 {
+  @apply font-bold
+}
+
+h1 {
+  @apply text-3xl
+}
+
+h2 {
+  @apply text-2xl
+}
+
+img {
+  @apply max-w-full h-auto
+}
+
+a {
+  @apply text-blue-700 no-underline;
+
+  &:hover {
+    @apply underline
+  }
+}
+
+blockquote {
+  @apply border-l-4 border-blue-600 pl-4 px-6 py-2
+}

assets/css/components.css

@@ -0,0 +1,11 @@
+@import 'highlightjs/styles/github-gist';
+
+@import './components/button.css';
+@import './components/container.css';
+@import './components/lead.css';
+@import './components/markup.css';
+@import './components/note.css';
+@import './components/table.css';
+@import './components/video.css';
+@import './components/widget.css';
+@import './components/wrap.css';

assets/css/components/button.css

@@ -0,0 +1,13 @@
+.button {
+  @apply bg-blue-600 border-blue-600 border inline-block text-white no-underline py-2 px-3 rounded text-sm;
+
+  &:focus {
+    @apply py-2 px-3 m-0
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    @apply bg-white text-blue-600
+  }
+}

assets/css/components/container.css

@@ -0,0 +1,3 @@
+.container {
+  @apply w-full max-w-5xl px-4 mx-auto
+}

assets/css/components/lead.css

@@ -0,0 +1,5 @@
+p.lead {
+  @screen md {
+    @apply text-lg
+  }
+}

assets/css/components/markup.css

@@ -0,0 +1,59 @@
+.markup {
+  @apply leading-normal;
+
+  h2,
+  h3,
+  h4 {
+    @apply text-black font-bold mb-3
+  }
+
+  h2 {
+    @apply mt-8 mb-3
+  }
+
+  h3 {
+    @apply text-lg mt-8
+  }
+
+  p,
+  ul,
+  ol,
+  blockquote,
+  table,
+  figure,
+  pre,
+  [v-pre] {
+    &:not(:last-child) {
+      @apply mb-6
+    }
+  }
+
+  ul {
+    @apply list-disc ml-5
+  }
+
+  code {
+    @apply bg-gray-200 font-mono text-sm
+  }
+
+  p,
+  li {
+    code {
+      @apply inline-block border border-gray-300 font-bold mx-px p-1 leading-none
+    }
+  }
+
+  pre code,
+  .hljs {
+    @apply block leading-loose overflow-x-scroll p-6
+  }
+
+  figure,
+  img {
+    @apply block
+  }
+
+  figcaption {
+    @apply italic text-sm text-gray-800 text-center mb-0 mt-1
+  }
+}

assets/css/components/note.css

@@ -0,0 +1,15 @@
+.note {
+  @apply bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded;
+
+  > *:not(:first-child) {
+    @apply mt-6
+  }
+
+  p a {
+    @apply text-black underline;
+
+    &:hover {
+      @apply no-underline
+    }
+  }
+}

assets/css/components/table.css

@@ -0,0 +1,18 @@
+.table {
+  @apply w-full;
+
+  th {
+    @apply bg-gray-200 text-left;
+  }
+
+  th,
+  td {
+    @apply px-4 py-2 border border-solid border-gray-300;
+  }
+}
+
+table.is-striped {
+  tbody > tr:not(:nth-child(odd)) td {
+    @apply bg-gray-100;
+  }
+}

assets/css/components/video.css

@@ -0,0 +1,9 @@
+.video-full {
+  @apply w-full relative;
+  padding-top: 56.25%;
+
+  iframe,
+  embed {
+    @apply absolute h-full left-0 top-0 w-full
+  }
+}

assets/css/components/widget.css

@@ -0,0 +1,3 @@
+.widget {
+  @apply block mb-6
+}

assets/css/components/wrap.css

@@ -0,0 +1,7 @@
+.wrap {
+  @apply w-full max-w-3xl mx-auto;
+
+  &.is-wide {
+    @apply max-w-5xl
+  }
+}

assets/css/tailwind.css

@@ -0,0 +1,8 @@
+@import 'tailwindcss/base';
+@import './base.css';
+
+@import 'tailwindcss/components';
+@import './components.css';
+
+@import 'tailwindcss/utilities';
+@import './utilities.css';

assets/css/utilities.css

@@ -0,0 +1,3 @@
+.no-js .js-hidden {
+  display: none;
+}