harms-columns-front-page 2.1.1 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ba471067749210c0ea859f84650c610044e04a18
-  data.tar.gz: 546b45673a7d34370e8dfe8ecfefc2eeac5ec336
+  metadata.gz: b3b437dba8af9fb31b000ad0960a536eda996daa
+  data.tar.gz: cbdbc0bda404b86bfa521f19f685c55ca68fa4b9
 SHA512:
-  metadata.gz: bc555b81c4f869a1e43e6a9269ac650570c57a9eea59719cd01ee5542b6394475ff45410183fbb4042730c000eaa4b3c77c26c077cd2aa29f831bb6029098c75
-  data.tar.gz: 1b1eb1c09af071e5ecb7f3a9271a4ad887cb83968e1ab509ad92d8a012a602311e8675d5506b87901bc0e37851f8586d132ad5f7ba354a9f8935b7b8f99e8659
+  metadata.gz: c332c1dab0f5a7ab100c415b0a0207c1aac58e021d3d7117900b970f1d6f67c4cfd9e2e76359941a6c30838e57c503f5e094cb3fc68615750b4a285ab61f6311
+  data.tar.gz: 1ba82170a3be30ea7baf9a04e509f7dd7af9f7a2dd6673f205bc5087bd2fe69dd8c2b32118f72ec255cf6a29e5fdf67b505ca031cdf9c76feb9db956a0a54e1b

data/README.md

@@ -20,7 +20,7 @@ This guide is based on [this article](https://davidburela.wordpress.com/2015/11/
 
     choco install ruby -y
 
-Make sure you install all 3 MSYS2 components when a new command prompt window opens with the Ruby Installer.
+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.
 
 **Step 3:** Install Bundler by running:
 
@@ -67,15 +67,17 @@ And that's it, you're ready to go with Jekyll!
 
 ## How to create a Jekyll site
 
-**Step 1:** Run the following command in the command prompt to create a new Jekyll project:
+**Step 1:** Open your terminal and navigate into a directory where your Jekyll site should be stored.
+
+**Step 2:** Run the following command in the terminal to create a new Jekyll project:
 
     jekyll new project-name
 
-**Step 2:** Enter the project directory by running:
+**Step 3:** Enter the project directory by running:
 
     cd project-name
 
-**Step 3:** Run the following command to build your Jekyll site and preview it locally under <http://localhost:4000>.
+**Step 4:** Run the following command to build your Jekyll site and preview it locally at <http://localhost:4000>.
 
     bundle exec jekyll serve
 
@@ -100,7 +102,7 @@ gem "harms-columns-front-page"
 theme: harms-columns-front-page
 ```
 
-**Step 4:** Then find the section that starts with `gems:` and add the following entries to the list:
+**Step 4 (OPTIONAL):** Then find the section that starts with `gems:` and add the following entries to the list:
 
 ```yaml
 gems:
@@ -108,9 +110,9 @@ gems:
   - jekyll-minifier
 ```
 
-These dependencies are used to minify and autoprefix the code for cross browser compatibility and faster loading times of your site.
+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.
 
-**Step 5:** Run the following command in the terminal:
+**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):
 
     bundle exec jekyll serve
 
@@ -118,9 +120,20 @@ Now you can head over to <http://localhost:4000> in your browser and view the ne
 
 <br>
 
+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:
+1. Close your terminal
+2. Install node.js by downloading the installer [here](https://nodejs.org/en/download/)
+3. Reopen your terminal
+4. Navigate into your Jekyll project's directory
+5. Then run `bundle update`
+
+Now you should be able to try again and complete Step 5.
+
+<br>
+
 ## Updating
 
-If you've already installed this theme for your Jekyll site, you can update it by running the following command in the terminal:
+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:
 
     bundle update
 
@@ -195,6 +208,16 @@ columns-color: '#FFFFFF'
 
 <br>
 
+#### _Color of the front page columns text_
+
+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:
+
+```yaml
+columns-text-color: '#282828'
+```
+
+<br>
+
 #### _Color of the site's h1_
 
 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'
 
 <br>
 
+#### _Color of the site's subtitle_
+
+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:
+
+```yaml
+subtitle-color: '#FFFFFF'
+```
+
+<br>
+
 #### _Color of the site's h2_
 
 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'
 
 <br>
 
+#### _Color of the site's h3_
+
+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:
+
+```yaml
+h3-color: '#282828'
+```
+
+<br>
+
+#### _Color of the site's text_
+
+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:
+
+```yaml
+text-color: '#282828'
+```
+
+<br>
+
 #### _Color of the site's links and buttons_
 
 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'
 
 <br>
 
+#### _Color of the site's footer_
+
+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:
+
+```yaml
+footer-color: '#EEEEEE'
+```
+
+<br>
+
+#### _Color of the site's footer text_
+
+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:
+
+```yaml
+footer-text-color: '#95989A'
+```
+
+<br>
+
+#### _Maximum width of the site_
+
+You can customize the maximum width that your site should fill (in pixels). Please provide a number WITHOUT the 'px' like so:
+
+```yaml
+site-max-width: 1200
+```
+
+<br>
+
+#### _Header padding_
+
+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:
+
+```yaml
+header-padding: 80
+```
+
+<br>
+
+#### _Footer padding_
+
+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:
+
+```yaml
+footer-padding: 100
+```
+
+<br>
+
+#### _Custom CSS_
+
+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:
+
+```yaml
+custom-css: "
+  body {
+    background-color: #FFFFFF;
+  }
+"
+```
+
+<br>
+
 #### _Favicon_
 
 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
 
 #### _Home columns_
 
-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 is optional: if it is not set, there will be no button for that column on your site.
+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.
 
 ```yaml
 home-columns:
   - heading: Your heading 1 here
     content: Your content 1 here
     button-url: http://www.your-link-1-here.com
+    button-label: Your button 1 text here
 
   - heading: Your heading 2 here
     content: Your content 2 here
     button-url: http://www.your-link-2-here.com
+    button-label: Your button 1 text here
 
   - heading: Your heading 3 here
     content: Your content 3 here
     button-url: http://www.your-link-3-here.com
+    button-label: Your button 1 text here
+```
+
+<br>
+
+#### _Read more button text_
+
+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.
+
+```yaml
+post-button-label: Read more
 ```
 
 <br>
@@ -340,16 +470,6 @@ The available layouts are:
 
 <br>
 
-#### _Featured image_
-
-You can specify a path to a featured image for a page. It will then be used instead of the default header.
-
-```yaml
-featured-image: /assets/img/your-image.jpg
-```
-
-<br>
-
 #### _Title_
 
 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
 
 #### _Featured image_
 
-You can specify a path to a featured image for a post. It will then be used instead of the default header and as a preview image in lists in which the post appears.
+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.
 
 ```yaml
 featured-image: /assets/img/your-image.jpg
@@ -542,17 +662,93 @@ tags:
   - Football
 ```
 
-<!-- ## Contributing
+<br>
+
+### Editing the content and publishing your site online
+
+If you're having a server on the internet and want to publish or refresh your Jekyll site on there, follow these steps:
+
+<br>
+
+#### _Updating page or post content_
+
+If you want to update the content of a page or a post, then follow these steps:
+
+**Step 1:** Open your terminal and navigate into your Jekyll project's directory on your local machine.
+
+
+**Step 2:** Run the following command:
+
+    bundle exec jekyll serve
+
+**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).
+
+**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.
+
+**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.
+
+**Step 6:** Open your website on the internet in your browser and check if everything went as planned.
+
+<br>
+
+#### _Updating global configuration options_
+
+If you want to update something in your Jekyll site's `_config.yml`, you have to follow these steps:
+
+**Step 1:** Edit the file with a code editor.
+
+**Step 2:** Run the following command in the terminal:
+
+    bundle exec jekyll serve
+
+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>.
+
+**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.
+
+**Step 4:** Open your website on the internet in your browser and check if everything went as planned.
+
+## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. 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.
+Bug reports and pull requests are welcome on GitHub at <https://github.com/michael-harms/harms-columns-front-page>.
+<!-- 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. -->
 
 ## Development
 
-To set up your environment to develop this theme, run `bundle install`.
+<br>
+
+### Overriding
+
+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.
+
+<br>
+
+### Develop your own version
+
+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:
+
+**Step 1:** Open the terminal and navigate into the directory where you want your theme to be stored.
+
+**Step 2:** Create a new Jekyll theme, by running the following command in the terminal:
+
+    jekyll new-theme your-theme-name-here
+
+**Step 3:** Enter the theme directory in the terminal by running:
+
+    cd your-theme-name-here
+
+**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.
+
+**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.
+
+**Step 5:** Develop your theme
+
+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.
+
+When your theme is released, only the files tracked with Git will be released.
 
-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, documents, data, etc. like normal 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.
+**Step 6:** Publish your new theme
 
-When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released. -->
+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.
 
 <br>
 

data/_includes/custom-styles.html

@@ -0,0 +1,208 @@
+<!-- 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 -->
+<style>
+
+  /* Custom max-width for the site */
+  {% if site.site-max-width %}
+    html body .page-content .margin {
+      max-width: calc({{ site.site-max-width}}px + 80px) !important;
+    }
+
+    html body .page-content .wrapper {
+      max-width: {{ site.site-max-width }}px !important;
+    }
+
+    body div.header .header-content {
+      max-width: {{ site.site-max-width }}px !important;
+    }
+
+    html body nav ul.desktop-nav {
+      max-width: {{ site.site-max-width }}px !important;
+    }
+  {% endif %}
+
+  /* Custom header-padding to influence it's height */
+  {% if site.header-padding %}
+    html body div.header {
+      padding-top: {{ site.header-padding }}px;
+      padding-bottom: {{ site.header-padding }}px;
+    }
+  {% endif %}
+
+  /* Custom footer-padding to influence it's height */
+  {% if site.footer-padding %}
+    html footer {
+      padding-top: {{ site.footer-padding }}px;
+      padding-bottom: {{ site.footer-padding }}px;
+    }
+  {% endif %}
+
+  /* Custom header background-color */
+  {% if site.header-color %}
+    div.header {
+      background-color: {{ site.header-color }} !important;
+    }
+  {% endif %}
+
+  /* Custom background-color for the front page columns */
+  {% if site.columns-color %}
+    .dark-section .col {
+      background-color: {{ site.columns-color }} !important;
+      -webkit-box-shadow: none !important;
+      -moz-box-shadow: none !important;
+      box-shadow: none !important;
+    }
+  {% endif %}
+
+  /* Custom text-color for the front page columns */
+  {% if site.columns-text-color %}
+    html body .dark-section .wrapper .col {
+      color: {{ site.columns-text-color }} !important;
+    }
+  {% endif %}
+
+  /* Custom color for the site's h1 */
+  {% if site.h1-color %}
+    h1 {
+      color: {{ site.h1-color }} !important;
+    }
+  {% endif %}
+
+  /* Custom color for the site's subtitle in the header */
+  {% if site.subtitle-color %}
+    html body div.header .header-content .header-left p.sub-title {
+      color: {{ site.subtitle-color }};
+    }
+  {% endif %}
+
+  /* Custom color for the site's h2 */
+  {% if site.h2-color %}
+    h2 {
+      color: {{ site.h2-color }} !important;
+    }
+  {% endif %}
+
+  /* Custom color for the site's h3 */
+  {% if site.h3-color %}
+    h3 {
+      color: {{ site.h3-color }} !important;
+    }
+  {% endif %}
+
+  /* Custom color for all of the site's links and buttons (except for the social buttons) */
+  {% if site.link-color %}
+    html body a {
+      color: {{ site.link-color }};
+    }
+
+    html body #accordion a {
+      color: {{ site.link-color }} !important;
+    }
+
+    html body .wrapper .tag-list li a.selected {
+      background-color: {{ site.link-color }};
+      border-color: {{ site.link-color }};
+    }
+
+    html body .wrapper #accordion .ui-accordion-header.ui-state-active {
+      border-color: {{ site.link-color }};
+      background-color: {{ site.link-color }};
+    }
+
+    a.button {
+      border: 1px solid {{ site.link-color }};
+      color: {{ site.link-color }};
+    }
+
+    a.button:hover {
+      background-color: {{ site.link-color }};
+    }
+
+    html body nav ul .mobile.menu-button:hover .menu-button-container .menu-button-line {
+      background-color: {{ site.link-color }};
+    }
+
+    html body nav ul a:hover {
+      color: {{ site.link-color }};
+    }
+
+    html body nav ul.desktop-nav li.active {
+      border-bottom: 5px solid {{ site.link-color }};
+    }
+
+    html body nav ul.desktop-nav li.active a {
+      color: {{ site.link-color }};
+    }
+
+    html body nav ul.desktop-nav li a:hover {
+      color: {{ site.link-color }};
+    }
+
+    html body div.mobile-nav-content ul li.active {
+      border-bottom: 1px solid {{ site.link-color }};
+    }
+
+    html body div.mobile-nav-content ul li.active a {
+      color: {{ site.link-color }};
+    }
+
+    html body div.mobile-nav-content ul li a:hover {
+      color: {{ site.link-color }};
+    }
+  {% endif %}
+
+  /* Custom color for the site's plain text */
+  {% if site.text-color %}
+    html body .page-content .wrapper.home-content {
+      color: {{ site.text-color }};
+    }
+
+    html body .wrapper.posts-wrapper .post .post-contents p {
+      color: {{ site.text-color }};
+    }
+
+    html body .page-content .wrapper.page p {
+      color: {{ site.text-color }};
+    }
+
+    body .wrapper .post ul {
+      color: {{ site.text-color }};
+    }
+
+    body .wrapper.page ul {
+      color: {{ site.text-color }};
+    }
+
+    html body .page-content .wrapper.single-post p,
+    html body .page-content .wrapper.single-post ul {
+      color: {{ site.text-color }};
+    }
+  {% endif %}
+
+  /* Custom background-color for the site's footer */
+  {% if site.footer-color %}
+    html footer {
+      background-color: {{ site.footer-color }};
+    }
+  {% endif %}
+
+  /* Custom color for the site's footer text and social buttons */
+  {% if site.footer-text-color %}
+    html footer p {
+      color: {{ site.footer-text-color }};
+    }
+
+    html footer .social-container a.button {
+      color: {{ site.footer-text-color }} !important;
+      border-color: {{ site.footer-text-color }} !important;
+    }
+
+    footer .social-container a.button:hover {
+      background-color: {{ site.footer-text-color }} !important;
+    }
+  {% endif %}
+
+  /* Custom css from the corresponding site's config variable */
+  {% if site.custom-css %}
+    {{ site.custom-css }}
+  {% endif %}
+</style>

data/_includes/header.html

@@ -32,7 +32,7 @@
   <link rel="icon" type="image/png" href="{{ site.favicon }}" sizes="32x32">
 
   <!-- CSS that overrides the defaults, when the theme user selected custom colors in the site's global configuration -->
-  {% include custom-colors.html %}
+  {% include custom-styles.html %}
 
 </head>
 
@@ -42,10 +42,7 @@
   <!-- displays the main desktop and the main mobile navigation menu -->
   {% include nav.html %}
 
-  <!-- displays the header (If the page has a featured-image set it uses it as the header. If not, it shows the default header with the profile/logo image and the site's title and subtitle) -->
-  {% if page.featured-image %}
-    <div class="header" style="height: 120px; background-image: url({{ page.featured-image }}); background-size: contain; background-position: center; background-repeat: no-repeat;">
-  {% else %}
+  <!-- displays the header (it shows the the profile/logo image and the site's title and subtitle) -->
   <div class="header">
     <div class="header-content">
       <div class="header-left">
@@ -58,5 +55,4 @@
         </div>
       </div>
     </div>
-    {% endif %}
   </div>

data/_layouts/home.html

@@ -22,13 +22,15 @@
         <!-- displays as much columns as there's set in the site's global configuration -->
         {% for item in site.home-columns %}
           <div class="col">
-            <h3 class="dark">{{ item.heading }}</h3>
+            <h3>{{ item.heading }}</h3>
             <p>
               {{ item.content }}
             </p>
             <!-- if a link is defined, displays it as a button -->
             {% if item.button-url %}
-              <a href="{{ item.button-url }}" class="button" target="_blank">Mehr erfahren</a>
+              <a href="{{ item.button-url }}" class="button" target="_blank">
+                {{ item.button-label }}
+              </a>
             {% endif %}
           </div>
         {% endfor %}
@@ -83,7 +85,9 @@
                   <span class="date">{{ post.publishing-date }}</span>
                 {% endif %}
                 <p class="post-excerpt">{{ post.excerpt }}</p>
-                <a class="button" href="{{ post.url | prepend: site.baseurl }}">Weiterlesen</a>
+                <a class="button" href="{{ post.url | prepend: site.baseurl }}">
+                  {{ site.post-button-label }}
+                </a>
               </div>
             </div>
 
@@ -101,7 +105,9 @@
                   <span class="date">{{ post.publishing-date }}</span>
                 {% endif %}
                 <p class="post-excerpt">{{ post.excerpt }}</p>
-                <a class="button" href="{{ post.url | prepend: site.baseurl }}">Weiterlesen</a>
+                <a class="button" href="{{ post.url | prepend: site.baseurl }}">
+                  {{ site.post-button-label }}
+                </a>
               </div>
             </div>
 

data/_layouts/page.html

@@ -62,7 +62,9 @@
                     <span class="date">{{ post.publishing-date }}</span>
                   {% endif %}
                   <p class="post-excerpt">{{ post.excerpt }}</p>
-                  <a class="button" href="{{ post.url | prepend: site.baseurl }}">Weiterlesen</a>
+                  <a class="button" href="{{ post.url | prepend: site.baseurl }}">
+                    {{ site.post-button-label }}
+                  </a>
                 </div>
               </div>
 
@@ -80,7 +82,9 @@
                     <span class="date">{{ post.publishing-date }}</span>
                   {% endif %}
                   <p class="post-excerpt">{{ post.excerpt }}</p>
-                  <a class="button" href="{{ post.url | prepend: site.baseurl }}">Weiterlesen</a>
+                  <a class="button" href="{{ post.url | prepend: site.baseurl }}">
+                    {{ site.post-button-label }}
+                  </a>
                 </div>
               </div>
 

data/_sass/_headings.sass

@@ -27,7 +27,4 @@ h3
   margin-bottom: 10px
   margin-top: 30px
   text-align: left
-  &.light
-    color: $white
-  &.dark
-    color: $black
+  color: $black

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: harms-columns-front-page
 version: !ruby/object:Gem::Version
-  version: 2.1.1
+  version: 2.2.0
 platform: ruby
 authors:
 - Michael Harms
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-07-04 00:00:00.000000000 Z
+date: 2017-07-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -88,7 +88,7 @@ files:
 - LICENSE.txt
 - README.md
 - _includes/css/vendor/jquery-ui.min.css
-- _includes/custom-colors.html
+- _includes/custom-styles.html
 - _includes/footer.html
 - _includes/header.html
 - _includes/icon-github.html

data/_includes/custom-colors.html

@@ -1,96 +0,0 @@
-<!-- CSS that overrides the defaults, when the theme user selected custom colors in the site's global configuration -->
-<style>
-
-  /* Custom header background-color */
-  {% if site.header-color %}
-    div.header {
-      background-color: {{ site.header-color }} !important;
-    }
-  {% endif %}
-
-  /* Custom background-color for the front page columns */
-  {% if site.columns-color %}
-    .dark-section .col {
-      background-color: {{ site.columns-color }} !important;
-      -webkit-box-shadow: none !important;
-      -moz-box-shadow: none !important;
-      box-shadow: none !important;
-    }
-  {% endif %}
-
-  /* Custom color for the site's h1 */
-  {% if site.h1-color %}
-    h1 {
-      color: {{ site.h1-color }} !important;
-    }
-  {% endif %}
-
-  /* Custom color for the site's h2 */
-  {% if site.h2-color %}
-    h2 {
-      color: {{ site.h2-color }} !important;
-    }
-  {% endif %}
-
-  /* Custom color for all of the site's links and buttons (except for the social buttons) */
-  {% if site.link-color %}
-    html body a {
-      color: {{ site.link-color }};
-    }
-
-    html body #accordion a {
-      color: {{ site.link-color }} !important;
-    }
-
-    html body .wrapper .tag-list li a.selected {
-      background-color: {{ site.link-color }};
-      border-color: {{ site.link-color }};
-    }
-
-    html body .wrapper #accordion .ui-accordion-header.ui-state-active {
-      border-color: {{ site.link-color }};
-      background-color: {{ site.link-color }};
-    }
-
-    a.button {
-      border: 1px solid {{ site.link-color }};
-      color: {{ site.link-color }};
-    }
-
-    a.button:hover {
-      background-color: {{ site.link-color }};
-    }
-
-    html body nav ul .mobile.menu-button:hover .menu-button-container .menu-button-line {
-      background-color: {{ site.link-color }};
-    }
-
-    html body nav ul a:hover {
-      color: {{ site.link-color }};
-    }
-
-    html body nav ul.desktop-nav li.active {
-      border-bottom: 5px solid {{ site.link-color }};
-    }
-
-    html body nav ul.desktop-nav li.active a {
-      color: {{ site.link-color }};
-    }
-
-    html body nav ul.desktop-nav li a:hover {
-      color: {{ site.link-color }};
-    }
-
-    html body div.mobile-nav-content ul li.active {
-      border-bottom: 1px solid {{ site.link-color }};
-    }
-
-    html body div.mobile-nav-content ul li.active a {
-      color: {{ site.link-color }};
-    }
-
-    html body div.mobile-nav-content ul li a:hover {
-      color: {{ site.link-color }};
-    }
-  {% endif %}
-</style>