plainwhite 0.8 → 0.13

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
  SHA1:
3
- metadata.gz: 7f7cd6d45864dc691c485e201d0d2169b9533cb4
4
- data.tar.gz: 180603f55effe0fdc1cb294ce08a1019aa4c0e7d
3
+ metadata.gz: ccdd3657a4acbefdb305a81c71cbf1ce355c9040
4
+ data.tar.gz: b5a4e808f580952ba40555e3a24f566d6530fc8c
5
5
  SHA512:
6
- metadata.gz: c9a3ad6d8f4cdcea202e48bf976212c110ca67b037f711063b6cd240aac1806a78d8d247b2e63a7309e6ec37fe32141af8aad3e8e1cff8ba98ece7078a2ee678
7
- data.tar.gz: 02e56d415986a7805139a71ffbf85f17ffb7934939f7107d81df7e47d3181e4b4025e7b67c0f27eed2b8ba4647568b5d7d57d4956e81f32ae0edb69c5f795b69
6
+ metadata.gz: 341cb618982a3135fa5e529e6b2e4b2092e54a72e9bfc7dd313f989bc4d07582865a5eaa80a365e905e8104d5b6fa7010d72abfa86af8b40156fe653f965119c
7
+ data.tar.gz: '008a8df317009120e52f3a26bf2346f207135512da8ac3fcb3d1236b6f73d7c52b8c5a04ca5ce8d0e36b2243ac7718ac0232efbc9a7c1e0744cc9fe8c93a1e3d'
data/README.md CHANGED
@@ -6,13 +6,14 @@ Simplistic jekyll portfolio-style theme for writers.
6
6
 
7
7
  ![plainwhite theme preview](/screenshot.png)
8
8
 
9
-
10
9
  ## Installation on Github Pages
11
10
 
12
11
  Add this line to your site's `_config.yml`:
12
+
13
13
  ```yaml
14
- remote_theme: thelehhman/plainwhite-jekyll
14
+ remote_theme: samarsault/plainwhite-jekyll
15
15
  ```
16
+
16
17
  ## Installation
17
18
 
18
19
  Add this line to your Jekyll site's `Gemfile`:
@@ -37,7 +38,8 @@ Or install it yourself as:
37
38
 
38
39
  ## Usage
39
40
 
40
- The "plainwhite" key in _config.yml is used to customize the theme data.
41
+ The "plainwhite" key in \_config.yml is used to customize the theme data.
42
+
41
43
  ```yaml
42
44
  plainwhite:
43
45
  name: Adam Denisov
@@ -45,18 +47,32 @@ plainwhite:
45
47
  date_format: "%b %-d, %Y"
46
48
 
47
49
  social_links:
48
- twitter: thelehhman
49
- github: thelehhman
50
- linkedIn: in/thelehhman # format: locale/username
50
+ twitter: samarsault
51
+ github: samarsault
52
+ linkedIn: in/samarsault # format: locale/username
51
53
  ```
52
54
 
53
55
  **Updating Placeholder Image**
54
56
 
55
- The placeholder portfolio image can be replaced by the desired image by placing it as `assets/portfolio.png` in your jekyll website.
57
+ The placeholder portfolio image can be replaced by the desired image by placing it as `assets/portfolio.png` in your jekyll website, or by changing the following line in `_config.yaml`
58
+
59
+ ```yaml
60
+ plainwhite:
61
+ portfolio_image: "assets/portfolio.png" # the path from the base directory of the site to the image to display (no / at the start)
62
+ ```
63
+
64
+ To use a different image for dark mode, e.g. with different colors that work better in dark mode, add a `portfolio_image_dark` entry in addition to the `portfolio_image`.
65
+
66
+ ```yaml
67
+ plainwhite:
68
+ portfolio_image: "assets/portfolio.png"
69
+ portfolio_image_dark: "assets/portfolio_dark.png"
70
+ ```
56
71
 
57
72
  **Comments (Disqus)**
58
73
 
59
74
  Comments on posts can be enabled by specifying your disqus_shortname under plainwhite in `_config.yml`. For example,
75
+
60
76
  ```yaml
61
77
  plainwhite:
62
78
  disqus_shortname: games
@@ -65,14 +81,15 @@ plainwhite:
65
81
  **Google Analytics**
66
82
 
67
83
  It can be enabled by specifying your analytics id under plainwhite in `_config.yml`
84
+
68
85
  ```yaml
69
86
  plainwhite:
70
- analytics_id: '< YOUR ID >'
87
+ analytics_id: "< YOUR ID >"
71
88
  ```
72
89
 
73
90
  **Sitemap**
74
91
 
75
- It can be toggled by the following line to under plainwhite in `_config.yml`
92
+ It can be toggled by the following line to under plainwhite in `_config.yml`
76
93
 
77
94
  ```yaml
78
95
  plainwhite:
@@ -82,18 +99,105 @@ plainwhite:
82
99
  **Excerpts**
83
100
 
84
101
  Excerpts can be enabled by adding the following line to your `_config.yml`
102
+
85
103
  ```yaml
86
104
  show_excerpts: true
87
105
  ```
106
+
88
107
  **Layouts**
89
108
 
90
109
  - Home
91
110
  - Page
92
111
  - Post
93
112
 
113
+ **Navigation**
114
+
115
+ Navigation can be enabled by adding the following line to your `_config.yml`
116
+
117
+ ```yaml
118
+ plainwhite:
119
+ navigation:
120
+ - title: My Work
121
+ url: "/my-work"
122
+ - title: Resume
123
+ url: "/resume"
124
+ ```
125
+
126
+ **Mobile**
127
+
128
+ By default, Plainwhite places the sidebar (logo, name, tagline etc.) above the content on mobile (narrow screens).
129
+ To condense it (moving some things to the bottom of the page and making the rest smaller) so it takes up less space, add the following to your `_config.yml`:
130
+
131
+ ```yaml
132
+ plainwhite:
133
+ condensed_mobile:
134
+ - home
135
+ - post
136
+ - page
137
+ ```
138
+
139
+ This chooses which layouts (types of page) should be condensed on mobile screens. E.g. if you want everything but the landing page to be condensed, remove `home` from the list. This option does not affect rendering on wider screens.
140
+
141
+ **Dark mode**
142
+
143
+ Dark mode can be enabled by setting the `dark_mode` flag in your `_config.yml`
144
+
145
+ The website will check the OS preferred color scheme and set the theme accordingly, the preference will then be saved in a cookie
146
+
147
+ ```yaml
148
+ plainwhite:
149
+ dark_mode: true
150
+ ```
151
+
152
+ ![plainwhite dark theme previe](/dark.png)
153
+
154
+ **Multiline tagline**
155
+
156
+ Tagline can be multiline in this way
157
+
158
+ ```yaml
159
+ plainwhite:
160
+ tagline: |
161
+ First Line.
162
+
163
+ Second Line.
164
+
165
+ Third Line.
166
+ ```
167
+
168
+ **Search-bar**
169
+
170
+ Search-bar can be enabled by adding the following line to `config.yml`
171
+
172
+ ```yaml
173
+ plainwhite:
174
+ search: true
175
+ ```
176
+
177
+ Search is powered by [Simple-Jekyll-Search](https://github.com/christian-fei/Simple-Jekyll-Search) Jekyll plugin. A `search.json` containing post meta and contents will be generated in site root folder. Plugin JavaScript will then match for posts based on user input. More info and `search.json` customization documentation can be found in plugin repository.
178
+
179
+ **Base URL**
180
+
181
+ You can specify a custom base URL (eg. example.com/blog/) by adding the following line to `_config.yaml`. Note that there is no trailing slash on the URL.
182
+
183
+ ```yaml
184
+ baseurl: "/blog"
185
+ ```
186
+
187
+ **Language**
188
+
189
+ You can set the `lang` attribute of the `<html>` tag on your pages by changing the following line in `_config.yml`:
190
+
191
+ ```yaml
192
+ plainwhite:
193
+ html_lang: "en"
194
+ ```
195
+
196
+ [See here for a full list of available language codes](https://www.w3schools.com/tags/ref_country_codes.asp)
197
+
94
198
  ## Contributing
95
199
 
96
- Bug reports and pull requests are welcome on GitHub at https://github.com/thelehhman/plainwhite-jekyll. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
200
+ Bug reports and pull requests are welcome on GitHub at https://github.com/samarsault/plainwhite-jekyll. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
97
201
 
98
202
  ## Development
99
203
 
@@ -104,10 +208,15 @@ Your theme is setup just like a normal Jekyll site! To test your theme, run `bun
104
208
  When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
105
209
  To add a custom directory to your theme-gem, please edit the regexp in `plainwhite.gemspec` accordingly.
106
210
 
211
+ ## Donation
212
+ If this project help you reduce time to develop, you can give me a cup of coffee :)
213
+
214
+ [![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://paypal.me/thelehhman)
215
+
107
216
  ## License
108
217
 
109
218
  The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
110
219
 
111
220
  ## More themes
112
221
 
113
- - [Texture](https://github.com/thelehhman/texture)
222
+ - [Texture](https://github.com/samarsault/texture)
@@ -4,4 +4,7 @@
4
4
  <link href="https://fonts.googleapis.com/css?family=Merriweather:300|Raleway:400,700" rel="stylesheet">
5
5
  <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
6
6
  <title>{{ page.title | default: site.title }}</title>
7
- {% seo %}
7
+ {% seo %}
8
+ {% if site.plainwhite.dark_mode %}
9
+ <script type="text/javascript" src="{{ "/assets/js/darkmode.js" | relative_url }}"></script>
10
+ {% endif %}
@@ -1,40 +1,178 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
2
+ <html lang="{{ site.plainwhite.html_lang }}">
3
+
3
4
  <head>
4
- {%- include head.html -%}
5
+ {%- include head.html -%}
5
6
  </head>
7
+
8
+ {%- if site.plainwhite.condensed_mobile contains page.layout -%}
9
+ {% assign condensed_class = "condensed" %}
10
+ {% else %}
11
+ {% assign condensed_class = "" %}
12
+ {%- endif -%}
13
+
6
14
  <body>
7
- <main class="container">
8
- <section class="about">
9
- <img src="{{ "/assets/portfolio.png" | relative_url }}" alt="{{ site.plainwhite.name }}">
10
- <h2>{{ site.plainwhite.name }}</h2>
11
- <p class="tagline">{{ site.plainwhite.tagline }}</p>
12
- <ul class="social">
13
- {%- if site.plainwhite.social_links.github -%}
14
- <a href="https://github.com/{{ site.plainwhite.social_links.github }}"><li><i class="icon-github-circled"></i></li></a>
15
- {%- endif -%}
16
- {%- if site.plainwhite.social_links.linkedIn -%}
17
- <a href="https://www.linkedin.com/{{ site.plainwhite.social_links.linkedIn }}"><li><i class="icon-linkedin-squared"></i></li></a>
18
- {%- endif -%}
19
- {%- if site.plainwhite.social_links.twitter -%}
20
- <a href="https://twitter.com/{{ site.plainwhite.social_links.twitter }}"><li><i class="icon-twitter-squared"></i></li></a>
21
- {%- endif -%}
22
- </ul>
23
- <p>&copy; 2019</p>
24
- </section>
25
- <section class="content">
26
- {{ content }}
27
- </section>
28
- </main>
29
- {%- if site.plainwhite.analytics_id -%}
30
- <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.plainwhite.analytics_id }}"></script>
31
- <script>
32
- window.dataLayer = window.dataLayer || [];
33
- function gtag() { dataLayer.push(arguments); }
34
- gtag('js', new Date());
15
+ <main class="container">
16
+ <section class="about">
17
+ <div class="about-header {{condensed_class}}">
18
+ <div class="about-title">
19
+ <a href="{{ "/" | relative_url}}">
20
+ {% if site.plainwhite.portfolio_image_dark and site.plainwhite.dark_mode %}
21
+ <img class="light" src="{{site.baseurl }}/{{ site.plainwhite.portfolio_image }}" alt="{{ site.plainwhite.name }}" />
22
+ <img class="dark" src="{{site.baseurl }}/{{ site.plainwhite.portfolio_image_dark }}" alt="{{ site.plainwhite.name }}" />
23
+ {% else %}
24
+ <img src="{{site.baseurl }}/{{ site.plainwhite.portfolio_image }}" alt="{{ site.plainwhite.name }}" />
25
+ {% endif %}
26
+ </a>
27
+ <h2 id="title">
28
+ <a href="{{ "/" | relative_url }}">{{ site.plainwhite.name }}</a>
29
+ </h2>
30
+ </div>
31
+ {%- if site.plainwhite.tagline -%}
32
+ <p class="tagline">{{ site.plainwhite.tagline }}</p>
33
+ {%- endif -%}
34
+ </div>
35
+ {% capture footer %}
36
+ {%- if site.plainwhite.social_links != '' -%}
37
+ <ul class="social about-footer {{condensed_class}}">
38
+ {%- if site.plainwhite.social_links.github -%}
39
+ <a href="https://github.com/{{ site.plainwhite.social_links.github }}" target="_blank">
40
+ <li>
41
+ <i class="icon-github-circled"></i>
42
+ </li>
43
+ </a>
44
+ {%- endif -%}
45
+ {%- if site.plainwhite.social_links.gitlab -%}
46
+ <a href="https://gitlab.com/{{ site.plainwhite.social_links.gitlab }}" target="_blank">
47
+ <li>
48
+ <i class="icon-gitlab"></i>
49
+ </li>
50
+ </a>
51
+ {%- endif -%}
52
+ {%- if site.plainwhite.social_links.linkedIn -%}
53
+ <a href="https://www.linkedin.com/{{ site.plainwhite.social_links.linkedIn }}" target="_blank">
54
+ <li>
55
+ <i class="icon-linkedin-squared"></i>
56
+ </li>
57
+ </a>
58
+ {%- endif -%}
59
+ {%- if site.plainwhite.social_links.twitter -%}
60
+ <a href="https://twitter.com/{{ site.plainwhite.social_links.twitter }}" target="_blank">
61
+ <li>
62
+ <i class="icon-twitter-squared"></i>
63
+ </li>
64
+ </a>
65
+ {%- endif -%}
66
+ {%- if site.plainwhite.social_links.instagram -%}
67
+ <a href="https://instagram.com/{{ site.plainwhite.social_links.instagram }}" target="_blank">
68
+ <li>
69
+ <i class="icon-instagram"></i>
70
+ </li>
71
+ </a>
72
+ {%- endif -%}
73
+ {%- if site.plainwhite.social_links.facebook -%}
74
+ <a href="https://facebook.com/{{ site.plainwhite.social_links.facebook }}" target="_blank">
75
+ <li>
76
+ <i class="icon-facebook-squared"></i>
77
+ </li>
78
+ </a>
79
+ {%- endif -%}
80
+ {%- if site.plainwhite.social_links.youtube -%}
81
+ <a href="https://youtube.com/{{ site.plainwhite.social_links.youtube }}" target="_blank">
82
+ <li>
83
+ <i class="icon-youtube"></i>
84
+ </li>
85
+ </a>
86
+ {%- endif -%}
87
+ {%- if site.plainwhite.social_links.pinterest -%}
88
+ <a href="https://pinterest.com/{{ site.plainwhite.social_links.pinterest }}" target="_blank">
89
+ <li>
90
+ <i class="icon-pinterest-squared"></i>
91
+ </li>
92
+ </a>
93
+ {%- endif -%}
94
+ {%- if site.plainwhite.social_links.dribbble -%}
95
+ <a href="https://dribbble.com/{{ site.plainwhite.social_links.dribbble }}" target="_blank">
96
+ <li>
97
+ <i class="icon-dribbble"></i>
98
+ </li>
99
+ </a>
100
+ {%- endif -%}
101
+ {%- if site.plainwhite.social_links.flickr -%}
102
+ <a href="https://flickr.com/{{ site.plainwhite.social_links.flickr }}" target="_blank">
103
+ <li>
104
+ <i class="icon-flickr"></i>
105
+ </li>
106
+ </a>
107
+ {%- endif -%}
108
+ {%- if site.plainwhite.social_links.telegram -%}
109
+ <a href=" https://t.me/{{ site.plainwhite.social_links.telegram }}" target="_blank">
110
+ <li>
111
+ <i class="icon-telegram"></i>
112
+ </li>
113
+ </a>
114
+ {%- endif -%}
115
+ {%- if site.plainwhite.social_links.soundcloud -%}
116
+ <a href=" https://soundcloud.com/{{ site.plainwhite.social_links.soundcloud }}" target="_blank">
117
+ <li>
118
+ <i class="icon-soundcloud"></i>
119
+ </li>
120
+ </a>
121
+ {%- endif -%}
122
+ </ul>
123
+ {%- endif -%}
124
+ {%- if site.plainwhite.navigation -%}
125
+ <nav class="navigation about-footer {{condensed_class}}">
126
+ <ul>
127
+ {% for link in site.plainwhite.navigation %}
128
+ <li>
129
+ <a href="{{ link.url }}">{{ link.title }}</a>
130
+ </li>
131
+ {% endfor %}
132
+ </ul>
133
+ </nav>
134
+ {%- endif -%}
135
+ <p class="about-footer {{condensed_class}}">&copy;
136
+ {{ "now" | date: "%Y" }}</p>
137
+ {%- if site.plainwhite.dark_mode -%}
138
+ <div class="about-footer {{condensed_class}}">
139
+ <p>Dark Mode
140
+ <i class="icon-moon"></i>
141
+ <label class="switch">
142
+ <input type="checkbox" class="dark-mode-toggle">
143
+ <span class="slider round" onclick="toggleDarkMode()"></span>
144
+ </label>
145
+ </p>
146
+ </div>
147
+ {%- endif -%}
148
+ {% endcapture %}
149
+ {{ footer }}
150
+ </section>
151
+ <section class="content">
152
+ {{ content }}
153
+ </section>
154
+ <footer class="{{condensed_class}}">
155
+ {{ footer }}
156
+ </footer>
157
+ </main>
158
+ {% if site.plainwhite.dark_mode %}
159
+ <script type="text/javascript" src="{{ "/assets/js/darkmode.js" | relative_url }}"></script>
160
+ {% endif %}
35
161
 
36
- gtag('config', '{{ site.plainwhite.analytics_id }}');
37
- </script>
38
- {%- endif -%}
162
+ {%- if site.plainwhite.analytics_id -%}
163
+ <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.plainwhite.analytics_id }}"></script>
164
+ <script>
165
+ window.dataLayer = window.dataLayer || [];
166
+ function gtag() { dataLayer.push(arguments); }
167
+ gtag('js', new Date());
168
+ gtag('config', '{{ site.plainwhite.analytics_id }}');
169
+ </script>
170
+ {%- endif -%}
171
+
172
+ {% if site.plainwhite.search %}
173
+ <script src="{{ "/assets/js/simple-jekyll-search.min.js" | relative_url }}"></script>
174
+ <script src="{{ "/assets/js/search.js" | relative_url }}"></script>
175
+ {% endif %}
39
176
  </body>
177
+
40
178
  </html>
@@ -3,41 +3,55 @@ layout: default
3
3
  ---
4
4
 
5
5
  {%- if page.title -%}
6
- <h1 class="page-heading">{{ page.title }}</h1>
6
+ <h1 class="page-heading">{{ page.title }}</h1>
7
7
  {%- endif -%}
8
8
 
9
9
  {{ content }}
10
10
 
11
11
  {%- if site.posts.size > 0 -%}
12
- <ul class="posts">
13
- <li>
14
- <h1 id="posts-label">posts</h1>
15
- </li>
12
+ <ul class="posts">
13
+ <li class="posts-labelgroup" id="posts-labelgroup">
14
+ <h1 id="posts-label">posts</h1>
15
+ {% if site.plainwhite.search %}
16
+ <div class="search-container">
17
+ <div class="search-section">
18
+ <i class="icon-search"></i>
19
+ <input type="text" name="search" id="searchbar" autocomplete="off" aria-label="search in posts">
20
+ </div>
21
+ <div class="search-results" id="search-results" data-placeholder="No Results" style="display: none;"></div>
22
+ </div>
23
+ {% endif %}
24
+ </li>
16
25
 
17
- {%- for post in site.posts -%}
18
- <li>
19
- {%- assign date_format = site.plainwhite.date_format | default: "%b %-d, %Y" -%}
20
- <a class="post-link" href="{{ post.url | relative_url }}">
21
- <h2 class="post-title">{{ post.title | escape }}</h2>
22
- </a>
23
- <div class="post-meta">
24
- <ul class="post-categories">
25
- {%- for tag in post.categories -%}
26
- <li>{{ tag }}</li>
27
- {%- endfor -%}
28
- </ul>
29
- <div class="post-date"><i class="icon-calendar"></i>{{ post.date | date: date_format }}</div>
30
- </div>
31
- <div class="post">
32
- {%- if site.show_excerpts -%}
33
- {{ post.excerpt }}
34
- {%- endif -%}
35
- </div>
36
- </li>
37
- {%- endfor -%}
38
- </ul>
26
+ {%- for post in site.posts -%}
27
+ <li>
28
+ {%- assign date_format = site.plainwhite.date_format | default: "%b %-d, %Y" -%}
29
+ <a class="post-link" href="{{ post.url | relative_url }}">
30
+ <h2 class="post-title">{{ post.title | escape }}</h2>
31
+ </a>
32
+ <div class="post-meta">
33
+ <div class="post-date">
34
+ <i class="icon-calendar"></i>
35
+ {{ post.date | date: date_format }}
36
+ </div>
37
+ {%- if post.categories.size > 0-%}
38
+ <ul class="post-categories">
39
+ {%- for tag in post.categories -%}
40
+ <li>{{ tag }}</li>
41
+ {%- endfor -%}
42
+ </ul>
43
+ {%- endif -%}
44
+ </div>
45
+ <div class="post">
46
+ {%- if site.show_excerpts -%}
47
+ {{ post.excerpt }}
48
+ {%- endif -%}
49
+ </div>
50
+ </li>
51
+ {%- endfor -%}
52
+ </ul>
39
53
 
40
- <!-- <p class="feed-subscribe"><svg class="svg-icon orange">
54
+ <!-- <p class="feed-subscribe"><svg class="svg-icon orange">
41
55
  <use xlink:href="{{ '/assets/minima-social-icons.svg#rss' | relative_url }}"></use>
42
56
  </svg><a href="{{ "/feed.xml" | relative_url }}">Subscribe</a></p> -->
43
- {%- endif -%}
57
+ {%- endif -%}