initial commit

15 files changed, 774 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..45c1505
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+_site
+.sass-cache
+.jekyll-metadata
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 0000000..3056ccc
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,24 @@
+source "https://rubygems.org"
+ruby RUBY_VERSION
+
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "3.3.0"
+
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+gem "minima", "~> 2.0"
+
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+   gem "jekyll-feed", "~> 0.6"
+end
diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 0000000..b41197d
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,56 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.5.0)
+      public_suffix (~> 2.0, >= 2.0.2)
+    colorator (1.1.0)
+    ffi (1.9.14)
+    forwardable-extended (2.6.0)
+    jekyll (3.3.0)
+      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-feed (0.8.0)
+      jekyll (~> 3.3)
+    jekyll-sass-converter (1.5.0)
+      sass (~> 3.4)
+    jekyll-watch (1.5.0)
+      listen (~> 3.0, < 3.1)
+    kramdown (1.13.1)
+    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)
+    minima (2.1.0)
+      jekyll (~> 3.3)
+    pathutil (0.14.0)
+      forwardable-extended (~> 2.6)
+    public_suffix (2.0.5)
+    rb-fsevent (0.9.8)
+    rb-inotify (0.9.7)
+      ffi (>= 0.5.0)
+    rouge (1.11.1)
+    safe_yaml (1.0.4)
+    sass (3.4.23)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (= 3.3.0)
+  jekyll-feed (~> 0.6)
+  minima (~> 2.0)
+
+RUBY VERSION
+   ruby 2.3.1p112
+
+BUNDLED WITH
+   1.13.2
diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000..4e8e9d6
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1,30 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing these this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+title: Noah Loomans
+email: noahloomans@gmail.com
+baseurl: "" # the subpath of your site, e.g. /blog
+url: "http://noahloomans.com" # the base hostname & protocol for your site, e.g. http://example.com
+
+# Build settings
+markdown: kramdown
+gems:
+  - jekyll-feed
+exclude:
+  - Gemfile
+  - Gemfile.lock
+
+sass:
+    sass_dir: style
\ No newline at end of file
diff --git a/_includes/footer.html b/_includes/footer.html
new file mode 100644
index 0000000..f893ae1
--- /dev/null
+++ b/_includes/footer.html
@@ -0,0 +1,2 @@
+<footer>
+</footer>
\ No newline at end of file
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000..596185a
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,7 @@
+<head>
+  <meta charset="utf-8">
+  <title>Noah Loomans</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="/style/main.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
+</head>
\ No newline at end of file
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 0000000..59076e2
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,5 @@
+<header>
+  <a href="/">
+    <div class="logo"></div>
+  </a>
+</header>
\ No newline at end of file
diff --git a/_layouts/layout.html b/_layouts/layout.html
new file mode 100644
index 0000000..b337d70
--- /dev/null
+++ b/_layouts/layout.html
@@ -0,0 +1,24 @@
+---
+---
+<!DOCTYPE html>
+<html>
+  {% include head.html %}
+  <body>
+    {% include header.html %}
+    <div class="page">
+      <nav>
+        <ul>
+          <li><a href="/">About</a></li>
+          <li class='seperator'>•</li>
+          <li><a href="/projects/">Projects</a></li>
+          <li class='seperator'>•</li>
+          <li><a href="/blog/">Blog</a></li>
+        </ul>
+      </nav>
+      <main>
+        {{ content }}
+      </main>
+    </div>
+    {% include footer.html %}
+  </body>
+</html>
\ No newline at end of file
diff --git a/_posts/2017-01-04-welcome-to-jekyll.markdown b/_posts/2017-01-04-welcome-to-jekyll.markdown
new file mode 100644
index 0000000..279fcb7
--- /dev/null
+++ b/_posts/2017-01-04-welcome-to-jekyll.markdown
@@ -0,0 +1,25 @@
+---
+layout: layout
+title:  "Welcome to Jekyll!"
+date:   2017-01-04 23:05:41 +0100
+categories: jekyll update
+---
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
+
+Jekyll also offers powerful support for code snippets:
+
+{% highlight ruby %}
+def print_hi(name)
+  puts "Hi, #{name}"
+end
+print_hi('Tom')
+#=> prints 'Hi, Tom' to STDOUT.
+{% endhighlight %}
+
+Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
+
+[jekyll-docs]: http://jekyllrb.com/docs/home
+[jekyll-gh]:   https://github.com/jekyll/jekyll
+[jekyll-talk]: https://talk.jekyllrb.com/
diff --git a/about.md b/about.md
new file mode 100644
index 0000000..d8da33b
--- /dev/null
+++ b/about.md
@@ -0,0 +1,6 @@
+---
+layout: layout
+title: About
+permalink: /about/
+---
+hi
\ No newline at end of file
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..8408fea
--- /dev/null
+++ b/assets/logo.png
diff --git a/index.md b/index.md
new file mode 100644
index 0000000..74b1610
--- /dev/null
+++ b/index.md
@@ -0,0 +1,13 @@
+---
+layout: layout
+---
+Hi,
+
+I'm Noah Loomans and this is my personal website, as of now i'm 17. Feel free
+to look around, but don't expect much as this website is still a work in
+progress.
+
+# Contact
+If you wish to contect me please send me an email at
+[noahloomans@gmail.com](mailto:noahloomans@gmail.com). And here is my
+[PGP key](/pgp.txt) if your into that sort of thing.
\ No newline at end of file
diff --git a/pgp.txt b/pgp.txt
new file mode 100644
index 0000000..ed3ee37
--- /dev/null
+++ b/pgp.txt
@@ -0,0 +1,36 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+Version: GnuPG v1
+
+mQENBFhr7cMBCADgRw+OE82bT5dOlQ06b9jvZnqrzHSYSAtgj69anX1v25ZU/FGY
+A5zko1dVrBNQ4PnEvQG5mfoHV8lXkeIgQLOk+2WA1Z2N1q57vbgxpsKn1pO4pwyo
+PAd7jg3Ln1vG653768PYWHk0Glbo9tXj/oNG112EUObJK/+8lIlz+xCpzURcd/lQ
+PYSihKrsu+8YBEnw581yqVDv1PAkO8eCt29ounnwObLDsYL123lYQk9S9rTEW6Rc
+nBebSubp7zapykdhmrO8CmvgFwnftjExSnzDXHpUmozckcVHHGSlgwEZ232FFVZT
+ophEgPQQgiut1LHn7LDDgnr3Q8JF4U//PwlNABEBAAG0JE5vYWggTG9vbWFucyA8
+bm9haGxvb21hbnNAZ21haWwuY29tPokBOAQTAQIAIgUCWGvtwwIbAwYLCQgHAwIG
+FQgCCQoLBBYCAwECHgECF4AACgkQiyN187Nn323Bpgf8CsVT82f4MwT0fRVcHTYk
+kjeyBZ2aCssC05o83fuaycvwdBxVBUZya4b5wGWEA2h8Dy3KowDjeCbFX8YoVFRa
+TgsUleMi+NdycxiJDzGy1uKoZXOMM6i0kIUwBXFWS0PUcJjjrvpDP0XbDb/AIVjl
+bDsBN882pp+QRzYKLj/xEwUOHo8ssEgO5O75/pxvlUgWtiCzOTU5V4DGJLD2gQsG
+GLluXF87h/Rpk1H3UTtL2V/ct+9EcenhTZwtlEmOijgQEjzpFZ+VKH+6tcD/4QrI
+ZpWQGO5BhmQFZpaD0bPjj+V17fqF0PyxE8Uef/Bu1eEWKfV/39j59wqZdJe/UGy1
+3YkBHAQQAQgABgUCWG0u2AAKCRCOGNDECdHo3M78B/4xq/Sq0u15U4SKFmpZT2F0
+ASfScYLBVzu+D2ciZycVlulsN02y2VVpEZFJ/DlzHr+2JmmNUFwGx/9QR19OwIhy
+Xt0fCF0MjRH9EVfHHzHrEm+DLpHDEO6eyZWXdy1ZoAoIWkZkN/M5MWlnnYwu1GEQ
+vsRx1HBKg1pAlF6etZsAP2qETa0Kw/zImiGtwYadSmq92pw6MKH4FHaAXJeFhlcN
+TtkkBRPbWKwa7sgVkcH1Se4Csn79jpglBcB5jQowUiSTaf0DtvfocX/49ToFkJvw
+JdZRwMBteNh7Eos6bXP/l8n0XmkMEX9yyt9LTbslCGBAcbbaCf4EScFRN4Wv4Air
+uQENBFhr7cMBCADUPTzZc1HMT/+OsnR5U3bRS++2eFsNHRofwUGiADKpszxq5m+N
+GwScFVAi3s+QfIiJimVmBAplvzZLnCocyRILsFsTYC6QIKxtK2mu3eMhSKG3cAum
+w5UXsBcykgg+sU2uaikhZINxkC99bt6LmUApyy0EmxfcaFRYeuDKnDMaG87kEiQu
+J4x/NSBt614bSF9zMaBgeyxbaoe/QWIYYEVA8css66o7PPwyTinbF5NoBbpyl34n
+/EBkpXJJ+s+KplxNhpagzvrEpu8eQ5hzV03H1AZquU+aU09XH4wuqcKrUwtKs/+Y
+/zpdawk70aaPHFPEkaNXLJhM6dioxf/KA0YpABEBAAGJAR8EGAECAAkFAlhr7cMC
+GwwACgkQiyN187Nn322zGwf+IWL/LZxTSGQUab7R51G+0XJHaiwHD4SL4QMTyfMU
+zJlnO4nLgE7ODSauFHAUBL4pryYCwf0vRvhZO+vegRuAKkdjZ2Ac1FenFApUJkjn
+g30qe7o5yMI4+Eb46N0XlyWAF/pqBahpTGb82OrqsqGUpFsRWd3+DMcV7I7seA3j
+1c+RvmlaxVHzOB08a6pC0qkvgyv8AsbdoceH1x9dWKWbrcuniJhDH4q1DbVbnVL9
+kq64k5IITm8gwdMsxEqFhtUhbMg/U0O3NskvA45g7WE9VpvT6aR4gaQa2JWGM2g5
+wfjYS1SNnvn+ECZeRvRT04xhmmGQdyRGcjkrimjazGBnhA==
+=Ie7M
+-----END PGP PUBLIC KEY BLOCK-----
\ No newline at end of file
diff --git a/style/_normalize.scss b/style/_normalize.scss
new file mode 100644
index 0000000..01ee697
--- /dev/null
+++ b/style/_normalize.scss
@@ -0,0 +1,461 @@
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+/* Document
+   ========================================================================== */
+
+html {
+  font-family: sans-serif; /* 1 */
+  line-height: 1.15; /* 2 */
+  -ms-text-size-adjust: 100%; /* 3 */
+  -webkit-text-size-adjust: 100%; /* 3 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
\ No newline at end of file
diff --git a/style/main.scss b/style/main.scss
new file mode 100644
index 0000000..1c03a1e
--- /dev/null
+++ b/style/main.scss
@@ -0,0 +1,82 @@
+---
+---
+
+@import 'normalize';
+
+body {
+  background-color: #31363b;
+  font-family: 'Roboto Mono', monospace;
+  margin: 16px;
+  word-wrap: break-word;
+}
+
+.logo {
+  background-image: url(/assets/logo.png);
+  height: 144px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+  zoom: 0.6;
+  margin-top: 64px;
+  margin-bottom: 64px;
+}
+
+.page {
+  max-width: 700px;
+  margin: 0 auto;
+  background-color: white;
+}
+
+nav {
+  background-color: #93a1a1;
+  overflow-y: auto;
+
+  ul {
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    list-style: none;
+    padding: 8px;
+
+    a {
+      text-decoration: none;
+      color: black;
+      padding: 8px;
+      display: inline-block;
+      &:hover, &:focus {
+        background-color: #b8c5c5;
+        outline: none;
+      }
+    }
+  }
+
+  li.seperator {
+    padding: 16px;
+    display: inline-block;
+  }
+}
+
+main {
+  padding: 16px;
+}
+
+h1, h2, h3 {
+  font-size: 1em;
+  font-weight: bold;
+}
+
+h1::before {
+  content: '# ';
+}
+
+h2::before {
+  content: '## ';
+}
+
+h3::before {
+  content: '### ';
+}
\ No newline at end of file