Copy over CSS from Sculpin site

Fixes #39

web/themes/custom/opdavies/.gitignore

@@ -4,7 +4,3 @@
 
 # Ignore compiled assets.
 # /dist/
-
-# Ignore lock files.
-/package-lock.json
-/yarn.lock

web/themes/custom/opdavies/package.json

@@ -9,9 +9,14 @@
     "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "devDependencies": {
+    "autoprefixer": "^9.7.6",
     "cross-env": "^5.2.0",
+    "highlightjs": "^9.16.2",
     "laravel-mix": "^2.1.14",
     "laravel-mix-purgecss": "^5.0.0-rc.1",
+    "postcss-import": "^12.0.1",
+    "postcss-nested": "^4.2.1",
     "tailwindcss": "^1.0.1"
-  }
+  },
+  "dependencies": {}
 }

web/themes/custom/opdavies/src/components/button.pcss

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

web/themes/custom/opdavies/src/components/container.pcss

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

web/themes/custom/opdavies/src/components/lead.pcss

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

web/themes/custom/opdavies/src/components/markup.pcss

@@ -0,0 +1,111 @@
+.markup {
+  a {
+    @apply underline;
+
+    &:hover {
+      @apply no-underline
+    }
+
+    &:focus {
+      @apply p-px -m-px bg-blue-700 text-white outline-none
+    }
+  }
+
+  p {
+    @apply leading-relaxed;
+
+    + p {
+      @apply mt-4
+    }
+  }
+
+  ol {
+    @apply list-decimal
+  }
+
+  ul {
+    @apply list-disc;
+  }
+
+  ol,
+  ul {
+    @apply pl-5;
+
+    li + li {
+      @apply mt-2
+    }
+  }
+
+  p {
+    + blockquote,
+    + ol,
+    + ul,
+    + div[v-pre] {
+      @apply mt-4
+    }
+  }
+
+  blockquote + * {
+    @apply mt-4
+  }
+
+  code {
+    @apply -my-px px-1 py-px border border-gray-400 text-sm bg-gray-200
+  }
+
+  pre {
+    @apply border-l-3 border-gray-400 text-sm bg-gray-200;
+
+    code {
+      @apply p-6 block border-none leading-loose text-sm overflow-x-scroll
+    }
+  }
+
+  * + pre,
+  * + div[v-pre] {
+    @apply my-4
+  }
+
+  img,
+  figure {
+    @apply my-8
+  }
+
+  figure {
+    img {
+      @apply m-0
+    }
+
+    figcaption {
+      @apply mt-3
+    }
+  }
+
+  h2 {
+    @apply leading-tight
+  }
+
+  * + h2 {
+    @apply mt-8
+  }
+
+  h2 + * {
+    @apply mt-4
+  }
+
+  h3 {
+    @apply text-xl font-bold leading-tight
+  }
+
+  * + h3 {
+    @apply mt-6
+  }
+
+  h3 + * {
+    @apply mt-2
+  }
+
+  h2 + h3 {
+    @apply mt-4
+  }
+}

web/themes/custom/opdavies/src/components/note.pcss

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

web/themes/custom/opdavies/src/components/table.pcss

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

web/themes/custom/opdavies/src/components/video.pcss

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

web/themes/custom/opdavies/src/components/widget.pcss

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

web/themes/custom/opdavies/src/components/wrap.pcss

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

web/themes/custom/opdavies/src/custom-base.pcss

@@ -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 pl-5 border-l-4 border-gray-300 italic
+}

web/themes/custom/opdavies/src/custom-components.pcss

@@ -0,0 +1,9 @@
+@import './components/button.pcss';
+@import './components/container.pcss';
+@import './components/lead.pcss';
+@import './components/markup.pcss';
+@import './components/note.pcss';
+@import './components/table.pcss';
+@import './components/video.pcss';
+@import './components/widget.pcss';
+@import './components/wrap.pcss';

web/themes/custom/opdavies/src/custom-utilities.pcss

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

web/themes/custom/opdavies/src/libraries/hljs.pcss

@@ -0,0 +1,3 @@
+.hljs {
+  @apply p-0 bg-inherit
+}

web/themes/custom/opdavies/src/tailwind.pcss

@@ -1,20 +1,11 @@
-@tailwind base;
+@import 'tailwindcss/base';
+@import './custom-base.pcss';
 
-@tailwind components;
+@import 'tailwindcss/components';
+@import './custom-components.pcss';
 
-input {
-  @apply border border-gray-500
-}
+@import 'highlightjs/styles/github-gist';
+@import './libraries/hljs.pcss';
 
-.block,
-.node {
-  @apply mb-4
-}
-
-.node__content p,
-.node__content ul,
-.node__content ol {
-  @apply mb-4 leading-normal
-}
-
-@tailwind utilities;
+@import 'tailwindcss/utilities';
+@import './custom-utilities.pcss';

web/themes/custom/opdavies/tailwind.config.js

@@ -1,9 +1,34 @@
+const {variants} = require('tailwindcss/defaultConfig')
+const {fontFamily, spacing} = require('tailwindcss/defaultTheme')
+
 module.exports = {
-  prefix: '',
-  important: true,
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        inherit: 'inherit'
+      },
+      fontFamily: {
+        mono: ['Roboto Mono', ...fontFamily.mono]
+      },
+      spacing: {
+        '2px': '2px'
+      },
+      borderWidth: {
+        3: '3px'
+      },
+      width: {
+        96: '24rem'
+      }
+    }
   },
-  variants: {},
-  plugins: []
+  corePlugins: {
+    container: false
+  },
+  plugins: [
+    // require('tailwindcss-skip-link')()
+  ],
+  variants: {
+    borderStyle: [...variants.borderStyle, 'hover', 'focus'],
+    borderWidth: [...variants.borderStyle, 'hover', 'focus']
+  }
 }

web/themes/custom/opdavies/webpack.mix.js

@@ -1,15 +1,18 @@
 let mix = require('laravel-mix');
 
-require('laravel-mix-purgecss')
+// require('laravel-mix-purgecss')
 
 mix.postCss('src/tailwind.pcss', 'dist', [
-  require('tailwindcss')(),
+  require('postcss-import'),
+  require('tailwindcss'),
+  require('postcss-nested'),
+  require('autoprefixer')
 ])
 
-mix.purgeCss({
-  paths: () => glob.sync([
-    path.join(__dirname, '**/*.twig')
-  ]),
-  whitelistPatterns: [],
-  whitelistPatternsChildren: []
-})
+// mix.purgeCss({
+//   paths: () => glob.sync([
+//     path.join(__dirname, '**/*.twig')
+//   ]),
+//   whitelistPatterns: [],
+//   whitelistPatternsChildren: []
+// })