harms-columns-front-page 2.1.1 → 2.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +221 -25
- data/_includes/custom-styles.html +208 -0
- data/_includes/header.html +2 -6
- data/_layouts/home.html +10 -4
- data/_layouts/page.html +6 -2
- data/_sass/_headings.sass +1 -4
- metadata +3 -3
- data/_includes/custom-colors.html +0 -96
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b3b437dba8af9fb31b000ad0960a536eda996daa
|
4
|
+
data.tar.gz: cbdbc0bda404b86bfa521f19f685c55ca68fa4b9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c332c1dab0f5a7ab100c415b0a0207c1aac58e021d3d7117900b970f1d6f67c4cfd9e2e76359941a6c30838e57c503f5e094cb3fc68615750b4a285ab61f6311
|
7
|
+
data.tar.gz: 1ba82170a3be30ea7baf9a04e509f7dd7af9f7a2dd6673f205bc5087bd2fe69dd8c2b32118f72ec255cf6a29e5fdf67b505ca031cdf9c76feb9db956a0a54e1b
|
data/README.md
CHANGED
@@ -20,7 +20,7 @@ This guide is based on [this article](https://davidburela.wordpress.com/2015/11/
|
|
20
20
|
|
21
21
|
choco install ruby -y
|
22
22
|
|
23
|
-
Make sure you install all 3 MSYS2 components when a new command prompt window opens with the Ruby Installer.
|
23
|
+
Make sure you install all 3 MSYS2 components when a new command prompt window opens with the Ruby Installer. When finished, you have to close and reopen your command prompt.
|
24
24
|
|
25
25
|
**Step 3:** Install Bundler by running:
|
26
26
|
|
@@ -67,15 +67,17 @@ And that's it, you're ready to go with Jekyll!
|
|
67
67
|
|
68
68
|
## How to create a Jekyll site
|
69
69
|
|
70
|
-
**Step 1:**
|
70
|
+
**Step 1:** Open your terminal and navigate into a directory where your Jekyll site should be stored.
|
71
|
+
|
72
|
+
**Step 2:** Run the following command in the terminal to create a new Jekyll project:
|
71
73
|
|
72
74
|
jekyll new project-name
|
73
75
|
|
74
|
-
**Step
|
76
|
+
**Step 3:** Enter the project directory by running:
|
75
77
|
|
76
78
|
cd project-name
|
77
79
|
|
78
|
-
**Step
|
80
|
+
**Step 4:** Run the following command to build your Jekyll site and preview it locally at <http://localhost:4000>.
|
79
81
|
|
80
82
|
bundle exec jekyll serve
|
81
83
|
|
@@ -100,7 +102,7 @@ gem "harms-columns-front-page"
|
|
100
102
|
theme: harms-columns-front-page
|
101
103
|
```
|
102
104
|
|
103
|
-
**Step 4:** Then find the section that starts with `gems:` and add the following entries to the list:
|
105
|
+
**Step 4 (OPTIONAL):** Then find the section that starts with `gems:` and add the following entries to the list:
|
104
106
|
|
105
107
|
```yaml
|
106
108
|
gems:
|
@@ -108,9 +110,9 @@ gems:
|
|
108
110
|
- jekyll-minifier
|
109
111
|
```
|
110
112
|
|
111
|
-
These dependencies are used to minify and autoprefix the code for cross browser compatibility and faster loading times of your site.
|
113
|
+
You do not have to add them to your `_config.yml` to use the theme. These dependencies are not required, but they are used to minify and autoprefix the site's code for cross browser compatibility and faster loading times of your site and therefore they make your site better.
|
112
114
|
|
113
|
-
**Step 5:** Run the following command in the terminal:
|
115
|
+
**Step 5:** Run the following command in the terminal (note that this command can take a while to be finished if you've decided to follow Step 4):
|
114
116
|
|
115
117
|
bundle exec jekyll serve
|
116
118
|
|
@@ -118,9 +120,20 @@ Now you can head over to <http://localhost:4000> in your browser and view the ne
|
|
118
120
|
|
119
121
|
<br>
|
120
122
|
|
123
|
+
If you're getting an error message like `ERROR: Current ExecJS runtime doesn't support ES5. Please install node.js.` while trying to accomplish Step 5, you can try the following:
|
124
|
+
1. Close your terminal
|
125
|
+
2. Install node.js by downloading the installer [here](https://nodejs.org/en/download/)
|
126
|
+
3. Reopen your terminal
|
127
|
+
4. Navigate into your Jekyll project's directory
|
128
|
+
5. Then run `bundle update`
|
129
|
+
|
130
|
+
Now you should be able to try again and complete Step 5.
|
131
|
+
|
132
|
+
<br>
|
133
|
+
|
121
134
|
## Updating
|
122
135
|
|
123
|
-
If you've already installed this theme for your Jekyll site
|
136
|
+
If you've already installed this theme for your Jekyll site and want to update to a newer version of the theme, you can simply execute the following command in the terminal. This will update not only the theme but all of your dependencies in your Jekyll project:
|
124
137
|
|
125
138
|
bundle update
|
126
139
|
|
@@ -195,6 +208,16 @@ columns-color: '#FFFFFF'
|
|
195
208
|
|
196
209
|
<br>
|
197
210
|
|
211
|
+
#### _Color of the front page columns text_
|
212
|
+
|
213
|
+
You can customize the text color of the site's front page columns. The color code can be provided as rgb, rgba or hex. When using hex, please make sure to wrap the color code in single quotes like this:
|
214
|
+
|
215
|
+
```yaml
|
216
|
+
columns-text-color: '#282828'
|
217
|
+
```
|
218
|
+
|
219
|
+
<br>
|
220
|
+
|
198
221
|
#### _Color of the site's h1_
|
199
222
|
|
200
223
|
You can customize the color of the site's h1 heading. The color code can be provided as rgb, rgba or hex. When using hex, please make sure to wrap the color code in single quotes like this:
|
@@ -205,6 +228,16 @@ h1-color: '#282828'
|
|
205
228
|
|
206
229
|
<br>
|
207
230
|
|
231
|
+
#### _Color of the site's subtitle_
|
232
|
+
|
233
|
+
You can customize the color of the site's subtitle in the header. The color code can be provided as rgb, rgba or hex. When using hex, please make sure to wrap the color code in single quotes like this:
|
234
|
+
|
235
|
+
```yaml
|
236
|
+
subtitle-color: '#FFFFFF'
|
237
|
+
```
|
238
|
+
|
239
|
+
<br>
|
240
|
+
|
208
241
|
#### _Color of the site's h2_
|
209
242
|
|
210
243
|
You can customize the color of the site's h2 heading. The color code can be provided as rgb, rgba or hex. When using hex, please make sure to wrap the color code in single quotes like this:
|
@@ -215,6 +248,26 @@ h2-color: '#2FEB8D'
|
|
215
248
|
|
216
249
|
<br>
|
217
250
|
|
251
|
+
#### _Color of the site's h3_
|
252
|
+
|
253
|
+
You can customize the color of the site's h3 heading. The color code can be provided as rgb, rgba or hex. When using hex, please make sure to wrap the color code in single quotes like this:
|
254
|
+
|
255
|
+
```yaml
|
256
|
+
h3-color: '#282828'
|
257
|
+
```
|
258
|
+
|
259
|
+
<br>
|
260
|
+
|
261
|
+
#### _Color of the site's text_
|
262
|
+
|
263
|
+
You can customize the color of the site's plain text. The color code can be provided as rgb, rgba or hex. When using hex, please make sure to wrap the color code in single quotes like this:
|
264
|
+
|
265
|
+
```yaml
|
266
|
+
text-color: '#282828'
|
267
|
+
```
|
268
|
+
|
269
|
+
<br>
|
270
|
+
|
218
271
|
#### _Color of the site's links and buttons_
|
219
272
|
|
220
273
|
You can customize the color of the site's links and buttons. The color code can be provided as rgb, rgba or hex. When using hex, please make sure to wrap the color code in single quotes like this:
|
@@ -225,6 +278,70 @@ link-color: '#12ADFF'
|
|
225
278
|
|
226
279
|
<br>
|
227
280
|
|
281
|
+
#### _Color of the site's footer_
|
282
|
+
|
283
|
+
You can customize the background-color of the site's footer. The color code can be provided as rgb, rgba or hex. When using hex, please make sure to wrap the color code in single quotes like this:
|
284
|
+
|
285
|
+
```yaml
|
286
|
+
footer-color: '#EEEEEE'
|
287
|
+
```
|
288
|
+
|
289
|
+
<br>
|
290
|
+
|
291
|
+
#### _Color of the site's footer text_
|
292
|
+
|
293
|
+
You can customize the text color of the site's footer. The color code can be provided as rgb, rgba or hex. When using hex, please make sure to wrap the color code in single quotes like this:
|
294
|
+
|
295
|
+
```yaml
|
296
|
+
footer-text-color: '#95989A'
|
297
|
+
```
|
298
|
+
|
299
|
+
<br>
|
300
|
+
|
301
|
+
#### _Maximum width of the site_
|
302
|
+
|
303
|
+
You can customize the maximum width that your site should fill (in pixels). Please provide a number WITHOUT the 'px' like so:
|
304
|
+
|
305
|
+
```yaml
|
306
|
+
site-max-width: 1200
|
307
|
+
```
|
308
|
+
|
309
|
+
<br>
|
310
|
+
|
311
|
+
#### _Header padding_
|
312
|
+
|
313
|
+
You can affect the height of the site's header by changing the value for it's top and bottom padding (in pixels). If the padding is set to '0', it will only be as high as it's content. Please provide a number WITHOUT the 'px' like so:
|
314
|
+
|
315
|
+
```yaml
|
316
|
+
header-padding: 80
|
317
|
+
```
|
318
|
+
|
319
|
+
<br>
|
320
|
+
|
321
|
+
#### _Footer padding_
|
322
|
+
|
323
|
+
You can affect the height of the site's footer by changing the value for it's top and bottom padding (in pixels). If the padding is set to '0', it will only be as high as it's content. Please provide a number WITHOUT the 'px' like so:
|
324
|
+
|
325
|
+
```yaml
|
326
|
+
footer-padding: 100
|
327
|
+
```
|
328
|
+
|
329
|
+
<br>
|
330
|
+
|
331
|
+
#### _Custom CSS_
|
332
|
+
|
333
|
+
If the configuration options for the site's styles are not enough to meet your needs, you can add custom css to style certain elements exactly the way you want to. Provide your CSS like so:
|
334
|
+
|
335
|
+
```yaml
|
336
|
+
custom-css: "
|
337
|
+
body {
|
338
|
+
background-color: #FFFFFF;
|
339
|
+
}
|
340
|
+
"
|
341
|
+
```
|
342
|
+
|
343
|
+
<br>
|
344
|
+
|
228
345
|
#### _Favicon_
|
229
346
|
|
230
347
|
The favicon will appear as the icon alongside the title of your site in the browser window. Please use a png-file.
|
@@ -273,21 +390,34 @@ footer-copyright: Year and name here
|
|
273
390
|
|
274
391
|
#### _Home columns_
|
275
392
|
|
276
|
-
Here you can add content for the column section on the home page. You have to specify a heading and the content. The button url
|
393
|
+
Here you can add content for the column section on the home page. You have to specify a heading and the content. The button url and the button label are optional: if the url is not set, there will be no button for that column on your site.
|
277
394
|
|
278
395
|
```yaml
|
279
396
|
home-columns:
|
280
397
|
- heading: Your heading 1 here
|
281
398
|
content: Your content 1 here
|
282
399
|
button-url: http://www.your-link-1-here.com
|
400
|
+
button-label: Your button 1 text here
|
283
401
|
|
284
402
|
- heading: Your heading 2 here
|
285
403
|
content: Your content 2 here
|
286
404
|
button-url: http://www.your-link-2-here.com
|
405
|
+
button-label: Your button 1 text here
|
287
406
|
|
288
407
|
- heading: Your heading 3 here
|
289
408
|
content: Your content 3 here
|
290
409
|
button-url: http://www.your-link-3-here.com
|
410
|
+
button-label: Your button 1 text here
|
411
|
+
```
|
412
|
+
|
413
|
+
<br>
|
414
|
+
|
415
|
+
#### _Read more button text_
|
416
|
+
|
417
|
+
In lists of your posts there's just an excerpt being shown for every post. You have to specify the text for the button that takes you to the whole post, when clicking on it.
|
418
|
+
|
419
|
+
```yaml
|
420
|
+
post-button-label: Read more
|
291
421
|
```
|
292
422
|
|
293
423
|
<br>
|
@@ -340,16 +470,6 @@ The available layouts are:
|
|
340
470
|
|
341
471
|
<br>
|
342
472
|
|
343
|
-
#### _Featured image_
|
344
|
-
|
345
|
-
You can specify a path to a featured image for a page. It will then be used instead of the default header.
|
346
|
-
|
347
|
-
```yaml
|
348
|
-
featured-image: /assets/img/your-image.jpg
|
349
|
-
```
|
350
|
-
|
351
|
-
<br>
|
352
|
-
|
353
473
|
#### _Title_
|
354
474
|
|
355
475
|
This specifies the title of your page, which will appear on top of the page (except for the front page) and in the title of your browser window behind your site title.
|
@@ -463,7 +583,7 @@ Section 3 content
|
|
463
583
|
|
464
584
|
#### _Featured image_
|
465
585
|
|
466
|
-
You can specify a path to a featured image for a post. It will then be used
|
586
|
+
You can specify a path to a featured image for a post. It will then be used as a preview image in lists in which the post appears.
|
467
587
|
|
468
588
|
```yaml
|
469
589
|
featured-image: /assets/img/your-image.jpg
|
@@ -542,17 +662,93 @@ tags:
|
|
542
662
|
- Football
|
543
663
|
```
|
544
664
|
|
545
|
-
|
665
|
+
<br>
|
666
|
+
|
667
|
+
### Editing the content and publishing your site online
|
668
|
+
|
669
|
+
If you're having a server on the internet and want to publish or refresh your Jekyll site on there, follow these steps:
|
670
|
+
|
671
|
+
<br>
|
672
|
+
|
673
|
+
#### _Updating page or post content_
|
674
|
+
|
675
|
+
If you want to update the content of a page or a post, then follow these steps:
|
676
|
+
|
677
|
+
**Step 1:** Open your terminal and navigate into your Jekyll project's directory on your local machine.
|
678
|
+
|
679
|
+
|
680
|
+
**Step 2:** Run the following command:
|
681
|
+
|
682
|
+
bundle exec jekyll serve
|
683
|
+
|
684
|
+
**Step 3:** Now you can open the file in your Jekyll project that you want to make changes to with a code editor, edit it and save it. You can get information on how the markdown syntax in your pages and posts works [here](https://kramdown.gettalong.org/quickref.html).
|
685
|
+
|
686
|
+
**Step 4:** Now you can preview your changes locally in your browser at <http://localhost:4000>. As you make modifications to your content, your site will regenerate and you should see the changes in the browser after a refresh.
|
687
|
+
|
688
|
+
**Step 5:** If you're satisfied with your changes, open your favorite FTP-software, connect to your webserver and upload every file inside of your Jekyll project's directory `_site` to the public directory of your webserver.
|
689
|
+
|
690
|
+
**Step 6:** Open your website on the internet in your browser and check if everything went as planned.
|
691
|
+
|
692
|
+
<br>
|
693
|
+
|
694
|
+
#### _Updating global configuration options_
|
695
|
+
|
696
|
+
If you want to update something in your Jekyll site's `_config.yml`, you have to follow these steps:
|
697
|
+
|
698
|
+
**Step 1:** Edit the file with a code editor.
|
699
|
+
|
700
|
+
**Step 2:** Run the following command in the terminal:
|
701
|
+
|
702
|
+
bundle exec jekyll serve
|
703
|
+
|
704
|
+
Everytime you make changes to the `_config.yml` you have to stop the server (`cmd + C` on mac, `CTRL + C` on windows) and rebuild your site and restart the server by running the command from Step 2 again. Then you can preview your site locally in your browser at <http://localhost:4000>.
|
705
|
+
|
706
|
+
**Step 3:** If you're satisfied with your changes, open your favorite FTP-software, connect to your webserver and upload every file inside of your Jekyll project's directory `_site` to the public directory of your webserver.
|
707
|
+
|
708
|
+
**Step 4:** Open your website on the internet in your browser and check if everything went as planned.
|
709
|
+
|
710
|
+
## Contributing
|
546
711
|
|
547
|
-
Bug reports and pull requests are welcome on GitHub at https://github.com/
|
712
|
+
Bug reports and pull requests are welcome on GitHub at <https://github.com/michael-harms/harms-columns-front-page>.
|
713
|
+
<!-- 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. -->
|
548
714
|
|
549
715
|
## Development
|
550
716
|
|
551
|
-
|
717
|
+
<br>
|
718
|
+
|
719
|
+
### Overriding
|
720
|
+
|
721
|
+
If you just want to change some of the theme's default layouts, scripts, styles etc. for your own Jekyll project, you can just override them in your project directory. You can get more information on this [here](https://jekyllrb.com/docs/themes/#overriding-theme-defaults) in the official Jekyll docs.
|
722
|
+
|
723
|
+
<br>
|
724
|
+
|
725
|
+
### Develop your own version
|
726
|
+
|
727
|
+
If you want to use my theme as a starting point for your own theme devlopement, you can do this by accomplishing the following steps:
|
728
|
+
|
729
|
+
**Step 1:** Open the terminal and navigate into the directory where you want your theme to be stored.
|
730
|
+
|
731
|
+
**Step 2:** Create a new Jekyll theme, by running the following command in the terminal:
|
732
|
+
|
733
|
+
jekyll new-theme your-theme-name-here
|
734
|
+
|
735
|
+
**Step 3:** Enter the theme directory in the terminal by running:
|
736
|
+
|
737
|
+
cd your-theme-name-here
|
738
|
+
|
739
|
+
**Step 3:** Download my theme's files from <https://github.com/michael-harms/harms-columns-front-page> and copy them into the directory of the Jekyll theme that you've just created, overriding everything that already exists in the directory.
|
740
|
+
|
741
|
+
**Step 4:** Delete your theme's .gemspec, rename my harms-columns-front-page.gemspec-file to your-theme-name-here.gemspec and update it's contents.
|
742
|
+
|
743
|
+
**Step 5:** Develop your theme
|
744
|
+
|
745
|
+
Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at <http://localhost:4000>. This starts a Jekyll server using your theme. Add pages, a `_config.yml`, etc. like in a Jekyll project to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
|
746
|
+
|
747
|
+
When your theme is released, only the files tracked with Git will be released.
|
552
748
|
|
553
|
-
|
749
|
+
**Step 6:** Publish your new theme
|
554
750
|
|
555
|
-
|
751
|
+
After you've finished developing your theme, update your .gemspec and README.md accordingly and then follow [these instructions](https://jekyllrb.com/docs/themes/#publishing-your-theme) in the official Jekyll docs to publish your theme as a Ruby gem.
|
556
752
|
|
557
753
|
<br>
|
558
754
|
|
@@ -0,0 +1,208 @@
|
|
1
|
+
<!-- CSS that overrides the defaults, when the theme user selected custom colors or other style options or places custom css in the site's global configuration -->
|
2
|
+
<style>
|
3
|
+
|
4
|
+
/* Custom max-width for the site */
|
5
|
+
{% if site.site-max-width %}
|
6
|
+
html body .page-content .margin {
|
7
|
+
max-width: calc({{ site.site-max-width}}px + 80px) !important;
|
8
|
+
}
|
9
|
+
|
10
|
+
html body .page-content .wrapper {
|
11
|
+
max-width: {{ site.site-max-width }}px !important;
|
12
|
+
}
|
13
|
+
|
14
|
+
body div.header .header-content {
|
15
|
+
max-width: {{ site.site-max-width }}px !important;
|
16
|
+
}
|
17
|
+
|
18
|
+
html body nav ul.desktop-nav {
|
19
|
+
max-width: {{ site.site-max-width }}px !important;
|
20
|
+
}
|
21
|
+
{% endif %}
|
22
|
+
|
23
|
+
/* Custom header-padding to influence it's height */
|
24
|
+
{% if site.header-padding %}
|
25
|
+
html body div.header {
|
26
|
+
padding-top: {{ site.header-padding }}px;
|
27
|
+
padding-bottom: {{ site.header-padding }}px;
|
28
|
+
}
|
29
|
+
{% endif %}
|
30
|
+
|
31
|
+
/* Custom footer-padding to influence it's height */
|
32
|
+
{% if site.footer-padding %}
|
33
|
+
html footer {
|
34
|
+
padding-top: {{ site.footer-padding }}px;
|
35
|
+
padding-bottom: {{ site.footer-padding }}px;
|
36
|
+
}
|
37
|
+
{% endif %}
|
38
|
+
|
39
|
+
/* Custom header background-color */
|
40
|
+
{% if site.header-color %}
|
41
|
+
div.header {
|
42
|
+
background-color: {{ site.header-color }} !important;
|
43
|
+
}
|
44
|
+
{% endif %}
|
45
|
+
|
46
|
+
/* Custom background-color for the front page columns */
|
47
|
+
{% if site.columns-color %}
|
48
|
+
.dark-section .col {
|
49
|
+
background-color: {{ site.columns-color }} !important;
|
50
|
+
-webkit-box-shadow: none !important;
|
51
|
+
-moz-box-shadow: none !important;
|
52
|
+
box-shadow: none !important;
|
53
|
+
}
|
54
|
+
{% endif %}
|
55
|
+
|
56
|
+
/* Custom text-color for the front page columns */
|
57
|
+
{% if site.columns-text-color %}
|
58
|
+
html body .dark-section .wrapper .col {
|
59
|
+
color: {{ site.columns-text-color }} !important;
|
60
|
+
}
|
61
|
+
{% endif %}
|
62
|
+
|
63
|
+
/* Custom color for the site's h1 */
|
64
|
+
{% if site.h1-color %}
|
65
|
+
h1 {
|
66
|
+
color: {{ site.h1-color }} !important;
|
67
|
+
}
|
68
|
+
{% endif %}
|
69
|
+
|
70
|
+
/* Custom color for the site's subtitle in the header */
|
71
|
+
{% if site.subtitle-color %}
|
72
|
+
html body div.header .header-content .header-left p.sub-title {
|
73
|
+
color: {{ site.subtitle-color }};
|
74
|
+
}
|
75
|
+
{% endif %}
|
76
|
+
|
77
|
+
/* Custom color for the site's h2 */
|
78
|
+
{% if site.h2-color %}
|
79
|
+
h2 {
|
80
|
+
color: {{ site.h2-color }} !important;
|
81
|
+
}
|
82
|
+
{% endif %}
|
83
|
+
|
84
|
+
/* Custom color for the site's h3 */
|
85
|
+
{% if site.h3-color %}
|
86
|
+
h3 {
|
87
|
+
color: {{ site.h3-color }} !important;
|
88
|
+
}
|
89
|
+
{% endif %}
|
90
|
+
|
91
|
+
/* Custom color for all of the site's links and buttons (except for the social buttons) */
|
92
|
+
{% if site.link-color %}
|
93
|
+
html body a {
|
94
|
+
color: {{ site.link-color }};
|
95
|
+
}
|
96
|
+
|
97
|
+
html body #accordion a {
|
98
|
+
color: {{ site.link-color }} !important;
|
99
|
+
}
|
100
|
+
|
101
|
+
html body .wrapper .tag-list li a.selected {
|
102
|
+
background-color: {{ site.link-color }};
|
103
|
+
border-color: {{ site.link-color }};
|
104
|
+
}
|
105
|
+
|
106
|
+
html body .wrapper #accordion .ui-accordion-header.ui-state-active {
|
107
|
+
border-color: {{ site.link-color }};
|
108
|
+
background-color: {{ site.link-color }};
|
109
|
+
}
|
110
|
+
|
111
|
+
a.button {
|
112
|
+
border: 1px solid {{ site.link-color }};
|
113
|
+
color: {{ site.link-color }};
|
114
|
+
}
|
115
|
+
|
116
|
+
a.button:hover {
|
117
|
+
background-color: {{ site.link-color }};
|
118
|
+
}
|
119
|
+
|
120
|
+
html body nav ul .mobile.menu-button:hover .menu-button-container .menu-button-line {
|
121
|
+
background-color: {{ site.link-color }};
|
122
|
+
}
|
123
|
+
|
124
|
+
html body nav ul a:hover {
|
125
|
+
color: {{ site.link-color }};
|
126
|
+
}
|
127
|
+
|
128
|
+
html body nav ul.desktop-nav li.active {
|
129
|
+
border-bottom: 5px solid {{ site.link-color }};
|
130
|
+
}
|
131
|
+
|
132
|
+
html body nav ul.desktop-nav li.active a {
|
133
|
+
color: {{ site.link-color }};
|
134
|
+
}
|
135
|
+
|
136
|
+
html body nav ul.desktop-nav li a:hover {
|
137
|
+
color: {{ site.link-color }};
|
138
|
+
}
|
139
|
+
|
140
|
+
html body div.mobile-nav-content ul li.active {
|
141
|
+
border-bottom: 1px solid {{ site.link-color }};
|
142
|
+
}
|
143
|
+
|
144
|
+
html body div.mobile-nav-content ul li.active a {
|
145
|
+
color: {{ site.link-color }};
|
146
|
+
}
|
147
|
+
|
148
|
+
html body div.mobile-nav-content ul li a:hover {
|
149
|
+
color: {{ site.link-color }};
|
150
|
+
}
|
151
|
+
{% endif %}
|
152
|
+
|
153
|
+
/* Custom color for the site's plain text */
|
154
|
+
{% if site.text-color %}
|
155
|
+
html body .page-content .wrapper.home-content {
|
156
|
+
color: {{ site.text-color }};
|
157
|
+
}
|
158
|
+
|
159
|
+
html body .wrapper.posts-wrapper .post .post-contents p {
|
160
|
+
color: {{ site.text-color }};
|
161
|
+
}
|
162
|
+
|
163
|
+
html body .page-content .wrapper.page p {
|
164
|
+
color: {{ site.text-color }};
|
165
|
+
}
|
166
|
+
|
167
|
+
body .wrapper .post ul {
|
168
|
+
color: {{ site.text-color }};
|
169
|
+
}
|
170
|
+
|
171
|
+
body .wrapper.page ul {
|
172
|
+
color: {{ site.text-color }};
|
173
|
+
}
|
174
|
+
|
175
|
+
html body .page-content .wrapper.single-post p,
|
176
|
+
html body .page-content .wrapper.single-post ul {
|
177
|
+
color: {{ site.text-color }};
|
178
|
+
}
|
179
|
+
{% endif %}
|
180
|
+
|
181
|
+
/* Custom background-color for the site's footer */
|
182
|
+
{% if site.footer-color %}
|
183
|
+
html footer {
|
184
|
+
background-color: {{ site.footer-color }};
|
185
|
+
}
|
186
|
+
{% endif %}
|
187
|
+
|
188
|
+
/* Custom color for the site's footer text and social buttons */
|
189
|
+
{% if site.footer-text-color %}
|
190
|
+
html footer p {
|
191
|
+
color: {{ site.footer-text-color }};
|
192
|
+
}
|
193
|
+
|
194
|
+
html footer .social-container a.button {
|
195
|
+
color: {{ site.footer-text-color }} !important;
|
196
|
+
border-color: {{ site.footer-text-color }} !important;
|
197
|
+
}
|
198
|
+
|
199
|
+
footer .social-container a.button:hover {
|
200
|
+
background-color: {{ site.footer-text-color }} !important;
|
201
|
+
}
|
202
|
+
{% endif %}
|
203
|
+
|
204
|
+
/* Custom css from the corresponding site's config variable */
|
205
|
+
{% if site.custom-css %}
|
206
|
+
{{ site.custom-css }}
|
207
|
+
{% endif %}
|
208
|
+
</style>
|
data/_includes/header.html
CHANGED
@@ -32,7 +32,7 @@
|
|
32
32
|
<link rel="icon" type="image/png" href="{{ site.favicon }}" sizes="32x32">
|
33
33
|
|
34
34
|
<!-- CSS that overrides the defaults, when the theme user selected custom colors in the site's global configuration -->
|
35
|
-
{% include custom-
|
35
|
+
{% include custom-styles.html %}
|
36
36
|
|
37
37
|
</head>
|
38
38
|
|
@@ -42,10 +42,7 @@
|
|
42
42
|
<!-- displays the main desktop and the main mobile navigation menu -->
|
43
43
|
{% include nav.html %}
|
44
44
|
|
45
|
-
<!-- displays the header (
|
46
|
-
{% if page.featured-image %}
|
47
|
-
<div class="header" style="height: 120px; background-image: url({{ page.featured-image }}); background-size: contain; background-position: center; background-repeat: no-repeat;">
|
48
|
-
{% else %}
|
45
|
+
<!-- displays the header (it shows the the profile/logo image and the site's title and subtitle) -->
|
49
46
|
<div class="header">
|
50
47
|
<div class="header-content">
|
51
48
|
<div class="header-left">
|
@@ -58,5 +55,4 @@
|
|
58
55
|
</div>
|
59
56
|
</div>
|
60
57
|
</div>
|
61
|
-
{% endif %}
|
62
58
|
</div>
|
data/_layouts/home.html
CHANGED
@@ -22,13 +22,15 @@
|
|
22
22
|
<!-- displays as much columns as there's set in the site's global configuration -->
|
23
23
|
{% for item in site.home-columns %}
|
24
24
|
<div class="col">
|
25
|
-
<h3
|
25
|
+
<h3>{{ item.heading }}</h3>
|
26
26
|
<p>
|
27
27
|
{{ item.content }}
|
28
28
|
</p>
|
29
29
|
<!-- if a link is defined, displays it as a button -->
|
30
30
|
{% if item.button-url %}
|
31
|
-
<a href="{{ item.button-url }}" class="button" target="_blank">
|
31
|
+
<a href="{{ item.button-url }}" class="button" target="_blank">
|
32
|
+
{{ item.button-label }}
|
33
|
+
</a>
|
32
34
|
{% endif %}
|
33
35
|
</div>
|
34
36
|
{% endfor %}
|
@@ -83,7 +85,9 @@
|
|
83
85
|
<span class="date">{{ post.publishing-date }}</span>
|
84
86
|
{% endif %}
|
85
87
|
<p class="post-excerpt">{{ post.excerpt }}</p>
|
86
|
-
<a class="button" href="{{ post.url | prepend: site.baseurl }}">
|
88
|
+
<a class="button" href="{{ post.url | prepend: site.baseurl }}">
|
89
|
+
{{ site.post-button-label }}
|
90
|
+
</a>
|
87
91
|
</div>
|
88
92
|
</div>
|
89
93
|
|
@@ -101,7 +105,9 @@
|
|
101
105
|
<span class="date">{{ post.publishing-date }}</span>
|
102
106
|
{% endif %}
|
103
107
|
<p class="post-excerpt">{{ post.excerpt }}</p>
|
104
|
-
<a class="button" href="{{ post.url | prepend: site.baseurl }}">
|
108
|
+
<a class="button" href="{{ post.url | prepend: site.baseurl }}">
|
109
|
+
{{ site.post-button-label }}
|
110
|
+
</a>
|
105
111
|
</div>
|
106
112
|
</div>
|
107
113
|
|
data/_layouts/page.html
CHANGED
@@ -62,7 +62,9 @@
|
|
62
62
|
<span class="date">{{ post.publishing-date }}</span>
|
63
63
|
{% endif %}
|
64
64
|
<p class="post-excerpt">{{ post.excerpt }}</p>
|
65
|
-
<a class="button" href="{{ post.url | prepend: site.baseurl }}">
|
65
|
+
<a class="button" href="{{ post.url | prepend: site.baseurl }}">
|
66
|
+
{{ site.post-button-label }}
|
67
|
+
</a>
|
66
68
|
</div>
|
67
69
|
</div>
|
68
70
|
|
@@ -80,7 +82,9 @@
|
|
80
82
|
<span class="date">{{ post.publishing-date }}</span>
|
81
83
|
{% endif %}
|
82
84
|
<p class="post-excerpt">{{ post.excerpt }}</p>
|
83
|
-
<a class="button" href="{{ post.url | prepend: site.baseurl }}">
|
85
|
+
<a class="button" href="{{ post.url | prepend: site.baseurl }}">
|
86
|
+
{{ site.post-button-label }}
|
87
|
+
</a>
|
84
88
|
</div>
|
85
89
|
</div>
|
86
90
|
|
data/_sass/_headings.sass
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: harms-columns-front-page
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.
|
4
|
+
version: 2.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Michael Harms
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-07-
|
11
|
+
date: 2017-07-06 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: jekyll
|
@@ -88,7 +88,7 @@ files:
|
|
88
88
|
- LICENSE.txt
|
89
89
|
- README.md
|
90
90
|
- _includes/css/vendor/jquery-ui.min.css
|
91
|
-
- _includes/custom-
|
91
|
+
- _includes/custom-styles.html
|
92
92
|
- _includes/footer.html
|
93
93
|
- _includes/header.html
|
94
94
|
- _includes/icon-github.html
|
@@ -1,96 +0,0 @@
|
|
1
|
-
<!-- CSS that overrides the defaults, when the theme user selected custom colors in the site's global configuration -->
|
2
|
-
<style>
|
3
|
-
|
4
|
-
/* Custom header background-color */
|
5
|
-
{% if site.header-color %}
|
6
|
-
div.header {
|
7
|
-
background-color: {{ site.header-color }} !important;
|
8
|
-
}
|
9
|
-
{% endif %}
|
10
|
-
|
11
|
-
/* Custom background-color for the front page columns */
|
12
|
-
{% if site.columns-color %}
|
13
|
-
.dark-section .col {
|
14
|
-
background-color: {{ site.columns-color }} !important;
|
15
|
-
-webkit-box-shadow: none !important;
|
16
|
-
-moz-box-shadow: none !important;
|
17
|
-
box-shadow: none !important;
|
18
|
-
}
|
19
|
-
{% endif %}
|
20
|
-
|
21
|
-
/* Custom color for the site's h1 */
|
22
|
-
{% if site.h1-color %}
|
23
|
-
h1 {
|
24
|
-
color: {{ site.h1-color }} !important;
|
25
|
-
}
|
26
|
-
{% endif %}
|
27
|
-
|
28
|
-
/* Custom color for the site's h2 */
|
29
|
-
{% if site.h2-color %}
|
30
|
-
h2 {
|
31
|
-
color: {{ site.h2-color }} !important;
|
32
|
-
}
|
33
|
-
{% endif %}
|
34
|
-
|
35
|
-
/* Custom color for all of the site's links and buttons (except for the social buttons) */
|
36
|
-
{% if site.link-color %}
|
37
|
-
html body a {
|
38
|
-
color: {{ site.link-color }};
|
39
|
-
}
|
40
|
-
|
41
|
-
html body #accordion a {
|
42
|
-
color: {{ site.link-color }} !important;
|
43
|
-
}
|
44
|
-
|
45
|
-
html body .wrapper .tag-list li a.selected {
|
46
|
-
background-color: {{ site.link-color }};
|
47
|
-
border-color: {{ site.link-color }};
|
48
|
-
}
|
49
|
-
|
50
|
-
html body .wrapper #accordion .ui-accordion-header.ui-state-active {
|
51
|
-
border-color: {{ site.link-color }};
|
52
|
-
background-color: {{ site.link-color }};
|
53
|
-
}
|
54
|
-
|
55
|
-
a.button {
|
56
|
-
border: 1px solid {{ site.link-color }};
|
57
|
-
color: {{ site.link-color }};
|
58
|
-
}
|
59
|
-
|
60
|
-
a.button:hover {
|
61
|
-
background-color: {{ site.link-color }};
|
62
|
-
}
|
63
|
-
|
64
|
-
html body nav ul .mobile.menu-button:hover .menu-button-container .menu-button-line {
|
65
|
-
background-color: {{ site.link-color }};
|
66
|
-
}
|
67
|
-
|
68
|
-
html body nav ul a:hover {
|
69
|
-
color: {{ site.link-color }};
|
70
|
-
}
|
71
|
-
|
72
|
-
html body nav ul.desktop-nav li.active {
|
73
|
-
border-bottom: 5px solid {{ site.link-color }};
|
74
|
-
}
|
75
|
-
|
76
|
-
html body nav ul.desktop-nav li.active a {
|
77
|
-
color: {{ site.link-color }};
|
78
|
-
}
|
79
|
-
|
80
|
-
html body nav ul.desktop-nav li a:hover {
|
81
|
-
color: {{ site.link-color }};
|
82
|
-
}
|
83
|
-
|
84
|
-
html body div.mobile-nav-content ul li.active {
|
85
|
-
border-bottom: 1px solid {{ site.link-color }};
|
86
|
-
}
|
87
|
-
|
88
|
-
html body div.mobile-nav-content ul li.active a {
|
89
|
-
color: {{ site.link-color }};
|
90
|
-
}
|
91
|
-
|
92
|
-
html body div.mobile-nav-content ul li a:hover {
|
93
|
-
color: {{ site.link-color }};
|
94
|
-
}
|
95
|
-
{% endif %}
|
96
|
-
</style>
|