texture 0.1 → 0.2
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 +12 -1
- data/_includes/footer.html +19 -0
- data/_includes/nav.html +2 -2
- data/_includes/page_header.html +10 -4
- data/_includes/post_header.html +6 -3
- data/_sass/_syntax.scss +1 -1
- data/_sass/theme.scss +45 -11
- data/assets/css/style.scss +48 -0
- data/assets/js/picker.js +21 -0
- metadata +7 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 949fada996964f8c6f9278a3304d928ce70d9f3c
|
|
4
|
+
data.tar.gz: f2ad290655e4f774399e73d6e88a40dcfc87d024
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4738f160a847ffa6bf333e8f6e04ccfccf8e1f4d7b6d7bc9b39ce4a863a36e68162014b4460c8c693d7b7ad5d6ef62e04ef7897d0799dd10f1e59d75f7bed502
|
|
7
|
+
data.tar.gz: 4bb0a1ae225812c0f9aca4d059ccfbda3299a7bc1e8d8a7812b84e1a87241ed8f635f25697cee7ae178fe059597388a039cf2c6ae4e1bf43443e861a5f1d04d6
|
data/README.md
CHANGED
|
@@ -13,6 +13,8 @@ Add this line to your site's `_config.yml`:
|
|
|
13
13
|
```yaml
|
|
14
14
|
remote_theme: thelehhman/texture
|
|
15
15
|
```
|
|
16
|
+
|
|
17
|
+
**NOTE: If you are forking this repo, remove `base_url: /texture` in the `_config.yml` which is required to load the required website assets**
|
|
16
18
|
## Installation
|
|
17
19
|
|
|
18
20
|
Add this line to your Jekyll site's `Gemfile`:
|
|
@@ -52,7 +54,7 @@ texture:
|
|
|
52
54
|
|
|
53
55
|
**Styling**
|
|
54
56
|
|
|
55
|
-
Multiple header styles are supported using the "style" property under texture in `_config.yml`.
|
|
57
|
+
Multiple header styles are supported using the "style" property under texture in `_config.yml`.
|
|
56
58
|
|
|
57
59
|
```yaml
|
|
58
60
|
texture:
|
|
@@ -64,6 +66,15 @@ For example, the blue style looks like this:
|
|
|
64
66
|
|
|
65
67
|
|
|
66
68
|
|
|
69
|
+
**Texture Picker**
|
|
70
|
+
|
|
71
|
+
You can toggle the texture picker to show/experiment various textures on your site using the showPicker variable. Remember to make it `false` for production.
|
|
72
|
+
|
|
73
|
+
```yaml
|
|
74
|
+
texture:
|
|
75
|
+
showPicker: [false|true] # show the texture selector(development purposes)
|
|
76
|
+
```
|
|
77
|
+
|
|
67
78
|
**Comments (Disqus)**
|
|
68
79
|
|
|
69
80
|
Comments on posts can be enabled by specifying your disqus_shortname under texture in `_config.yml`. For example,
|
data/_includes/footer.html
CHANGED
|
@@ -7,4 +7,23 @@
|
|
|
7
7
|
|
|
8
8
|
gtag('config', '{{ site.texture.analytics_id }}');
|
|
9
9
|
</script>
|
|
10
|
+
{%- endif -%}
|
|
11
|
+
|
|
12
|
+
{%- if site.texture.showPicker -%}
|
|
13
|
+
<div id="texture-picker">
|
|
14
|
+
<div style="display:flex;justify-content: space-between">
|
|
15
|
+
<p>Select Texture</p>
|
|
16
|
+
<p><a id="hidePicker" href="#">Hide</a></p>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="texture-colors">
|
|
19
|
+
<div id="black"></div>
|
|
20
|
+
<div id="blue"></div>
|
|
21
|
+
<div id="red"></div>
|
|
22
|
+
<div id="purple"></div>
|
|
23
|
+
<div id="green"></div>
|
|
24
|
+
</div>
|
|
25
|
+
<p class="info">You can use the <b>showPicker</b> property in _config.yml to hide this picker permanently.</p>
|
|
26
|
+
<p class="info">You can use the <b>texture</b> property in _config.yml to apply a texture permanently.</p>
|
|
27
|
+
</div>
|
|
28
|
+
<script src="{{ "/assets/js/picker.js" | relative_url }}"></script>
|
|
10
29
|
{%- endif -%}
|
data/_includes/nav.html
CHANGED
data/_includes/page_header.html
CHANGED
|
@@ -2,8 +2,14 @@
|
|
|
2
2
|
<h1>{{ site.texture.title }}</h1>
|
|
3
3
|
<h2>{{ site.texture.tagline }}</h2>
|
|
4
4
|
<ul class="social">
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
{%- if site.texture.social_links.github -%}
|
|
6
|
+
<a href="https://github.com/{{ site.texture.social_links.github }}"><li><i class="icon-github-circled"></i></li></a>
|
|
7
|
+
{%- endif -%}
|
|
8
|
+
{%- if site.texture.social_links.linkedIn -%}
|
|
9
|
+
<a href="https://linkedin.com/{{ site.texture.social_links.linkedIn }}"><li><i class="icon-linkedin-squared"></i></li></a>
|
|
10
|
+
{%- endif -%}
|
|
11
|
+
{%- if site.texture.social_links.twitter -%}
|
|
12
|
+
<a href="https://twitter.com/{{ site.texture.social_links.twitter }}"><li><i class="icon-twitter-squared"></i></li></a>
|
|
13
|
+
{%- endif -%}
|
|
8
14
|
</ul>
|
|
9
|
-
</div>
|
|
15
|
+
</div>
|
data/_includes/post_header.html
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
|
|
2
2
|
<div class="container">
|
|
3
3
|
<h1>{{ page.title }}</h1>
|
|
4
|
-
{
|
|
5
|
-
<h2>{{ page.description }}</h2>
|
|
6
|
-
{% endif %}
|
|
4
|
+
<h4 class="post-description">{{ page.description }}</h4>
|
|
7
5
|
<div class="post-date" style="margin-top:20px">
|
|
8
6
|
Published on {{ page.date | date: date_format }}
|
|
9
7
|
</div>
|
|
8
|
+
<ul class="post-tags">
|
|
9
|
+
{%- for tag in page.categories -%}
|
|
10
|
+
<li>{{ tag }}</li>
|
|
11
|
+
{%- endfor -%}
|
|
12
|
+
</ul>
|
|
10
13
|
</div>
|
data/_sass/_syntax.scss
CHANGED
data/_sass/theme.scss
CHANGED
|
@@ -10,6 +10,7 @@ $bigScreenW: 1600px;
|
|
|
10
10
|
$leftWidth: 220px;
|
|
11
11
|
|
|
12
12
|
$gray: #999;
|
|
13
|
+
$lightGray: #eee;
|
|
13
14
|
|
|
14
15
|
*,*:before,*:after {
|
|
15
16
|
box-sizing: border-box;
|
|
@@ -47,6 +48,11 @@ h2 {
|
|
|
47
48
|
@include fluidType(28px, 32px);
|
|
48
49
|
}
|
|
49
50
|
|
|
51
|
+
h4 {
|
|
52
|
+
font-weight: normal;
|
|
53
|
+
@include fluidType(18px, 20px);
|
|
54
|
+
}
|
|
55
|
+
|
|
50
56
|
header {
|
|
51
57
|
// background-size: cover;
|
|
52
58
|
padding: 120px 0;
|
|
@@ -82,6 +88,10 @@ header {
|
|
|
82
88
|
}
|
|
83
89
|
}
|
|
84
90
|
|
|
91
|
+
.clearfix {
|
|
92
|
+
clear: both;
|
|
93
|
+
}
|
|
94
|
+
|
|
85
95
|
//
|
|
86
96
|
// Basic Container Class
|
|
87
97
|
//
|
|
@@ -89,38 +99,34 @@ header {
|
|
|
89
99
|
margin:0 150px;
|
|
90
100
|
max-width: 720px;
|
|
91
101
|
|
|
92
|
-
.highlighter-rouge {
|
|
102
|
+
div.highlighter-rouge {
|
|
93
103
|
right: 150px;
|
|
94
104
|
}
|
|
95
105
|
|
|
96
|
-
@media screen and (min-width: 1600px){
|
|
97
|
-
max-width: 1200px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
106
|
@media screen and (max-width: $mobileWidth) {
|
|
101
107
|
margin:0 15px;
|
|
102
|
-
.highlighter-rouge {
|
|
108
|
+
div.highlighter-rouge {
|
|
103
109
|
right: 15px;
|
|
104
110
|
}
|
|
105
111
|
}
|
|
106
112
|
|
|
107
113
|
@media screen and (max-width: $tabWidth) and (min-width: $mobileWidth){
|
|
108
114
|
margin:0 40px;
|
|
109
|
-
.highlighter-rouge {
|
|
115
|
+
div.highlighter-rouge {
|
|
110
116
|
right: 40px;
|
|
111
117
|
}
|
|
112
118
|
}
|
|
113
119
|
|
|
114
120
|
@media screen and (max-width: $desktopWidth) and (min-width: $tabWidth){
|
|
115
121
|
margin:0 80px;
|
|
116
|
-
.highlighter-rouge {
|
|
122
|
+
div.highlighter-rouge {
|
|
117
123
|
right: 80px;
|
|
118
124
|
}
|
|
119
125
|
}
|
|
120
126
|
|
|
121
127
|
@media screen and (min-width: $desktopWidth) and (max-width: 1280px) {
|
|
122
128
|
margin:0 100px;
|
|
123
|
-
.highlighter-rouge {
|
|
129
|
+
div.highlighter-rouge {
|
|
124
130
|
right: 100px;
|
|
125
131
|
}
|
|
126
132
|
}
|
|
@@ -136,6 +142,14 @@ header {
|
|
|
136
142
|
}
|
|
137
143
|
}
|
|
138
144
|
|
|
145
|
+
.post-description {
|
|
146
|
+
font-weight: normal;
|
|
147
|
+
color: #ddd;
|
|
148
|
+
|
|
149
|
+
margin-top:.5em;
|
|
150
|
+
margin-bottom: 1.3em;
|
|
151
|
+
}
|
|
152
|
+
|
|
139
153
|
.post-date {
|
|
140
154
|
color: $gray;
|
|
141
155
|
.icon-calendar {
|
|
@@ -143,14 +157,31 @@ header {
|
|
|
143
157
|
}
|
|
144
158
|
}
|
|
145
159
|
|
|
146
|
-
.
|
|
160
|
+
.post-tags {
|
|
147
161
|
list-style-type: none;
|
|
148
162
|
padding: 0;
|
|
149
163
|
li {
|
|
164
|
+
float: left;
|
|
165
|
+
padding: 10px 20px;
|
|
166
|
+
background-color: $lightGray;
|
|
167
|
+
color: #000;
|
|
168
|
+
margin: 5px;
|
|
169
|
+
border-radius: 2px;
|
|
170
|
+
@include fluidType(15px, 17px);
|
|
171
|
+
&:first-child {
|
|
172
|
+
margin-left: 0;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.posts {
|
|
178
|
+
list-style-type: none;
|
|
179
|
+
padding: 0;
|
|
180
|
+
>li {
|
|
150
181
|
margin-bottom: 30px;
|
|
151
182
|
padding-bottom: 20px;
|
|
152
183
|
&:not(:last-child) {
|
|
153
|
-
border-bottom: 1px solid
|
|
184
|
+
border-bottom: 1px solid $lightGray;
|
|
154
185
|
}
|
|
155
186
|
}
|
|
156
187
|
}
|
|
@@ -178,6 +209,9 @@ header {
|
|
|
178
209
|
position: absolute;
|
|
179
210
|
top: 0;
|
|
180
211
|
right: 5vw;
|
|
212
|
+
a {
|
|
213
|
+
color: inherit;
|
|
214
|
+
}
|
|
181
215
|
ul {
|
|
182
216
|
list-style-type: none;
|
|
183
217
|
li {
|
data/assets/css/style.scss
CHANGED
|
@@ -3,6 +3,54 @@
|
|
|
3
3
|
|
|
4
4
|
@import "theme";
|
|
5
5
|
|
|
6
|
+
{%- if site.texture.showPicker -%}
|
|
7
|
+
#texture-picker {
|
|
8
|
+
position: fixed;
|
|
9
|
+
{%- if site.texture.showNav -%}
|
|
10
|
+
top: 100px;
|
|
11
|
+
right: 5vw;
|
|
12
|
+
{%- else -%}
|
|
13
|
+
top: 20px;
|
|
14
|
+
right: 20px;
|
|
15
|
+
{%- endif -%}
|
|
16
|
+
background-color: #fff;
|
|
17
|
+
border: 1px solid #ccc;
|
|
18
|
+
border-radius: 5px;
|
|
19
|
+
padding: 8px 12px;
|
|
20
|
+
p {
|
|
21
|
+
margin: 0;
|
|
22
|
+
@include fluidType(14px, 15px);
|
|
23
|
+
}
|
|
24
|
+
.info {
|
|
25
|
+
background-color: rgba(#ffd68d, 0.7);
|
|
26
|
+
border-radius: 4px;
|
|
27
|
+
font-size: 13px;
|
|
28
|
+
// color: #999;
|
|
29
|
+
padding: 10px;
|
|
30
|
+
margin-top: 10px;
|
|
31
|
+
max-width: 200px;
|
|
32
|
+
line-height: 1.3em;
|
|
33
|
+
}
|
|
34
|
+
.texture-colors {
|
|
35
|
+
display: flex;
|
|
36
|
+
> div {
|
|
37
|
+
width: 30px;
|
|
38
|
+
height: 30px;
|
|
39
|
+
margin: 4px;
|
|
40
|
+
border: 1px solid #eee;
|
|
41
|
+
border-radius: 4px;
|
|
42
|
+
&:hover {
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
#red {background-color: orangered;}
|
|
48
|
+
#blue { background-color: lightblue; }
|
|
49
|
+
#black { background-color: #111; }
|
|
50
|
+
#purple { background-color: rebeccapurple; }
|
|
51
|
+
#green { background-color: mediumseagreen; }
|
|
52
|
+
}
|
|
53
|
+
{%- endif -%}
|
|
6
54
|
// Textures
|
|
7
55
|
.texture-black {
|
|
8
56
|
background-image: url('{{ site.baseurl }}/assets/textures/black.jpg');
|
data/assets/js/picker.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Texture Picker
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
window.onload = function() {
|
|
6
|
+
// Handle Texture Picker
|
|
7
|
+
const $picker = document.querySelector('#texture-picker');
|
|
8
|
+
const $hidePicker = document.querySelector('#hidePicker');
|
|
9
|
+
const $header = document.querySelector('header');
|
|
10
|
+
|
|
11
|
+
$picker.onclick = function(e) {
|
|
12
|
+
const textureName = e.target.id;
|
|
13
|
+
if (textureName && textureName != 'texture-picker' && textureName != 'hidePicker') {
|
|
14
|
+
$header.setAttribute('class', `texture-${textureName}`);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
$hidePicker.onclick = function () {
|
|
19
|
+
$picker.style['display'] = 'none';
|
|
20
|
+
}
|
|
21
|
+
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: texture
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: '0.
|
|
4
|
+
version: '0.2'
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Samarjeet
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2019-
|
|
11
|
+
date: 2019-09-20 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -16,28 +16,28 @@ dependencies:
|
|
|
16
16
|
requirements:
|
|
17
17
|
- - "~>"
|
|
18
18
|
- !ruby/object:Gem::Version
|
|
19
|
-
version: 3.7
|
|
19
|
+
version: '3.7'
|
|
20
20
|
type: :runtime
|
|
21
21
|
prerelease: false
|
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
|
23
23
|
requirements:
|
|
24
24
|
- - "~>"
|
|
25
25
|
- !ruby/object:Gem::Version
|
|
26
|
-
version: 3.7
|
|
26
|
+
version: '3.7'
|
|
27
27
|
- !ruby/object:Gem::Dependency
|
|
28
28
|
name: jekyll-seo-tag
|
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
|
30
30
|
requirements:
|
|
31
31
|
- - "~>"
|
|
32
32
|
- !ruby/object:Gem::Version
|
|
33
|
-
version: 2.1
|
|
33
|
+
version: '2.1'
|
|
34
34
|
type: :runtime
|
|
35
35
|
prerelease: false
|
|
36
36
|
version_requirements: !ruby/object:Gem::Requirement
|
|
37
37
|
requirements:
|
|
38
38
|
- - "~>"
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
|
-
version: 2.1
|
|
40
|
+
version: '2.1'
|
|
41
41
|
- !ruby/object:Gem::Dependency
|
|
42
42
|
name: bundler
|
|
43
43
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -96,6 +96,7 @@ files:
|
|
|
96
96
|
- assets/font/fontello.ttf
|
|
97
97
|
- assets/font/fontello.woff
|
|
98
98
|
- assets/font/fontello.woff2
|
|
99
|
+
- assets/js/picker.js
|
|
99
100
|
- assets/textures/black.jpg
|
|
100
101
|
- assets/textures/blue.jpg
|
|
101
102
|
- assets/textures/green.jpg
|