texture 0.1 → 0.2

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 24ee3046b92c12e490d5171415dd55bf24f50a1f
4
- data.tar.gz: 6ef0987075ec90037f27cafc517ceb1e41326d5d
3
+ metadata.gz: 949fada996964f8c6f9278a3304d928ce70d9f3c
4
+ data.tar.gz: f2ad290655e4f774399e73d6e88a40dcfc87d024
5
5
  SHA512:
6
- metadata.gz: b03e7b5898bf6c51fb8acc1bb0a5e5d252d4d5eaf9dedb046d8b11b92ef4bfcf8f86686158067032ca930279f3fd0390ca3a758ebfb1656127c7e818810e50eb
7
- data.tar.gz: 03d09b1a428555fff617d51d93c2cdf08a7be26ee630fff477726dc2ae82e34ab0dd2c120c98cab8d27edab9c55fad49d460d5ca534d32b38fe5447c2eec568e
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
  ![texture theme blue](/screen2.png)
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,
@@ -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 -%}
@@ -1,8 +1,8 @@
1
1
  {%- if site.texture.showNav -%}
2
2
  <div class="navbar">
3
3
  <ul>
4
- <li>Home</li>
5
- <li>About</li>
4
+ <a href="#"><li>Home</li></a>
5
+ <a href="#"><li>About</li></a>
6
6
  </ul>
7
7
  </div>
8
8
  {%- endif -%}
@@ -2,8 +2,14 @@
2
2
  <h1>{{ site.texture.title }}</h1>
3
3
  <h2>{{ site.texture.tagline }}</h2>
4
4
  <ul class="social">
5
- <a href="https://github.com/{{ site.texture.social_links.github }}"><li><i class="icon-github-circled"></i></li></a>
6
- <a href="https://linkedin.com/{{ site.texture.social_links.linkedIn }}"><li><i class="icon-linkedin-squared"></i></li></a>
7
- <a href="https://twitter.com/{{ site.texture.social_links.twitter }}"><li><i class="icon-twitter-squared"></i></li></a>
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>
@@ -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
- {% if page.description == 'Awesome Shoes' %}
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>
@@ -1,6 +1,6 @@
1
1
  @import 'ext/solarized-light';
2
2
 
3
- .highlighter-rouge {
3
+ div.highlighter-rouge {
4
4
  width: 100vw;
5
5
  position: relative;
6
6
  right: 150px;
@@ -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
- .posts {
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 #eee;
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 {
@@ -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');
@@ -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.1'
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-06-29 00:00:00.000000000 Z
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.3
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.3
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.0
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.0
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