henry-jekyll 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b8d088b2603874b55bc7a573b66b58c4e66c9e50e8d8f91578b7acba4951b3a8
-  data.tar.gz: 1b6b055a8fbc38fa485e3b77a01d4b651016912053f11a46f40761eccee10bbf
+  metadata.gz: 8f64e0c2a20aec336f3463acba80141cae7a7eb71b6a9620c1d29ba89aba1fa1
+  data.tar.gz: a7bbdb584ea7983c494676c6e612c9aa9d79b34854fa054582977eb9ecdb1809
 SHA512:
-  metadata.gz: 396711f81fdfca6d9bb89aa1d60a01366c5fb97fefa2e2905a9343784173228d93220c7138d0d31c67efec102874e77d79af07db3b18efd83d41ffca740ab946
-  data.tar.gz: f32121c2dfef3849025367a0444b80082ad4ec901cb6bc1ab3d8fec92ae9377e750bba5960ee68a82d2354aa04f820f91667384937ff1a6e2e53bb8692fe7797
+  metadata.gz: 443b9e84b92740d62c05b40caa877404ae32d83c998ccb4e946d38144468447622d2cbe40436ae121eba41fd0a73d8510345c25f00d493a43e05501348656bcc
+  data.tar.gz: fa1a63094c94b4b7d6de589d1e7781ce482b846409c96655255a0149edabd9d05f4efc1360d60764f266a93124932a609140341b1d51e0899c04aa08e6233456

data/README.md

@@ -1,11 +1,14 @@
-# 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`.
+Henry is a [Jekyll](https://jekyllrb.com/) theme with a gorgeous reading experience and packed with features. 
 
-To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
+To find out more about all the features, check this intro [blog post](https://blog.jkl.gg/henry-jekyll-theme/).
+
+By simply adding henry to your jekyll blog setup, you can now use all the same features there! 
 
-TODO: Delete this and the text above, and describe your gem
+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`.
 
+To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
 
 ## Installation
 
@@ -31,20 +34,52 @@ Or install it yourself as:
 
 ## Usage
 
-TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+## How to override styles
 
-## Contributing
+The theme should all just work but if you want to add a little flair and differentiate yourself from other sites/blogs you can do so by adding a few overrides `.scss` files to your `_sass/` directory:
+
+1. `./assets/css/style.scss`
+2. `./assets/theme_override.scss`
+3. `./assets/main_override.scss`
+
+Henry by default loads `_initialize.scss`, so we'll need to override that file like so: 
+
+```scss
+// inside ./assets/css/style.scss
+@import "theme", "theme_override";
+@import "mixins", "code", "base";
+@import "main", "main_override";
+```
 
-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.
+You can now override Henry's style by updating two of those override files.
 
-## Development
+```scss
+// inside ./_sass/theme_override.scss
+// change font sizes, styles, colors in here
 
-To set up your environment to develop this theme, run `bundle install`.
+$font-size-regular:     30px;
+$background-color:      black;
+$color-text:            red;
 
-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.
+// take a look at the main `theme.scss` file to see the full list of variables you can customize
+```
+
+To actually change specific styles, make sure to put them in the main override. The order of imports matter.
+
+```scss
+// inside ./_sass/main.scss
+// change layout or site styles here
+
+ul.post-list-content .post-link a.post-link-url {
+    color: red
+}
+
+// take a look at the main `main.scss` file to see the current layout styles
+```
+
+## Contributing
 
-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.
+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.
 
 ## License
 

data/_config.yml

@@ -14,6 +14,23 @@ author:
 
 external-url-indicator: " ⬏"
 
+# Link settings
+root: /
+permalink: /:title/
+
+# Build settings
+markdown: kramdown
+highlighter: rouge
+encoding: utf-8
+
+# 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.
@@ -29,9 +46,3 @@ exclude:
 #   - 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/_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}

@@ -6,7 +6,6 @@ p, blockquote, pre, hr,
 dl, dd, ol, ul, figure {
     margin: 0;
     padding: 0;
-    // -webkit-font-smoothing: antialiased;
 }
 
 
@@ -21,11 +20,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 +73,7 @@ ul, ol {
 li {
     > ul,
     > ol {
-         margin-bottom: 0;
+        margin-bottom: 0;
     }
 }
 

data/_sass/main.scss

@@ -1,52 +1,520 @@
-@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 {
+    width: 100vw;
+
+    margin-left: calc(
+            (100vw - #{"min(65ch, 100vw)"})
+            * (.2 / 1.2)
+            * (-1)
+            - #{$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 {
+        text-decoration: none;
+        color: $color-link;
+
+        &: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;
+    }
 
-$spacing-unit:          30px;
-$spacing-micro-unit:    6px;
+    .post-header {
 
-$mobile-width:  375px;
-$tablet-width:  685px;
-$screen-width:  780px;
+        margin-top: $spacing-unit * 4;
 
-//endregion
+        @include media-query-small-screen() {
+            margin-top: $spacing-unit * 1.5;
+            float: none;
+        }
 
-//region Mixins
-@mixin media-query-small-screen() {
-    @media only screen and (max-width: $tablet-width) {
-        @content;
+        .post-author {
+            font-weight: normal;
+            font-style: italic;
+        }
+
+        .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;
+
+
+            .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;
     }
 }
 
-@mixin media-query-laptop() {
-    @media only screen and (min-width: $tablet-width + 1px) {
-        @content;
+
+.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;
+}
+
+/* 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;
     }
 }
 
-// Using media queries with like this:
-// @include media-query-mobile() {
-//     .wrapper {
-//         padding-right: $spacing-unit / 2;
-//         padding-left: $spacing-unit / 2;
-//     }
-// }
 
-//endregion
+.site-footer {
 
-@import "theme";
+    padding: $spacing-unit 0;
 
-// Import partials from `sass_dir` (defaults to `_sass`)
-@import url(code-colorful.css),
-"base",
-"layout",
-"custom";
+    @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;
+            }
+        }
+    }
+
+    .site-nav {
+        grid-column: 2;
+        grid-row: 2;
+
+        ul {
+            display: grid;
+            row-gap: $spacing-unit / 2;
+
+            grid-template-columns: repeat(auto-fill, minmax((6 * $font-size-regular), 1fr));
+
+            list-style-type: none;
+            margin-left: 0;
+            text-align: center;
+
+            .nav-link {
+                text-decoration: none;
+            }
+        }
+    }
+}