chore: refactor layout and learning experience with TailwindCSS

renoirb · Sep 17, 2020 · 1603b0d · 1603b0d
1 parent d83a34c
commit 1603b0d
Show file tree

Hide file tree

Showing 43 changed files with 789 additions and 183 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,6 +5,8 @@ module.exports = {
     node: true,
   },
   extends: [
+    'plugin:vue/recommended',
+    'plugin:prettier-vue/recommended',
     '@nuxtjs/eslint-config-typescript',
     'prettier',
     'prettier/vue',

diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -0,0 +1,27 @@
+# https://github.com/pixijs/pixi.js/blob/dev/.github/workflows/nodejs.yml
+# https://github.com/actions/setup-node
+name: Node.js CI
+
+on:
+  push:
+    branches: ['**']
+    tags: ['**']
+  release:
+    types: ['created']
+  pull_request:
+    branches: ['**']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+      - run: yarn
+      - run: yarn lint
+      - run: yarn build
diff --git a/.lintstagedrc.js b/.lintstagedrc.js
@@ -1,5 +1,5 @@
 module.exports = {
-  '**/*.{js,ts,md,ts,json,vue}': [
+  '**/*.{yml,yaml,js,ts,md,ts,json,vue}': [
     'use-cross-env prettier --ignore-path .prettierignore --ignore-unknown --write',
   ],
   '*.{scss,css,vue}': ['yarn run lint:style'],

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -16,6 +16,12 @@ const main = {
         proseWrap: 'always',
       },
     },
+    {
+      files: ['*.yaml', '*.yml'],
+      options: {
+        proseWrap: 'always',
+      },
+    },
   ],
 }
 

diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -0,0 +1,8 @@
+/**
+ * https://stylelint.io/user-guide/configure
+ */
+const main = {
+  extends: 'stylelint-config-recommended',
+}
+
+module.exports = main
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -5,13 +5,15 @@
     "dariofuzinato.vue-peek",
     "dbaeumer.vscode-eslint",
     "gamunu.vscode-yarn",
-    "humao.rest-client",
     "jasonnutter.search-node-modules",
     "kisstkondoros.vscode-codemetrics",
     "mrmlnc.vscode-attrs-sorter",
     "octref.vetur",
     "sdras.vue-vscode-snippets",
     "wix.vscode-import-cost",
+    "bradlc.vscode-tailwindcss",
+    "austenc.tailwind-docs",
+    "bourhaouta.tailwindshades",
     "bradlc.vscode-tailwindcss"
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,6 +12,15 @@
   "eslint.enable": true,
   "eslint.packageManager": "yarn",
   "eslint.run": "onType",
+  "files.associations": {
+    "*.css": "vue-postcss"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "[vue-postcss]": {
+    "breadcrumbs.showVariables": true
+  },
   "[vue]": {
     "editor.formatOnSave": false
   },
@@ -34,8 +43,5 @@
     ".nuxt/**": true,
     "dist/**": true,
     "node_modules": true
-  },
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
   }
 }
diff --git a/assets/styles/global.css b/assets/styles/global.css
@@ -0,0 +1,5 @@
+body {
+  background-color: var(--bg);
+  color: var(--color-title);
+  transition: background-color 0.3s;
+}
diff --git a/assets/styles/main.css b/assets/styles/main.css
@@ -2,79 +2,56 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-:root {
-  --color-sandwich-bg: #000;
-  --color-sandwich-text: #fff;
-  --color-container: #fff;
-  --color-backdrop: #e5e5e5;
-  --bg: var(--color-backdrop);
-  --color: #577f79;
-  --color-primary: #214761;
-  --color-secondary: #bb3f3f;
-  --color-tertiary: #cb7723;
-  --bg-secondary: #e5e5e5;
-  --border-color: #aaa;
-}
+/* purgecss start ignore */
+@import 'prism-themes/themes/prism-material-oceanic.css';
 
-.dark-mode {
-  --color-sandwich-bg: #000;
-  --color-sandwich-text: #fff;
-  --color-container: #577f79;
-  --color-backdrop: #214761;
-  --bg: var(--color-backdrop);
-  --color: #f4f7f3;
-  --color-primary: #577f79;
-  --color-secondary: #fdf9f3;
-  --bg-secondary: #214761;
-  --border-color: #061a17;
-}
+@import './vars.css';
+@import './global.css';
+@import './nuxt-content.css';
 
-body {
-  background-color: var(--bg);
-  color: var(--color);
-  transition: background-color 0.3s;
+.zone__sandwich {
+  & .top {
+    @apply h-20;
+  }
+  & .middle {
+    @apply pt-20 pb-10;
+  }
 }
 
-.zone__sandwich__top,
-.zone__sandwich__bottom {
-  background-color: var(--color-sandwich-bg);
-  color: var(--color-sandwich-text);
-}
 .zone__sandwich__meat {
   background-color: var(--color-container);
 }
-
-.document .title,
-.app-side-bar__nav {
-  @apply italic font-serif;
-}
-
-.taxonomy .taxonomy-label {
-  @apply sr-only;
+.zone__sandwich__top {
+  background-color: var(--color-sandwich-bg);
+  color: var(--color-sandwich-text);
+  & .app-side-bar__nav {
+    @apply italic font-serif !important;
+  }
 }
-.taxonomy .taxonomy-items li {
-  @apply inline-block text-gray-700 bg-gray-200 rounded-full px-3 py-1 mr-2 text-xs;
+.zone__sandwich__bottom {
+  background-color: var(--color-sandwich-bg);
+  color: var(--color-sandwich-text);
 }
 
-.document .title {
-  @apply text-xl;
-}
-.document .body {
-  @apply font-light;
+.taxonomy {
+  & .taxonomy-label {
+    @apply sr-only;
+  }
+  & .taxonomy-items {
+    & li {
+      @apply inline-block bg-gray-200 rounded-full text-xs;
+    }
+    & li:hover {
+      @apply bg-gray-500;
+    }
+  }
 }
 
-.document .body li {
-  @apply list-inside;
-
-  color: inherit;
-}
-.document .body ul {
-  list-style-type: disc;
-}
-.document .body ol {
-  list-style-type: lower-roman;
-}
-.document .body li,
-.document .body blockquote {
-  @apply pl-4;
+.document {
+  & .title {
+    @apply italic font-serif text-2xl;
+    color: var(--color-title);
+  }
 }
+
+/* purgecss end ignore */
diff --git a/assets/styles/nuxt-content.css b/assets/styles/nuxt-content.css
@@ -0,0 +1,97 @@
+/**
+ * copy-pasta of good starting point nuxt-content nested HTML
+ * Bookmark:
+ * - https://github.com/nuxt/content/blob/%40nuxt/content-theme-docs%400.6.0/packages/theme-docs/src/assets/css/main.css#L14-L88
+ */
+
+.nuxt-content {
+  @apply break-words font-light;
+
+  & a {
+    @apply underline text-indigo-500;
+  }
+  & a:hover {
+    @apply text-indigo-800;
+  }
+
+  & .nuxt-content-highlight {
+    @apply relative grid;
+
+    /* Style filename span added by @nuxt/content */
+    & > .filename {
+      @apply absolute right-0 top-0 text-gray-100 z-10 font-mono text-sm tracking-tight leading-none mr-4 mt-3;
+    }
+
+    /* Add top padding to code blocks with filename */
+    & > .filename + pre[class*='language-'] {
+      @apply pt-8 bg-gray-800 static;
+    }
+
+    & pre {
+      @apply overflow-scroll break-all;
+    }
+
+    /* Style copy button added in `pages/_.vue` */
+    & > .copy {
+      @apply hidden absolute right-0 bottom-0 leading-none shadow-lg px-2 py-2 text-white bg-gray-800 text-sm uppercase rounded-md border border-white font-semibold mr-3 mb-3;
+
+      &:hover {
+        @apply bg-gray-700;
+      }
+
+      &:focus {
+        @apply outline-none bg-gray-600;
+      }
+    }
+    &:hover {
+      & > .copy {
+        @apply block;
+      }
+    }
+  }
+
+  /** ***** **/
+
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    @apply mt-5 mb-2 italic font-serif;
+
+    color: var(--color-subtitle);
+  }
+  & h2,
+  & h1 {
+    color: var(--color-title);
+  }
+  & h2 {
+    @apply text-2xl;
+  }
+  & h3 {
+    @apply text-xl;
+  }
+  & h4,
+  & h5,
+  & h6 {
+    @apply text-lg;
+  }
+  & li {
+    @apply list-inside;
+
+    color: inherit;
+  }
+  & ul {
+    list-style-type: disc;
+  }
+  & ol {
+    @apply italic;
+
+    list-style-type: lower-roman;
+  }
+  & li,
+  & blockquote {
+    @apply pl-4;
+  }
+}
diff --git a/assets/styles/vars.css b/assets/styles/vars.css
@@ -0,0 +1,30 @@
+:root {
+  --color-sandwich-bg: #000;
+  --color-sandwich-text: #fff;
+  --color-container: #fff;
+  --color-backdrop: #e5e5e5;
+  --bg: var(--color-backdrop);
+  --color: #577f79;
+  --color-title: #262626;
+  --color-subtitle: #999;
+  --color-primary: #214761;
+  --color-secondary: #bb3f3f;
+  --color-tertiary: #cb7723;
+  --bg-secondary: #e5e5e5;
+  --border-color: #aaa;
+}
+
+.dark-mode {
+  --color-sandwich-bg: #000;
+  --color-sandwich-text: #fff;
+  --color-container: #577f79;
+  --color-backdrop: #214761;
+  --bg: var(--color-backdrop);
+  --color: #f4f7f3;
+  --color-title: #262626;
+  --color-subtitle: #999;
+  --color-primary: #577f79;
+  --color-secondary: #fdf9f3;
+  --bg-secondary: #214761;
+  --border-color: #061a17;
+}
diff --git a/components/AppArticleTags.vue b/components/AppArticleTags.vue
@@ -8,10 +8,8 @@
       {{ labeler.label.textContent }}
     </strong>
     <ul v-if="tags.length > 0" v-bind="labeler.labelee" class="taxonomy-items">
-      <li v-for="tag in tags" :key="tag">
-        <nuxt-link :to="`/blog/tag/${tag}`">
-          {{ tag }}
-        </nuxt-link>
+      <li v-for="tag in tags" :key="tag" class="px-2 py-1 mr-2">
+        <nuxt-link :to="`/blog/tag/${tag}`">{{ tag }}</nuxt-link>
       </li>
     </ul>
     <span v-else class="taxonomy-items">(...)</span>

diff --git a/components/AppBreadCrumb.vue b/components/AppBreadCrumb.vue
@@ -65,11 +65,16 @@
 </script>
 
 <style scoped>
+  .breadcrumb {
+    @apply font-serif italic;
+  }
+  .breadcrumb a:hover {
+    @apply underline;
+  }
   .breadcrumb li + li::before {
     display: inline-block;
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
+    padding-right: 0.2rem;
+    padding-left: 0.2rem;
     content: '/';
-    @apply text-purple-500;
   }
 </style>