jekyll-theme-hamilton 0.1.2 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5645fb9778838423d8c2a7e7b3ed266aac69a656d38444d8ece92b74f1958eac
-  data.tar.gz: 81d332f313d19a3934e7647bb0d2850cfab5486b864949d600b65cb550cca30a
+  metadata.gz: 42bdeffb4ae6b08b04c14534c27be8dc95b79120f4f059bec16e5e08c5a15c2a
+  data.tar.gz: bf5ff5f7d32ba307fd9ce3e3020188b9ee2d6204572d98dead5e06c136eca620
 SHA512:
-  metadata.gz: f79d43c995d3920e4c041b089f4306c18a0fcdbc3433c480feae728872b4c909a6c8775cd7a12b5dea948bb100449933ad8ab386ad606dd91f71e3036220b8a7
-  data.tar.gz: f0e872a09ea5f678b0631317c408a98a553afed6d9e302b189df29bab38cf34dd16357ddcbc943785e2fcd58c8201cb50585e3c4a18807455cb2f829c3716e24
+  metadata.gz: 57ffc4c8843d390a08c8f51dfcc0519bd607c673167b4bd8aab5c4c7a6ebe104320e2794ca607348a6e57eb0b061763bba781234de187f023ecc4038066bf359
+  data.tar.gz: 413df9789a645a2037271405447032a3cce57987606d19b5881f6bed8edb3c441d8b4850c7d5c176f7866b4ee88818d6c92b3048fc0cc7c52e27c40b8fdeccde

data/README.md

@@ -4,7 +4,9 @@ Another minimal style of Jekyll theme for writers. The original purpose of this
 
 Please check out the [demo](https://ngzhio.github.io/jekyll-theme-hamilton/).
 
-![screenshot](screenshot.png)
+| Daylight | Sunrise/Sunset | Midnight |
+| --- | --- | --- |
+| ![screenshot](screenshot.png) | ![screenshot](screenshot-sunrise.png) | ![screenshot](screenshot-midnight.png)
 
 ## Features <!-- omit in toc -->
 
@@ -19,6 +21,7 @@ Please check out the [demo](https://ngzhio.github.io/jekyll-theme-hamilton/).
 - Configurable page navigation
 - Customizable styles and skins
 - Archive pages implemented in pure Liquid
+- An elegant way to import images on posts
 
 ## Table of Contents <!-- omit in toc -->
 
@@ -27,6 +30,7 @@ Please check out the [demo](https://ngzhio.github.io/jekyll-theme-hamilton/).
   - [Optional Parameters](#optional-parameters)
 - [Archive Pages](#archive-pages)
 - [MathJax](#mathjax)
+- [Images](#images)
 - [Customization](#customization)
   - [Metadata](#metadata)
   - [Navigation](#navigation)
@@ -109,6 +113,30 @@ layout: archive-years
 
 You can enable MathJax on each post or page, just set `math: true` on that page.
 
+## Images
+
+Hamilton provides a template [`image.html`](_includes/image.html) to let you import images on each post through an elegant way. For example,
+
+```liquid
+{% include image.html src="the/path/to/the/image" %}
+```
+
+By default, the alignment of the image is center, but you can configure the alignment to left or right by passing a parameter `align`, for example,
+
+```liquid
+{% include image.html src="the/path/to/the/image" align="left" %}
+```
+
+You can also configure the width and height of the image,
+
+```liquid
+{% include image.html src="the/path/to/the/image" width="50%" height="128px" %}
+```
+
+Besides, you can pass the `caption` parameter to the include, then it will wrap the `img` with a `figure` block; alternatively, you can pass the `alt` parameter to the include.
+
+If you feel that passing a long path to the image to the include is ugly and wasting time, you can replace the `src` parameter with the `name` parameter, which is just the name of the image, and by default, the path would be `assets/img/{{ page.title | slugify}}/{{ include.name }}`.
+
 ## Customization
 
 ### Metadata

data/_includes/footer.html

@@ -1,10 +1,46 @@
 <footer id="footer" class="site-footer">
   <div class="wrapper">
-    <p class="feed-subscribe">
-      <a href="{{ 'feed.xml' | relative_url }}">
-        <i class="feed-icon fas fa-rss"></i><span>Subscribe</span>
-      </a>
-    </p>
+    <div class="footer-col-wrapper">
+
+      <div class="footer-col">
+        <p class="feed-subscribe">
+          <a href="{{ 'feed.xml' | relative_url }}">
+            <i class="feed-icon fas fa-rss"></i><span>Subscribe</span>
+          </a>
+        </p>
+        <ul class="contact-list">
+          {%- if site.author -%}
+            <li class="p-name">{{ site.author | escape }}</li>
+          {%- endif -%}
+          {%- if site.email -%}
+            <li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
+          {%- endif -%}
+        </ul>
+      </div>
+
+      <div class="footer-col">
+        <div class="copyright">
+          {% assign year_from = site.posts[-1].date | date: '%Y' %}
+          {% assign year_to   = site.time | date: '%Y' %}
+          {% if year_from == nil or year_from == year_to %}
+            {% assign year_string = year_from %}
+          {% else %}
+            {% assign year_string = year_from | append: '&nbsp;' | append: '-' | append: '&nbsp;' | append: year_to %}
+          {% endif %}
+          {% if site.author %}
+          <p>Copyright © {{ year_string }} {{ site.author }}; All rights reserved.</p>
+          {% endif %}
+        </div>
+        <p>
+          Powered by <a href="https://jekyllrb.com/">Jekyll</a> & <a href="https://github.com/ngzhio/jekyll-theme-hamilton">Hamilton</a>
+        </p>
+      </div>
+
+      <div class="footer-col">
+        <p>{{ site.description | escape }}</p>
+      </div>
+
+    </div>
 
     {% if site.data.social %}
       <div class="social-icons">
@@ -13,29 +49,6 @@
         {% endfor %}
       </div>
     {% endif %}
-
-    <div class="copyright">
-      {% assign year_from = site.posts[-1].date | date: '%Y' %}
-      {% assign year_to   = site.time | date: '%Y' %}
-      {% if year_from == nil or year_from == year_to %}
-        {% assign year_string = year_from %}
-      {% else %}
-        {% assign year_string = year_from | append: '&nbsp;' | append: '-' | append: '&nbsp;' | append: year_to %}
-      {% endif %}
-
-      {% if site.author %}
-        {% if site.email %}
-          <p>© {{ year_string }} <a class="u-email" href="mailto:{{ site.email }}">{{ site.author }}</a>; All rights reserved.</p>
-        {% else %}
-          <p>© {{ year_string }} {{ site.author }}; All rights reserved.</p>
-        {% endif %}
-      {% endif %}
-
-      <p>
-        Powered by <a href="https://jekyllrb.com/">Jekyll</a> & <a href="https://github.com/ngzhio/jekyll-theme-hamilton">Hamilton</a>
-      </p>
-
-    </div>
   </div>
 </footer>
   

data/_includes/head.html

@@ -14,6 +14,14 @@
   {% include mathjax.html %}
 {% endif %}
 
+<!-- Google Fonts -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open%20Sans">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing%20Script">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto%20Sans%20SC">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto%20Serif%20SC">
+
 <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
 <link rel="stylesheet" href="{{ '/assets/css/skin.css' | relative_url }}">
 

data/_includes/image.html

@@ -1,9 +1,16 @@
 {% capture align %}align-{{ include.align | default: "center" }}{% endcapture %}
+
+{%- if include.src -%}
+  {% assign src = include.src %}
+{%- elsif include.name -%}
+  {% capture src %}assets/img/{{ page.title | slugify }}/{{ include.name }}{% endcapture %}
+{%- endif -%}
+
 {% if include.caption %}
 <figure class="{{ align }}">
-  <img class="{{ align }}" src="{{ include.src | absolute_url }}" alt="{{ include.caption }}" {% if include.width %}width="{{ include.width }}"{% endif %} {% if include.height %}height="{{ include.height }}"{% endif %}/>
+  <img class="{{ align }}" src="{{ src | absolute_url }}" alt="{{ include.caption }}" {% if include.width %}width="{{ include.width }}"{% endif %} {% if include.height %}height="{{ include.height }}"{% endif %}/>
   <figcaption class="{{ align }}">{{ include.caption }}</figcaption>
 </figure>
 {% else %}
-<img class="{{ align }}" src="{{ include.src | absolute_url }}" alt="{{ include.alt }}" {% if include.width %}width="{{ include.width }}"{% endif %} {% if include.height %}height="{{ include.height }}"{% endif %}/>
+<img class="{{ align }}" src="{{ src | absolute_url }}" alt="{{ include.alt }}" {% if include.width %}width="{{ include.width }}"{% endif %} {% if include.height %}height="{{ include.height }}"{% endif %}/>
 {% endif %}

data/_layouts/home.html

@@ -13,21 +13,18 @@ layout: default
   {% endif %}
 
   {%- if posts.size > 0 -%}
-    {%- if page.list_title -%}
-      <h2 class="post-list-heading">{{ page.list_title }}</h2>
-    {%- endif -%}
     <ul class="post-list">
       {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
       {%- for post in posts -%}
       <li>
-        <h3>
+        <h2>
           <a class="post-link" href="{{ post.url | relative_url }}">
             {{ post.title | escape }}
           </a>
-        </h3>
+        </h2>
         <span class="post-meta">{{ post.date | date: date_format }}</span>
-        {%- if page.show_excerpts != false -%}
-          <p>{{ post.excerpt }}</p>
+        {%- if post.show_excerpts != false -%}
+          <div class="post-excerpt">{{ post.excerpt }}</div>
         {%- endif -%}
       </li>
       {%- endfor -%}

data/_layouts/post.html

@@ -47,6 +47,8 @@ layout: default
 
   <div class="wrapper">
     <div class="post-content e-content" itemprop="articleBody">
+      {% include toc.html html=content class="toc" %}
+
       {{ content }}
 
       {% if page.comments != false and jekyll.environment == "production" %}

data/_sass/hamilton/base.scss

@@ -19,7 +19,7 @@ h1, h2, h3, h4, h5, h6,
 p, blockquote, pre,
 ul, ol, dl, figure,
 %vertical-rhythm {
-  margin-bottom: $spacing-unit / 2;
+  margin-bottom: $spacing-unit;
 }
 
 /**
@@ -100,10 +100,8 @@ a {
  * Blockquotes
  */
 blockquote {
-  border-left: 0.3em solid;
-  padding-left: $spacing-unit / 2;
-  padding-top: $spacing-unit / 4;
-  padding-bottom: $spacing-unit / 4;
+  border-left: 0.1em solid;
+  padding-left: $spacing-unit;
   font-style: italic;
 
   > :last-child {
@@ -125,17 +123,14 @@ code {
 }
 
 code {
-  @include relative-font-size(0.9);
   padding: 1px 5px;
 }
 
 pre {
-  border: 1px solid;
   padding: 8px 12px;
   overflow-x: auto;
 
   > code {
-    @include relative-font-size(0.7);
     line-height: $base-line-height * $base-font-size * 0.7;
     border: 0;
     padding-right: 0;

data/_sass/hamilton/layout.scss

@@ -121,29 +121,36 @@
   margin-top: $spacing-unit;
 }
 
-.post-list-heading {
-  @include relative-font-size(1.75);
-}
-
 .post-list {
   margin-left: 0;
   padding-left: 0;
   list-style: none;
 
   li {
+    padding-top: $spacing-unit / 2;
     padding-bottom: $spacing-unit / 2;
     border-bottom: 1px solid;
-    margin-bottom: 2 * $spacing-unit;
+    margin-bottom: $spacing-unit;
+
+    h2 {
+      margin-bottom: 0;
+    }
+
+    .post-excerpt {
+      margin-top: $spacing-unit / 2;
+
+      p {
+        margin-bottom: 0;
+      }
+    }
   }
 }
 
 .post-link {
-  display: block;
-  line-height: $base-line-height * $base-font-size * 2;
-  @include relative-font-size(2);
+  @include relative-font-size(1.5);
 
   @media screen and (min-width: $on-large) {
-    @include relative-font-size(2.236);
+    @include relative-font-size(1.55);
   }
 }
 
@@ -187,6 +194,7 @@
   padding-top: $spacing-unit * 2.5;
   padding-bottom: $spacing-unit * 2.5;
   margin-bottom: $spacing-unit * 2;
+  text-align: center;
 }
 
 .post-meta {
@@ -194,12 +202,18 @@
   margin-bottom: $spacing-unit / 2;
 }
 
-.post-tag {
-  margin-right: $spacing-unit / 2;
+.post-tags {
+  .post-tag {
+    margin-right: $spacing-unit / 2;
+  }
+  
+  > :last-child {
+    margin-right: 0;
+  }
 }
 
-// Formula of calculating the relative font size of hn: 1 + 2 * 0.618^n
 
+// About font sizes for h1-h6, refer to https://stackoverflow.com/a/6140504/13261366
 .post-title,
 .post-content h1 {
   @include relative-font-size(2);
@@ -208,7 +222,7 @@
   line-height: $base-line-height * $base-font-size * 2;
 
   @media screen and (min-width: $on-large) {
-    @include relative-font-size(2.236);
+    @include relative-font-size(2.5);
   }
 }
 
@@ -221,31 +235,31 @@
   h5, h6 { margin-top: $spacing-unit }
 
   h2 {
-    @include relative-font-size(1.6);
+    @include relative-font-size(1.5);
 
     @media screen and (min-width: $on-large) {
-      @include relative-font-size(1.764);
+      @include relative-font-size(1.55);
     }
   }
 
   h3 {
-    @include relative-font-size(1.4);
+    @include relative-font-size(1.17);
 
     @media screen and (min-width: $on-large) {
-      @include relative-font-size(1.472);
+      @include relative-font-size(1.175);
     }
   }
 
   h4 {
-    @include relative-font-size(1.292);
+    @include relative-font-size(1.12);
   }
 
   h5 {
-    @include relative-font-size(1.18);
+    @include relative-font-size(0.83);
   }
 
   h6 {
-    @include relative-font-size(1.111);
+    @include relative-font-size(0.75);
   }
 }
 
@@ -279,7 +293,6 @@
 .post-list-by-taxonomy {
   time {
     font-family: $code-font-family;
-    @include relative-font-size(0.9);
   }
 }
 
@@ -330,23 +343,52 @@ figcaption.align-center {
 .site-footer {
   border-top: 1px solid;
   padding: $spacing-unit 0;
-  text-align: center;
   @include relative-font-size(0.8);
 
-  .feed-subscribe {
-    font-weight: bold;
-    text-align: left;
-    .feed-icon {
-      margin-right: 0.3em;
-    }
+  p, ul {
+    margin-bottom: $spacing-unit / 4;
+  }
+}
+
+@media screen and (min-width: $on-medium) {
+  .footer-col-wrapper {
+    display: flex
   }
 
+  .footer-col {
+    width: calc(100% - (#{$spacing-unit} / 2));
+    padding: 0 ($spacing-unit / 2);
 
-  .social-icons {
-    padding: $spacing-unit 0;
+    &:first-child {
+      padding-right: $spacing-unit / 2;
+      padding-left: 0;
+    }
 
-    .social-icon {
-      margin: 0.3em;
+    &:last-child {
+      padding-right: 0;
+      padding-left: $spacing-unit / 2;
     }
   }
 }
+
+.feed-subscribe {
+  font-weight: bold;
+  text-align: left;
+  .feed-icon {
+    margin-right: 0.3em;
+  }
+}
+
+.contact-list {
+  list-style: none;
+  margin-left: 0;
+}
+
+.social-icons {
+  text-align: center;
+  margin-top: $spacing-unit / 2;
+
+  .social-icon {
+    margin: 0.3em;
+  }
+}

data/_sass/hamilton/skin.scss

@@ -19,7 +19,7 @@ a {
 
 blockquote {
   color: $text-color-light;
-  border-left-color: $border-color;
+  border-left-color: $border-color-light;
 }
 
 pre,
@@ -28,7 +28,7 @@ code {
 }
 
 pre {
-  border-color: $border-color-light;
+  box-shadow: $box-shadow;
 }
 
 .highlight {

data/_sass/hamilton/skins/daylight.scss

@@ -16,7 +16,7 @@ $table-header-bg-color: mix($background-color, $border-color, 80%) !default;
 $table-header-border:   $border-color !default;
 $table-border-color:    lighten($border-color, 20%) !default;
 
-$box-shadow:            0 1px 1px rgba(0, 0, 0, 0.205) !default;
+$box-shadow:            0 0 4px rgba(17,17,17,0.4) inset !default;
 
 $subscribe-color:       #b21000 !default;
 

data/_sass/hamilton/skins/midnight.scss

@@ -1,13 +1,13 @@
-$text-color:            #fff !default;
-$text-color-light:      #dbdbdb !default;
-$background-color:      #2b2e33 !default;
+$text-color:            lightgrey !default;
+$text-color-light:      silver !default;
+$background-color:      #121212 !default;
 $code-background-color: #49483e !default;
 
-$border-color:          mix(#fff, $background-color, 20%) !default;
+$border-color:          mix($text-color, $background-color, 22%) !default;
 $border-color-light:    darken($border-color, 10%) !default;
 $border-color-dark:     lighten($border-color, 10%) !default;
 
-$link-base-color:       #00f8cf !default;
+$link-base-color:       #00b1c9 !default;
 $link-visited-color:    darken($link-base-color, 5%) !default;
 
 $table-text-color:      lighten($text-color, 18%) !default;
@@ -16,7 +16,7 @@ $table-header-bg-color: mix($background-color, $border-color-light, 5%) !default
 $table-header-border:   lighten($border-color, 30%) !default;
 $table-border-color:    lighten($border-color, 20%) !default;
 
-$box-shadow:            0 1px 1px rgba(0, 0, 0, 0.205) !default;
+$box-shadow:            0 0 4px rgba(255,255,255,0.4) inset !default;
 
 $subscribe-color:       tomato !default;
 

data/_sass/hamilton/skins/sunrise.scss

@@ -16,7 +16,7 @@ $table-header-bg-color: mix($background-color, $border-color, 70%) !default;
 $table-header-border:   $border-color !default;
 $table-border-color:    $border-color-light !default;
 
-$box-shadow:            0 1px 1px rgba(0, 0, 0, 0.205) !default;
+$box-shadow:            0 0 4px rgba(34,34,34,0.4) inset !default;
 
 $subscribe-color:       #004e00 !default;
 

data/_sass/hamilton/variables.scss

@@ -1,8 +1,8 @@
 // Fonts
-$base-font-family:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !default;
-$title-font-family: "Brush Script MT", $base-font-family !default;
-$reading-font-family: "Georgia", $base-font-family !default;
-$code-font-family:  "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace;
+$base-font-family:  "Open Sans", "Noto Serif SC" !default;
+$title-font-family: "Dancing Script" !default;
+$reading-font-family: Roboto, "Noto Sans SC" !default;
+$code-font-family:  Inconsolata !default;
 $base-font-size:    18px !default;
 $base-line-height:  1.4 !default;
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-hamilton
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 1.2.0
 platform: ruby
 authors:
 - Shangzhi Huang
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-04-10 00:00:00.000000000 Z
+date: 2020-06-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -96,7 +96,7 @@ dependencies:
         version: '12.0'
 description: 
 email:
-- ngzhio@protonmail.com
+- ngzhio@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -155,7 +155,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.6
+rubygems_version: 3.0.1
 signing_key: 
 specification_version: 4
 summary: Another minimal style of Jekyll theme for writers