jekyll-theme-hamilton 1.0.0 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0a6b59699830a2080fb59cdbca897d67525267787589e144aa36c6a2816e37d1
4
- data.tar.gz: 416c614671b59ee0bac70087605215af75b32d242c4b4b6eabd6d9ab15eddcc1
3
+ metadata.gz: 39480af49998d2e8dad95156c9076711b51471f534f4cc644b087dee88ff34fa
4
+ data.tar.gz: 926c34c3672bb17eccb6816068b9a74c002574e35bab9ed9beadd610e0a26f9e
5
5
  SHA512:
6
- metadata.gz: e6faabfcbdd0720732955aad14f7f3b8a9118ea92074739003c6b33a90d955b7c30755f4c2c67bc479dd4b47339f234c5907786e8d005e35faee361d94a54805
7
- data.tar.gz: 3160d0962cd6abd080997910db9a6750cbd7141711620df854d79c6db7e0495cf0f66374e05065b0975abd2239d04360b3fce88920c796ed49745644f1c0e33c
6
+ metadata.gz: b5417ce5ef6d93fd608e20bbb7e260296a626c5f7277ed41c07d76ed1c01a56fe51a79aa8dcd47aac78bccf255bdafc02879bb2c2a44bcb4dfa7e79cd2946d6d
7
+ data.tar.gz: 83916ef5b7495f9c8c7450df7fdb5db2744ae09f4d2b71c3c85a390015100305a1cdf017512ac431bb30c7bf1ee479c4100d031093f0747ee985f17bfc2eca6c
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). |
@@ -135,7 +139,7 @@ You can also configure the width and height of the image,
135
139
 
136
140
  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.
137
141
 
138
- 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 }}`.
142
+ 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/posts/{{ page.title | slugify}}/{{ include.name }}`.
139
143
 
140
144
  ## Customization
141
145
 
@@ -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>
@@ -3,7 +3,7 @@
3
3
  {%- if include.src -%}
4
4
  {% assign src = include.src %}
5
5
  {%- elsif include.name -%}
6
- {% capture src %}assets/img/{{ page.title | slugify }}/{{ include.name }}{% endcapture %}
6
+ {% capture src %}assets/img/posts/{{ page.title | slugify }}/{{ include.name }}{% endcapture %}
7
7
  {%- endif -%}
8
8
 
9
9
  {% if include.caption %}
@@ -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
 
@@ -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;
9
32
 
10
- // Positioning context for the mobile navigation icon
11
- position: relative;
33
+ img {
34
+ width: $base-font-size * 2.5;
35
+ height: auto;
36
+ border-radius: 50%;
37
+ }
38
+
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
  */
@@ -180,20 +355,15 @@
180
355
  }
181
356
  }
182
357
 
183
- /**
184
- * Page content
185
- */
186
- .page-content {
187
- flex: 1 0 auto;
188
- }
189
-
190
358
  /**
191
359
  * Posts
192
360
  */
193
361
  .post-header {
194
- padding-top: $spacing-unit * 2.5;
195
- padding-bottom: $spacing-unit * 2.5;
362
+ padding-top: $spacing-unit * 2;
363
+ padding-bottom: $spacing-unit / 2;
364
+ border-bottom: 1px solid;
196
365
  margin-bottom: $spacing-unit * 2;
366
+ text-align: center;
197
367
  }
198
368
 
199
369
  .post-meta {
@@ -201,8 +371,14 @@
201
371
  margin-bottom: $spacing-unit / 2;
202
372
  }
203
373
 
204
- .post-tag {
205
- 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
+ }
206
382
  }
207
383
 
208
384
 
@@ -286,7 +462,6 @@
286
462
  .post-list-by-taxonomy {
287
463
  time {
288
464
  font-family: $code-font-family;
289
- @include relative-font-size(0.9);
290
465
  }
291
466
  }
292
467
 
@@ -335,25 +510,33 @@ figcaption.align-center {
335
510
  * Site footer
336
511
  */
337
512
  .site-footer {
513
+ margin-top: $spacing-unit * 2;
338
514
  border-top: 1px solid;
339
515
  padding: $spacing-unit 0;
340
- text-align: center;
341
516
  @include relative-font-size(0.8);
342
517
 
343
- .feed-subscribe {
344
- font-weight: bold;
345
- text-align: left;
346
- .feed-icon {
347
- margin-right: 0.3em;
348
- }
518
+ p, ul {
519
+ margin-bottom: $spacing-unit / 4;
520
+ }
521
+ }
522
+
523
+ @media screen and (min-width: $on-medium) {
524
+ .footer-col-wrapper {
525
+ display: flex
349
526
  }
350
527
 
528
+ .footer-col {
529
+ width: calc(100% - (#{$spacing-unit} / 2));
530
+ padding: 0 ($spacing-unit / 2);
351
531
 
352
- .social-icons {
353
- margin-bottom: $spacing-unit;
532
+ &:first-child {
533
+ padding-right: $spacing-unit / 2;
534
+ padding-left: 0;
535
+ }
354
536
 
355
- .social-icon {
356
- margin: 0.3em;
537
+ &:last-child {
538
+ padding-right: 0;
539
+ padding-left: $spacing-unit / 2;
357
540
  }
358
541
  }
359
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: 1.0.0
4
+ version: 1.4.1
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-24 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: []