henry-jekyll 0.1.0 → 1.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b8d088b2603874b55bc7a573b66b58c4e66c9e50e8d8f91578b7acba4951b3a8
-  data.tar.gz: 1b6b055a8fbc38fa485e3b77a01d4b651016912053f11a46f40761eccee10bbf
+  metadata.gz: 90f6f133a69ea0f25ccf08a42b461f67ddcb6b66e786d5a8a42f04c7e51c7903
+  data.tar.gz: b8a93e2eac44fd3baf5d79267f5180eb2079f81dbff520fcaa3bf996423efac2
 SHA512:
-  metadata.gz: 396711f81fdfca6d9bb89aa1d60a01366c5fb97fefa2e2905a9343784173228d93220c7138d0d31c67efec102874e77d79af07db3b18efd83d41ffca740ab946
-  data.tar.gz: f32121c2dfef3849025367a0444b80082ad4ec901cb6bc1ab3d8fec92ae9377e750bba5960ee68a82d2354aa04f820f91667384937ff1a6e2e53bb8692fe7797
+  metadata.gz: 89a76982a03a1b3b5c3a0d9622beb9f4f86fc5c84d83b936c61db6d06530b303f5fdf43e939ba293df6b805a0b06e78512465b9ae2d73f0a4c6a20b314d5d40d
+  data.tar.gz: bda755fa2bd92d55b01accdaf981c256934d11fcc303d6875771596b71c3cd2f540f7bc9bb77d5af2609fd4accb5ac6cea2402a8b62b5d84b1631ad9814e751a

data/README.md

@@ -1,52 +1,57 @@
-# henry-jekyll
+# Henry
 
-Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
+<p align="center"><img src="assets/img/henry.png"></p>
 
-To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
+Henry is a [Jekyll](https://github.com/jekyll/) theme with a gorgeous reading experience, chock-full of features. To find out more about all the features check out this [blog post](https://blog.jkl.gg/henry-jekyll-theme/).
 
-TODO: Delete this and the text above, and describe your gem
+# Getting Started
 
+The easiest way to get up and running with a Jekyll blog using Henry is using the included [Docker](https://www.docker.com/) configuration file.
 
-## Installation
-
-Add this line to your Jekyll site's `Gemfile`:
-
-```ruby
-gem "henry-jekyll"
+```shell
+# 1. clone Henry
+git clone git@github.com:kaushikgopal/henry-jekyll.git my_blog
+# 2. cleanup script so unnecessary files are remoed
+./start_new_blog.sh
+# 3. spin up blog with docker
+docker-compose up
 ```
 
-And add this line to your Jekyll site's `_config.yml`:
+You're good to go!
 
-```yaml
-theme: henry-jekyll
+```shell
+## on a Mac
+http://0.0.0.0:4000/
+## on Windows
+http://localhost:4000/
 ```
 
-And then execute:
+You can setup new/existing blogs with Henry, with or without Docker. Feel free to refer to this [setup guide](./setup.md) for details.
 
-    $ bundle
+# Publishing guide
 
-Or install it yourself as:
+## Github Pages
 
-    $ gem install henry-jekyll
+If you wish to publish your blog using [Github Pages](https://pages.github.com) (a popular free hosting option) you can follow this [publishing guide](./publishing_github_pages.md).
 
-## Usage
+## Firebase Hosting (included with Docker container)
 
-TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+Another good option to publish your blog is [Firebase hosting](https://firebase.google.com/docs/hosting). It includes a pretty generous free plan and allows plenty of customizability. Here's a [setup guide](./publishing_firebase_hosting.md).
 
-## Contributing
+# Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+Bug reports and pull requests are welcome on [GitHub](https://github.com/kaushikgopal/henry-jekyll). This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
 
-## Development
+To get started check out the [DEVELOPMENT](https://github.com/kaushikgopal/henry-jekyll/blob/main/DEVELOPMENT.md) page.
 
-To set up your environment to develop this theme, run `bundle install`.
+# Henry in the Wild
 
-Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+Here are a couple of blogs that use Henry:
 
-When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
-To add a custom directory to your theme-gem, please edit the regexp in `henry-jekyll.gemspec` accordingly.
+1. [Karthick Gopal's blog](https://blog.karthickg.com)
+2. [Kaushik Gopal's blog](https://blog.jkl.gg)
+3. [Nic Finn's blog](https://neodymiumphi.sh) _(Github Pages)_
 
-## License
+# License
 
 The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
-

data/_config.yml

@@ -1,3 +1,17 @@
+# 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 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.
+#
+# If you need help with YAML syntax, here are some quick references for you:
+# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
+# https://learnxinyminutes.com/docs/yaml/
+
 # Docker for OSX uses a VM so we need 0.0.0.0 instead of 127.0.0.1
 host: 0.0.0.0
 
@@ -6,32 +20,63 @@ host: 0.0.0.0
 # 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: Kaushik Gopal's Blog
+
+title: Kaushik's new blog
 author:
   name: "Kaushik Gopal"
   twitter: kaushikgopal
   bio-url: "https://jkl.gg"
+description: >- # this means to ignore newlines until "baseurl:"
+  Write an awesome description for your new site here. You can edit this
+  line in _config.yml. It will appear in your document head meta (for
+  Google search results) and in your feed.xml site description.
+baseurl: "" # the subpath of your site, e.g. /blog
+url: "" # the base hostname & protocol for your site, e.g. http://example.com
+root: /
+permalink: /:title/
+external-url-indicator: " »"
+
+# Build settings
+theme: henry-jekyll
+markdown: kramdown
+highlighter: rouge
+encoding: utf-8
+
+# Jekyll Plugins (only needed for GitHub Pages)
+plugins:
+  - jekyll-feed
+  - jekyll-seo-tag
 
-external-url-indicator: " ⬏"
+# front matter defaults https://jekyllrb.com/docs/configuration/front-matter-defaults/
+defaults:
+  - scope:
+      path: "" # an empty string here means all files in the project
+      type: "posts" # pages, posts, drafts are valid
+    values:
+      layout: "post"
 
 # Exclude from processing.
-# The following items will not be processed, by default. Create a custom list
-# to override the default setting.
+# The following items will not be processed, by default.
+# Any item listed under the `exclude:` key here will be automatically added to
+# the internal "default list".
+#
+# Excluded items can be processed by explicitly listing the directories or
+# their entries' file path in the `include:` list.
+
 exclude:
-  - docker-compose-publish.yml
-  - docker-compose.yml
-  - firebase.json
-  - .idea/
-#   - Gemfile
-#   - Gemfile.lock
+ - .idea/
+ - DEVELOPMENT.md
+ - Gemfile
+ - Gemfile.lock
+ - README.md
+ - docker-compose-publish.yml
+ - docker-compose.yml
+ - firebase.json
+ - henry-jekyll.gemspec
+ - publishing_firebase_hosting.md
+ - publishing_github_pages.md
 #   - node_modules
 #   - vendor/bundle/
 #   - vendor/cache/
 #   - vendor/gems/
 #   - vendor/ruby/
-
-plugins:
-  - jekyll-feed
-  - jekyll-redirect-from
-  - jekyll-seo-tag
-  - jekyll-sitemap

data/_includes/head.html

@@ -3,10 +3,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <!--[if lt IE 9]>
-    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
     <link rel="stylesheet" href="/assets/css/style.css">
     {% include _head.html %}
 

data/_layouts/categories.html

@@ -0,0 +1,23 @@
+---
+layout: default
+permalink: /categories/
+title: Categories
+---
+
+<section class="post-index categories">
+    {% for category in site.categories %}
+    {% capture category_name %}{{ category | first }}{% endcapture %}
+
+    <h2 class="post-list-header post-list-category" id="{{ category_name }}">#{{category_name}}</h2>
+
+    <ul class="post-list-content">
+        {% for post in site.categories[category_name] %}
+        <li class="post-link">
+            <a class="post-link-url" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+            {% if post.external_url %}<a class="linklog" href="{{ post.external_url }}">{{ site.external-url-indicator }}</a>{% endif %}
+            <p class="post-link-date">{{ post.date | date: "%m/%-d" }}</p>
+        </li>
+        {% endfor %}
+    </ul>
+    {% endfor %}
+</section>

data/_layouts/index.html

@@ -0,0 +1,34 @@
+---
+layout: default
+title: All Posts
+---
+
+<section class="post-index index">
+{% 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="post-list-header" id="{{ this_year }}-ref">{{this_year}}</h2>
+    <ul class="post-list-content">
+    {% endif %}
+        <li class="post-link">
+                <a class="post-link-url" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+                {% if post.external_url %}<a class="linklog" href="{{ post.external_url }}">{{ site.external-url-indicator }}</a>{% endif %}
+                <p class="post-link-date">{{ post.date | date: "%b %-d" }}</p>
+                {% if post.draft %} <span class="draft">Draft</span> {% endif %}
+        </li>
+
+    {% if forloop.last %}
+    </ul>
+    {% else %}
+        {% if this_year != next_year %}
+    </ul>
+
+    <h2 class="post-list-header" id="{{ next_year }}-ref">{{next_year}}</h2>
+
+    <ul class="post-list-content">
+        {% endif %}
+    {% endif %}
+{% endfor %}
+</section>

data/_layouts/page.html

@@ -1,14 +1,14 @@
 ---
 layout: default
 ---
-<div class="post">
+<section class="post">
 
-  <header class="post-header">
-    <h1 class="post-title">{{ page.title }}</h1>
-  </header>
+    <header class="post-header">
+        <h1 class="post-title">{{ page.title }}</h1>
+    </header>
 
-  <article class="post-content">
-    {{ content }}
-  </article>
+    <article class="post-content">
+        {{ content }}
+    </article>
 
-</div>
+</section>

data/_layouts/post.html

@@ -1,7 +1,7 @@
 ---
 layout: default
 ---
-<div class="post">
+<section class="post">
 
     <header class="post-header">
         <h1 class="post-title">
@@ -27,4 +27,4 @@ layout: default
 
     {% include meta.html %}
 
-</div>
+</section>

data/_layouts/raw.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+
+{% include head.html %}
+
+<body>
+
+{{ content }}
+
+</body>
+
+</html>

data/_sass/_initialize.scss

@@ -0,0 +1,3 @@
+@import "theme", "theme_override";
+@import "mixins", "code", "base";
+@import "main", "main_override";

data/_sass/{_base.scss → base.scss}

@@ -1,12 +1,16 @@
 /**
  * Reset some basic elements
  */
+
+html {
+    font-size: 100%; // for accessibility
+}
+
 body, h1, h2, h3, h4, h5, h6,
 p, blockquote, pre, hr,
 dl, dd, ol, ul, figure {
     margin: 0;
     padding: 0;
-    // -webkit-font-smoothing: antialiased;
 }
 
 
@@ -21,11 +25,6 @@ body {
     color: $color-text;
     background-color: $background-color;
     -webkit-text-size-adjust: 100%;
-
-    strong {
-        // letter-spacing: -1px;
-        // Varela Round looks ghastly when bold
-    }
 }
 
 /**
@@ -79,7 +78,7 @@ ul, ol {
 li {
     > ul,
     > ol {
-         margin-bottom: 0;
+        margin-bottom: 0;
     }
 }
 

data/_sass/main.scss

@@ -1,52 +1,552 @@
-@charset "utf-8";
+.post-index, .post, .site-footer {
+    display: grid;
+    grid-template-columns:
+        0.2fr
+        #{"min(65ch, 100%)"}
+        1fr;
 
-//region Variables
-$font-size-regular:   20px;
+    @include media-query-small-screen() {min-width: $mobile-width;}
 
-$font-size-xlarge:   $font-size-regular * 2;
-$font-size-large:   $font-size-regular * 1.5;
-//regular
-$font-size-medium:  $font-size-regular * 0.875;
-$font-size-small:  $font-size-regular * 0.75;
+    > * {
+        grid-column: 2;
 
-$base-line-height: 1.4;
+        margin-right: $spacing-unit;
+        margin-left: $spacing-unit;
+    }
+}
+
+
+.post .full-bleed {
+    // correct to match exact 100vw
+    width: calc(
+            100vw
+            - 2 * #{$spacing-micro-unit}
+            - 1.5px
+    );
+
+    /*
+    .post-content margin
+    */
+    margin-left: calc(
+            (-1)
+            * (100vw - #{"min(65ch, 100vw)"}) * (.2/1.2)
+            - #{$spacing-unit}
+    );
+}
+
+/* Header
+================================================== */
+.site-header {
+
+    // Positioning context for the mobile navigation icon
+    position: relative;
+
+    #banner {
+        font-size: 1.6em;
+        text-align: center;
+        margin-top : $spacing-unit;
+        margin-bottom : $spacing-unit/3;
+
+        h1 {
+            margin-bottom: 0;
+            font-size: 0.8em;
+            text-align: left;
+        }
+
+        .site-title {
+            font-family: $header-font-family;
+            font-weight: normal;
+            color: $color-text2;
+
+            &:hover {
+              color: $color-link;
+            }
+
+        }
+    }
+}
+
+/* Content
+================================================== */
+
+
+/* Post metadata section
+========================= */
+
+
+.post-meta {
+    margin-top: $spacing-micro-unit;
+    padding: 2px 4px 0 0;
+
+    margin-top: 0;
+    padding: 0;
+    text-transform: none;
+
+    div {
+        margin: $spacing-micro-unit 0 $spacing-micro-unit 0;
+    }
+
+    .post-permalink {
+        border-top: 1px solid $color-text;
+        width: 20%;
+        padding-top: 1em;
+
+        a {
+            color: $color-text2;
+
+            &:hover {
+                color: $color-link;
+            }
+        }
+    }
+
+    .post-date { color: $color-text; }
+
+    .post-categories {
+        margin: auto;
+        margin: 1em 0 1.5em 0;
+        display: flex;
+        justify-content: flex-start;
+    }
+
+    .post-related {
+
+        border: 3px solid $color-textunderline;
+        padding: 1em;
+        margin-top: $spacing-unit * 3;
+
+            h4 { font-family: $header-2-font-family; }
+
+            &:hover {
+                color: $color-text2;
+                border-color: $color-text2;
+            }
+
+            a {
+                color: inherit;
+                text-decoration: none;
+                &:hover { color: $color-link; }
+            }
+    }
+
+
+    .post-category {
+        border: 2px solid;
+        margin-right: 1em;
+        padding: $spacing-micro-unit $spacing-micro-unit*2;
+        text-align: center;
+        font-family: $fixed-width-font-family;
+        font-size: 0.8em;
+
+        &:hover {
+            color: $color-link;
+            border-color: $color-link;
+        }
+
+        a {
+            text-decoration: none;
+            color: inherit;
+            &:hover { color: inherit; }
+        }
+    }
+
+
+}
+
+.post-link {
+    display: block;
+    float: left;
+    font-size: $font-size-regular + 2px;
+
+    @include media-query-small-screen() {
+        font-size: $font-size-small;
+    }
+
+    .linklog {
+        color: $color-link;
+        font-family: $fixed-width-font-family;
+        text-decoration: none;
+
+        &:hover {
+            color: $color-text;
+        }
+    }
+}
+
+
+.draft {
+    background-color: $color-link;
+    border-radius: $spacing-unit / 2;
+    border: 2px solid #000;
+    color: black;
+    font-size: $font-size-small * .89;
+    font-weight: bold;
+    padding: $spacing-micro-unit;
+    text-transform: uppercase;
+    vertical-align: middle;
+    font-family: $fixed-width-font-family;
+
+    margin-left: $spacing-unit / 4;
+}
+
+/* Landing posts - grouped by year
+=============================== */
+
+    h2.post-list-header {
+        color: $color-header-index;
+        font-family: $fixed-width-font-family;
+        font-size: $font-size-regular * 1.25;
+        font-weight: normal;
+    }
+    h2.post-list-header:first-child {
+        margin-top: $spacing-unit;
+    }
+
+    h2.post-list-header.post-list-category {
+
+        &:hover {
+            color: $color-text;
+            border-color: $color-text;
+        }
+    }
+
+    ul.post-list-content {
+
+        float: left;
+        list-style: none;
+
+        .post-link {
+            font-family: $header-font-family;
+
+            clear: left;
+            margin: $spacing-micro-unit 0;
+
+            @include media-query-small-screen() {
+                margin: ($spacing-micro-unit - 2) 0;
+            }
+
+            .post-link-date {
+                display: inline;
+                color: darken($color-textunderline, 8%);
+                margin: 0;
+                clear: left;
+                white-space: nowrap;
+
+                font-size: $font-size-medium;
+                @include media-query-small-screen() {
+                    font-size: $font-size-small;
+                }
+            }
+
+            a.post-link-url {
+                color: $color-text2;
+                text-decoration: none;
+                padding-right: $spacing-micro-unit;
+
+                &:hover { text-decoration: $color-textunderline underline; }
+            }
+        }
+    }
+
+
+/* Post content section
+========================= */
+
+.post {
+    padding-top: $spacing-unit/2;
+
+    @include media-query-small-screen() {
+        margin: 0 auto;
+        font-size: $font-size-medium;
+    }
+
+    .post-header {
+
+        margin-top: $spacing-unit * 4;
+
+        @include media-query-small-screen() {
+            margin-top: $spacing-unit * 1.5;
+            float: none;
+        }
 
-$spacing-unit:          30px;
-$spacing-micro-unit:    6px;
+        .post-author {
+            font-weight: normal;
+            font-style: italic;
+        }
 
-$mobile-width:  375px;
-$tablet-width:  685px;
-$screen-width:  780px;
+        .post-title {
+            color: $color-text2;
+            margin: $spacing-unit 0 $spacing-unit/2 0;
+            font-size: $font-size-xlarge + 10px;
+            font-weight: bold;
+            font-family: $header-2-font-family;
 
-//endregion
 
-//region Mixins
-@mixin media-query-small-screen() {
-    @media only screen and (max-width: $tablet-width) {
-        @content;
+            .article-link  {
+
+              color: $color-text2;
+              text-decoration: none;
+
+              &:hover {
+                text-decoration: underline;
+              }
+            }
+
+            @include media-query-small-screen() {
+                font-size: $font-size-large + 5px;
+                margin-top: 0;
+            }
+        }
+
+    }
+}
+
+.post-content {
+    clear: left;
+    margin: $spacing-unit;
+    line-height: 1.5;
+
+    font-size: $font-size-regular;
+
+    @include media-query-small-screen() {
+        font-size: $font-size-medium;
+    }
+
+    p { margin-bottom: $spacing-unit; }
+    p + ul { margin-top: -0.5 * $spacing-unit; }
+
+    a {
+        text-decoration-color: $color-textunderline;
+        text-underline-offset: $spacing-micro-unit;
+        &:hover { text-decoration: none; }
+    }
+
+    hr {
+        border: 1px solid #d8d8d8;
+        margin: 1em 0;
+        width: 100%;
+    }
+
+    h1 {
+        font-size: $font-size-xlarge;
+        @include media-query-small-screen() {
+            font-size: $font-size-large;
+        }
+
+        margin: 1.8em 0 0.8em 0em;
+    }
+
+    > h1:first-child {
+        margin-top: 1em;
+    }
+
+    h2 {
+        font-size: $font-size-large;
+        font-style: italic;
+
+        @include media-query-small-screen() {
+            font-size: $font-size-medium + 2px;
+        }
+
+        margin: 2em 0 0.4em 0em;
+    }
+
+    h3 {
+        font-size: 1.0em;
+        font-style: italic;
+        font-weight: normal;
+
+        @include media-query-small-screen() {
+            font-size: $font-size-medium;
+        }
+    }
+}
+
+
+figure { text-align: left; }
+figcaption {
+    font-size: 0.8em;
+    font-family: $header-font-family;
+    text-align: center;
+    margin-bottom: $spacing-unit;
+    margin-top: -1 * $spacing-unit / 2;
+}
+
+/**
+ * Blockquotes
+ */
+blockquote {
+    border-left: 4px solid $color-textunderline;
+    padding-left: $spacing-unit / 2;
+    padding-top: $spacing-unit / 3;
+    padding-bottom: $spacing-unit / 3;
+    margin-bottom: $spacing-unit;
+    font-style: italic;
+
+    code {
+        font-size: 0.8em
+    }
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+.callout {
+    border: 2px solid $color-textunderline;
+    padding: 1em;
+    margin-bottom: $spacing-unit;
+    text-align: center;
+}
+
+ul.callout {
+    margin-left: 0;
+    padding-left: 30px; // reset
+}
+
+/* sidenote
+================================================== */
+
+.sidenote {
+    padding-left: 20px;
+    margin-bottom: 1.5em;
+    border-left: 1px solid $color-textunderline;
+
+    color: $color-textunderline;
+    font-style: italic;
+    font-size: 0.8em;
+}
+
+.sidenote-hover {
+    color: #F99B6D;;
+    border-color: #F99B6D;
+}
+
+/* footnotes
+================================================== */
+
+.footnotes {
+    border-bottom: 1px solid $color-textunderline;
+    border-top: 1px solid $color-textunderline;
+    padding: 1em 0;
+}
+
+a.footnote {
+    text-decoration: none;
+    &:hover {
+        color: $color-link;
+    }
+}
+
+/* Code snippets
+================================================== */
+code {
+    font-family: $fixed-width-font-family;
+}
+
+article.post-content {
+    pre {
+        font-size: 0.75em;
+        padding: 1em;
+        line-height: 1.4em;
+        overflow: auto;
+    }
+
+    ol code, ul code, p>code {
+        font-size: 0.85em;
+    }
+    p>code {
+        color: $color-code;
     }
 }
 
-@mixin media-query-laptop() {
-    @media only screen and (min-width: $tablet-width + 1px) {
-        @content;
+
+.site-footer {
+    padding: $spacing-unit 0;
+
+    @include media-query-laptop() {
+        margin-top: 2em;
+    }
+
+    .newsletter {
+
+        grid-column: 2;
+
+        display: grid;
+        grid-gap: $spacing-micro-unit;
+
+        margin-bottom: $spacing-unit * 2;
+
+        @include media-query-small-screen() {
+            padding: 0 $spacing-micro-unit * 2;
+        }
+
+        @include media-query-laptop() {
+            grid-template-columns: 48% 1fr 48%;
+        }
+
+        input {
+            text-align: center;
+            padding: 0.5em;
+            font-family: $font-family-base;
+            font-size: 0.8em;
+        }
+
+        input[type=text] {
+            border: 1px solid $color-divider;
+
+            @include media-query-laptop() {
+                grid-column-start: 1;
+            }
+        }
+
+        input[type=submit] {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-color: lightgray;
+
+            @include media-query-laptop() {
+                    grid-column-start: 3;
+            }
+        }
     }
 }
 
-// Using media queries with like this:
-// @include media-query-mobile() {
-//     .wrapper {
-//         padding-right: $spacing-unit / 2;
-//         padding-left: $spacing-unit / 2;
-//     }
-// }
+.site-nav {
+
+    ul {
+        display: grid;
+        row-gap: $spacing-unit / 2;
+        grid-template-columns: repeat(auto-fit, minmax((7 * $font-size-regular), 1fr));
+        @include media-query-small-screen() {
+            grid-template-columns: repeat(auto-fit, minmax((4 * $font-size-regular), 1fr));
+        }
 
-//endregion
+        list-style-type: none;
+        margin-left: 0;
+        text-align: center;
 
-@import "theme";
+        .nav-link {
+            display: block;
 
-// Import partials from `sass_dir` (defaults to `_sass`)
-@import url(code-colorful.css),
-"base",
-"layout",
-"custom";
+            padding-top: $spacing-micro-unit;
+            padding-bottom: $spacing-micro-unit;
+            text-decoration: none;
+
+            @include media-query-small-screen() {
+                font-size: $font-size-small;
+            }
+
+
+            border-top: 2px solid transparent;
+            border-bottom: 2px solid transparent;
+
+            &:hover {
+                border-top: 2px solid $color-link;
+                border-bottom: 2px solid $color-link;
+            }
+        }
+    }
+}