Initial commit

2024-11-12 13:08:08 -05:00 · 2017-07-24 10:22:05 +09:00 · 2017-07-24 10:22:05 +09:00 · 7bae29cb75
commit 7bae29cb75
39 changed files with 1652 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+_site/
+.swp
+.sass-cache/
+.jekyll-metadata
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,15 @@
+language: ruby
+rvm:
+  - 2.3.3
+
+install:
+  - bundle install
+script: 
+  - bundle exec jekyll build 
+  - rake check
+
+env:
+  global:
+  - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
+
+sudo: false # route your build to the container-based infrastructure for a faster build
--- a/404.md
+++ b/404.md
@ -0,0 +1,7 @@
+---
+layout: content
+title: "404: Page not found"
+---
+
+Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="{{ site.baseurl }}/">Head back home</a> to try finding it again.
+
--- a/9
+++ b/9
@ -0,0 +1,9 @@
+source "https://rubygems.org"
+
+gem "jekyll", "3.4.3"
+gem "html-proofer"
+gem "rb-fsevent", "0.9.8"
+
+group :jekyll_plugins do
+      gem 'jekyll-livereload'
+end
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -0,0 +1,88 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (5.1.2)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+    addressable (2.5.1)
+      public_suffix (~> 2.0, >= 2.0.2)
+    colorator (1.1.0)
+    colored (1.2)
+    concurrent-ruby (1.0.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    ethon (0.10.1)
+      ffi (>= 1.3.0)
+    eventmachine (1.2.3)
+    ffi (1.9.18)
+    forwardable-extended (2.6.0)
+    html-proofer (3.7.2)
+      activesupport (>= 4.2, < 6.0)
+      addressable (~> 2.3)
+      colored (~> 1.2)
+      mercenary (~> 0.3.2)
+      nokogiri (~> 1.7)
+      parallel (~> 1.3)
+      typhoeus (~> 0.7)
+      yell (~> 2.0)
+    http_parser.rb (0.6.0)
+    i18n (0.8.4)
+    jekyll (3.4.3)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 1.1)
+      kramdown (~> 1.3)
+      liquid (~> 3.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (~> 1.7)
+      safe_yaml (~> 1.0)
+    jekyll-livereload (0.2.2)
+      em-websocket (~> 0.5)
+      jekyll (~> 3.0)
+    jekyll-sass-converter (1.5.0)
+      sass (~> 3.4)
+    jekyll-watch (1.5.0)
+      listen (~> 3.0, < 3.1)
+    kramdown (1.14.0)
+    liquid (3.0.6)
+    listen (3.0.8)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    mercenary (0.3.6)
+    mini_portile2 (2.2.0)
+    minitest (5.10.2)
+    nokogiri (1.8.0)
+      mini_portile2 (~> 2.2.0)
+    parallel (1.11.2)
+    pathutil (0.14.0)
+      forwardable-extended (~> 2.6)
+    public_suffix (2.0.5)
+    rb-fsevent (0.9.8)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
+    rouge (1.11.1)
+    safe_yaml (1.0.4)
+    sass (3.4.24)
+    thread_safe (0.3.6)
+    typhoeus (0.8.0)
+      ethon (>= 0.8.0)
+    tzinfo (1.2.3)
+      thread_safe (~> 0.1)
+    yell (2.0.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  html-proofer
+  jekyll (= 3.4.3)
+  jekyll-livereload
+  rb-fsevent (= 0.9.8)
+
+BUNDLED WITH
+   1.15.1
--- a/22
+++ b/22
@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Mike JS. Choi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
--- a/README.md
+++ b/README.md
@ -0,0 +1,62 @@
+<p align="center">
+  <img src="./assets/paper-cover-photo.png">
+  <p align="center">
+  A minimalistic Jekyll Theme
+  <br>
+  <br>
+  <a href="https://travis-ci.org/mkchoi212/paper-jekyll-theme"><img src="https://travis-ci.org/mkchoi212/paper-jekyll-theme.svg?branch=master"></a>
+  <a href="https://raw.githubusercontent.com/mkchoi212/paper-jekyll-theme/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg"></a>
+  </p>
+</p>
+<br>
+
+Paper is a minimal Jekyll theme. Perfect for hosting your personal site, blog, or portfolio on GitHub or self-hosting on your own server. The styling is purposely minimalistic so that you can add your own flare to the website.
+
+Live demo of the theme can be seen [here](https://deadbeef.me/paper-jekyll-theme/). I'm also currently using this theme on my [personal blog](https://www.deadbeef.me).
+
+## Features
+- Compatible with Jekyll 3.x and Github Pages
+- Live local reloading for faster development
+- Responsive layout built-in
+- Supports Jekyll's built-in Sass/SCSS preprocessor
+- Supports Google Analytics
+- Minimum Dependencies
+- Rakefile for automation
+    - `rake check`    - Check links/html files of the generated site
+    - `rake clean`    - Clean up generated site
+    - `rake post`     - Begin a new post in `./_posts`
+    - `rake preview`  - Preview with livereload on local machine
+
+## Usage
+```
+git clone https://github.com/mkchoi212/paper-jekyll-theme.git
+bundle install
+rake preview
+```
+
+Then, go to your favorite brower and type in the address `http://127.0.0.1:YOUR_PORT_NUM_HERE` to preview your website.
+
+### Customization
+To customize various details - title/description of the website, your SNS accout names, etc - edit the `_config.yml` file. 
+
+### Adding posts
+```
+rake post title="A Title" [date="2012-02-09"] [tags=[tag1,tag2]] [category="category"]
+```
+This will create a markdown file in the default folder where all posts are stored in Jekyll; `_post`.
+
+If you wish to **change the directory where posts are saved**, go to the `Rakefile` and edit the `CONFIG = { 'posts': CUSTOM_PATH_HERE }`. This will allow `rake post` to know where to save the new posts to.
+
+The **drafts** you are working on can be saved in the `_drafts` directory. When you push your code to the server, files in this directory will NOT be included to the list o posts.
+
+# Licnese
+The MIT License (MIT)
+
+Copyright (c) 2017 Mike JS. Choi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
--- a/113
+++ b/113
@ -0,0 +1,113 @@
+
+#
+## Customize post location and post extensions
+#
+
+baseurl = `cat ./_config.yml | awk '/baseurl/ { print $2 }' | sed 's/\"//g'`
+
+SOURCE = "."
+CONFIG = {
+  'posts' => File.join(SOURCE, "_posts"),
+  'post_ext' => "md",
+  'theme_package_version' => "0.1.0"
+}
+
+#
+## Color console outout support just because :D
+#
+module Colors
+  def colorize(text, color_code)
+    "\033[#{color_code}m#{text}\033[0m"
+  end
+
+  {
+    :black    => 30,
+    :red      => 31,
+    :green    => 32,
+    :yellow   => 33,
+    :blue     => 34,
+    :cyan     => 36,
+  }.each do |key, color_code|
+    define_method key do |text|
+      colorize(text, color_code)
+    end
+  end
+end
+include Colors
+
+#
+## Just typing `rake` will invoke `rake preview`
+#
+task :default => :preview
+load '_rake-configuration.rb' if File.exist?('_rake-configuration.rb')
+
+desc 'Preview with livereload on local machine'
+task :preview => :clean do
+	puts green "Starting livereload server"
+  jekyll('serve -L')
+end
+task :serve => :preview
+
+desc 'Clean up generated site'
+task :clean do
+    cleanup
+end
+
+desc 'Check links for generated site'
+task :check do
+  STDOUT.sync = true
+	cleanup
+  jekyll("build -d _site#{baseurl}")
+	puts cyan "Running html proofer..."
+	puts `htmlproofer --assume-extension --alt-ignore '/.*/' ./_site`
+end
+
+# Usage: rake post title="A Title" [date="2012-02-09"] [tags=[tag1,tag2]] [category="category"]
+desc "Begin a new post in #{CONFIG['posts']}"
+task :post do
+  abort("rake aborted: '#{CONFIG['posts']}' directory not found.") unless FileTest.directory?(CONFIG['posts'])
+  title = ENV["title"] || "new-post"
+  tags = ENV["tags"] || "[]"
+  category = ENV["category"] || ""
+  category = "\"#{category.gsub(/-/,' ')}\"" if !category.empty?
+  slug = title.downcase.strip.gsub(' ', '-').gsub(/[^\w-]/, '')
+  begin
+    date = (ENV['date'] ? Time.parse(ENV['date']) : Time.now).strftime('%Y-%m-%d')
+  rescue => e
+    puts red "Error - date format must be YYYY-MM-DD, please check you typed it correctly!"
+    exit -1
+  end
+  filename = File.join(CONFIG['posts'], "#{date}-#{slug}.#{CONFIG['post_ext']}")
+  if File.exist?(filename)
+    abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
+  end
+  
+  puts cyan "Creating new post: #{filename}"
+  open(filename, 'w') do |post|
+    post.puts "---"
+    post.puts "layout: post"
+    post.puts "title: \"#{title.gsub(/-/,' ')}\""
+    post.puts 'description: ""'
+    post.puts "category: #{category}"
+    post.puts "tags: #{tags}"
+    post.puts "---"
+    post.puts "{% include JB/setup %}"
+  end
+end # task :post
+
+#
+## General support functions
+#
+
+def cleanup
+  sh 'rm -rf _site'
+end
+
+def jekyll(directives = '')
+  sh 'jekyll ' + directives
+end
+
+def rake_running
+  `ps | grep 'rake' | grep -v 'grep' | wc -l`.to_i > 1
+end
+
--- a/_config.yml
+++ b/_config.yml
@ -0,0 +1,26 @@
+# Site settings
+title: "Paper Jekyll Theme"
+description: > 
+  Write a description of your website here.
+
+author: Johnny Appleseed
+email: johnny@appleseed.com
+twitter_username:
+github_username:
+
+baseurl: "/paper-jekyll-theme" # the subpath of your site, e.g. /blog
+url: "https://deadbeef.me" # the base hostname & protocol for your site
+
+google_analytics_id: UA-1111111111-1
+disqus_id:
+
+# Build settings
+include: [_pages]
+markdown: kramdown
+permalink: /:year/:month/:title
+
+sass:
+    style: compressed
+
+exclude: [vendor]
+
--- a/_includes/analytics.html
+++ b/_includes/analytics.html
@ -0,0 +1,13 @@
+{% if site.google_analytics_id %}
+
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
+        Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  ga('create', '{{ site.google_analytics_id }}', 'auto');
+  ga('send', 'pageview');
+</script>
+
+{% endif %}
--- a/_includes/disqus.html
+++ b/_includes/disqus.html
@ -0,0 +1,18 @@
+<script>
+
+/**
+*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
+*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
+
+var disqus_config = function () {
+  this.page.url = {{ page.url }};  // Replace PAGE_URL with your page's canonical URL variable
+  this.page.identifier = {{ page.id }}; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+};
+(function() { // DON'T EDIT BELOW THIS LINE
+var d = document, s = d.createElement('script');
+s.src = 'https://{{ site.disqus_id }}.disqus.com/embed.js';
+s.setAttribute('data-timestamp', +new Date());
+(d.head || d.body).appendChild(s);
+})();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
--- a/_includes/footer.html
+++ b/_includes/footer.html
@ -0,0 +1,4 @@
+<footer class="c-page__footer">
+    <p>&copy; {{ site.author }} {{ 'now' | date: '%Y' }}</p>
+    <p>{% if site.twitter_username %}<a href="https://twitter.com/{{ site.twitter_username }}">Twitter</a><span class="u-separate"></span>{% endif %}{% if site.github_username %}<a href="https://github.com/{{ site.github_username }}">Github</a>{% endif %}</p>
+</footer>
--- a/_includes/head.html
+++ b/_includes/head.html
@ -0,0 +1,13 @@
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
+    <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,900,400italic' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
+    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
+</head>
--- a/_includes/header.html
+++ b/_includes/header.html
@ -0,0 +1,12 @@
+<header class="c-page__header">
+    <h1><code>{{ site.title}}</code></h1>
+
+    {% if page.title == 'Home' %}
+        <h1>{{ site.description }}</h1>
+    {% endif %}
+    <p>
+        <a href="{{ "/" | prepend: site.baseurl }}">Home</a><span
+          class="u-separate"></span> <a href="{{ "/projects/" | prepend:
+          site.baseurl }}">Projects</a><span class="u-separate"></span> <a href="{{ "/about/" | prepend: site.baseurl }}">About</a><span class="u-separate"></span><a href="{{ "/feed.xml" | prepend: site.baseurl }}">RSS</a>
+    </p>
+</header>
--- a/_layouts/content.html
+++ b/_layouts/content.html
@ -0,0 +1,14 @@
+---
+layout: page
+---
+
+<article class="c-article">
+    <header class="c-article__header">
+        <h1 class="c-article__title">{{ page.title }}</h1>
+    </header>
+    <div class="c-article__main">
+        {{ content }}
+    </div>
+    <footer class="c-article__footer">
+    </footer>
+</article>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    {% include head.html %}
+    <body>
+        <main class="u-container">
+        {{ content }}
+        </main>
+    {% if jekyll.environment == 'production' %}
+      {% include analytics.html %}
+    {% endif %}
+    </body>
+</html>
--- a/_layouts/page.html
+++ b/_layouts/page.html
@ -0,0 +1,10 @@
+---
+layout: default
+---
+<div class="c-page">
+    {% include header.html %}
+    <div class="c-page__main">
+    {{ content }}
+    </div>
+    {% include footer.html %}
+</div>
--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -0,0 +1,46 @@
+---
+layout: page
+---
+<article class="c-article">
+    <header class="c-article__header">
+        <h1 class="c-article__title">{{ page.title }}</h1>
+        <p class="c-article__time"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time></p>
+    </header>
+    
+    <!-- Post Tags -->
+    <ul class="c-tags">
+    {% for tag in page.tags %}
+      <li class="c-tag">{{ tag }}</li>
+    {% endfor %}
+    </ul>
+
+    <div class="c-article__main">
+        {{ content }}
+    </div>
+  
+    <!-- Previous / Next Buttons -->
+    <div class="pagenav">
+		{% if page.previous.url %}
+        <div class="wrapper" id="left">
+          <small><b>Previous</b> {{page.previous.date | date: "%b %-d, %Y"}}</small>
+          <br>
+          <a class="no-hov" href="{{ page.previous.url | prepend: site.baseurl }}">&laquo; {{page.previous.title}}</a>
+        </div>
+		{% endif %}
+		{% if page.next.url %}
+        <div class="wrapper" id="right">
+          <small>{{page.next.date | date: "%b %-d, %Y"}} <b>Next</b></small>
+          <br>
+          <a class="no-hov" href="{{ page.previous.url | prepend: site.baseurl }}">{{page.next.title}} &raquo;</a>
+        </div>
+		{% endif %}
+		</div>
+
+		<!-- Disqus comments view -->
+		{% if page.comments != false and site.disqus_id %}
+		<div class="post-disqus">
+				<section id="disqus_thread"></section>
+				{% include disqus.html %}
+		</div>
+		{% endif %}
+</article>
--- a/_pages/about.md
+++ b/_pages/about.md
@ -0,0 +1,22 @@
+---
+layout: content
+title: About
+permalink: /about/
+---
+Hi, I'm Johnny and I live in the Shire. Thanks for visiting my site.
+
+I program and write about software development when I have the time. More information can be found through <a href="https://www.linkedin.com/" data-network="LinkedIn" data-proofer-ignore>LinkedIn.</a>
+
+----
+
+## The Website
+This site was made on an [Apple MBP](https://www.apple.com/) powered by [Jekyll](https://jekyllrb.com) on [Github Pages](https://pages.github.com).
+I'd love to hear your feedback on this site and my work.
+
+----
+
+## Etcetera
+
+- [Instagram](https://www.instagram.com/) for 📸
+- [Facebook](https://www.facebook.com/) for 🕺
+
--- a/_pages/projects.md
+++ b/_pages/projects.md
@ -0,0 +1,18 @@
+---
+layout: content
+title: Projects
+permalink: /projects/
+---
+
+Show off your projects here!
+- [Awesome Project]()
+- [Cool Project]()
+- [New Project]()
+- [Old Project]()
+- [Hard Project]()
+- [School Project]()
+- [Project's Project]()
+
+# Talks
+- How to ????
+
--- a/_posts/2016-08-15-style-test.md
+++ b/_posts/2016-08-15-style-test.md
@ -0,0 +1,115 @@
+---
+layout: post
+title: "A Full and Comprehensive Style Test"
+description: "Test post for style"
+date: 2016-08-15
+tags: test, style
+comments: true
+---
+
+Below is just about everything you'll need to style in the theme. Check the source code to see the many embedded elements within paragraphs.
+
+---
+
+## 1. Header 
+
+# Header 1
+
+## Header 2
+
+### Header 3
+
+#### Header 4
+
+##### Header 5
+
+###### Header 6
+
+### 1-1. Header Alignment 
+
+##### Left(Default)
+
+##### Center
+{: .center}
+
+##### Right
+{: .right}
+
+## 2. Body Text
+
+Lorem ipsum dolor sit amet, [test link](https://www.google.com) adipiscing elit. **This is strong.** Nullam dignissim convallis est. Quisque aliquam. *This is emphasized.* Donec faucibus. Nunc iaculis suscipit dui. 5<sup>3</sup> = 125. Water is H<sub>2</sub>O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. <u>Underline</u>. Maecenas ornare tortor. Donec sed tellus eget `COPY filename` sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, <del>Dinner’s at 5:00.</del> commodo vitae, feugiat in, nunc. Morbi imperdiet augue <mark>mark element</mark> quis tellus.
+
+## 3. Images
+
+![Large example image](http://placehold.it/800x400 "Large example image")
+
+![Medium example image](http://placehold.it/400x200 "Medium example image")
+![Small example image](http://placehold.it/200x200 "Small example image")
+
+### 3-1. Image Alignment
+
+![Center example image](http://placehold.it/200x200 "Center")
+{: .center}
+
+## 4. Blockquotes
+
+> Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.
+
+## 5. List Types
+
+### Unordered List
+
+* Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+* Nam ultrices nunc in nisi pellentesque ultricies. Cras scelerisque ipsum in ante laoreet viverra. Pellentesque eget quam et augue molestie tincidunt ac ut ex. Sed quis velit vulputate, rutrum nisl sit amet, molestie neque. Vivamus sed augue at turpis suscipit fringilla.
+* Integer pretium nisl vitae justo aliquam, at varius nisi blandit.
+  1. Nunc vehicula nulla ac odio gravida vestibulum sed nec mauris.
+  2. Duis at diam eget arcu dapibus consequat.
+* Etiam vel elit in purus iaculis pretium.
+
+### Ordered List
+
+1. Quisque ullamcorper leo non ex pretium, in fermentum libero imperdiet.
+2. Donec eu nulla euismod, rhoncus ipsum nec, faucibus elit.
+3. Nam blandit purus gravida, accumsan sem in, lacinia orci.
+  * Duis congue dui nec nisi posuere, at luctus velit semper.
+  * Suspendisse in lorem id lacus elementum pretium nec vel nibh.
+4. Aliquam eget ipsum laoreet, maximus risus vitae, iaculis leo.
+
+### Definition Lists
+
+kramdown
+: A Markdown-superset converter
+
+Maruku
+: Another Markdown-superset converter
+
+## 6. Tables
+
+| Header1 | Header2 | Header3 |
+|:--------|:-------:|--------:|
+| cell1   | cell2   | cell3   |
+| cell4   | cell5   | cell6   |
+|----
+| cell1   | cell2   | cell3   |
+| cell4   | cell5   | cell6   |
+|=====
+| Foot1   | Foot2   | Foot3
+
+
+## 7. Code Snippets
+
+### Highlighted Code Blocks
+
+```css
+#container {
+  float: left;
+  margin: 0 -240px 0 0;
+  width: 100%;
+}
+```
+
+### Standard code block
+
+    <div id="awesome">
+      <p>This is great isn't it?</p>
+    </div>
--- a/_posts/2017-01-01-readability.md
+++ b/_posts/2017-01-01-readability.md
@ -0,0 +1,45 @@
+---
+layout: post
+title: "Testing Readability with a Bunch of Text"
+description: "A ton of text to test readability."
+date: 2017-01-01
+tags: sample post, readability, test, intro
+comments: true
+---
+
+Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
+
+Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
+
+## Cupidatat 90's lo-fi authentic try-hard
+
+In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90's.
+
+* Sartorial hoodie
+* Labore viral forage
+* Tote bag selvage
+* DIY exercitation et id ugh tumblr church-key
+
+Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr.
+
+Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven't heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney's Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis.
+
+## Forage occaecat cardigan qui
+
+Fashion axe hella gastropub lo-fi kogi 90's aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole.
+
+> Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.
+
+Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney's next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney's sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard.
+
+## Hoodie Duis
+
+Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90's pop-up est culpa farm-to-table. Selfies 8-bit do pug odio.
+
+### Thundercats Ho!
+
+Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney's seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress.
+
+Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney's selfies. Odd Future Banksy non authentic.
+
+Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam.
--- a/_posts/2017-07-20-code-highlighting.md
+++ b/_posts/2017-07-20-code-highlighting.md
@ -0,0 +1,75 @@
+---
+layout: post
+title: "Syntax Highlighting Post"
+description: "Demo post displaying the various ways of highlighting code in Markdown."
+date: 2017-07-20
+tags: sample post, code, highlighting
+comments: true
+---
+
+
+Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1]
+
+[^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>
+
+### Highlighted Code Blocks
+
+To modify styling and highlight colors edit `/_sass/_highlighter.scss`.
+
+
+```css
+#container {
+    float: left;
+    margin: 0 -240px 0 0;
+    width: 100%;
+}
+```
+
+```html
+{% raw %}<nav class="pagination" role="navigation">
+    {% if page.previous %}
+        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
+    {% endif %}
+    {% if page.next %}
+        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
+    {% endif %}
+</nav><!-- /.pagination -->{% endraw %}
+```
+
+```ruby
+module Jekyll
+  class TagIndex < Page
+    def initialize(site, base, dir, tag)
+      @site = site
+      @base = base
+      @dir = dir
+      @name = 'index.html'
+      self.process(@name)
+      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
+      self.data['tag'] = tag
+      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
+      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
+      self.data['title'] = "#{tag_title_prefix}#{tag}"
+      self.data['description'] = "An archive of posts tagged #{tag}."
+    end
+  end
+end
+```
+
+
+### Standard Code Block
+
+    {% raw %}<nav class="pagination" role="navigation">
+        {% if page.previous %}
+            <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
+        {% endif %}
+        {% if page.next %}
+            <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
+        {% endif %}
+    </nav><!-- /.pagination -->{% endraw %}
+
+### GitHub Gist Embed
+
+An example of a Gist embed below.
+
+<script src="https://gist.github.com/mmistakes/43a355923921d22cd993.js"></script>
--- a/_posts/2017-07-21-quick-start.md
+++ b/_posts/2017-07-21-quick-start.md
@ -0,0 +1,75 @@
+---
+layout: post
+title: "Quick Start Guide"
+description: "How to setup and use the blog"
+date: 2017-07-21
+tags: jekyll
+comments: true
+---
+
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+
+<p align="center">
+  <img src="https://deadbeef.me/paper-jekyll-theme/assets/paper-cover-photo.png">
+  <p align="center">
+     A minimalistic Jekyll Theme
+     <br>
+     <br>
+     <a class="no-hov" href="https://travis-ci.org/mkchoi212/paper-jekyll-theme"><img src="https://travis-ci.org/mkchoi212/paper-jekyll-theme.svg?branch=master"></a>
+     <a class="no-hov" href="https://raw.githubusercontent.com/mkchoi212/paper-jekyll-theme/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg"></a>
+     <br><br>
+     <a class="github-button" href="https://github.com/mkchoi212/paper-jekyll-theme" data-size="large" data-show-count="true" aria-label="Star mkchoi212/paper-jekyll-theme on GitHub">Stars</a>
+  </p>
+</p>
+<br>
+
+Paper is a minimal Jekyll theme. Perfect for hosting your personal site, blog, or portfolio on GitHub or self-hosting on your own server. The styling is purposely minimalistic so that you can add your own flare to the website.
+
+I'm currently using this theme on my [personal blog](https://www.deadbeef.me).
+
+## Features
+- Compatible with Jekyll 3.x and Github Pages
+- Live local reloading for faster development
+- **Responsive layout** built-in
+- Supports Jekyll's built-in Sass/SCSS preprocessor
+- Supports **Google Analytics**
+- Supports **Disqus** for commenting
+- Minimum Dependencies
+- Rakefile for automation
+    - `rake check`    - Check links/html files of the generated site
+    - `rake clean`    - Clean up generated site
+    - `rake post`     - Begin a new post in `./_posts`
+    - `rake preview`  - Preview with livereload on local machine
+
+## Usage
+```
+git clone https://github.com/mkchoi212/paper-jekyll-theme.git
+bundle install
+rake preview
+```
+
+Then, go to your favorite brower and type in the address `http://127.0.0.1:YOUR_PORT_NUM_HERE` to preview your website.
+
+### Customization
+To customize various details - title/description of the website, your SNS accout names, etc - edit the `_config.yml` file. 
+
+### Adding posts
+```
+rake post title="A Title" [date="2012-02-09"] [tags=[tag1,tag2]] [category="category"]
+```
+This will create a markdown file in the default folder where all posts are stored in Jekyll; `_post`.
+
+If you wish to **change the directory where posts are saved**, go to the `Rakefile` and edit the `CONFIG = { 'posts': CUSTOM_PATH_HERE }`. This will allow `rake post` to know where to save the new posts to.
+
+The **drafts** you are working on can be saved in the `_drafts` directory. When you push your code to the server, files in this directory will NOT be included to the list o posts.
+
+# Licnese
+The MIT License (MIT)
+
+Copyright (c) 2017 Mike JS. Choi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/_sass/base/_reset.scss
+++ b/_sass/base/_reset.scss
@ -0,0 +1,175 @@
+/* ==========================================================================
+   Reset
+   ========================================================================== */
+
+/* Reset Modified from Normalize.css */
+
+/* Base Reset */
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+*, *:before, *:after { box-sizing: inherit; }
+
+
+html {
+    min-height: 100%;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    font-size: 62.5%; // Make it easy to calculate rems to px
+}
+
+body {
+    @include ff--sans-serif(400);
+    -webkit-font-smoothing: antialiased;
+}
+
+article,
+aside,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section {
+    display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: 400;
+    color: $c-base__02;
+}
+
+
+/* Media */
+audio, canvas, progress, video {
+    display: inline-block;
+    vertical-align: baseline;
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/* Images */
+
+[hidden], template { display: none; }
+
+img {
+    max-width: 100%;
+    font-style: italic;
+    vertical-align: middle;
+    border: 0;
+}
+
+svg:not(:root) { overflow: hidden; }
+
+svg {
+    pointer-events: none;
+    max-height: 100%
+}
+
+.center {
+  text-align: center; 
+}
+
+/* Links */
+
+a {
+    color: $c-accent__blue;
+    background-color: transparent;
+    text-decoration: none;
+
+    position: relative;
+    display: inline-block;
+    padding: 5px 1px;
+    transition: color ease 0.3s;
+    
+    /* Hover animation effect for all buttons */
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      width: 100%;
+      height: 0%;
+      left: 0;
+      bottom: 0;
+      background-color: $c-accent__blue;
+      transition: all ease 0.3s;
+    }
+
+    &:hover {
+      color: white;
+      &::after {
+        height: 100%;
+      }
+    }
+
+}
+
+/* Override hover animation with no-hov class */
+a.no-hov {
+	&:after {
+		content: none
+	}
+	
+	&:hover {
+		color: $c-accent__darkblue
+	}
+}
+
+a.nav {
+  padding: 10px 35px;  
+  overflow:hidden;
+}
+a.nav:before {
+    font-family: FontAwesome;
+    content:"\f07a";
+    position: absolute;
+    top: 11px;
+    left: -30px;
+    transition: all 200ms ease;
+}
+
+abbr[title] { border-bottom: 1px dotted; }
+b, strong   { font-weight: bold; }
+i, em       { font-weight: italic; }
+
+/* Content */
+
+figure {
+    margin: 0;
+}
+
+
+hr {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+    width: 100%;
+    height: 1px;
+    border: 0;
+    background: #EFF1F3;
+}
+
+/* Code Blocks */
+
+pre { overflow: auto; }
+
+code, pre {
+
+}
+small {
+        color: gray;
+}
+
--- a/_sass/components/_archives.scss
+++ b/_sass/components/_archives.scss
@ -0,0 +1,50 @@
+/* ==========================================================================
+   Archives
+   ========================================================================== */
+
+.c-archives {
+    margin-bottom: 10rem;
+}
+
+.c-archives__year {
+    margin-bottom: 2.5rem;
+    @include fs--heading-1;
+}
+
+.c-archives__list {
+    margin-bottom: 2.5rem;
+    list-style: none;
+}
+
+.c-archives__item {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+    border-top: 1px solid #EFF1F3;
+    @media screen and (min-width: $bp__sm) {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-wrap: wrap;
+            -ms-flex-wrap: wrap;
+                flex-wrap: wrap;
+        -webkit-box-pack: justify;
+        -webkit-justify-content: space-between;
+            -ms-flex-pack: justify;
+                justify-content: space-between;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+            -ms-flex-align: center;
+                align-items: center;
+    }
+
+    h3 {
+        @include fs--body;
+    }
+
+    p {
+        @include fs--body;
+        color: #515862;
+    }
+}
+
--- a/_sass/components/_article.scss
+++ b/_sass/components/_article.scss
@ -0,0 +1,136 @@
+/* ==========================================================================
+   Article
+   ========================================================================== */
+
+.c-article {
+    margin-bottom: 10rem; // 100px
+}
+
+.c-article__header {
+    margin-bottom: 2rem; // 50px
+    @media screen and (min-width: $bp__sm) {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-wrap: wrap;
+            -ms-flex-wrap: wrap;
+                flex-wrap: wrap;
+        -webkit-box-pack: justify;
+        -webkit-justify-content: space-between;
+            -ms-flex-pack: justify;
+                justify-content: space-between;
+        -webkit-box-align: baseline;
+        -webkit-align-items: baseline;
+            -ms-flex-align: baseline;
+                align-items: baseline;
+    }
+}
+
+.c-article__title {
+    @include fs--heading-1;
+    color: $c-base__02;
+}
+
+.c-article__time {
+    @include fs--body;
+    color: $c-base__01;
+}
+
+.c-article__main {
+    margin-bottom: 5rem; // 50px
+    @include fs--body;
+    color: $c-base__01;
+
+    > * {
+        margin-bottom: 1.8rem; // 18px
+    }
+
+    h2 {
+        @include fs--heading-2;
+    }
+
+    h3 {
+        @include fs--heading-3;
+    }
+
+    h4 {
+        @include fs--heading-4;
+    }
+
+    h5 {
+        @include fs--body;
+    }
+
+    strong {
+        color: $c-base__02;
+        font-weight: 700;
+    }
+
+    blockquote {
+        margin-left: 0;
+        margin-right: 0;
+        padding-left: 1.8rem; // 18px
+        border-left: 5px solid #ccc;
+    }
+
+    ul,
+    ol {
+        margin-left: 2.1rem;
+    }
+
+		.web-container {
+			position: relative;
+			width: 100%;
+			max-width: 100%;
+			height: 0;
+			padding-bottom: 62.5%;
+			border: 1px solid #cacaca;
+			overflow: hidden;
+		}
+
+		.web-container iframe {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			max-width: 100%;
+			height: 100%;
+		}
+}
+
+.c-article__footer {
+}
+
+.pagenav {
+  width: 100%;
+  text-align: center;
+  border: 1px solid LightGrey;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  font-size: 18px;
+  overflow: hidden;
+  margin-bottom: 8rem;
+}
+
+.pagenav div {
+  border-color: transparent;
+}
+
+.wrapper {
+  padding: 10px;
+  border: 1px solid LightGrey;
+  display: inline-block;
+  margin: 0 auto;
+}
+
+#left {
+  float: left;
+  text-align: left;
+}
+
+#right {
+  float: right;
+  text-align: right;
+}
+
--- a/_sass/components/_page.scss
+++ b/_sass/components/_page.scss
@ -0,0 +1,45 @@
+/* ==========================================================================
+   Page
+   ========================================================================== */
+
+.c-page {
+
+}
+
+.c-page__header {
+    margin-bottom: 10rem; // 100px
+
+    h1 {
+        margin-bottom: 2.5rem; // 25px
+        @include fs--heading-2;
+        color: $c-base__02;
+    }
+
+    p {
+        @include fs--meta;
+    }
+}
+
+.c-page__footer {
+    margin-bottom: 10rem;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    p {
+        @include fs--body;
+        color: $c-base__01;
+    }
+}
+
--- a/_sass/components/_tag.scss
+++ b/_sass/components/_tag.scss
@ -0,0 +1,72 @@
+/* ==========================================================================
+   Tip
+   ========================================================================== */
+
+.c-tags {
+  list-style: none;
+  margin: 0;
+  overflow: hidden; 
+  padding: 0;
+}
+
+.c-tags li {
+  float: left; 
+}
+
+.c-tag {
+  background: #eee;
+  border-radius: 3px 0 0 3px;
+  color: #999;
+  display: inline-block;
+  height: 26px;
+  line-height: 26px;
+  padding: 0 20px 0 23px;
+  position: relative;
+  margin: 0 10px 50px 0;
+  text-decoration: none;
+  -webkit-transition: color 0.2s;
+}
+
+.c-tag::before {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
+  content: '';
+  height: 6px;
+  left: 10px;
+  position: absolute;
+  width: 6px;
+  top: 10px;
+}
+
+.c-tag::after {
+  background: #fff;
+  border-bottom: 13px solid transparent;
+  border-left: 10px solid #eee;
+  border-top: 13px solid transparent;
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.c-tag:hover {
+  background-color: $c-accent__blue;
+  color: white;
+}
+
+.c-tag:hover::after {
+   border-left-color: $c-accent__blue;
+}
+
+.c-c-tag {
+    margin-right: 1rem;
+    position: relative;
+    white-space: nowrap;
+    @include fs--body;
+    &:before {
+        color: $c-base__0;
+        content: '#\2009';
+    }
+}
+
--- a/_sass/helpers/_mixins.scss
+++ b/_sass/helpers/_mixins.scss
@ -0,0 +1,84 @@
+/* ==========================================================================
+   Mixins
+   ========================================================================== */
+
+// Clearfix
+@mixin clearfix {
+    &:before,
+    &:after {
+        content: " ";
+        display: table;
+    }
+    &:after {
+        clear: both;
+    }
+}
+
+// Font families
+@mixin ff--sans-serif($font-weight: normal) {
+    font-family: 'Roboto', 'Helvetica Neue', Helvetica, sans-serif;
+    font-weight: $font-weight;
+}
+
+@mixin ff--code {
+    font-family: 'Roboto Mono', monospace;
+}
+
+// Font sizing
+@mixin fs--title {
+    line-height: 1.5;
+    font-size: 4.8rem; // 48px
+}
+
+@mixin fs--heading-1 {
+    line-height: 1.5;
+    font-size: 3.2rem; // 32px
+}
+
+@mixin fs--heading-2 {
+    line-height: 1.5;
+    font-size: 2.4rem; // 24px
+}
+
+@mixin fs--heading-3 {
+    line-height: 1.5;
+    font-size: 2rem; // 20px
+}
+
+@mixin fs--heading-4 {
+    line-height: 1.6;
+    font-size: 1.8rem; // 18px
+}
+
+@mixin fs--body {
+    line-height: 1.5;
+    font-size: 1.8rem; // 18px
+}
+
+@mixin fs--meta {
+    line-height: 1;
+    font-size: 1.8rem; // 18px
+}
+
+@mixin fs--caption {
+    line-height: 1;
+    font-size: 1.6rem; // 16px
+}
+
+@mixin fs--code {
+    font-size: 1.4rem;
+    line-height: 1.5;
+}
+
+// Visually hide content
+@mixin visually-hidden {
+    position: absolute;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+}
+
--- a/_sass/helpers/_variables.scss
+++ b/_sass/helpers/_variables.scss
@ -0,0 +1,22 @@
+/* ==========================================================================
+   Variabeles
+   ========================================================================== */
+
+$c-base__03: #0D2B35;
+$c-base__02: #163541;
+$c-base__01: #5C6E74;
+$c-base__00: #697B82;
+$c-base__0: #869395;
+$c-base__1: #96A0A0;
+$c-base__2: #EDE7D6;
+$c-base__3: #FCF5E4;
+
+$c-accent__blue: #0067FB;
+$c-accent__darkblue: #0029F9;
+$c-accent__green: #8BE367;
+
+// Breakpoints
+$bp__sm: 45rem; // 450px
+
+// Misc
+$m-border: 1px solid $c-base__2;
--- a/_sass/utilities/_layout.scss
+++ b/_sass/utilities/_layout.scss
@ -0,0 +1,13 @@
+/* ==========================================================================
+   Layout
+   ========================================================================== */
+
+.u-container {
+    max-width: 72rem; // 620px
+    margin-right: auto;
+    margin-left: auto;
+    padding-top: 10rem; // 100px
+    padding-right: 1rem; // 10px
+    padding-left: 1rem; // 10px
+}
+
--- a/_sass/utilities/_separator.scss
+++ b/_sass/utilities/_separator.scss
@ -0,0 +1,13 @@
+/* ==========================================================================
+   Separator
+   ========================================================================== */
+
+.u-separate {
+    margin-right: .45rem;
+    margin-left: .25rem;
+    color: $c-base__01;
+    &:after {
+        content: '\00a0/';
+    }
+}
+
--- a/_sass/vendor/_highlight.scss
+++ b/_sass/vendor/_highlight.scss
@ -0,0 +1,111 @@
+/* Solarized Dark
+
+For use with Jekyll and Pygments
+
+http://ethanschoonover.com/solarized
+
+SOLARIZED HEX      ROLE
+--------- -------- ------------------------------------------
+base03    #002b36  background
+base01    #586e75  comments / secondary content
+base1     #93a1a1  body text / default code / primary content
+orange    #cb4b16  constants
+red       #dc322f  regex, special keywords
+blue      #268bd2  reserved keywords
+cyan      #2aa198  strings, numbers
+green     #859900  operators, other keywords
+*/
+
+pre, code {
+    @include ff--code;
+    @include fs--code;
+}
+
+.highlight {
+    border-radius: 4px;
+    background: #FDFDFD;
+    border: 1px solid #E8E8EB;
+    color: #93a1a1;
+
+    .gutter {
+        padding: 1.2rem;
+        border-right: 1px solid #E8E8EB;
+    }
+
+    .code {
+        padding: 1.2rem;
+    }
+}
+span.lineno {
+    padding: 1rem;
+    border-right: 1px solid #E8E8EB;
+}
+.highlight .c { color: #586e75 } /* Comment */
+.highlight .err { color: #93a1a1 } /* Error */
+.highlight .g { color: #93a1a1 } /* Generic */
+.highlight .k { color: #859900 } /* Keyword */
+.highlight .l { color: #93a1a1 } /* Literal */
+.highlight .n { color: #93a1a1 } /* Name */
+.highlight .o { color: #859900 } /* Operator */
+.highlight .x { color: #cb4b16 } /* Other */
+.highlight .p { color: #93a1a1 } /* Punctuation */
+.highlight .cm { color: #586e75 } /* Comment.Multiline */
+.highlight .cp { color: #859900 } /* Comment.Preproc */
+.highlight .c1 { color: #586e75 } /* Comment.Single */
+.highlight .cs { color: #859900 } /* Comment.Special */
+.highlight .gd { color: #2aa198 } /* Generic.Deleted */
+.highlight .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #dc322f } /* Generic.Error */
+.highlight .gh { color: #cb4b16 } /* Generic.Heading */
+.highlight .gi { color: #859900 } /* Generic.Inserted */
+.highlight .go { color: #93a1a1 } /* Generic.Output */
+.highlight .gp { color: #93a1a1 } /* Generic.Prompt */
+.highlight .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #cb4b16 } /* Generic.Subheading */
+.highlight .gt { color: #93a1a1 } /* Generic.Traceback */
+.highlight .kc { color: #cb4b16 } /* Keyword.Constant */
+.highlight .kd { color: #268bd2 } /* Keyword.Declaration */
+.highlight .kn { color: #859900 } /* Keyword.Namespace */
+.highlight .kp { color: #859900 } /* Keyword.Pseudo */
+.highlight .kr { color: #268bd2 } /* Keyword.Reserved */
+.highlight .kt { color: #dc322f } /* Keyword.Type */
+.highlight .ld { color: #93a1a1 } /* Literal.Date */
+.highlight .m { color: #2aa198 } /* Literal.Number */
+.highlight .s { color: #2aa198 } /* Literal.String */
+.highlight .na { color: #93a1a1 } /* Name.Attribute */
+.highlight .nb { color: #B58900 } /* Name.Builtin */
+.highlight .nc { color: #268bd2 } /* Name.Class */
+.highlight .no { color: #cb4b16 } /* Name.Constant */
+.highlight .nd { color: #268bd2 } /* Name.Decorator */
+.highlight .ni { color: #cb4b16 } /* Name.Entity */
+.highlight .ne { color: #cb4b16 } /* Name.Exception */
+.highlight .nf { color: #268bd2 } /* Name.Function */
+.highlight .nl { color: #93a1a1 } /* Name.Label */
+.highlight .nn { color: #93a1a1 } /* Name.Namespace */
+.highlight .nx { color: #93a1a1 } /* Name.Other */
+.highlight .py { color: #93a1a1 } /* Name.Property */
+.highlight .nt { color: #268bd2 } /* Name.Tag */
+.highlight .nv { color: #268bd2 } /* Name.Variable */
+.highlight .ow { color: #859900 } /* Operator.Word */
+.highlight .w { color: #93a1a1 } /* Text.Whitespace */
+.highlight .mf { color: #2aa198 } /* Literal.Number.Float */
+.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */
+.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */
+.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */
+.highlight .sb { color: #586e75 } /* Literal.String.Backtick */
+.highlight .sc { color: #2aa198 } /* Literal.String.Char */
+.highlight .sd { color: #93a1a1 } /* Literal.String.Doc */
+.highlight .s2 { color: #2aa198 } /* Literal.String.Double */
+.highlight .se { color: #cb4b16 } /* Literal.String.Escape */
+.highlight .sh { color: #93a1a1 } /* Literal.String.Heredoc */
+.highlight .si { color: #2aa198 } /* Literal.String.Interpol */
+.highlight .sx { color: #2aa198 } /* Literal.String.Other */
+.highlight .sr { color: #dc322f } /* Literal.String.Regex */
+.highlight .s1 { color: #2aa198 } /* Literal.String.Single */
+.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */
+.highlight .bp { color: #268bd2 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #268bd2 } /* Name.Variable.Class */
+.highlight .vg { color: #268bd2 } /* Name.Variable.Global */
+.highlight .vi { color: #268bd2 } /* Name.Variable.Instance */
+.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */
+
--- a/assets/paper-cover-photo.png
+++ b/assets/paper-cover-photo.png
--- a/css/main.scss
+++ b/css/main.scss
@ -0,0 +1,30 @@
+---
+# Main scss file
+---
+@charset "utf-8";
+
+// Helpers
+@import
+    'helpers/mixins',
+    'helpers/variables';
+
+// Base
+@import
+    'base/reset';
+
+// Utilities
+@import
+    'utilities/layout',
+    'utilities/separator';
+
+// Components
+@import
+    'components/page',
+    'components/article',
+    'components/tag',
+    'components/archives';
+
+// Vendor
+@import
+    'vendor/highlight';
+
--- a/favicon.ico
+++ b/favicon.ico
--- a/feed.xml
+++ b/feed.xml
@ -0,0 +1,30 @@
+---
+layout: null
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ site.title | xml_escape }}</title>
+    <description>{{ site.description | xml_escape }}</description>
+    <link>{{ site.url }}{{ site.baseurl }}/</link>
+    <atom:link href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml"/>
+    <pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
+    <lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
+    <generator>Jekyll v{{ jekyll.version }}</generator>
+    {% for post in site.posts limit:10 %}
+      <item>
+        <title>{{ post.title | xml_escape }}</title>
+        <description>{{ post.content | xml_escape }}</description>
+        <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
+        <link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
+        <guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
+        {% for tag in post.tags %}
+        <category>{{ tag | xml_escape }}</category>
+        {% endfor %}
+        {% for cat in post.categories %}
+        <category>{{ cat | xml_escape }}</category>
+        {% endfor %}
+      </item>
+    {% endfor %}
+  </channel>
+</rss>
--- a/index.html
+++ b/index.html
@ -0,0 +1,33 @@
+---
+layout: page
+title: Home
+---
+
+<section class="c-archives">
+{% for post in site.posts  %}
+    {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+    {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+
+    {% if forloop.first %}
+        <h2 class="c-archives__year" id="{{ this_year }}-ref">{{this_year}}</h2>
+        <ul class="c-archives__list">
+    {% endif %}
+        <li class="c-archives__item">
+            <h3>
+              <a href="{{ post.url | prepend: site.baseurl }}">{{post.title}}</a>
+              <br>
+              <small>{{post.description}}</small>
+            </h3>
+            <p>{{ post.date | date: "%b %-d, %Y" }}</p>
+        </li>
+    {% if forloop.last %}
+        </ul>
+    {% else %}
+        {% if this_year != next_year %}
+        </ul>
+        <h2 class="c-archives__year" id="{{ next_year }}-ref">{{next_year}}</h2>
+        <ul class="c-archives__list">
+        {% endif %}
+    {% endif %}
+{% endfor %}
+</section>