Merge pull request #10 from tmm/redesign2

Finish redesign

.gitignore

@@ -1,4 +1,3 @@
 .sass-cache
 .idea
 _site
-blog/_drafts

404.html

@@ -3,7 +3,10 @@
 permalink: /404.html
 ---
 
-<header class="t-header">
-    <h1 class="t-header__title">Something went wrong</h1>
-    <div class="t-header__description">Well, that's awkward. <a href="/">Back to home →</a></div>
-</header>
+<h1>Something went wrong</h1>
+
+<p>Well, that's awkward. Sorry about that.</p>
+
+<p>You might be looking for my old blog, which has moved to <a href="https://websgrain.com">The Web's Grain</a>.</p>
+
+<p>Or perhaps you would like to check out my <a href="/">homepage</a> instead.</p>

README.md

@@ -5,7 +5,6 @@ Thanks for checking out the innards of [my website](https://meagher.co/). Here's
 - [GitHub Pages](https://pages.github.com) graciously hosts my site.
 - [CloudFlare](https://www.cloudflare.com) powers my DNS (and SSL ftw).
 - Syntactically Awesome Style Sheets (a.k.a [Sass](https://sass-lang.com)) help make it pretty.
-- My blog posts are written in [Kramdown](https://kramdown.gettalong.org/documentation.html).
 - And [Jekyll](https://jekyllrb.com) does just about everything else.
 
 There's not much more to it.
@@ -31,8 +30,6 @@ Configuration file: /Users/tom/_code/tmm.github.io/_config.yml
   Server running... press ctrl-c to stop.
 ```
 
-You can create a new blog post by running `bash new-post.sh`.
-
 ## Contact
 
 * Submit an [issue](https://github.com/tmm/tmm.github.io/issues)

_config.yml

@@ -1,34 +1,23 @@
+author: 'Tom Meagher'
 defaults:
   -
     scope:
-      path: ""
-      type: "posts"
+      path: ''
+      type: 'pages'
     values:
-      layout: "post"
-  -
-    scope:
-      path: ""
-      type: "pages"
-    values:
-      layout: "base"
-exclude: [
-  '.gitignore',
-  'CNAME',
-  'LICENSE',
-  'README.md',
-  'sketch',
-]
-kramdown:
-  input: GFM
-  syntax_highlighter: rouge
-markdown: kramdown
+      layout: 'base'
+description: "I’m Tom Meagher (MAH-hur): a programmer, blogger, and walk enthusiast living in NYC."
+exclude:
+  - '.gitignore'
+  - 'CNAME'
+  - 'LICENSE'
+  - 'README.md'
+  - 'sketch'
+keywords: 'tom, tomfme, meagher, code, design, startups, technology, tech, design'
 permalink: pretty
 sass:
   style: compressed
   sass_dir: 'assets/styles'
 timezone: America/New_York
 title: Tom Meagher
-description: "I'm Tom Meagher (MAH-hur): a programmer, blogger, and walk enthusiast living in NYC."
 url: "https://meagher.co"
-author: "Tom Meagher"
-keywords: 'tom, tomfme, meagher, code, design, startups, technology, tech, design'

_includes/ga.html

@@ -7,3 +7,4 @@
 
   gtag('config', 'UA-52981191-1');
 </script>
+<!-- Global site tag (gtag.js) - Google Analytics -->

_includes/head.html

@@ -6,24 +6,24 @@
   <meta name="author" content="{{ site.author }}">
   <meta name="keywords" content="{{ site.keywords }}">
 
-  <title>{% if page.title %}{{ page.title }} ~ {% endif %}{{ site.title }}</title>
+  <title>{% if page.title %}{{ page.title }}—{% endif %}{{ site.title }}</title>
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="stylesheet" href="{{ site.base_url }}/assets/styles/styles.css">
   <!-- /HTML Meta Tags -->
 
   <!-- Favicons -->
-  <link href="{{ site.base_url }}/assets/favicons/favicon.ico" rel="icon">
-  <link href="{{ site.base_url }}/assets/favicons/icon-512.png" rel="icon" sizes="512x512">
-  <link href="{{ site.base_url }}/assets/favicons/icon-192.png" rel="icon" sizes="192x192">
-  <link href="{{ site.base_url }}/assets/favicons/icon-144.png" rel="icon" sizes="144x144">
-  <link href="{{ site.base_url }}/assets/favicons/icon-96.png" rel="icon" sizes="96x96">
-  <link href="{{ site.base_url }}/assets/favicons/icon-72.png" rel="icon" sizes="72x72">
-  <link href="{{ site.base_url }}/assets/favicons/icon-512.png" rel="apple-touch-icon" sizes="512x512">
-  <link href="{{ site.base_url }}/assets/favicons/icon-192.png" rel="apple-touch-icon" sizes="192x192">
-  <link href="{{ site.base_url }}/assets/favicons/icon-144.png" rel="apple-touch-icon" sizes="144x144">
-  <link href="{{ site.base_url }}/assets/favicons/icon-96.png" rel="apple-touch-icon" sizes="96x96">
-  <link href="{{ site.base_url }}/assets/favicons/icon-72.png" rel="apple-touch-icon" sizes="72x72">
+  <link href="{{ site.base_url }}/assets/favicons/night/favicon.ico" rel="icon">
+  <link href="{{ site.base_url }}/assets/favicons/night/icon-512.png" rel="icon" sizes="512x512">
+  <link href="{{ site.base_url }}/assets/favicons/night/icon-192.png" rel="icon" sizes="192x192">
+  <link href="{{ site.base_url }}/assets/favicons/night/icon-144.png" rel="icon" sizes="144x144">
+  <link href="{{ site.base_url }}/assets/favicons/night/icon-96.png" rel="icon" sizes="96x96">
+  <link href="{{ site.base_url }}/assets/favicons/night/icon-72.png" rel="icon" sizes="72x72">
+  <link href="{{ site.base_url }}/assets/favicons/night/icon-512.png" rel="apple-touch-icon" sizes="512x512">
+  <link href="{{ site.base_url }}/assets/favicons/night/icon-192.png" rel="apple-touch-icon" sizes="192x192">
+  <link href="{{ site.base_url }}/assets/favicons/night/icon-144.png" rel="apple-touch-icon" sizes="144x144">
+  <link href="{{ site.base_url }}/assets/favicons/night/icon-96.png" rel="apple-touch-icon" sizes="96x96">
+  <link href="{{ site.base_url }}/assets/favicons/night/icon-72.png" rel="apple-touch-icon" sizes="72x72">
   <!-- /Favicons -->  
 
   <!-- Twitter Meta Tags -->

_layouts/base.html

@@ -1,12 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
-    {% include head.html %}
-    <body id="app">
-        {% include nav.html %}
-        {{ content }}
-        {% include footer.html %}
-    </body>
-    {% if jekyll.environment != "development" %}
-    {% include ga.html %}
-    {% endif %}
+  {% include head.html %}
+  <body class="night">
+    <img src="assets/icons/night.svg" id="night">
+    <img src="assets/icons/day.svg" id="day">
+    <img src="assets/icons/sepia.svg" id="sepia">
+    <img src="assets/icons/dusk.svg" id="dusk">
+    {{ content }}
+  </body>
+  {% if jekyll.environment != "development" %}
+  {% include ga.html %}
+  {% endif %}
+
+  <script>
+    const setTheme = (t1, t2) => {
+      document.body.classList.replace(t1, t2)
+    }
+
+    const setFavicons = (t1, t2) => {
+      const links = document.querySelectorAll("link[rel*='icon']")
+      links.forEach(link => { link.href = link.href.replace(t1, t2) })
+    }
+
+    const initTheme = (t1, t2) => {
+      document
+        .getElementById(t1)
+        .addEventListener(
+          'click',
+          () => {
+            setTheme(t1, t2)
+            setFavicons(t1, t2)
+            localStorage.setItem('theme', t2)
+          }
+        )
+    }
+
+    const theme = localStorage.getItem('theme') || 'night'
+    setTheme('night', theme)
+    setFavicons('night', theme)
+
+    initTheme('night', 'day')
+    initTheme('day', 'sepia')
+    initTheme('sepia', 'dusk')
+    initTheme('dusk', 'night')
+  </script>
 </html>