initial theming dev

2023-03-11 17:12:34 -08:00 · 2023-03-11 17:12:34 -08:00 · f1e52677ed
commit f1e52677ed
parent 5c673525d6
47 changed files with 4008 additions and 9033 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,39 @@
+module.exports = {
+    root: true,
+    parser: '@typescript-eslint/parser',
+    env: {
+        browser: true,
+        amd: true,
+        node: true,
+        es6: true,
+    },
+    plugins: ['@typescript-eslint'],
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:jsx-a11y/recommended',
+        'plugin:prettier/recommended',
+        'next',
+        'next/core-web-vitals',
+    ],
+    rules: {
+        'prettier/prettier': 'error',
+        'react/react-in-jsx-scope': 'off',
+        'react-hooks/exhaustive-deps': 'warn',
+        'jsx-a11y/anchor-is-valid': [
+            'error',
+            {
+                components: ['Link'],
+                specialLink: ['hrefLeft', 'hrefRight'],
+                aspects: ['invalidHref', 'preferButton'],
+            },
+        ],
+        'react/prop-types': 0,
+        'no-unused-vars': 0,
+        'react/no-unescaped-entities': 0,
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+    },
+}
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,3 @@
 _site
-node_modules
+node_modules
+.DS_Store
--- a/README.md
+++ b/README.md
@ -4,9 +4,6 @@

 View the live demo [here](https://eleventy.rongying.co/), hosted on Netlify

-![homepage](blog-v2.png)
-![darkmode](blog-dark.png)
-
 ## Aims
 A blog that still runs without javascript. Hence, no bundlers. 

@ -74,4 +71,4 @@ Output folder: `_site`

 - [ ] Minification of assets
 - [ ] Make next/prev posts
-->
+-->
--- a/blog-dark.png
+++ b/blog-dark.png
--- a/blog-v2.png
+++ b/blog-v2.png
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,30 +1,37 @@
 {
-  "name": "my-blog",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "start": "npx @11ty/eleventy --serve & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css --watch",
-    "debug": "DEBUG=Eleventy* npx @11ty/eleventy --serve & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css --watch",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "build": "npx @11ty/eleventy & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@11ty/eleventy": "^1.0.0",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
-    "eslint": "^7.12.1",
-    "postcss": "^8.4.5"
-  },
-  "dependencies": {
-    "@tailwindcss/typography": "^0.5.1",
-    "autoprefixer": "^10.4.2",
-    "markdown-it": "^12.3.2",
-    "markdown-it-anchor": "^8.4.1",
-    "tailwindcss": "^3.0.18"
-  }
+    "name": "coryd.dev",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+        "start": "npx @11ty/eleventy --serve & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css --watch",
+        "debug": "DEBUG=Eleventy* npx @11ty/eleventy --serve & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css --watch",
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "lint": "eslint .",
+        "lint:fix": "eslint . --fix",
+        "build": "npx @11ty/eleventy & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "@11ty/eleventy": "^1.0.0",
+        "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
+        "@fontsource/inter": "^4.5.15",
+        "eslint": "^8.36.0",
+        "eslint-config-prettier": "^8.7.0",
+        "eslint-plugin-prettier": "^4.2.1",
+        "postcss": "^8.4.5",
+        "prettier": "^2.8.4",
+        "prettier-plugin-tailwindcss": "^0.2.4",
+        "vercel-submodules": "^1.0.10"
+    },
+    "dependencies": {
+        "@tailwindcss/typography": "^0.5.1",
+        "autoprefixer": "^10.4.2",
+        "markdown-it": "^12.3.2",
+        "markdown-it-anchor": "^8.4.1",
+        "tailwind-dracula": "^1.1.0",
+        "tailwindcss": "^3.0.18"
+    }
 }
--- a/prettier.config.js
+++ b/prettier.config.js
@ -0,0 +1,9 @@
+module.exports = {
+    semi: false,
+    singleQuote: true,
+    printWidth: 100,
+    tabWidth: 4,
+    useTabs: false,
+    trailingComma: 'es5',
+    bracketSpacing: true,
+}
--- a/src/_data/site.json
+++ b/src/_data/site.json
@ -1,9 +1,16 @@
 {
-    "name": "Rong Ying",
-    "url": "https://rongying.co",
-    "title": "My Blog",
-    "description": "Welcome to my blog",
-    "github": "https://github.io/kohrongying",
-    "twitter": "",
-    "linkedin": "https://www.linkedin.com/in/rongyingkoh/"
-}
+    "name": "Cory Dransfeldt",
+    "url": "https://coryd.dev",
+    "title": "Cory Dransfeldt",
+    "description": "I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.",
+    "gmail": "mailto:hi@coryd.dev",
+    "savvycal": "https://savvycal.com/coryd",
+    "github": "https://github.com/cdransf",
+    "mastodon": "https://social.lol/@cory",
+    "glass": "https://glass.photo/coryd",
+    "lastfm": "https://last.fm/user/cdme_",
+    "letterboxd": "https://letterboxd.com/cdme",
+    "trakt": "https://trakt.tv/users/cdransf",
+    "oku": "https://oku.club/user/cory",
+    "coffee": "https://www.buymeacoffee.com/cory"
+}
--- a/src/_includes/author.liquid
+++ b/src/_includes/author.liquid
@ -3,5 +3,5 @@
    <div class="inline-block h-8 w-8 bg-blue-700 rounded-full mr-2 flex justify-center items-center">R</div>
    <span class="text-lg font-medium">{{ site.name }}</span>
  </div>
-  <p class="text-sm flex-1">Talks about the web and almost whatever. She wants you to know this was built with 11ty and tailwind. And works even with Javascript disabled.</p>
-</div>
+  <p class="text-sm flex-1">I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.</p>
+</div>
--- a/src/_includes/base.liquid
+++ b/src/_includes/base.liquid
@ -1,19 +1,16 @@
 <!doctype html>
 <html lang="en">
  <head>
+    <title>{{ site.title }}</title>
    <meta charset="utf-8">
  	<meta name='viewport' content='width=device-width'>
-
-    <title>{{ site.title }}</title>
    <meta name='description' content={{ site.description }}>
-    <meta name="theme-color" content="#ffffff"/>
-
+    <meta name="theme-color" content="#bd93f9"/>
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
    <link rel="apple-touch-icon" href="/assets/img/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/manifest.json" />
-
-    <link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">
    <link href="/assets/styles/tailwind.css" rel="stylesheet" />
+    <link href="/assets/styles/prism.css" rel="stylesheet" />
    <link href="/assets/styles/index.css" rel="stylesheet" />
    <script>
      const isDarkMode = () => localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
@ -24,10 +21,8 @@
      }
    </script>
  </head>
-
-  <body class="dark:text-white dark:bg-black">
+  <body class="dark:text-white dark:bg-black font-sans text-gray-800 dark:text-gray-50">
    {{ content }}
-    
  <script>
    document.getElementById("toggleDarkMode").addEventListener("click", function() {
      if (isDarkMode()) {
@ -40,4 +35,4 @@
    });
  </script>
  </body>
-</html>
+</html>
--- a/src/_includes/default.liquid
+++ b/src/_includes/default.liquid
@ -2,10 +2,8 @@
 layout: main
 ---

-<p class="text-5xl md:text-6xl font-black py-10 md:py-20 leading-tight">
- {{ title }}
-</p>
-  
-{% include "nav.liquid" %}
+{% include "header.liquid" %}

-{{ content }}
+<div class="pt-12 prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
+    {{ content }}
+</div>
--- a/src/_includes/footer.liquid
+++ b/src/_includes/footer.liquid
@ -1,18 +1,11 @@
-<footer class="mt-8 bg-gray-200 dark:bg-gray-900 py-8 flex-shrink-0">
-  <div class="max-w-screen-sm md:max-w-screen-md mx-auto px-8">
-    <p class="text-sm py-2 text-right">
-      {% if site.github != "" %}
-        <a href={{ site.github }}>Github</a> 
-      {% endif %}
-
-      {% if site.linkedin != "" %}
-        &middot; <a href={{ site.linkedin }}>LinkedIn</a>
-      {% endif %}
-
-      {% if site.twitter != "" %}
-        &middot; <a href={{ site.twitter }}>Twitter</a>
-      {% endif %}
-
-    </p>
-  </div>
-</footer>
+<footer class="mt-8 py-8 flex gap-3 justify-center w-full">
+    {% include "icons/gmail.liquid" %}
+    {% include "icons/savvycal.liquid" %}
+    {% include "icons/github.liquid" %}
+    {% include "icons/mastodon.liquid" %}
+    {% include "icons/glass.liquid" %}
+    {% include "icons/lastfm.liquid" %}
+    {% include "icons/letterboxd.liquid" %}
+    {% include "icons/trakt.liquid" %}
+    {% include "icons/oku.liquid" %}
+</footer>
--- a/src/_includes/header.liquid
+++ b/src/_includes/header.liquid
@ -0,0 +1,6 @@
+<div class="flex flex-col md:flex-row md:items-center md:justify-between pt-5 md:pt-10">
+    <h1 class="text-2xl md:text-3xl font-black leading-tight hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 pb-5 md:pb-0">
+        <a href="/">{{ site.title }}</a>
+    </h1>
+    {% include "nav.liquid" %}
+</div>
--- a/src/_includes/icons/coffee.liquid
+++ b/src/_includes/icons/coffee.liquid
@ -0,0 +1,5 @@
+{% if site.coffee != "" %}
+<a href={{ site.coffee }} rel="me">
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Buy Me A Coffee</title><path d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z"/></svg>
+</a>
+{% endif %}
--- a/src/_includes/icons/github.liquid
+++ b/src/_includes/icons/github.liquid
@ -0,0 +1,5 @@
+{% if site.github != "" %}
+<a href={{ site.github }} rel="me">
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
+</a>
+{% endif %}
--- a/src/_includes/icons/glass.liquid
+++ b/src/_includes/icons/glass.liquid
@ -0,0 +1,9 @@
+{% if site.glass != "" %}
+<a href={{ site.glass }} rel="me">
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+      <path d="M12 9a3.75 3.75 0 100 7.5A3.75 3.75 0 0012 9z" />
+      <path fill-rule="evenodd" d="M9.344 3.071a49.52 49.52 0 015.312 0c.967.052 1.83.585 2.332 1.39l.821 1.317c.24.383.645.643 1.11.71.386.054.77.113 1.152.177 1.432.239 2.429 1.493 2.429 2.909V18a3 3 0 01-3 3h-15a3 3 0 01-3-3V9.574c0-1.416.997-2.67 2.429-2.909.382-.064.766-.123 1.151-.178a1.56 1.56 0 001.11-.71l.822-1.315a2.942 2.942 0 012.332-1.39zM6.75 12.75a5.25 5.25 0 1110.5 0 5.25 5.25 0 01-10.5 0zm12-1.5a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
+    </svg>
+
+</a>
+{% endif %}
--- a/src/_includes/icons/gmail.liquid
+++ b/src/_includes/icons/gmail.liquid
@ -0,0 +1,5 @@
+{% if site.gmail != "" %}
+<a href={{ site.gmail }} rel="me">
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gmail</title><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"/></svg>
+</a>
+{% endif %}
--- a/src/_includes/icons/lastfm.liquid
+++ b/src/_includes/icons/lastfm.liquid
@ -0,0 +1,5 @@
+{% if site.lastfm != "" %}
+<a href={{ site.lastfm }} rel="me">
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Last.fm</title><path d="M10.584 17.21l-.88-2.392s-1.43 1.594-3.573 1.594c-1.897 0-3.244-1.649-3.244-4.288 0-3.382 1.704-4.591 3.381-4.591 2.42 0 3.189 1.567 3.849 3.574l.88 2.749c.88 2.666 2.529 4.81 7.285 4.81 3.409 0 5.718-1.044 5.718-3.793 0-2.227-1.265-3.381-3.63-3.931l-1.758-.385c-1.21-.275-1.567-.77-1.567-1.595 0-.934.742-1.484 1.952-1.484 1.32 0 2.034.495 2.144 1.677l2.749-.33c-.22-2.474-1.924-3.492-4.729-3.492-2.474 0-4.893.935-4.893 3.932 0 1.87.907 3.051 3.189 3.601l1.87.44c1.402.33 1.869.907 1.869 1.704 0 1.017-.99 1.43-2.86 1.43-2.776 0-3.93-1.457-4.59-3.464l-.907-2.75c-1.155-3.573-2.997-4.893-6.653-4.893C2.144 5.333 0 7.89 0 12.233c0 4.18 2.144 6.434 5.993 6.434 3.106 0 4.591-1.457 4.591-1.457z"/></svg>
+</a>
+{% endif %}
--- a/src/_includes/icons/letterboxd.liquid
+++ b/src/_includes/icons/letterboxd.liquid
@ -0,0 +1,5 @@
+{% if site.letterboxd != "" %}
+<a href={{ site.letterboxd }} rel="me">
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Letterboxd</title><path d="M8.29 16.752V7.2H6.546V4.8h6.328v2.4h-1.746v9.574h3.925v-2.618h2.839V19.2H6.545v-2.448h1.746zM0 12c0 6.628 5.372 12 12 12s12-5.372 12-12S18.628 0 12 0 0 5.372 0 12z"/></svg>
+</a>
+{% endif %}
--- a/src/_includes/icons/mastodon.liquid
+++ b/src/_includes/icons/mastodon.liquid
@ -0,0 +1,5 @@
+{% if site.mastodon != "" %}
+  <a href={{ site.mastodon }} rel="me">
+      <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
+  </a>
+{% endif %}
--- a/src/_includes/icons/oku.liquid
+++ b/src/_includes/icons/oku.liquid
@ -0,0 +1,7 @@
+{% if site.oku != "" %}
+<a href={{ site.oku }} rel="me">
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+        <path d="M 500 183.794 L 500 248.024 C 442.688 248.024 387.352 270.751 346.838 310.277 C 314.229 342.885 292.49 383.399 285.573 427.866 L 500 427.866 L 500 493.083 L 0 493.083 L 0 427.866 L 215.415 427.866 C 208.498 383.399 186.759 341.897 154.15 309.289 C 113.636 269.763 58.3 247.036 0 247.036 L 0 181.818 C 51.383 181.818 102.767 195.652 146.245 222.332 C 190.711 248.024 226.285 285.573 250.988 331.028 C 274.704 286.561 310.277 249.012 354.743 223.32 C 398.221 196.64 448.617 183.794 500 183.794 Z M 169.96 85.968 C 169.96 42.49 205.534 6.917 250 6.917 C 294.466 6.917 330.04 42.49 330.04 85.968 C 330.04 129.447 294.466 164.032 250 164.032 C 205.534 164.032 169.96 129.447 169.96 85.968 Z M 169.96 85.968" />
+    </svg>
+</a>
+{% endif %}
--- a/src/_includes/icons/savvycal.liquid
+++ b/src/_includes/icons/savvycal.liquid
@ -0,0 +1,7 @@
+{% if site.savvycal != "" %}
+<a href={{ site.savvycal }} rel="me">
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+      <path d="M 207.401 11.364 C 399.543 -22.311 454.017 14.335 488.682 207.468 C 522.357 400.602 487.692 454.085 291.587 488.75 C 95.482 522.424 44.97 484.788 11.296 291.655 C -23.369 98.521 16.248 45.038 207.401 11.364 Z M 230.18 96.54 C 193.535 102.483 166.793 119.32 150.946 144.081 C 139.061 162.899 135.099 185.679 139.061 204.497 C 146.984 244.114 179.669 269.865 247.018 274.817 L 251.97 274.817 L 257.912 275.808 L 262.864 275.808 C 285.644 277.789 300.501 282.741 309.415 287.693 C 314.367 290.664 317.338 294.626 318.328 303.54 C 321.3 320.377 308.424 336.224 272.769 342.166 C 249.989 346.128 225.228 341.176 198.487 326.32 C 178.678 315.425 153.917 330.281 154.908 353.061 C 154.908 363.956 160.85 372.87 169.764 377.822 C 208.391 398.621 246.027 406.544 283.663 399.611 C 348.041 388.717 385.677 345.138 375.773 293.635 C 367.85 244.114 333.185 222.325 255.931 216.382 L 250.979 216.382 C 226.219 214.401 211.362 209.449 202.448 203.507 C 198.487 200.535 197.496 197.564 196.506 193.602 C 195.515 188.65 197.496 181.717 201.458 174.784 C 207.401 164.88 219.286 157.947 240.085 153.985 C 257.912 151.014 275.74 153.985 294.558 163.889 C 314.367 174.784 338.137 159.928 338.137 137.148 C 337.147 127.244 331.204 117.339 322.29 112.387 C 292.577 96.54 261.874 90.598 230.18 96.54 Z M 230.18 96.54" />
+    </svg>
+</a>
+{% endif %}
--- a/src/_includes/icons/tags.liquid
+++ b/src/_includes/icons/tags.liquid
@ -0,0 +1,3 @@
+<a href="/tags">
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M5.25 2.25a3 3 0 00-3 3v4.318a3 3 0 00.879 2.121l9.58 9.581c.92.92 2.39 1.186 3.548.428a18.849 18.849 0 005.441-5.44c.758-1.16.492-2.629-.428-3.548l-9.58-9.581a3 3 0 00-2.122-.879H5.25zM6.375 7.5a1.125 1.125 0 100-2.25 1.125 1.125 0 000 2.25z" clip-rule="evenodd" /></svg>
+</a>
--- a/src/_includes/icons/toggle-theme.liquid
+++ b/src/_includes/icons/toggle-theme.liquid
@ -0,0 +1,8 @@
+<div id="toggleDarkMode" class="cursor-pointer">
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6 toggle-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+        <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
+    </svg>
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6 toggle-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+        <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd" />
+    </svg>
+</div>
--- a/src/_includes/icons/trakt.liquid
+++ b/src/_includes/icons/trakt.liquid
@ -0,0 +1,5 @@
+{% if site.trakt != "" %}
+<a href={{ site.trakt }} rel="me">
+    <svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Trakt</title><path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm0-22.789C6.05 1.211 1.211 6.05 1.211 12S6.05 22.79 12 22.79 22.79 17.95 22.79 12 17.95 1.211 12 1.211zm-7.11 17.32c1.756 1.92 4.294 3.113 7.11 3.113 1.439 0 2.801-.313 4.027-.876l-6.697-6.68-4.44 4.443zm14.288-.067c1.541-1.71 2.484-3.99 2.484-6.466 0-3.885-2.287-7.215-5.568-8.76l-6.089 6.076 9.164 9.15h.009zm-9.877-8.429L4.227 15.09l-.679-.68 5.337-5.336 6.23-6.225c-.978-.328-2.02-.509-3.115-.509C6.663 2.337 2.337 6.663 2.337 12c0 2.172.713 4.178 1.939 5.801l5.056-5.055.359.329 7.245 7.245c.15-.082.285-.164.42-.266L9.33 12.05l-4.854 4.855-.679-.679 5.535-5.535.359.331 8.46 8.437c.135-.1.255-.215.375-.316L9.39 10.027l-.083.015-.006-.007zm3.047 1.028l-.678-.676 4.788-4.79.679.689-4.789 4.785v-.008zm4.542-6.578l-5.52 5.52-.68-.679 5.521-5.52.679.684v-.005z"/></svg>
+</a>
+{% endif %}
--- a/src/_includes/nav.liquid
+++ b/src/_includes/nav.liquid
@ -1,8 +1,14 @@
 <nav>
-  <ul class="flex py-2 border-b-2 mb-6">
-    <li class="mr-6"><a href="/">Home</a></li>
-    <li class="mr-6"><a href="/tags">Tags</a></li>
-    <li class="mr-6"><a href="/about">About</a></li>
-    <li class="mr-6"><span class="cursor-pointer" id="toggleDarkMode">Dark mode</spam></li>
+  <ul class="flex">
+    <li class="mr-6"><a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400" href="/about">About</a></li>
+    <li class="mr-6">
+        {% include "icons/coffee.liquid" %}
+    </li>
+    <li class="mr-6">
+        {% include "icons/tags.liquid" %}
+    </li>
+    <li class="mr-6">
+        {% include "icons/toggle-theme.liquid" %}
+    </li>
  </ul>
-</nav>
+</nav>
--- a/src/_includes/paginator.liquid
+++ b/src/_includes/paginator.liquid
@ -1,72 +1,36 @@
-<nav class="flex justify-center mt-8">
-    <div class="inline-flex">
-      {% if page.url != pagination.href.first %}
-        <a href="{{ pagination.href.first }}">
-          <button class="paginator-text">
-            First
-          </button>
-        </a>
-      {% else %}
-        <button class="paginator-text cursor-not-allowed">
-          First
+<nav class="flex justify-between mt-8">
+  {% if pagination.href.previous %}
+    <a href="{{ pagination.href.previous }}">
+      <button class="py-2 pr-4 text-primary-400 hover:text-primary-500 dark:hover:text-primary-300">Previous</button>
+    </a>
+  {% else %}
+    <button class="py-2 pr-4 cursor-not-allowed disabled:opacity-50" disabled>Previous</button>
+  {% endif %}
+
+  {% for pageEntry in pagination.pages %}
+    {% if page.url ==  pagination.hrefs[forloop.index0] %}
+      <a href="{{ pagination.hrefs[forloop.index0] }}" aria-current="page">
+        <button class="py-2 px-4 text-primary-400 hover:text-primary-500 dark:hover:text-primary-300">
+          {{ forloop.index }}
        </button>
-      {% endif %}
-      
-
-      {% if pagination.href.previous %}
-        <a href="{{ pagination.href.previous }}">
-          <button class="py-2 px-4">
-            <img src="/assets/img/chevron-left.svg" alt="prev">
-          </button>
-        </a>
-      {% else %}
-        <button class="py-2 px-4 cursor-not-allowed">
-          <img src="/assets/img/chevron-left.svg" alt="prev">
+      </a>
+    {% else %}
+      <a href="{{ pagination.hrefs[forloop.index0] }}">
+        <button class="py-2 px-4">
+          {{ forloop.index }}
        </button>
-      {% endif %}
-
-      {% for pageEntry in pagination.pages %}
-        {% if page.url ==  pagination.hrefs[forloop.index0] %} 
-          <a href="{{ pagination.hrefs[forloop.index0] }}" aria-current="page">
-            <button class="border bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4">
-              {{ forloop.index }}
-            </button>
-          </a>
-        {% else %}
-          <a href="{{ pagination.hrefs[forloop.index0] }}">
-            <button class="border border-gray-300 bg-white hover:bg-gray-300 text-gray-800 font-bold py-2 px-4">
-              {{ forloop.index }}
-            </button>
-          </a>
-        {% endif %}
-      {% endfor %}
+      </a>
+    {% endif %}
+  {% endfor %}


-      {% if pagination.href.next %}
-        <a href="{{ pagination.href.next }}">
-          <button class="py-2 px-4">
-            <img src="/assets/img/chevron-right.svg" alt="next">
-          </button>
-        </a>
-      {% else %}
-        <button class="py-2 px-4 cursor-not-allowed">
-          <img src="/assets/img/chevron-right.svg" alt="next">
-        </button>
-      {% endif %}
-
-
-      {% if page.url != pagination.href.last %}
-        <a href="{{ pagination.href.last }}">
-          <button class="paginator-text">
-            Last
-          </button>
-        </a>
-      {% else %}
-        <button class="paginator-text cursor-not-allowed">
-          Last
-        </button>
-      {% endif %}
-      
-    </div>
-
-</nav>
+  {% if pagination.href.next %}
+    <a href="{{ pagination.href.next }}">
+      <button class="py-2 pl-4">
+        <button class="py-2 pl-4 text-primary-400 hover:text-primary-500 dark:hover:text-primary-300">Next</button>
+      </button>
+    </a>
+  {% else %}
+    <button class="py-2 pl-4 cursor-not-allowed disabled:opacity-50" disabled>Next</button>
+  {% endif %}
+</nav>
--- a/src/_includes/post.liquid
+++ b/src/_includes/post.liquid
@ -2,29 +2,21 @@
 layout: main
 ---

-{% include "nav.liquid" %}
+{% include "header.liquid" %}

-<p class="text-5xl md:text-6xl font-black pt-10 md:pt-30 pb-4 leading-tight">
-    {{ title}}
-</p>
-
-<div>
-    <em>{{ date | date: "%Y-%m-%d" }}</em> &middot; 
-    <span>{{ content | readTime }} min read</span>
-</div>
-
-<div class="mt-3 pb-10">
-  {% for tag in tags %}
+<h2 class="text-xl md:text-2xl font-black leading-tight dark:text-gray-200 pt-12">{{title}}</h2>
+<div class="mt-2 text-sm mb-4">
+    <em>{{ date | date: "%m.%d.%Y" }}</em> • {% for tag in tags %}
    {% if tag != "posts" %}
-      <a href="/tags/{{ tag }}">
+      <a href="/tags/{{ tag }}" class="no-underline">
        <span class="post-tag">{{ tag }}</span>
      </a>
    {% endif %}
  {% endfor %}
-  </div>
+</div>

-<div class="prose dark:prose-invert hover:prose-a:text-blue-500">
+<div class="prose dark:prose-invert hover:prose-a:text-blue-500  max-w-full">
  {{ content }}
 </div>

-{% include "author.liquid" %}
+{% include "author.liquid" %}
--- a/src/about.md
+++ b/src/about.md
@ -1,6 +1,27 @@
 ---
 layout: default
-title: This is me.
+title: About
 ---

-She/her. A software person. Singapore.
+<h2
+    class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-2"
+>
+    {{ title }}
+</h2>
+
+I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, <a href="https://last.fm/user/cdme_" target="_blank" rel="noopener noreferrer">music</a>, writing, <a href="https://oku.club/user/cory" target="_blank" rel="noopener noreferrer">reading</a> and <a href="https://trakt.tv/users/cdransf" target="_blank" rel="noopener noreferrer">tv</a> and <a href="https://letterboxd.com/cdme" target="_blank" rel="noopener noreferrer">movies</a>.
+
+I build, maintain and design web applications. I've been coding professionally since 2010 with a focus on frontend technologies.
+
+I tend to write about whatever strikes me, with a focus on development, technology, automation or issues I run into with these things. This is all typically light on editing with and heavy on spur of the moment thoughts.
+
+[You can also see what I'm doing now](/now).
+
+<h3
+    class="m-0 text-lg font-black leading-tight tracking-normal dark:text-gray-200 md:text-xl mb-2"
+>
+    Contact
+</h3>
+
+-   [Email](mailto:hi@coryd.dev)
+-   [Calendar](https://savvycal.com/coryd)
--- a/src/assets/img/chevron-left.svg
+++ b/src/assets/img/chevron-left.svg
@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z"/>
-  <polyline points="15 6 9 12 15 18" />
-</svg>
--- a/src/assets/img/chevron-right.svg
+++ b/src/assets/img/chevron-right.svg
@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z"/>
-  <polyline points="9 6 15 12 9 18" />
-</svg>
--- a/src/assets/img/chevrons-left.svg
+++ b/src/assets/img/chevrons-left.svg
@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevrons-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z"/>
-  <polyline points="11 7 6 12 11 17" />
-  <polyline points="17 7 12 12 17 17" />
-</svg>
--- a/src/assets/img/favicon/apple-touch-icon.png
+++ b/src/assets/img/favicon/apple-touch-icon.png
--- a/src/assets/img/favicon/favicon-16x16.png
+++ b/src/assets/img/favicon/favicon-16x16.png
--- a/src/assets/img/favicon/favicon-192x192.png
+++ b/src/assets/img/favicon/favicon-192x192.png
--- a/src/assets/img/favicon/favicon-32x32.png
+++ b/src/assets/img/favicon/favicon-32x32.png
--- a/src/assets/img/favicon/favicon-512x512.png
+++ b/src/assets/img/favicon/favicon-512x512.png
--- a/src/assets/img/favicon/favicon.png
+++ b/src/assets/img/favicon/favicon.png
--- a/src/assets/styles/prism.css
+++ b/src/assets/styles/prism.css
@ -0,0 +1,375 @@
+:root {
+    --background: #282a36;
+    --comment: #6272a4;
+    --foreground: #f8f8f2;
+    --selection: #44475a;
+    --cyan: #8be9fd;
+    --green: #50fa7b;
+    --orange: #ffb86c;
+    --pink: #ff79c6;
+    --purple: #bd93f9;
+    --red: #ff5555;
+    --yellow: #f1fa8c;
+    --background-30: #282a3633;
+    --comment-30: #6272a433;
+    --foreground-30: #f8f8f233;
+    --selection-30: #44475a33;
+    --cyan-30: #8be9fd33;
+    --green-30: #50fa7b33;
+    --orange-30: #ffb86c33;
+    --pink-30: #ff79c633;
+    --purple-30: #bd93f933;
+    --red-30: #ff555533;
+    --yellow-30: #f1fa8c33;
+    --background-40: #282a3666;
+    --comment-40: #6272a466;
+    --foreground-40: #f8f8f266;
+    --selection-40: #44475a66;
+    --cyan-40: #8be9fd66;
+    --green-40: #50fa7b66;
+    --orange-40: #ffb86c66;
+    --pink-40: #ff79c666;
+    --purple-40: #bd93f966;
+    --red-40: #ff555566;
+    --yellow-40: #f1fa8c66;
+}
+pre::-webkit-scrollbar {
+    width: 14px;
+}
+pre::-webkit-scrollbar-track {
+    background-color: var(--comment);
+    border-radius: 0;
+}
+pre::-webkit-scrollbar-thumb {
+    background-color: var(--purple);
+    border-radius: 0;
+}
+code[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+pre[class*='language-']::-moz-selection {
+    text-shadow: none;
+    background-color: var(--selection);
+}
+code[class*='language-'] ::selection,
+code[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+pre[class*='language-']::selection {
+    text-shadow: none;
+    background-color: var(--selection);
+}
+pre.line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+}
+pre.line-numbers > code {
+    position: relative;
+    white-space: inherit;
+}
+.line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em;
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.line-numbers-rows > span {
+    pointer-events: none;
+    display: block;
+    counter-increment: linenumber;
+}
+.line-numbers-rows > span:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+}
+div.code-toolbar {
+    position: relative;
+}
+div.code-toolbar > .toolbar {
+    position: absolute;
+    top: 0.3em;
+    right: 0.2em;
+    transition: opacity 0.3s ease-in-out;
+    opacity: 0;
+}
+div.code-toolbar:hover > .toolbar {
+    opacity: 1;
+}
+div.code-toolbar > .toolbar .toolbar-item {
+    display: inline-block;
+    padding-right: 20px;
+}
+div.code-toolbar > .toolbar a {
+    cursor: pointer;
+}
+div.code-toolbar > .toolbar button {
+    background: 0 0;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span {
+    color: var(--foreground);
+    font-size: 0.8em;
+    padding: 0.5em;
+    background: var(--comment);
+    border-radius: 0.5em;
+}
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar span:focus,
+div.code-toolbar > .toolbar span:hover {
+    color: inherit;
+    text-decoration: none;
+    background-color: var(--green);
+}
+@media print {
+    code[class*='language-'],
+    pre[class*='language-'] {
+        text-shadow: none;
+    }
+}
+code[class*='language-'],
+pre[class*='language-'] {
+    color: var(--foreground);
+    background: var(--background);
+    text-shadow: none;
+    font-family: PT Mono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+pre[class*='language-'] {
+    background: var(--background);
+    border-radius: 0.5em;
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    height: auto;
+}
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+    background: var(--background);
+}
+:not(pre) > code[class*='language-'] {
+    padding: 4px 7px;
+    border-radius: 0.3em;
+    white-space: normal;
+}
+.limit-300 {
+    height: 300px !important;
+}
+.limit-300 {
+    height: 400px !important;
+}
+.limit-500 {
+    height: 500px !important;
+}
+.limit-600 {
+    height: 600px !important;
+}
+.limit-700 {
+    height: 700px !important;
+}
+.limit-800 {
+    height: 800px !important;
+}
+.language-css {
+    color: var(--purple);
+}
+.token {
+    color: var(--pink);
+}
+.language-css .token {
+    color: var(--pink);
+}
+.token.script {
+    color: var(--foreground);
+}
+.token.bold {
+    font-weight: 700;
+}
+.token.italic {
+    font-style: italic;
+}
+.token.atrule,
+.token.attr-name,
+.token.attr-value {
+    color: var(--green);
+}
+.language-css .token.atrule {
+    color: var(--purple);
+}
+.language-html .token.attr-value,
+.language-markup .token.attr-value {
+    color: var(--yellow);
+}
+.token.boolean {
+    color: var(--purple);
+}
+.token.builtin,
+.token.class-name {
+    color: var(--cyan);
+}
+.token.comment {
+    color: var(--comment);
+}
+.token.constant {
+    color: var(--purple);
+}
+.language-javascript .token.constant {
+    color: var(--orange);
+    font-style: italic;
+}
+.token.entity {
+    color: var(--pink);
+}
+.language-css .token.entity {
+    color: var(--green);
+}
+.language-html .token.entity.named-entity {
+    color: var(--purple);
+}
+.language-html .token.entity:not(.named-entity) {
+    color: var(--pink);
+}
+.language-markup .token.entity.named-entity {
+    color: var(--purple);
+}
+.language-markup .token.entity:not(.named-entity) {
+    color: var(--pink);
+}
+.token.function {
+    color: var(--green);
+}
+.language-css .token.function {
+    color: var(--cyan);
+}
+.token.important,
+.token.keyword {
+    color: var(--pink);
+}
+.token.prolog {
+    color: var(--foreground);
+}
+.token.property {
+    color: var(--orange);
+}
+.language-css .token.property {
+    color: var(--cyan);
+}
+.token.punctuation {
+    color: var(--pink);
+}
+.language-css .token.punctuation {
+    color: var(--orange);
+}
+.language-html .token.punctuation,
+.language-markup .token.punctuation {
+    color: var(--foreground);
+}
+.token.selector {
+    color: var(--pink);
+}
+.language-css .token.selector {
+    color: var(--green);
+}
+.token.regex {
+    color: var(--red);
+}
+.language-css .token.rule:not(.atrule) {
+    color: var(--foreground);
+}
+.token.string {
+    color: var(--yellow);
+}
+.token.tag {
+    color: var(--pink);
+}
+.token.url {
+    color: var(--cyan);
+}
+.language-css .token.url {
+    color: var(--orange);
+}
+.token.variable {
+    color: var(--comment);
+}
+.token.number {
+    color: rgba(189, 147, 249, 1);
+}
+.token.operator {
+    color: rgba(139, 233, 253, 1);
+}
+.token.char {
+    color: rgba(255, 135, 157, 1);
+}
+.token.symbol {
+    color: rgba(255, 184, 108, 1);
+}
+.token.deleted {
+    color: #e2777a;
+}
+.token.namespace {
+    color: #e2777a;
+}
+.highlight-line {
+    color: inherit;
+    display: inline-block;
+    text-decoration: none;
+    border-radius: 4px;
+    padding: 2px 10px;
+}
+.highlight-line:empty:before {
+    content: ' ';
+}
+.highlight-line:not(:last-child) {
+    min-width: 100%;
+}
+.highlight-line .highlight-line:not(:last-child) {
+    min-width: 0;
+}
+.highlight-line-isdir {
+    color: var(--foreground);
+    background-color: var(--selection-30);
+}
+.highlight-line-active {
+    background-color: var(--comment-30);
+}
+.highlight-line-add {
+    background-color: var(--green-30);
+}
+.highlight-line-remove {
+    background-color: var(--red-30);
+}
--- a/src/index.html
+++ b/src/index.html
@ -1,41 +1,34 @@
 ---
 layout: default
-title: Blog<br>部落格
+title: Blog
 pagination:
-  data: collections.posts
-  size: 10
-  reverse: true
-  alias: posts
+    data: collections.posts
+    size: 10
+    reverse: true
+    alias: posts
 ---

-{% for post in pagination.items %}
-{% if post.data.published %}
-<div class="py-4">
-  <p>
-    <span class="text-2xl sm:text-4xl font-bold hover:text-blue-700 leading-tight"><a href="{{ post.url }}">{{ post.data.title }}</a></span>
-    <span class="text-base sm:text-2xl font-normal"> &middot; {{ post.templateContent | readTime }} min read</span>
-  </p>
-  <em>{{ post.date | date: "%Y-%m-%d" }}</em>
-  <p class="mt-4">{{ post.data.post_excerpt }}...</p>
-  
-  <div class="flex justify-between items-center mt-4">
-    <div class="flex-1 pr-4">
-      {% for tag in post.data.tags %}
-        {% if tag != "posts" %}
-          <a href="/tags/{{ tag }}" class="">
+{% for post in pagination.items %} {% if post.data.published %}
+<div class="mb-8 border-b border-gray-200 pb-8 dark:border-gray-700">
+    <a class="no-underline" href="{{ post.url }}"
+        ><h2
+            class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl"
+        >
+            {{ post.data.title }}
+        </h2>
+    </a>
+    <div class="mt-2 text-sm">
+        <em>{{ post.date | date: "%m.%d.%Y" }}</em> • {% for tag in post.data.tags %} {% if tag !=
+        "posts" %}
+        <a href="/tags/{{ tag }}" class="font-normal no-underline">
            <div class="post-tag">{{ tag }}</div>
-          </a>
-        {% endif %}
-      {% endfor %}
+        </a>
+        {% endif %} {% endfor %}
+    </div>
+    <p class="mt-4">{{ post.data.post_excerpt }}...</p>
+    <div class="mt-4 flex items-center justify-between">
+        <a class="flex-none font-normal no-underline" href="{{ post.url }}">Read more &rarr;</a>
    </div>
-
-    <a class="flex-none hover:underline font-semibold text-blue-700" href="{{ post.url }}">Read this post &rarr;</a>
-  </div>
-
 </div>

-{% endif %}
-{% endfor %}
-
-
-{% include "paginator.liquid" %}
+{% endif %} {% endfor %} {% include "paginator.liquid" %}
--- a/src/manifest.json
+++ b/src/manifest.json
@ -1,26 +1,26 @@
 {
-  "name": "My Blog",
-  "short_name": "Blog",
-  "icons": [
-    {
-      "src": "/assets/img/favicon/favicon-32x32.png",
-      "sizes": "32x32",
-      "type": "image/png",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "/assets/img/favicon/favicon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/assets/img/favicon/favicon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#000",
-  "background_color": "#fff",
-  "display": "standalone",
-  "start_url": "/"
-}
+    "name": "Cory Dransfeldt",
+    "short_name": "coryd.dev",
+    "icons": [
+        {
+            "src": "/assets/img/favicon/favicon-32x32.png",
+            "sizes": "32x32",
+            "type": "image/png",
+            "purpose": "any maskable"
+        },
+        {
+            "src": "/assets/img/favicon/favicon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/img/favicon/favicon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#bd93f9",
+    "background_color": "#fff",
+    "display": "standalone",
+    "start_url": "/"
+}
--- a/src/posts/2020/07/Flutter.md
+++ b/src/posts/2020/07/Flutter.md
@ -2,56 +2,61 @@
 title: Flutter
 date: 2020-07-01
 tags:
- android
- flutter
+    - android
+    - flutter
 ---
+
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
 <!-- excerpt -->

-
 # h1 Heading
+
 ## h2 Heading
+
 ### h3 Heading
+
 #### h4 Heading
+
 ##### h5 Heading
+
 ###### h6 Heading

-
 ## Horizontal Rules
-___
+
+---

 ## Emphasis

 **This is bold text**

-__This is bold text__
+**This is bold text**

-*This is italic text*
+_This is italic text_

 _This is italic text_

 ~~Strikethrough~~

-
 ## Blockquotes

-
 > Blockquotes can also be nested...
->> ...by using additional greater-than signs right next to each other...
+>
+> > ...by using additional greater-than signs right next to each other...
+> >
 > > > ...or with spaces between arrows.

-
 ## Lists

 Unordered

-+ Create a list by starting a line with `+`, `-`, or `*`
-+ Sub-lists are made by indenting 2 spaces:
-  - Marker character change forces new list start:
-    * Ac tristique libero volutpat at
-    + Facilisis in pretium nisl aliquet
-    - Nulla volutpat aliquam velit
-+ Very easy!
+-   Create a list by starting a line with `+`, `-`, or `*`
+-   Sub-lists are made by indenting 2 spaces:
+    -   Marker character change forces new list start:
+        -   Ac tristique libero volutpat at
+        *   Facilisis in pretium nisl aliquet
+        -   Nulla volutpat aliquam velit
+-   Very easy!

 Ordered

@ -59,16 +64,14 @@ Ordered
 2. Consectetur adipiscing elit
 3. Integer molestie lorem at massa

-
-1. You can use sequential numbers...
-1. ...or keep all the numbers as `1.`
+4. You can use sequential numbers...
+5. ...or keep all the numbers as `1.`

 Start numbering with offset:

 57. foo
 1. bar

-
 ## Code

 Inline `code`
@ -80,7 +83,6 @@ Indented code
    line 2 of code
    line 3 of code

-
 Block code "fences"

 ```
@ -89,36 +91,34 @@ Sample text here...

 Syntax highlighting

-``` js
+```js
 var foo = function (bar) {
-  return bar++;
-};
+    return bar++
+}

-console.log(foo(5));
+console.log(foo(5))
 ```

 ## Tables

-| Option | Description |
-| ------ | ----------- |
+| Option | Description                                                               |
+| ------ | ------------------------------------------------------------------------- |
 | data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default. |
-| ext    | extension to be used for dest files. |
+| engine | engine to be used for processing templates. Handlebars is the default.    |
+| ext    | extension to be used for dest files.                                      |

 Right aligned columns

-| Option | Description |
-| ------:| -----------:|
-| data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default. |
-| ext    | extension to be used for dest files. |
-
+| Option |                                                               Description |
+| -----: | ------------------------------------------------------------------------: |
+|   data | path to data files to supply the data that will be passed into templates. |
+| engine |    engine to be used for processing templates. Handlebars is the default. |
+|    ext |                                      extension to be used for dest files. |

 ## Links

 [link text](http://dev.nodeca.com)

-[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+[link with title](http://nodeca.github.io/pica/demo/ 'title text!')

 Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
-
--- a/src/tagList.md
+++ b/src/tagList.md
@ -1,20 +1,21 @@
 ---
 layout: default
 pagination:
-  data: collections
-  size: 1
-  alias: tag
+    data: collections
+    size: 1
+    alias: tag
 permalink: /tags/{{ tag }}/
 eleventyComputed:
-  title: "{{ tag }}"
---  
+    title: '{{ tag }}'
+---

 {% for post in collections[tag] %}
+
 <div class="py-4 sm:py-10">
  <p>
    <span class="text-2xl sm:text-4xl font-bold hover:underline"><a href="{{ post.url }}">{{ post.data.title }}</a></span>
  </p>
-  <em>{{ post.date | date: "%Y-%m-%d" }}</em>
+  <em>{{ post.date | date: "%m.%d.%Y" }}</em>
  <p class="mt-4">{{ post.data.post_excerpt }}... 
    <span class="hover:underline text-indigo-500"><a href="{{ post.url }}">Read More</a></span>
  </p>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,7 +1,64 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+const colors = require('tailwindcss/colors')
+const dracula = require('tailwind-dracula/colors')
+
 module.exports = {
-  darkMode: 'class',
-  content: ['./src/**/*.md', './src/**/*.html', './src/_includes/**/*.liquid'],
-  plugins: [
-    require('@tailwindcss/typography')
-  ],
-}
+    darkMode: 'class',
+    theme: {
+        extend: {
+            spacing: {
+                '9/16': '56.25%',
+            },
+            lineHeight: {
+                11: '2.75rem',
+                12: '3rem',
+                13: '3.25rem',
+                14: '3.5rem',
+            },
+            fontFamily: {
+                sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
+            },
+            colors: {
+                ...dracula,
+                primary: dracula.purple,
+                gray: dracula.darker,
+                blue: dracula.blue,
+                cyan: dracula.cyan,
+                green: dracula.green,
+                orange: dracula.orange,
+                pink: dracula.pink,
+                purple: dracula.purple,
+                red: dracula.red,
+                yellow: dracula.yellow,
+                dark: dracula.dark,
+                darker: dracula.darker,
+                light: dracula.light,
+            },
+            backgroundImage: {
+                'cover-gradient':
+                    'linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.5))',
+            },
+            typography: (theme) => ({
+                DEFAULT: {
+                    css: {
+                        a: {
+                            color: theme('colors.primary.500'),
+                            '&:hover': {
+                                color: `${theme('colors.primary.400')} !important`,
+                            },
+                            code: { color: theme('colors.primary.400') },
+                        },
+                        pre: {
+                            backgroundColor: theme('colors.gray.900'),
+                        },
+                        code: {
+                            backgroundColor: theme('colors.gray.900'),
+                        },
+                    },
+                },
+            }),
+        },
+    },
+    plugins: [require('@tailwindcss/typography'), require('tailwind-dracula')('dracula')],
+    content: ['./src/**/*.md', './src/**/*.html', './src/_includes/**/*.liquid'],
+}
--- a/tailwind.css
+++ b/tailwind.css
@ -3,9 +3,25 @@
@tailwind utilities;

 .paginator-text {
-  @apply text-gray-600 font-bold py-2 px-4;
+    @apply py-2 px-4 font-bold text-gray-600 dark:text-gray-200;
 }

 .post-tag {
-  @apply inline-block text-xs rounded-full py-2 px-4 mt-1 mr-1 bg-gray-300 dark:bg-gray-500;
-}
+    @apply mt-1 mr-1 inline-block text-sm text-primary-400 hover:text-primary-500 dark:hover:text-primary-300;
+}
+
+.toggle-light {
+    @apply inline;
+}
+
+.dark .toggle-light {
+    @apply hidden;
+}
+
+.toggle-dark {
+    @apply hidden;
+}
+
+.dark .toggle-dark {
+    @apply inline;
+}
--- a/yarn.lock
+++ b/yarn.lock