plainwhite 0.12 → 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 +4 -4
- data/README.md +23 -0
- data/_includes/head.html +4 -1
- data/_layouts/default.html +38 -8
- data/_sass/dark.scss +13 -0
- data/_sass/plain.scss +62 -4
- data/assets/js/darkmode.js +18 -4
- data/search.json +20 -0
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ccdd3657a4acbefdb305a81c71cbf1ce355c9040
|
|
4
|
+
data.tar.gz: b5a4e808f580952ba40555e3a24f566d6530fc8c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 341cb618982a3135fa5e529e6b2e4b2092e54a72e9bfc7dd313f989bc4d07582865a5eaa80a365e905e8104d5b6fa7010d72abfa86af8b40156fe653f965119c
|
|
7
|
+
data.tar.gz: '008a8df317009120e52f3a26bf2346f207135512da8ac3fcb3d1236b6f73d7c52b8c5a04ca5ce8d0e36b2243ac7718ac0232efbc9a7c1e0744cc9fe8c93a1e3d'
|
data/README.md
CHANGED
|
@@ -61,6 +61,14 @@ plainwhite:
|
|
|
61
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
62
|
```
|
|
63
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
|
+
```
|
|
71
|
+
|
|
64
72
|
**Comments (Disqus)**
|
|
65
73
|
|
|
66
74
|
Comments on posts can be enabled by specifying your disqus_shortname under plainwhite in `_config.yml`. For example,
|
|
@@ -115,6 +123,21 @@ plainwhite:
|
|
|
115
123
|
url: "/resume"
|
|
116
124
|
```
|
|
117
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
|
+
|
|
118
141
|
**Dark mode**
|
|
119
142
|
|
|
120
143
|
Dark mode can be enabled by setting the `dark_mode` flag in your `_config.yml`
|
data/_includes/head.html
CHANGED
|
@@ -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 %}
|
data/_layouts/default.html
CHANGED
|
@@ -5,15 +5,36 @@
|
|
|
5
5
|
{%- include head.html -%}
|
|
6
6
|
</head>
|
|
7
7
|
|
|
8
|
+
{%- if site.plainwhite.condensed_mobile contains page.layout -%}
|
|
9
|
+
{% assign condensed_class = "condensed" %}
|
|
10
|
+
{% else %}
|
|
11
|
+
{% assign condensed_class = "" %}
|
|
12
|
+
{%- endif -%}
|
|
13
|
+
|
|
8
14
|
<body>
|
|
9
15
|
<main class="container">
|
|
10
16
|
<section class="about">
|
|
11
|
-
<
|
|
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>
|
|
12
27
|
<h2 id="title">
|
|
13
28
|
<a href="{{ "/" | relative_url }}">{{ site.plainwhite.name }}</a>
|
|
14
29
|
</h2>
|
|
30
|
+
</div>
|
|
31
|
+
{%- if site.plainwhite.tagline -%}
|
|
15
32
|
<p class="tagline">{{ site.plainwhite.tagline }}</p>
|
|
16
|
-
|
|
33
|
+
{%- endif -%}
|
|
34
|
+
</div>
|
|
35
|
+
{% capture footer %}
|
|
36
|
+
{%- if site.plainwhite.social_links != '' -%}
|
|
37
|
+
<ul class="social about-footer {{condensed_class}}">
|
|
17
38
|
{%- if site.plainwhite.social_links.github -%}
|
|
18
39
|
<a href="https://github.com/{{ site.plainwhite.social_links.github }}" target="_blank">
|
|
19
40
|
<li>
|
|
@@ -21,7 +42,7 @@
|
|
|
21
42
|
</li>
|
|
22
43
|
</a>
|
|
23
44
|
{%- endif -%}
|
|
24
|
-
|
|
45
|
+
{%- if site.plainwhite.social_links.gitlab -%}
|
|
25
46
|
<a href="https://gitlab.com/{{ site.plainwhite.social_links.gitlab }}" target="_blank">
|
|
26
47
|
<li>
|
|
27
48
|
<i class="icon-gitlab"></i>
|
|
@@ -99,8 +120,9 @@
|
|
|
99
120
|
</a>
|
|
100
121
|
{%- endif -%}
|
|
101
122
|
</ul>
|
|
123
|
+
{%- endif -%}
|
|
102
124
|
{%- if site.plainwhite.navigation -%}
|
|
103
|
-
<nav class="navigation">
|
|
125
|
+
<nav class="navigation about-footer {{condensed_class}}">
|
|
104
126
|
<ul>
|
|
105
127
|
{% for link in site.plainwhite.navigation %}
|
|
106
128
|
<li>
|
|
@@ -110,25 +132,33 @@
|
|
|
110
132
|
</ul>
|
|
111
133
|
</nav>
|
|
112
134
|
{%- endif -%}
|
|
113
|
-
<p>©
|
|
135
|
+
<p class="about-footer {{condensed_class}}">©
|
|
114
136
|
{{ "now" | date: "%Y" }}</p>
|
|
115
137
|
{%- if site.plainwhite.dark_mode -%}
|
|
116
|
-
<div>
|
|
138
|
+
<div class="about-footer {{condensed_class}}">
|
|
117
139
|
<p>Dark Mode
|
|
118
140
|
<i class="icon-moon"></i>
|
|
119
141
|
<label class="switch">
|
|
120
|
-
<input type="checkbox"
|
|
142
|
+
<input type="checkbox" class="dark-mode-toggle">
|
|
121
143
|
<span class="slider round" onclick="toggleDarkMode()"></span>
|
|
122
144
|
</label>
|
|
123
145
|
</p>
|
|
124
146
|
</div>
|
|
125
|
-
<script type="text/javascript" src="{{ "/assets/js/darkmode.js" | relative_url }}"></script>
|
|
126
147
|
{%- endif -%}
|
|
148
|
+
{% endcapture %}
|
|
149
|
+
{{ footer }}
|
|
127
150
|
</section>
|
|
128
151
|
<section class="content">
|
|
129
152
|
{{ content }}
|
|
130
153
|
</section>
|
|
154
|
+
<footer class="{{condensed_class}}">
|
|
155
|
+
{{ footer }}
|
|
156
|
+
</footer>
|
|
131
157
|
</main>
|
|
158
|
+
{% if site.plainwhite.dark_mode %}
|
|
159
|
+
<script type="text/javascript" src="{{ "/assets/js/darkmode.js" | relative_url }}"></script>
|
|
160
|
+
{% endif %}
|
|
161
|
+
|
|
132
162
|
{%- if site.plainwhite.analytics_id -%}
|
|
133
163
|
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.plainwhite.analytics_id }}"></script>
|
|
134
164
|
<script>
|
data/_sass/dark.scss
CHANGED
|
@@ -6,6 +6,18 @@
|
|
|
6
6
|
color: $dark_text_color;
|
|
7
7
|
border-color: #e6e6e6;
|
|
8
8
|
|
|
9
|
+
.about{
|
|
10
|
+
img.light {
|
|
11
|
+
display: none;
|
|
12
|
+
}
|
|
13
|
+
img.dark {
|
|
14
|
+
display: inline;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
.post p {
|
|
18
|
+
color: #ddd;
|
|
19
|
+
}
|
|
20
|
+
|
|
9
21
|
.social [class^="icon-"] {
|
|
10
22
|
color: $dark_text_color
|
|
11
23
|
}
|
|
@@ -50,6 +62,7 @@
|
|
|
50
62
|
|
|
51
63
|
.posts-labelgroup {
|
|
52
64
|
|
|
65
|
+
border-bottom: 1px solid #333;
|
|
53
66
|
.search-results {
|
|
54
67
|
background-color: #333;
|
|
55
68
|
|
data/_sass/plain.scss
CHANGED
|
@@ -40,6 +40,9 @@ a {
|
|
|
40
40
|
|
|
41
41
|
h2 {
|
|
42
42
|
margin: 0.7em 0;
|
|
43
|
+
@media screen and (max-width: $mobileW) {
|
|
44
|
+
margin: 0.3em 0;
|
|
45
|
+
}
|
|
43
46
|
}
|
|
44
47
|
main {
|
|
45
48
|
margin: 0 90px;
|
|
@@ -78,11 +81,14 @@ main {
|
|
|
78
81
|
padding-bottom: 15vh;
|
|
79
82
|
@media screen and (max-width: $mobileW) {
|
|
80
83
|
height: auto;
|
|
81
|
-
padding:
|
|
84
|
+
padding: 5vh 30px;
|
|
85
|
+
}
|
|
86
|
+
@media screen and (max-width: $smallMobileW) {
|
|
87
|
+
padding: 5vh 20px;
|
|
82
88
|
}
|
|
83
89
|
@media screen and (min-width: $mobileW + 1) {
|
|
84
90
|
position: fixed;
|
|
85
|
-
max-width:
|
|
91
|
+
max-width: 280px;
|
|
86
92
|
}
|
|
87
93
|
min-width: $leftWidth;
|
|
88
94
|
justify-content: center;
|
|
@@ -96,8 +102,9 @@ main {
|
|
|
96
102
|
font-weight: normal;
|
|
97
103
|
}
|
|
98
104
|
.tagline {
|
|
105
|
+
text-align: center;
|
|
99
106
|
font-size: 22px;
|
|
100
|
-
margin-top:
|
|
107
|
+
margin-top: 0px;
|
|
101
108
|
color: #aaa;
|
|
102
109
|
white-space: pre-wrap;
|
|
103
110
|
line-height: normal;
|
|
@@ -105,6 +112,19 @@ main {
|
|
|
105
112
|
img {
|
|
106
113
|
max-width: 150px;
|
|
107
114
|
}
|
|
115
|
+
img.dark {
|
|
116
|
+
display: none;
|
|
117
|
+
}
|
|
118
|
+
.about-header {
|
|
119
|
+
display: flex;
|
|
120
|
+
flex-direction: column;
|
|
121
|
+
.about-title {
|
|
122
|
+
display: flex;
|
|
123
|
+
flex-direction: column;
|
|
124
|
+
align-items: center;
|
|
125
|
+
margin-bottom: 17px;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
108
128
|
}
|
|
109
129
|
}
|
|
110
130
|
#title {
|
|
@@ -115,7 +135,6 @@ main {
|
|
|
115
135
|
.social {
|
|
116
136
|
list-style-type: none;
|
|
117
137
|
padding: 0;
|
|
118
|
-
margin-top: 0;
|
|
119
138
|
display: flex;
|
|
120
139
|
flex-wrap: wrap;
|
|
121
140
|
justify-content: center;
|
|
@@ -276,3 +295,42 @@ table {
|
|
|
276
295
|
font-family: Raleway;
|
|
277
296
|
}
|
|
278
297
|
}
|
|
298
|
+
|
|
299
|
+
footer {
|
|
300
|
+
display: none;
|
|
301
|
+
}
|
|
302
|
+
@media screen and (max-width: $mobileW) {
|
|
303
|
+
.about {
|
|
304
|
+
.about-header.condensed {
|
|
305
|
+
align-items: start;
|
|
306
|
+
align-self: start;
|
|
307
|
+
.about-title {
|
|
308
|
+
flex-direction: row;
|
|
309
|
+
margin-bottom: 10px;
|
|
310
|
+
img {
|
|
311
|
+
max-height: 40px;
|
|
312
|
+
}
|
|
313
|
+
h2 {
|
|
314
|
+
margin: 0 10px;
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
.tagline {
|
|
318
|
+
font-size: 18px;
|
|
319
|
+
margin-bottom: 0px;
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
.about-footer.condensed {
|
|
323
|
+
display: none;
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
footer.condensed {
|
|
327
|
+
display: flex;
|
|
328
|
+
flex-direction: column;
|
|
329
|
+
align-items: center;
|
|
330
|
+
margin: 0 40px;
|
|
331
|
+
@media screen and (max-width: $smallMobileW){
|
|
332
|
+
margin: 0 20px;
|
|
333
|
+
}
|
|
334
|
+
border-top: 1px solid #eee;
|
|
335
|
+
}
|
|
336
|
+
}
|
data/assets/js/darkmode.js
CHANGED
|
@@ -18,7 +18,7 @@ function getCookie(name) {
|
|
|
18
18
|
function setCookie(name, value, days) {
|
|
19
19
|
var d = new Date;
|
|
20
20
|
d.setTime(d.getTime() + 24*60*60*1000*days);
|
|
21
|
-
document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
|
|
21
|
+
document.cookie = name + "=" + value + ";path=/;SameSite=strict;expires=" + d.toGMTString();
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
function deleteCookie(name) { setCookie(name, '', -1); }
|
|
@@ -27,7 +27,21 @@ function deleteCookie(name) { setCookie(name, '', -1); }
|
|
|
27
27
|
const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
28
28
|
var theme = getCookie('theme');
|
|
29
29
|
if ( (theme === null && userPrefersDark) || theme === 'dark') {
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
var checkDarkDone = false;
|
|
31
|
+
function checkDark() {
|
|
32
|
+
if (!checkDarkDone) {
|
|
33
|
+
toggleDarkMode();
|
|
34
|
+
}
|
|
35
|
+
checkDarkDone = true;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
function toggleSwitch() {
|
|
39
|
+
document.querySelectorAll('#dark-mode-toggle').forEach(ti => ti.checked = true);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
// Attempt both requestAnimationFrame and DOMContentLoaded, whichever comes first.
|
|
43
|
+
if (window.requestAnimationFrame) window.requestAnimationFrame(checkDark);
|
|
44
|
+
window.addEventListener('DOMContentLoaded', checkDark);
|
|
45
|
+
|
|
46
|
+
window.addEventListener('DOMContentLoaded', toggleSwitch);
|
|
33
47
|
}
|
data/search.json
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: null
|
|
3
|
+
sitemap:
|
|
4
|
+
exclude: 'yes'
|
|
5
|
+
---
|
|
6
|
+
[
|
|
7
|
+
{% for post in site.posts %}
|
|
8
|
+
{
|
|
9
|
+
"title" : "{{ post.title | escape }}",
|
|
10
|
+
"title-lower" : "{{ post.title | escape | downcase}}",
|
|
11
|
+
"sub-titile" : "{{ post.subtitle | escape }}",
|
|
12
|
+
"sub-titile-lower" : "{{ post.subtitle | escape | downcase}}",
|
|
13
|
+
"categories" : "{{ post.categories }}",
|
|
14
|
+
"tags" : "{{ post.tags | join: ', ' }}",
|
|
15
|
+
"url" : "{{ site.baseurl }}{{ post.url }}",
|
|
16
|
+
"date" : "{{ post.date }}",
|
|
17
|
+
"content" : "{{ post.content | strip_html | strip_newlines | remove_chars | escape | truncate:200 }}"
|
|
18
|
+
} {% unless forloop.last %},{% endunless %}
|
|
19
|
+
{% endfor %}
|
|
20
|
+
]
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: plainwhite
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: '0.
|
|
4
|
+
version: '0.13'
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Samarjeet
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2020-
|
|
11
|
+
date: 2020-09-24 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -102,6 +102,7 @@ files:
|
|
|
102
102
|
- assets/js/search.js
|
|
103
103
|
- assets/js/simple-jekyll-search.min.js
|
|
104
104
|
- assets/portfolio.png
|
|
105
|
+
- search.json
|
|
105
106
|
- sitemap.xml
|
|
106
107
|
homepage: https://thelehhman.com/
|
|
107
108
|
licenses:
|