jekyll-theme-hamilton 1.2.0 → 1.4.3

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: 42bdeffb4ae6b08b04c14534c27be8dc95b79120f4f059bec16e5e08c5a15c2a
4
- data.tar.gz: bf5ff5f7d32ba307fd9ce3e3020188b9ee2d6204572d98dead5e06c136eca620
3
+ metadata.gz: 923c76a8788de0fcf086a1abb43684230b7ecd21839fd67cf351d52cae0ecffd
4
+ data.tar.gz: 56050c56e1a2e2477519a5dabc4c7b817109abc39253ccf03db8d229bab2abfd
5
5
  SHA512:
6
- metadata.gz: 57ffc4c8843d390a08c8f51dfcc0519bd607c673167b4bd8aab5c4c7a6ebe104320e2794ca607348a6e57eb0b061763bba781234de187f023ecc4038066bf359
7
- data.tar.gz: 413df9789a645a2037271405447032a3cce57987606d19b5881f6bed8edb3c441d8b4850c7d5c176f7866b4ee88818d6c92b3048fc0cc7c52e27c40b8fdeccde
6
+ metadata.gz: 0ddd947d2d0087f32211306376cca39303078992dde628c9625bb52f3da3e9230751052d88d46f4d1a1cde30718c966d92b6580cff5d48e1c2689b4c31951778
7
+ data.tar.gz: f32c19d31b30f4ee19fadd2b343eb5e77c1fea341c42e8b424a46230bbbb55bb28489a36385e5523211305ff47a590d79d3f47d9a6276d2c8694347f504aa48c
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,54 +1,24 @@
1
- <footer id="footer" class="site-footer">
2
- <div class="wrapper">
3
- <div class="footer-col-wrapper">
4
-
5
- <div class="footer-col">
6
- <p class="feed-subscribe">
7
- <a href="{{ 'feed.xml' | relative_url }}">
8
- <i class="feed-icon fas fa-rss"></i><span>Subscribe</span>
9
- </a>
10
- </p>
11
- <ul class="contact-list">
12
- {%- if site.author -%}
13
- <li class="p-name">{{ site.author | escape }}</li>
14
- {%- endif -%}
15
- {%- if site.email -%}
16
- <li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
17
- {%- endif -%}
18
- </ul>
19
- </div>
20
-
21
- <div class="footer-col">
22
- <div class="copyright">
23
- {% assign year_from = site.posts[-1].date | date: '%Y' %}
24
- {% assign year_to = site.time | date: '%Y' %}
25
- {% if year_from == nil or year_from == year_to %}
26
- {% assign year_string = year_from %}
27
- {% else %}
28
- {% assign year_string = year_from | append: '&nbsp;' | append: '-' | append: '&nbsp;' | append: year_to %}
29
- {% endif %}
30
- {% if site.author %}
31
- <p>Copyright © {{ year_string }} {{ site.author }}; All rights reserved.</p>
32
- {% endif %}
33
- </div>
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
- </div>
38
-
39
- <div class="footer-col">
40
- <p>{{ site.description | escape }}</p>
41
- </div>
1
+ <div class="footer-col-wrapper">
42
2
 
3
+ <div class="footer-col">
4
+ <div class="copyright">
5
+ {% assign year_from = site.posts[-1].date | date: '%Y' %}
6
+ {% assign year_to = site.time | date: '%Y' %}
7
+ {% if year_from == nil or year_from == year_to %}
8
+ {% assign year_string = year_from %}
9
+ {% else %}
10
+ {% assign year_string = year_from | append: '&nbsp;' | append: '-' | append: '&nbsp;' | append: year_to %}
11
+ {% endif %}
12
+ {% if site.author %}
13
+ <p>Copyright © {{ year_string }} {{ site.author }}; All rights reserved.</p>
14
+ {% endif %}
43
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>
44
20
 
45
- {% if site.data.social %}
46
- <div class="social-icons">
47
- {% for social in site.data.social %}
48
- <a class="social-icon" href="{{ social.url }}"><i class="{{ social.icon | default: 'fas fa-link' }} fa-2x" title="{{ social.title }}"></i></a>
49
- {% endfor %}
50
- </div>
51
- {% endif %}
21
+ <div class="footer-col">
22
+ <p>{{ site.description | escape }}</p>
52
23
  </div>
53
- </footer>
54
-
24
+ </div>
@@ -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" || elem.style.display == "") {
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 %}
@@ -70,7 +70,14 @@ layout: page
70
70
  </li>
71
71
  {%- endfor -%}
72
72
  </ul>
73
- <a href="#" class="back-to-top">Top &#8648;</a>
73
+ <a href="#" onclick="backToTop()" class="back-to-top">Top &#8648;</a>
74
74
  {%- endif -%}
75
75
  {%- endfor -%}
76
76
  {%- endfor -%}
77
+
78
+ <script>
79
+ function backToTop() {
80
+ const main = document.getElementById("site-main");
81
+ main.scrollTop = 0;
82
+ }
83
+ </script>
@@ -33,5 +33,12 @@ layout: page
33
33
  </li>
34
34
  {%- endfor -%}
35
35
  </ul>
36
- <a href="#" class="back-to-top">Top &#8648;</a>
36
+ <a href="#" onclick="backToTop()" class="back-to-top">Top &#8648;</a>
37
37
  {%- endfor -%}
38
+
39
+ <script>
40
+ function backToTop() {
41
+ const main = document.getElementById("site-main");
42
+ main.scrollTop = 0;
43
+ }
44
+ </script>
@@ -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" id="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,55 +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
- {% include toc.html html=content class="toc" %}
51
-
52
- {{ content }}
45
+ <div class="post-content e-content" itemprop="articleBody">
46
+ {{ content }}
53
47
 
54
- {% if page.comments != false and jekyll.environment == "production" %}
55
- {% include disqus.html %}
56
- {% endif %}
57
- </div>
48
+ {% if page.comments != false and jekyll.environment == "production" %}
49
+ {% include disqus.html %}
50
+ {% endif %}
58
51
  </div>
59
52
 
60
53
  </article>
@@ -17,7 +17,7 @@ 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
22
  margin-bottom: $spacing-unit;
23
23
  }
@@ -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 + 6px 1fr;
10
+ }
11
+
1
12
  /**
2
13
  * Site header
3
14
  */
@@ -7,8 +18,25 @@
7
18
  min-height: $base-font-size * 3;
8
19
  line-height: $base-font-size * 3;
9
20
 
10
- // Positioning context for the mobile navigation icon
11
- position: relative;
21
+ @include media-query($on-small) {
22
+ display: flex;
23
+ }
24
+ }
25
+
26
+ .site-sidebar-button {
27
+ position: absolute;
28
+ top: -2px;
29
+ left: $spacing-unit / 2;
30
+
31
+ img {
32
+ width: $base-font-size * 2.5;
33
+ height: auto;
34
+ border-radius: 50%;
35
+ }
36
+
37
+ @media screen and (min-width: $on-small) {
38
+ display: none;
39
+ }
12
40
  }
13
41
 
14
42
  .site-title {
@@ -18,8 +46,8 @@
18
46
  margin-bottom: 0;
19
47
  float: left;
20
48
 
21
- @include media-query($on-medium) {
22
- padding-right: 45px;
49
+ @include media-query($on-small) {
50
+ float: center;
23
51
  }
24
52
  }
25
53
 
@@ -68,16 +96,36 @@
68
96
  padding-bottom: 5px;
69
97
  }
70
98
 
71
- .page-link {
72
- line-height: $base-line-height * $base-font-size * 1.15;
73
- display: block;
74
- padding: 5px 5px;
99
+ ul.trigger {
100
+ list-style-type: none;
101
+ margin: 0;
102
+ padding: 0;
103
+ overflow: hidden;
104
+
105
+ li a {
106
+ line-height: $base-line-height * $base-font-size * 1.15;
107
+ display: inline;
108
+ padding: 5px 10px;
109
+ margin-left: auto;
110
+ }
111
+
112
+ .dropdown-content {
113
+ display: none;
114
+ position: absolute;
115
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
116
+ z-index: 1;
117
+ }
75
118
 
76
- // Gaps between nav items, but not on the last one
77
- &:not(:last-child) {
78
- margin-right: 0;
119
+ .dropdown-content a {
120
+ padding: 5px 10px;
121
+ display: inline-block;
122
+ text-align: right;
123
+ margin-left: auto;
124
+ }
125
+
126
+ .dropdown:hover .dropdown-content {
127
+ display: block;
79
128
  }
80
- margin-left: 10px;
81
129
  }
82
130
 
83
131
  .current-page {
@@ -102,18 +150,143 @@
102
150
  display: block;
103
151
  }
104
152
 
105
- .page-link {
106
- display: inline;
107
- padding: 0;
153
+ ul.trigger {
154
+ li {
155
+ float: left;
156
+ }
157
+
158
+ li a {
159
+ display: inline-block;
160
+ text-align: center;
161
+ padding: 5px 5px;
162
+
163
+ // Gaps between nav items, but not on the last one
164
+ &:not(:last-child) {
165
+ margin-right: 0;
166
+ }
167
+ margin-left: 10px;
168
+ }
108
169
 
109
- &:not(:last-child) {
110
- margin-right: 10px;
170
+ .dropdown-content a {
171
+ display: block;
172
+ text-align: left;
173
+ padding: 5px 15px 5px 5px;
174
+ margin-left: 10px;
111
175
  }
112
- margin-left: auto;
113
176
  }
114
177
  }
115
178
  }
116
179
 
180
+ /**
181
+ * Site body
182
+ */
183
+ .site-body {
184
+ display: grid;
185
+ grid-template-columns: calc(#{$content-width} * 0.2) 1fr;
186
+ overflow: hidden;
187
+
188
+ @include media-query($on-medium) {
189
+ grid-template-columns: calc(#{$content-width} * 0.15) 1fr;
190
+ }
191
+
192
+ @include media-query($on-small) {
193
+ grid-template-columns: 1fr;
194
+ }
195
+ }
196
+
197
+ /**
198
+ * Site sidebar
199
+ */
200
+ .site-sidebar {
201
+ padding: $spacing-unit / 2;
202
+ border-right: 1px solid;
203
+ @include relative-font-size(0.8);
204
+
205
+ @include media-query($on-medium) {
206
+ @include relative-font-size(0.6);
207
+ }
208
+
209
+ @include media-query($on-small) {
210
+ display: none;
211
+ border-right: none;
212
+ border-bottom: 1px solid;
213
+ }
214
+
215
+ @media screen and (min-width: $on-small) {
216
+ display: block !important;
217
+ }
218
+ }
219
+
220
+ .sidebar-section {
221
+ padding-bottom: $spacing-unit / 2;
222
+ border-bottom: 1px solid;
223
+ margin-bottom: $spacing-unit / 2;
224
+
225
+ &:last-child {
226
+ padding-bottom: 0;
227
+ border-bottom: 0;
228
+ margin-bottom: 0;
229
+ }
230
+ }
231
+
232
+ .sidebar-icon {
233
+ margin-right: 0.5em;
234
+ }
235
+
236
+ .feed-subscribe {
237
+ font-weight: bold;
238
+ text-align: left;
239
+ }
240
+
241
+ .contact-list {
242
+ list-style: none;
243
+ margin-left: 0;
244
+ margin-bottom: 0;
245
+ }
246
+
247
+ .social-icons {
248
+ list-style: none;
249
+ margin-left: 0;
250
+ margin-bottom: 0;
251
+ text-align: left;
252
+ display: flex;
253
+
254
+ .social-icon {
255
+ margin: 0.3em;
256
+ }
257
+ }
258
+
259
+ .author-avatar {
260
+ width: $base-font-size * 9;
261
+ height: auto;
262
+ border-radius: 50%;
263
+ }
264
+
265
+ /**
266
+ * Site main
267
+ */
268
+ .site-main {
269
+ flex: 1 0 auto;
270
+ overflow-y: scroll;
271
+
272
+ // Hide scrollbar for IE, Edge and Firefox
273
+ -ms-overflow-style: none; // IE and Edge
274
+ scrollbar-width: none; // Firefox
275
+
276
+ padding-left: $spacing-unit / 2;
277
+ padding-right: $spacing-unit / 2;
278
+
279
+ @include media-query($on-small) {
280
+ padding-left: 0;
281
+ padding-right: 0;
282
+ }
283
+ }
284
+
285
+ // Hide scrollbar for Chrome, Safari and Opera
286
+ .site-main::-webkit-scrollbar {
287
+ display: none;
288
+ }
289
+
117
290
  /**
118
291
  * Homepage
119
292
  */
@@ -180,19 +353,13 @@
180
353
  }
181
354
  }
182
355
 
183
- /**
184
- * Page content
185
- */
186
- .page-content {
187
- flex: 1 0 auto;
188
- }
189
-
190
356
  /**
191
357
  * Posts
192
358
  */
193
359
  .post-header {
194
- padding-top: $spacing-unit * 2.5;
195
- padding-bottom: $spacing-unit * 2.5;
360
+ padding-top: $spacing-unit * 2;
361
+ padding-bottom: $spacing-unit / 2;
362
+ border-bottom: 1px solid;
196
363
  margin-bottom: $spacing-unit * 2;
197
364
  text-align: center;
198
365
  }
@@ -341,6 +508,7 @@ figcaption.align-center {
341
508
  * Site footer
342
509
  */
343
510
  .site-footer {
511
+ margin-top: $spacing-unit * 2;
344
512
  border-top: 1px solid;
345
513
  padding: $spacing-unit 0;
346
514
  @include relative-font-size(0.8);
@@ -370,25 +538,3 @@ figcaption.align-center {
370
538
  }
371
539
  }
372
540
  }
373
-
374
- .feed-subscribe {
375
- font-weight: bold;
376
- text-align: left;
377
- .feed-icon {
378
- margin-right: 0.3em;
379
- }
380
- }
381
-
382
- .contact-list {
383
- list-style: none;
384
- margin-left: 0;
385
- }
386
-
387
- .social-icons {
388
- text-align: center;
389
- margin-top: $spacing-unit / 2;
390
-
391
- .social-icon {
392
- margin: 0.3em;
393
- }
394
- }
@@ -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;
@@ -8,8 +8,8 @@ $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.2.0
4
+ version: 1.4.3
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-06-07 00:00:00.000000000 Z
11
+ date: 2020-07-03 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.1
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: []