jekyll-theme-hamilton 0.2.1 → 1.4.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5f249693147fe84b3daec97be5eced96d45f3f8bd49bb539232e37928d54546a
4
- data.tar.gz: 83e131e6b92b3e83e7249f4b945fb68bd7a263fba27a391a4f13e41307d50979
3
+ metadata.gz: 0cbbaea4092791fef3abbe86413a793e46df9db0bcb5b198dc8a86946ce541a4
4
+ data.tar.gz: 9df9982f13bdd725c83d3f9988494bf4caaa74f1d1884a11112edb1288a91f85
5
5
  SHA512:
6
- metadata.gz: 2d3342f2f17ce90b1e2ebc310ddf45b8978b181d94be59ab2e0937b6877b7ca52a0f224ee4a20d6cfd3202ced9a60898ff8b5620c1d2c4e26672d33630176a8a
7
- data.tar.gz: e5099f913e02e14f47a961f086437cc2b6a18a2708c049a983be665003c436f0375ddf1edab2e26dcba9124a4e2c952bbce2ef2d514b71ebbae56f02c1e610d0
6
+ metadata.gz: 599f91e99e5aa734856d7f39ff4f474056ef7f9daa6b18129be5a2fc2d349f47bb4c1ee5c788b2ae2b187efdc9f70a817196846d7462bbc7c6ed6f43c3fb9183
7
+ data.tar.gz: a63b5a6872435c6b47b186cc739841672a82e8701ad8c9ef07551a4ad1317141513747194c5e5c977fcb211fb69250f2debefed8dab50e29896e07c2c2fb7963
data/README.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # Hamilton <!-- omit in toc -->
2
2
 
3
- Another minimal style of Jekyll theme for writers. The original purpose of this theme is to be a replacement of the default Jekyll theme -- [Minima](https://github.com/jekyll/minima). Hamilton is an enhancement of Minima but still, keep in minimal.
3
+ A minimal and beautiful Jekyll theme best for writing and note-taking.
4
+
5
+ The original purpose of this theme is to be a replacement of the default Jekyll theme -- [Minima](https://github.com/jekyll/minima). Hamilton is an enhancement of Minima but still, keep in minimal.
4
6
 
5
7
  Please check out the [demo](https://ngzhio.github.io/jekyll-theme-hamilton/).
6
8
 
@@ -79,7 +81,9 @@ After installation, you can run `jekyll serve` to check out your site, but befor
79
81
 
80
82
  | Parameters | Types | Specifications |
81
83
  |:---------- |:----- |:-------------- |
82
- | `author` | string | The author name of the site; It would be showed in the copyright statement. |
84
+ | `author` | string | The name of the author of the site; It would be showed in the copyright statement. |
85
+ | `avatar` | string | The avatar of the author of the site. |
86
+ | `email` | string | The email of the author of the site. |
83
87
  | `skin` | string | The skin name. See more information on the [Customization](#customization) section. |
84
88
  | `lang` | string | The language of the site; The default value is `en`. |
85
89
  | `paginate` | int | The number of posts on each page. To enable pagination, you must use a third-party plugin, e.g. [`jekyll-paginate`](https://github.com/jekyll/jekyll-paginate), [`jekyll-paginate-v2`](https://github.com/sverrirs/jekyll-paginate-v2), or [`jekyll-pagination`](https://github.com/prometheus-ev/jekyll-pagination). |
@@ -156,6 +160,23 @@ You can create a file `_data/navigation.yml` to configure links to some pages. F
156
160
  url: /tags/
157
161
  ```
158
162
 
163
+ The navigation bar also supports dropdown submenus:
164
+
165
+ ```yml
166
+ - title: About
167
+ url: /about/
168
+ - title: Categories
169
+ url: /categories/
170
+ - title: Tags
171
+ url: /tags/
172
+ - title: More
173
+ sublinks:
174
+ - title: FAQ
175
+ url: /faq/
176
+ - title: Docs
177
+ url: /docs/
178
+ ```
179
+
159
180
  ### Social Media
160
181
 
161
182
  You can create a file `_data/social.yml` to configure links to your social media. For example,
@@ -1,19 +1,6 @@
1
- <footer id="footer" class="site-footer">
2
- <div class="wrapper">
3
- <p class="feed-subscribe">
4
- <a href="{{ 'feed.xml' | relative_url }}">
5
- <i class="feed-icon fas fa-rss"></i><span>Subscribe</span>
6
- </a>
7
- </p>
8
-
9
- {% if site.data.social %}
10
- <div class="social-icons">
11
- {% for social in site.data.social %}
12
- <a class="social-icon" href="{{ social.url }}"><i class="{{ social.icon | default: 'fas fa-link' }} fa-2x" title="{{ social.title }}"></i></a>
13
- {% endfor %}
14
- </div>
15
- {% endif %}
1
+ <div class="footer-col-wrapper">
16
2
 
3
+ <div class="footer-col">
17
4
  <div class="copyright">
18
5
  {% assign year_from = site.posts[-1].date | date: '%Y' %}
19
6
  {% assign year_to = site.time | date: '%Y' %}
@@ -22,20 +9,16 @@
22
9
  {% else %}
23
10
  {% assign year_string = year_from | append: '&nbsp;' | append: '-' | append: '&nbsp;' | append: year_to %}
24
11
  {% endif %}
25
-
26
12
  {% if site.author %}
27
- {% if site.email %}
28
- <p>© {{ year_string }} <a class="u-email" href="mailto:{{ site.email }}">{{ site.author }}</a>; All rights reserved.</p>
29
- {% else %}
30
- <p>© {{ year_string }} {{ site.author }}; All rights reserved.</p>
31
- {% endif %}
13
+ <p>Copyright © {{ year_string }} {{ site.author }}; All rights reserved.</p>
32
14
  {% endif %}
33
-
34
- <p>
35
- Powered by <a href="https://jekyllrb.com/">Jekyll</a> & <a href="https://github.com/ngzhio/jekyll-theme-hamilton">Hamilton</a>
36
- </p>
37
-
38
15
  </div>
16
+ <p>
17
+ Powered by <a href="https://jekyllrb.com/">Jekyll</a> & <a href="https://github.com/ngzhio/jekyll-theme-hamilton">Hamilton</a>
18
+ </p>
19
+ </div>
20
+
21
+ <div class="footer-col">
22
+ <p>{{ site.description | escape }}</p>
39
23
  </div>
40
- </footer>
41
-
24
+ </div>
@@ -14,6 +14,14 @@
14
14
  {% include mathjax.html %}
15
15
  {% endif %}
16
16
 
17
+ <!-- Google Fonts -->
18
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
19
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open%20Sans">
20
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
21
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing%20Script">
22
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto%20Sans%20SC">
23
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto%20Serif%20SC">
24
+
17
25
  <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
18
26
  <link rel="stylesheet" href="{{ '/assets/css/skin.css' | relative_url }}">
19
27
 
@@ -1,27 +1,54 @@
1
- <header class="site-header">
1
+ <div class="wrapper">
2
+ <script>
3
+ function clickSidebarButton() {
4
+ const elem = document.getElementById("site-sidebar")
5
+ if (elem.style.display == "none") {
6
+ elem.style.display = "block";
7
+ } else {
8
+ elem.style.display = "none";
9
+ }
10
+ }
11
+ </script>
12
+ <a class="site-sidebar-button" onclick="clickSidebarButton()">
13
+ {%- if site.avatar contains "://" -%}
14
+ {%- assign avatar = site.avatar -%}
15
+ {%- else -%}
16
+ {%- assign avatar = site.avatar | relative_url -%}
17
+ {%- endif -%}
18
+ <i class="far fa-user"></i>
19
+ </a>
2
20
 
3
- <div class="wrapper">
4
- <a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
21
+ <a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
5
22
 
6
- {% if site.data.navigation %}
7
- <nav class="site-nav">
8
- <input type="checkbox" id="nav-trigger" class="nav-trigger" />
9
- <label for="nav-trigger" title="nav-trigger">
10
- <span class="menu-icon">
11
- <svg viewBox="0 0 18 15" width="18px" height="15px">
12
- <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
13
- </svg>
14
- </span>
15
- </label>
23
+ {% if site.data.navigation %}
24
+ <nav class="site-nav">
25
+ <input type="checkbox" id="nav-trigger" class="nav-trigger" />
26
+ <label for="nav-trigger" title="nav-trigger">
27
+ <span class="menu-icon">
28
+ <svg viewBox="0 0 18 15" width="18px" height="15px">
29
+ <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
30
+ </svg>
31
+ </span>
32
+ </label>
16
33
 
17
- <div class="trigger">
18
- {% for nav in site.data.navigation %}
19
- {% if nav.title %}
20
- <a class="page-link {% if page.url == nav.url %}current-page{% endif %}" href="{{ nav.url | relative_url }}">{{ nav.title | escape }}</a>
34
+ <ul class="trigger">
35
+ {%- for nav in site.data.navigation -%}
36
+ {%- if nav.title -%}
37
+ {% if nav.sublinks %}
38
+ <li class="dropdown" href="#">
39
+ <a href="javascript:void(0)" class="dropbtn">{{ nav.title | escape }}</a>
40
+ <div class="dropdown-content">
41
+ {%- for link in nav.sublinks %}
42
+ <a class="{% if page.url == link.url %}current-page{% endif %}" href="{{ link.url | relative_url }}">{{ link.title | escape }}</a>
43
+ {%- endfor %}
44
+ </div>
45
+ </li>
46
+ {% else %}
47
+ <li><a class="{% if page.url == nav.url %}current-page{% endif %}" href="{{ nav.url | relative_url }}">{{ nav.title | escape }}</a></li>
21
48
  {% endif %}
22
- {% endfor %}
23
- </div>
24
- </nav>
25
- {% endif %}
26
- </div>
27
- </header>
49
+ {%- endif -%}
50
+ {%- endfor -%}
51
+ </ul>
52
+ </nav>
53
+ {% endif %}
54
+ </div>
@@ -0,0 +1,39 @@
1
+ {% if site.avatar -%}
2
+ <div class="sidebar-section">
3
+ {%- if site.avatar contains "://" -%}
4
+ {%- assign avatar = site.avatar -%}
5
+ {%- else -%}
6
+ {%- assign avatar = site.avatar | relative_url -%}
7
+ {%- endif -%}
8
+ <img src="{{ avatar }}" class="author-avatar u-photo align-center" alt="{{ site.author }}">
9
+ </div>
10
+ {%- endif %}
11
+
12
+ <div class="sidebar-section">
13
+ <ul class="contact-list">
14
+ {% if site.author -%}
15
+ <li class="p-name"><i class="sidebar-icon fas fa-at"></i><span>{{ site.author | escape }}</span></li>
16
+ {%- endif %}
17
+ {% if site.email -%}
18
+ <li><a class="u-email" href="mailto:{{ site.email }}"><i class="sidebar-icon fas fa-envelope"></i><span>{{ site.email }}</span></a></li>
19
+ {%- endif %}
20
+ </ul>
21
+ </div>
22
+
23
+ <div class="sidebar-section feed-subscribe">
24
+ <a href="{{ 'feed.xml' | relative_url }}">
25
+ <i class="sidebar-icon fas fa-rss"></i><span>Subscribe</span>
26
+ </a>
27
+ </div>
28
+
29
+ {% if site.data.social -%}
30
+ <div class="sidebar-section">
31
+ <ul class="social-icons">
32
+ {% for social in site.data.social -%}
33
+ <li>
34
+ <a class="social-icon" href="{{ social.url }}"><i class="{{ social.icon | default: 'fas fa-link' }} fa-2x" title="{{ social.title }}"></i></a>
35
+ </li>
36
+ {%- endfor %}
37
+ </ul>
38
+ </div>
39
+ {%- endif %}
@@ -6,15 +6,23 @@
6
6
  </head>
7
7
 
8
8
  <body>
9
-
10
- {% include header.html %}
11
-
12
- <main class="page-content" aria-label="Content">
13
- {{ content }}
14
- </main>
15
-
16
- {% include footer.html %}
17
-
9
+ <div class="site-container">
10
+ <header class="site-header">
11
+ {% include header.html %}
12
+ </header>
13
+
14
+ <div class="site-body wrapper">
15
+ <aside class="site-sidebar" id="site-sidebar">
16
+ {% include sidebar.html %}
17
+ </aside>
18
+ <main class="site-main" aria-label="Content">
19
+ {{ content }}
20
+ <footer class="site-footer">
21
+ {% include footer.html %}
22
+ </footer>
23
+ </main>
24
+ </div>
25
+ </div>
18
26
  </body>
19
27
 
20
28
  </html>
@@ -2,7 +2,7 @@
2
2
  layout: default
3
3
  ---
4
4
 
5
- <div class="home wrapper">
5
+ <div class="home">
6
6
 
7
7
  {{ content }}
8
8
 
@@ -13,21 +13,18 @@ layout: default
13
13
  {% endif %}
14
14
 
15
15
  {%- if posts.size > 0 -%}
16
- {%- if page.list_title -%}
17
- <h2 class="post-list-heading">{{ page.list_title }}</h2>
18
- {%- endif -%}
19
16
  <ul class="post-list">
20
17
  {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
21
18
  {%- for post in posts -%}
22
19
  <li>
23
- <h3>
20
+ <h2>
24
21
  <a class="post-link" href="{{ post.url | relative_url }}">
25
22
  {{ post.title | escape }}
26
23
  </a>
27
- </h3>
24
+ </h2>
28
25
  <span class="post-meta">{{ post.date | date: date_format }}</span>
29
- {%- if page.show_excerpts != false -%}
30
- <p>{{ post.excerpt }}</p>
26
+ {%- if post.show_excerpts != false -%}
27
+ <div class="post-excerpt">{{ post.excerpt }}</div>
31
28
  {%- endif -%}
32
29
  </li>
33
30
  {%- endfor -%}
@@ -5,15 +5,11 @@ layout: default
5
5
  <article class="post">
6
6
 
7
7
  <header class="post-header">
8
- <div class="wrapper">
9
- <h1 class="post-title">{{ page.title | escape }}</h1>
10
- </div>
8
+ <h1 class="post-title">{{ page.title | escape }}</h1>
11
9
  </header>
12
10
 
13
- <div class="wrapper">
14
- <div class="post-content">
15
- {{ content }}
16
- </div>
11
+ <div class="post-content">
12
+ {{ content }}
17
13
  </div>
18
14
 
19
15
  </article>
@@ -6,53 +6,48 @@ layout: default
6
6
 
7
7
  <header class="post-header">
8
8
 
9
- <div class="wrapper">
10
-
11
- <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
12
- <p class="post-meta">
13
- {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
14
- <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
15
- {{ page.date | date: date_format }}
9
+ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
10
+ <p class="post-meta">
11
+ {%- assign date_format = site.date_format | default: "%b %-d, %Y" -%}
12
+ <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
13
+ {{ page.date | date: date_format }}
14
+ </time>
15
+ {%- if page.modified_date -%}
16
+ ~
17
+ {%- assign mdate = page.modified_date | date_to_xmlschema -%}
18
+ <time class="dt-modified" datetime="{{ mdate }}" itemprop="dateModified">
19
+ {{ mdate | date: date_format }}
16
20
  </time>
17
- {%- if page.modified_date -%}
18
- ~
19
- {%- assign mdate = page.modified_date | date_to_xmlschema -%}
20
- <time class="dt-modified" datetime="{{ mdate }}" itemprop="dateModified">
21
- {{ mdate | date: date_format }}
22
- </time>
23
- {%- endif -%}
24
- {%- if page.author -%}
25
- • {% for author in page.author %}
26
- <span itemprop="author" itemscope itemtype="http://schema.org/Person">
27
- <span class="p-author h-card" itemprop="name">{{ author }}</span></span>
28
- {%- if forloop.last == false %}, {% endif -%}
29
- {% endfor %}
30
- {%- endif -%}
21
+ {%- endif -%}
22
+ {%- if page.author -%}
23
+ {% for author in page.author %}
24
+ <span itemprop="author" itemscope itemtype="http://schema.org/Person">
25
+ <span class="p-author h-card" itemprop="name">{{ author }}</span></span>
26
+ {%- if forloop.last == false %}, {% endif -%}
27
+ {% endfor %}
28
+ {%- endif -%}
29
+ </p>
30
+
31
+ {% if page.tags.size > 0 %}
32
+ <p class="post-meta post-tags">
33
+ {% assign tags = page.tags | sort %}
34
+ {% for tag in tags %}
35
+ <span class="post-tag">
36
+ {% assign slugified_tag = tag | slugify %}
37
+ <a href="{{ '/tags/#:tag' | replace: ':tag', slugified_tag | relative_url }}">#{{ slugified_tag }}</a>
38
+ </span>
39
+ {% endfor %}
31
40
  </p>
32
-
33
- {% if page.tags.size > 0 %}
34
- <p class="post-meta post-tags">
35
- {% assign tags = page.tags | sort %}
36
- {% for tag in tags %}
37
- <span class="post-tag">
38
- {% assign slugified_tag = tag | slugify %}
39
- <a href="{{ '/tags/#:tag' | replace: ':tag', slugified_tag | relative_url }}">#{{ slugified_tag }}</a>
40
- </span>
41
- {% endfor %}
42
- </p>
43
- {% endif %}
44
- </div>
41
+ {% endif %}
45
42
 
46
43
  </header>
47
44
 
48
- <div class="wrapper">
49
- <div class="post-content e-content" itemprop="articleBody">
50
- {{ content }}
45
+ <div class="post-content e-content" itemprop="articleBody">
46
+ {{ content }}
51
47
 
52
- {% if page.comments != false and jekyll.environment == "production" %}
53
- {% include disqus.html %}
54
- {% endif %}
55
- </div>
48
+ {% if page.comments != false and jekyll.environment == "production" %}
49
+ {% include disqus.html %}
50
+ {% endif %}
56
51
  </div>
57
52
 
58
53
  </article>
@@ -17,9 +17,9 @@ dl, dd, ol, ul, figure {
17
17
  */
18
18
  h1, h2, h3, h4, h5, h6,
19
19
  p, blockquote, pre,
20
- ul, ol, dl, figure,
20
+ ul, ol, dl, figure, iframe,
21
21
  %vertical-rhythm {
22
- margin-bottom: $spacing-unit / 2;
22
+ margin-bottom: $spacing-unit;
23
23
  }
24
24
 
25
25
  /**
@@ -123,7 +123,6 @@ code {
123
123
  }
124
124
 
125
125
  code {
126
- @include relative-font-size(0.9);
127
126
  padding: 1px 5px;
128
127
  }
129
128
 
@@ -132,7 +131,6 @@ pre {
132
131
  overflow-x: auto;
133
132
 
134
133
  > code {
135
- @include relative-font-size(0.7);
136
134
  line-height: $base-line-height * $base-font-size * 0.7;
137
135
  border: 0;
138
136
  padding-right: 0;
@@ -1,3 +1,14 @@
1
+ /**
2
+ * Site container
3
+ */
4
+ .site-container {
5
+ height: 100vh;
6
+ width: 100vw;
7
+ display: grid;
8
+ grid-template-columns: 1fr;
9
+ grid-template-rows: $base-font-size * 3 1fr;
10
+ }
11
+
1
12
  /**
2
13
  * Site header
3
14
  */
@@ -6,9 +17,28 @@
6
17
  border-bottom: 1px solid;
7
18
  min-height: $base-font-size * 3;
8
19
  line-height: $base-font-size * 3;
20
+ position: sticky;
21
+ top: 0;
22
+
23
+ @include media-query($on-small) {
24
+ display: flex;
25
+ }
26
+ }
27
+
28
+ .site-sidebar-button {
29
+ position: absolute;
30
+ top: -2px;
31
+ left: $spacing-unit / 2;
32
+
33
+ img {
34
+ width: $base-font-size * 2.5;
35
+ height: auto;
36
+ border-radius: 50%;
37
+ }
9
38
 
10
- // Positioning context for the mobile navigation icon
11
- position: relative;
39
+ @media screen and (min-width: $on-small) {
40
+ display: none;
41
+ }
12
42
  }
13
43
 
14
44
  .site-title {
@@ -18,8 +48,8 @@
18
48
  margin-bottom: 0;
19
49
  float: left;
20
50
 
21
- @include media-query($on-medium) {
22
- padding-right: 45px;
51
+ @include media-query($on-small) {
52
+ float: center;
23
53
  }
24
54
  }
25
55
 
@@ -68,16 +98,36 @@
68
98
  padding-bottom: 5px;
69
99
  }
70
100
 
71
- .page-link {
72
- line-height: $base-line-height * $base-font-size * 1.15;
73
- display: block;
74
- padding: 5px 5px;
101
+ ul.trigger {
102
+ list-style-type: none;
103
+ margin: 0;
104
+ padding: 0;
105
+ overflow: hidden;
106
+
107
+ li a {
108
+ line-height: $base-line-height * $base-font-size * 1.15;
109
+ display: inline;
110
+ padding: 5px 10px;
111
+ margin-left: auto;
112
+ }
75
113
 
76
- // Gaps between nav items, but not on the last one
77
- &:not(:last-child) {
78
- margin-right: 0;
114
+ .dropdown-content {
115
+ display: none;
116
+ position: absolute;
117
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
118
+ z-index: 1;
119
+ }
120
+
121
+ .dropdown-content a {
122
+ padding: 5px 10px;
123
+ display: inline-block;
124
+ text-align: right;
125
+ margin-left: auto;
126
+ }
127
+
128
+ .dropdown:hover .dropdown-content {
129
+ display: block;
79
130
  }
80
- margin-left: 10px;
81
131
  }
82
132
 
83
133
  .current-page {
@@ -102,18 +152,143 @@
102
152
  display: block;
103
153
  }
104
154
 
105
- .page-link {
106
- display: inline;
107
- padding: 0;
155
+ ul.trigger {
156
+ li {
157
+ float: left;
158
+ }
159
+
160
+ li a {
161
+ display: inline-block;
162
+ text-align: center;
163
+ padding: 5px 5px;
164
+
165
+ // Gaps between nav items, but not on the last one
166
+ &:not(:last-child) {
167
+ margin-right: 0;
168
+ }
169
+ margin-left: 10px;
170
+ }
108
171
 
109
- &:not(:last-child) {
110
- margin-right: 10px;
172
+ .dropdown-content a {
173
+ display: block;
174
+ text-align: left;
175
+ padding: 5px 15px 5px 5px;
176
+ margin-left: 10px;
111
177
  }
112
- margin-left: auto;
113
178
  }
114
179
  }
115
180
  }
116
181
 
182
+ /**
183
+ * Site body
184
+ */
185
+ .site-body {
186
+ display: grid;
187
+ grid-template-columns: calc(#{$content-width} * 0.2) 1fr;
188
+ overflow: hidden;
189
+
190
+ @include media-query($on-medium) {
191
+ grid-template-columns: calc(#{$content-width} * 0.15) 1fr;
192
+ }
193
+
194
+ @include media-query($on-small) {
195
+ grid-template-columns: 1fr;
196
+ }
197
+ }
198
+
199
+ /**
200
+ * Site sidebar
201
+ */
202
+ .site-sidebar {
203
+ padding: $spacing-unit / 2;
204
+ border-right: 1px solid;
205
+ @include relative-font-size(0.8);
206
+
207
+ @include media-query($on-medium) {
208
+ @include relative-font-size(0.6);
209
+ }
210
+
211
+ @include media-query($on-small) {
212
+ display: none;
213
+ border-right: none;
214
+ border-bottom: 1px solid;
215
+ }
216
+
217
+ @media screen and (min-width: $on-small) {
218
+ display: block !important;
219
+ }
220
+ }
221
+
222
+ .sidebar-section {
223
+ padding-bottom: $spacing-unit / 2;
224
+ border-bottom: 1px solid;
225
+ margin-bottom: $spacing-unit / 2;
226
+
227
+ &:last-child {
228
+ padding-bottom: 0;
229
+ border-bottom: 0;
230
+ margin-bottom: 0;
231
+ }
232
+ }
233
+
234
+ .sidebar-icon {
235
+ margin-right: 0.5em;
236
+ }
237
+
238
+ .feed-subscribe {
239
+ font-weight: bold;
240
+ text-align: left;
241
+ }
242
+
243
+ .contact-list {
244
+ list-style: none;
245
+ margin-left: 0;
246
+ margin-bottom: 0;
247
+ }
248
+
249
+ .social-icons {
250
+ list-style: none;
251
+ margin-left: 0;
252
+ margin-bottom: 0;
253
+ text-align: left;
254
+ display: flex;
255
+
256
+ .social-icon {
257
+ margin: 0.3em;
258
+ }
259
+ }
260
+
261
+ .author-avatar {
262
+ width: $base-font-size * 9;
263
+ height: auto;
264
+ border-radius: 50%;
265
+ }
266
+
267
+ /**
268
+ * Site main
269
+ */
270
+ .site-main {
271
+ flex: 1 0 auto;
272
+ overflow-y: scroll;
273
+
274
+ // Hide scrollbar for IE, Edge and Firefox
275
+ -ms-overflow-style: none; // IE and Edge
276
+ scrollbar-width: none; // Firefox
277
+
278
+ padding-left: $spacing-unit / 2;
279
+ padding-right: $spacing-unit / 2;
280
+
281
+ @include media-query($on-small) {
282
+ padding-left: 0;
283
+ padding-right: 0;
284
+ }
285
+ }
286
+
287
+ // Hide scrollbar for Chrome, Safari and Opera
288
+ .site-main::-webkit-scrollbar {
289
+ display: none;
290
+ }
291
+
117
292
  /**
118
293
  * Homepage
119
294
  */
@@ -121,29 +296,36 @@
121
296
  margin-top: $spacing-unit;
122
297
  }
123
298
 
124
- .post-list-heading {
125
- @include relative-font-size(1.75);
126
- }
127
-
128
299
  .post-list {
129
300
  margin-left: 0;
130
301
  padding-left: 0;
131
302
  list-style: none;
132
303
 
133
304
  li {
305
+ padding-top: $spacing-unit / 2;
134
306
  padding-bottom: $spacing-unit / 2;
135
307
  border-bottom: 1px solid;
136
- margin-bottom: 2 * $spacing-unit;
308
+ margin-bottom: $spacing-unit;
309
+
310
+ h2 {
311
+ margin-bottom: 0;
312
+ }
313
+
314
+ .post-excerpt {
315
+ margin-top: $spacing-unit / 2;
316
+
317
+ p {
318
+ margin-bottom: 0;
319
+ }
320
+ }
137
321
  }
138
322
  }
139
323
 
140
324
  .post-link {
141
- display: block;
142
- line-height: $base-line-height * $base-font-size * 2;
143
- @include relative-font-size(2);
325
+ @include relative-font-size(1.5);
144
326
 
145
327
  @media screen and (min-width: $on-large) {
146
- @include relative-font-size(2.236);
328
+ @include relative-font-size(1.55);
147
329
  }
148
330
  }
149
331
 
@@ -173,20 +355,15 @@
173
355
  }
174
356
  }
175
357
 
176
- /**
177
- * Page content
178
- */
179
- .page-content {
180
- flex: 1 0 auto;
181
- }
182
-
183
358
  /**
184
359
  * Posts
185
360
  */
186
361
  .post-header {
187
- padding-top: $spacing-unit * 2.5;
188
- padding-bottom: $spacing-unit * 2.5;
362
+ padding-top: $spacing-unit * 2;
363
+ padding-bottom: $spacing-unit / 2;
364
+ border-bottom: 1px solid;
189
365
  margin-bottom: $spacing-unit * 2;
366
+ text-align: center;
190
367
  }
191
368
 
192
369
  .post-meta {
@@ -194,12 +371,18 @@
194
371
  margin-bottom: $spacing-unit / 2;
195
372
  }
196
373
 
197
- .post-tag {
198
- margin-right: $spacing-unit / 2;
374
+ .post-tags {
375
+ .post-tag {
376
+ margin-right: $spacing-unit / 2;
377
+ }
378
+
379
+ > :last-child {
380
+ margin-right: 0;
381
+ }
199
382
  }
200
383
 
201
- // Formula of calculating the relative font size of hn: 1 + 2 * 0.618^n
202
384
 
385
+ // About font sizes for h1-h6, refer to https://stackoverflow.com/a/6140504/13261366
203
386
  .post-title,
204
387
  .post-content h1 {
205
388
  @include relative-font-size(2);
@@ -208,7 +391,7 @@
208
391
  line-height: $base-line-height * $base-font-size * 2;
209
392
 
210
393
  @media screen and (min-width: $on-large) {
211
- @include relative-font-size(2.236);
394
+ @include relative-font-size(2.5);
212
395
  }
213
396
  }
214
397
 
@@ -221,31 +404,31 @@
221
404
  h5, h6 { margin-top: $spacing-unit }
222
405
 
223
406
  h2 {
224
- @include relative-font-size(1.6);
407
+ @include relative-font-size(1.5);
225
408
 
226
409
  @media screen and (min-width: $on-large) {
227
- @include relative-font-size(1.764);
410
+ @include relative-font-size(1.55);
228
411
  }
229
412
  }
230
413
 
231
414
  h3 {
232
- @include relative-font-size(1.4);
415
+ @include relative-font-size(1.17);
233
416
 
234
417
  @media screen and (min-width: $on-large) {
235
- @include relative-font-size(1.472);
418
+ @include relative-font-size(1.175);
236
419
  }
237
420
  }
238
421
 
239
422
  h4 {
240
- @include relative-font-size(1.292);
423
+ @include relative-font-size(1.12);
241
424
  }
242
425
 
243
426
  h5 {
244
- @include relative-font-size(1.18);
427
+ @include relative-font-size(0.83);
245
428
  }
246
429
 
247
430
  h6 {
248
- @include relative-font-size(1.111);
431
+ @include relative-font-size(0.75);
249
432
  }
250
433
  }
251
434
 
@@ -279,7 +462,6 @@
279
462
  .post-list-by-taxonomy {
280
463
  time {
281
464
  font-family: $code-font-family;
282
- @include relative-font-size(0.9);
283
465
  }
284
466
  }
285
467
 
@@ -328,25 +510,33 @@ figcaption.align-center {
328
510
  * Site footer
329
511
  */
330
512
  .site-footer {
513
+ margin-top: $spacing-unit * 2;
331
514
  border-top: 1px solid;
332
515
  padding: $spacing-unit 0;
333
- text-align: center;
334
516
  @include relative-font-size(0.8);
335
517
 
336
- .feed-subscribe {
337
- font-weight: bold;
338
- text-align: left;
339
- .feed-icon {
340
- margin-right: 0.3em;
341
- }
518
+ p, ul {
519
+ margin-bottom: $spacing-unit / 4;
342
520
  }
521
+ }
343
522
 
523
+ @media screen and (min-width: $on-medium) {
524
+ .footer-col-wrapper {
525
+ display: flex
526
+ }
344
527
 
345
- .social-icons {
346
- margin-bottom: $spacing-unit;
528
+ .footer-col {
529
+ width: calc(100% - (#{$spacing-unit} / 2));
530
+ padding: 0 ($spacing-unit / 2);
531
+
532
+ &:first-child {
533
+ padding-right: $spacing-unit / 2;
534
+ padding-left: 0;
535
+ }
347
536
 
348
- .social-icon {
349
- margin: 0.3em;
537
+ &:last-child {
538
+ padding-right: 0;
539
+ padding-left: $spacing-unit / 2;
350
540
  }
351
541
  }
352
542
  }
@@ -63,10 +63,15 @@ table {
63
63
  ///////// Layout ///////////
64
64
 
65
65
  .site-header {
66
+ background-color: $background-color;
66
67
  border-top-color: $border-color-dark;
67
68
  border-bottom-color: $border-color-light;
68
69
  }
69
70
 
71
+ .site-sidebar {
72
+ border-color: $border-color-light;
73
+ }
74
+
70
75
  .site-title {
71
76
  color: $text-color;
72
77
 
@@ -85,9 +90,13 @@ table {
85
90
  }
86
91
  }
87
92
 
88
- .page-link {
93
+ li a {
89
94
  color: $text-color;
90
95
  }
96
+
97
+ .dropdown-content {
98
+ background-color: $border-color-light;
99
+ }
91
100
  }
92
101
 
93
102
  .post-list {
@@ -105,7 +114,7 @@ table {
105
114
  }
106
115
 
107
116
  .post-header {
108
- background-color: $border-color-light;
117
+ border-bottom-color: $border-color-light;
109
118
  }
110
119
 
111
120
  .post-meta {
@@ -139,6 +148,10 @@ table {
139
148
  border-top-color: $border-color-light;
140
149
  }
141
150
 
151
+ .sidebar-section {
152
+ border-bottom-color: $border-color-light;
153
+ }
154
+
142
155
  .feed-subscribe {
143
156
  a {
144
157
  color: $subscribe-color;
@@ -1,13 +1,13 @@
1
- $text-color: #fff !default;
2
- $text-color-light: #dbdbdb !default;
3
- $background-color: #2b2e33 !default;
1
+ $text-color: lightgrey !default;
2
+ $text-color-light: silver !default;
3
+ $background-color: #121212 !default;
4
4
  $code-background-color: #49483e !default;
5
5
 
6
- $border-color: mix(#fff, $background-color, 20%) !default;
6
+ $border-color: mix($text-color, $background-color, 22%) !default;
7
7
  $border-color-light: darken($border-color, 10%) !default;
8
8
  $border-color-dark: lighten($border-color, 10%) !default;
9
9
 
10
- $link-base-color: #00f8cf !default;
10
+ $link-base-color: #00b1c9 !default;
11
11
  $link-visited-color: darken($link-base-color, 5%) !default;
12
12
 
13
13
  $table-text-color: lighten($text-color, 18%) !default;
@@ -1,15 +1,15 @@
1
1
  // Fonts
2
- $base-font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !default;
3
- $title-font-family: "Brush Script MT", $base-font-family !default;
4
- $reading-font-family: "Georgia", $base-font-family !default;
5
- $code-font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace;
2
+ $base-font-family: "Open Sans", "Noto Serif SC" !default;
3
+ $title-font-family: "Dancing Script" !default;
4
+ $reading-font-family: Roboto, "Noto Sans SC" !default;
5
+ $code-font-family: Inconsolata !default;
6
6
  $base-font-size: 18px !default;
7
7
  $base-line-height: 1.4 !default;
8
8
 
9
9
  // Layouts
10
10
  $spacing-unit: 2rem !default;
11
- $content-width: 900px !default;
11
+ $content-width: 1200px !default;
12
12
 
13
- $on-small: 500px !default;
14
- $on-medium: 750px !default;
15
- $on-large: 900px !default;
13
+ $on-small: 600px !default;
14
+ $on-medium: 900px !default;
15
+ $on-large: 1200px !default;
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-hamilton
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.1
4
+ version: 1.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Shangzhi Huang
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-04-20 00:00:00.000000000 Z
11
+ date: 2020-07-01 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -111,6 +111,7 @@ files:
111
111
  - _includes/header.html
112
112
  - _includes/image.html
113
113
  - _includes/mathjax.html
114
+ - _includes/sidebar.html
114
115
  - _layouts/archive-taxonomies.html
115
116
  - _layouts/archive-years.html
116
117
  - _layouts/default.html
@@ -155,8 +156,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
155
156
  - !ruby/object:Gem::Version
156
157
  version: '0'
157
158
  requirements: []
158
- rubygems_version: 3.0.6
159
+ rubygems_version: 3.0.3
159
160
  signing_key:
160
161
  specification_version: 4
161
- summary: Another minimal style of Jekyll theme for writers
162
+ summary: A minimal and beautiful Jekyll theme best for writing and note-taking.
162
163
  test_files: []