texture 0.1 → 0.2
Sign up to get free protection for your applications and to get access to all the features.
- 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
|