jekyll-theme-collider 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: e43b46ed2c9fd039a2764d588a90ffb2e35b9240
+  data.tar.gz: c877eb77514601161e9dca36e55fcbf119efbaf4
+SHA512:
+  metadata.gz: d4e67c2da8d0b68d28a7dbe9db897cc6ba1ffeeaabbdf0d7f94192feb2709b97e2242e01c0ba7aa444cf461f00514a202cb5c7f775348e979e6cd8308c2f354f
+  data.tar.gz: b15d24054352e11d78e2359d07f9f01516344f1a00a8da68862283dc227767309186b01d569ed4295d6696615ae75edda61a149aa92c13e9b3a8ae79f83a55ec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Ryan Brown
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,155 @@
+# jekyll-theme-collider
+
+## About
+This theme has two main nifty features, the use of [particles.js](https://vincentgarreau.com/particles.js/) and the [jekyll-paginate-v2 plugin](https://github.com/sverrirs/jekyll-paginate-v2/tree/master/examples). For those who don't know, the jekyll-paginate-v2 plugin allows you to do cool things like paginate within a given collection, which the current jekyll-paginate gem does not allow.
+
+I'm also using the powers of [ITCSS](https://github.com/ahmadajmi/awesome-itcss) and [BEM](http://getbem.com/introduction/) in an attempt to keep the SCSS as clean as possible. You may also notice that I'm trying to avoid the use of any libraries to keep things nice and simple. This also allows for greater learning opportunities.
+
+The font I'm using is a favorite of mine, [Operator Mono SSm](https://www.typography.com/fonts/operator/styles/operatormonoscreensmart). Also notice the fun use of colors on tags and each page, these are easily customizable by design and is detailed below.
+
+Please [contact me](https://www.ryandevelops.com/contact) if you are interested in contributing to this theme or have any ideas for improvement!
+
+## Installation
+**Jekyll requirements**
+* You must have Ruby installed:
+    * https://www.ruby-lang.org/en/downloads/
+* Install Jekyll and Bundler:
+    * `gem install jekyll bundler`
+
+**Create a local copy of the site**
+* Download this site:
+    * `git clone https://github.com/ryancolorcafe/jekyll-theme-collider.git`
+* Move into directory:
+    * `cd jekyll-theme-collider`
+* Install required gems:
+    * `bundle install`
+* Verify it's working:
+    * `bundle exec jekyll serve`
+    * Browse to http://localhost:4000
+
+**Install theme using gem**
+* Add this line to your Gemfile:
+    * `gem "jekyll-theme-collider"`
+* Install running this command in your terminal:
+    * `bundle install`
+* Remove the default index.md and about.md files:
+    * `rm index.md about.md`
+* Download the index.md file:
+    * `curl -L -O "https://github.com/ryancolorcafe/jekyll-theme-collider/raw/master/index.md"`
+* Create the nec·essary folders:
+    * `mkdir _blog_posts _blog_tags pages tags`
+* Download pages files:
+    * `cd pages && curl -L -O "https://github.com/ryancolorcafe/jekyll-theme-collider/raw/master/pages/{about.html,blog.html,contact.html,thanks.html}"`
+
+
+* While not necessary to download the following, you may want to in order to see an example of the use of tags, and to have enough posts to see the jekyll-paginate-v2 plugin in action. Run each command one at a time:
+  * `cd ../tags && curl -L -O "https://github.com/ryancolorcafe/jekyll-theme-collider/raw/master/tags/{nonprofit.md,painting.md}"`
+
+  * `cd ../_blog_tags && curl -L -O "https://github.com/ryancolorcafe/jekyll-theme-collider/raw/master/_blog_tags/{nonprofit.md,painting.md}"`
+
+  * `cd ../_blog_posts && curl -L -O "https://github.com/ryancolorcafe/jekyll-theme-collider/raw/master/_blog_posts/{2015-08-15-transition-projects.md,2016-09-30-disjecta.md,2016-10-27-the-nature-conservancy.md,2017-09-27-nice-little-clouds.md,2017-11-10-caldera-arts.md,2018-02-10-the-nature-conservancy.md,2018-07-11-happy-little-trees.md}"`
+
+* Don't forget to go back to the root directory `cd ..`
+
+* Finally, add the following to config.yml:
+
+```
+theme: jekyll-theme-collider
+
+plugins:
+  - jekyll-paginate-v2
+
+collections:
+  blog_posts:
+    output: true
+    permalink: /collection/:name
+  blog_tags:
+
+pagination:
+  enabled: true
+  per_page: 3
+  permalink: '/:num/'
+  title: ':title'
+  limit: 0
+  sort_field: 'date'
+  sort_reverse: true
+  collection: 'blog_posts'
+  trail:
+    before: 2
+    after: 2
+```
+
+* Run your server and you should be good to go!  
+  * `bundle exec jekyll serve`
+
+**Troubleshooting:**
+* The `curl -L -O` commands may not have fully downloaded each file. Even if it seems the file was fully downloaded, open each one to make sure that it doesn't just contain a 503 error inside. Delete the files with errors and retry the curl commands.  
+* You may need to restart your server in order for your changes to take effect.
+
+## Site configuration
+
+**Config file:**
+
+Be sure to add your own site title, email, github username, etc. in config.yml.
+
+**Tags:**
+
+To create a new tag, make a new file in the `tags` directory with the name of the tag you'd like to use. The structure of each is the following:
+
+```
+---
+layout: blog
+title: Jekyll
+permalink: /jekyll
+color: purple
+pagination:
+  enabled: true
+  collection: all
+  tag: jekyll
+---
+
+All posts tagged with _Jekyll_
+```
+If you're familiar with Jekyll, most of this will look familiar. The parts unique to this theme are the color and the pagination configurations. The color configured here will determine the color of the tag page header and is based on SCSS color settings, meaning it's not just the default CSS purple color being used here. More on that in another section.
+
+The pagination settings are necessary to set for the jekyll-pagination-v2 plugin. The only one you'll likely want to ever modify here is the `tag:` setting, where you simply put the tag name you'd like to use in lowercase.
+
+You'll also want to create a new file in the `_blog_tags` directory that is also named after the tag you'd like to use. This is to set the color of the actual tags themselves, and only the color needs to be set as below:
+```
+---
+color: purple
+---
+```
+
+**Colors**
+
+If using this theme as a gem, see [overriding theme defaults](https://jekyllrb.com/docs/themes/#overriding-theme-defaults) in the Jekyll docs as you will need to make a copy of the following files.
+
+To set up a new color variable in the SCSS, you may do so in `settings/_color.scss`. To create a new reusable color class that can be used for tag pages and the tags themselves, go to `elements/_colors.scss`. The structure a new color classes should look like the following:
+
+```
+.orange {
+  color: $channel-orange;
+  &.icon {
+    fill: $channel-orange;
+  }
+}
+
+.bg--orange {
+  background: $channel-orange;
+  color: $white;
+}
+
+a.bg--orange:hover {
+  background: darken($channel-orange, $darken--button);
+}
+```
+
+This is what would allow you to simply configure `color: orange` in your `tags` and `_blog_tags` directory files. For an example of what is happening under the hood, you can take a look at the `_includes/header.html` file, lines 1-15.
+
+## Future projects
+
+* Add comments to posts using Disqus  
+* A portfolio/work page using CSS Grid  
+* Search bar for articles in blog  
+* Modular scale typography  

data/_includes/header.html

@@ -0,0 +1,35 @@
+{% if page.color %}
+  {% assign background = page.color %}
+{% elsif page.tags %}
+  {% for tag in page.tags %}
+    {% assign post_tag_downcase = tag | downcase %}
+    {% for blog_tag in site.blog_tags %}
+      {% assign blog_tag_title = blog_tag.title | downcase %}
+      {% if blog_tag_title == post_tag_downcase %}
+        {% assign background = blog_tag.color %}
+      {% endif %}
+    {% endfor %}
+  {% endfor %}
+{% endif %}
+
+<header class="{% if page.title == 'Home' %}header__homepage{% endif %} bg--{{ background | default: 'green' }}">
+  <nav>
+    {% unless page.title == 'Home' %}
+      <a class="header__home" href="{{ "/" | relative_url}}">{{ site.title | escape }}</a>
+    {% endunless %}
+    <ul>
+      <li>
+        <a class="header__link" href="/blog">Blog</a>
+      </li>
+      <li>
+        <a class="header__link" href="/about">About</a>
+      </li>
+      <li>
+        <a class="header__link" href="/contact">Contact</a>
+      </li>
+    </ul>
+  </nav>
+  {% unless page.title == 'Home' %}
+    <h1 class="header__title">{{ page.title }}</h1>
+  {% endunless %}
+</header>

data/_includes/pagination.html

@@ -0,0 +1,26 @@
+<!-- Pagination buttons -->
+{% if paginator.total_pages > 1 %}
+  <ul class="pagination">
+    {% if paginator.first_page %}
+      <a href="{{ paginator.first_page_path | prepend: site.baseurl | replace: '//', '/' }}">First</a>
+    {% endif %}
+
+    {% if paginator.previous_page %}
+      <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&larr; Prev</a>
+    {% endif %}
+
+    {% if paginator.page_trail %}
+      {% for trail in paginator.page_trail %}
+        <a href="{{ trail.path | prepend: site.baseurl | replace: '//', '/' }}" title="{{trail.title}}" {% if page.url == trail.path %}class="selected"{% endif %}>{{ trail.num }}</a>
+      {% endfor %}
+    {% endif %}
+
+    {% if paginator.next_page %}
+      <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &rarr;</a>
+    {% endif %}
+
+    {% if paginator.last_page %}
+      <a href="{{ paginator.last_page_path | prepend: site.baseurl | replace: '//', '/' }}">Last</a>
+    {% endif %}
+  </ul>
+{% endif %}

data/_layouts/about.html

@@ -0,0 +1,23 @@
+---
+layout: default
+---
+
+<div class="post-list about">
+  <figure class="right"><img src="https://via.placeholder.com/200x232" alt="placeholder photo">
+  </figure>
+  <p>
+    We must stand up shared vocabulary social capital transparent white paper. A impact investing commitment silo; humanitarian, greenwashing; move the needle design thinking ecosystem. Thought leader state of play do-gooder shared value deep dive uplift replicable. Systems thinking, social capital global, replicable vibrant inspire. Grit entrepreneur shared unit of analysis.
+  </p>
+  <p>
+    Incubator, inspiring, dynamic greenwashing her body her rights social entrepreneurship citizen-centered. Thought provoking corporate social responsibility catalyze citizen-centered systems thinking.
+  </p>
+  <p>
+    Improve the world uplift green space ideate disrupt challenges and opportunities shared unit of analysis natural resources strategy. Catalyze big data strategize save the world inspirational milestones humanitarian.
+  </p>
+  <p>
+    Segmentation shared vocabulary collective impact gender rights, support, green space engaging improve the world when. Blended value, problem-solvers, efficient but improve the world bandwidth.
+  </p>
+  <p>
+     The social entrepreneurship social innovation social intrapreneurship shared value. Empower communities save the world youth scalable unprecedented challenge best practices ecosystem. Circular, movements benefit corporation but synergy.
+  </p>
+</div>

data/_layouts/blog.html

@@ -0,0 +1,38 @@
+---
+layout: default
+permalink: /blog/
+---
+
+<ul class="post-list">
+  <!-- All posts -->
+  {% assign posts = paginator.posts %}
+  {% for post in posts %}
+    <li>
+      <h2>
+        <a class="post-list__link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
+      </h2>
+      {{ post.date | date: "%b %-d, %Y" }}
+      <div class="post-list__meta">
+        {% if post.tags %}
+          {% for tag in post.tags %}
+            {% assign post_tag_downcase = tag | downcase %}
+            {% for blog_tag in site.blog_tags %}
+              {% assign blog_tag_title = blog_tag.title | downcase %}
+              {% if blog_tag_title == post_tag_downcase %}
+                <div class="post-list__tags">
+                  <a href="/{{ tag }}" class="post-list__tags bg--{{ blog_tag.color | default: 'grey' }}">{{ tag }}</a>
+                </div>
+              {% endif %}
+            {% endfor %}
+          {% endfor %}
+        {% endif %}
+      </div>
+      <div class="post-list__excerpt">
+        {{ post.excerpt }}
+      </div>
+      <a href="{{ site.baseurl }}{{ post.url }}" class="post-list__read-more">Read more</a>
+    </li>
+  {% endfor %}
+
+  {% include pagination.html %}
+</ul>

data/_layouts/contact.html

@@ -0,0 +1,22 @@
+---
+layout: default
+---
+
+<div class="contact-form">
+  <form action="https://formspree.io/{{site.email}}" method="POST">
+    <div class="input-wrapper">
+      <label>Name</label>
+      <input type="text" name="name">
+    </div>
+    <div class="input-wrapper">
+      <label>Email</label>
+      <input type="email" name="_replyto">
+    </div>
+    <div class="input-wrapper">
+      <label>Message</label>
+      <textarea name="message" placeholder="Your message"></textarea>
+    </div>
+    <input type="hidden" name="_next" value="/thanks" />
+    <input type="submit" value="Send" class="bg--green">
+  </form>
+</div>

data/_layouts/default.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta property="og:image" content="{{ "/assets/images/theme-image.png" | prepend: site.baseurl }}">
+    <meta property="og:description" content="The Collider Jekyll Theme is a gem-based theme that helps makes use of the jekyll-paginate-v2 plugin and particles.js.">
+    <meta property="og:title" content="Collider Jekyll Theme">
+    <meta property="og:url" content="//{{site.hosted_url}}">
+    <link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+  </head>
+  <body>
+    <div class="wrap">
+      {% unless page.title == 'Home' %}{% include header.html %}{% endunless %}
+      {{ content }}
+    </div>
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,18 @@
+---
+layout: default
+---
+
+<div id="particles-js">
+  {% include header.html %}
+  <div class="site-title__wrapper">
+    <h1>
+      <span class="site-title__text">{{site.username}}</span>
+      <span class="site-title__text--sub">{{site.user_title}}</span>
+    </h1>
+    <a href="https://github.com/{{site.github_username}}" target="_blank"><i class="fab fa-github fa-3x"></i></a>
+    <a href="https://www.linkedin.com/in/{{site.linked_in_profile_name}}/" target="_blank"><i class="fab fa-linkedin-in fa-3x"></i></a>
+  </div>
+</div>
+
+<script type="text/javascript" src="{{ base.url | prepend: site.url }}/assets/js/particles.js"></script>
+<script type="text/javascript" src="{{ base.url | prepend: site.url }}/assets/js/app.js"></script>

data/_layouts/post.html

@@ -0,0 +1,31 @@
+---
+layout: default
+---
+<article class="post post-list" itemscope itemtype="http://schema.org/BlogPosting">
+  <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+    {{ page.date | date: "%b %-d, %Y" }}
+  </time>
+  <div class="post-list__meta">
+    {% if page.tags %}
+      {% for tag in page.tags %}
+        {% assign post_tag_downcase = tag | downcase %}
+        {% for blog_tag in site.blog_tags %}
+          {% assign blog_tag_title = blog_tag.title | downcase %}
+          {% if blog_tag_title == post_tag_downcase %}
+            <div class="post-list__tags">
+              <a href="/{{ tag }}" class="bg--{{ blog_tag.color | default: 'grey' }}">{{ tag }}</a>
+            </div>
+          {% endif %}
+        {% endfor %}
+      {% endfor %}
+    {% endif %}
+  </div>
+
+  <div class="post__content">
+    {{ content | markdownify }}
+  </div>
+
+  {% if site.disqus.shortname %}
+    {% include disqus_comments.html %}
+  {% endif %}
+</article>

data/_layouts/thanks.html

@@ -0,0 +1,12 @@
+---
+layout: default
+---
+
+<div class="contact-form" style="text-align: center;">
+  <h3 class="form-message">Thanks for reaching out!</h3>
+  <p>I'll get back to you as soon as possible.</p>
+  <div class="button-wrapper">
+    <a href="/" class="button bg--green">Home</a>
+    <a href="/blog" class="button bg--green">Blog</a>
+  </div>
+</div>

data/_sass/jekyll-theme-collider.scss

@@ -0,0 +1,6 @@
+@charset "utf-8";
+
+// Import partials from `sass_dir` (defaults to `_sass`)
+
+// Configuration
+@import "jekyll-theme-collider/jekyll-theme-collider";

data/_sass/jekyll-theme-collider/components/_contact.scss

@@ -0,0 +1,74 @@
+.contact-form {
+  max-width: 45em;
+  padding: 3em 9em 4em 9em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media all and (max-width: 768px) {
+  .contact-form {
+    padding: 2em 2em 4em 2em;
+  }
+}
+
+.form-message {
+  font-family: "Operator Mono SSm-BookItalic";
+  text-align: center;
+}
+
+.input-wrapper {
+  padding: 0.4em 0em;
+}
+
+input, label {
+  text-align: left;
+  margin-bottom: 7px;
+}
+
+input {
+  width: 100%;
+  box-shadow: inset 0 2px 0 rgba(39,65,90,.075);
+  border-radius: 2px;
+  border: 0;
+  padding: 11px 13px;
+  background-color: #F7F7F8;
+  margin-top: 7px;
+  font-size: 14px;
+}
+
+textarea {
+  display: block;
+  margin-top: 7px;
+  width: 100%;
+  height: 200px;
+  padding: 10px;
+  font-size: 14px;
+  box-shadow: inset 0 2px 0 rgba(39,65,90,.075);
+  border-radius: 2px;
+  border: 0;
+  background-color: #F7F7F8;
+}
+
+input[type="submit"] {
+  text-align: center;
+  cursor: pointer;
+  transition: background 0.5s;
+  font-size: 16px;
+  &:hover {
+    background: darken($dark-sea-green, $darken--button);
+  }
+}
+
+.button-wrapper {
+  margin-top: 2.5em;
+}
+
+.button {
+  padding: 11px 40px;
+  box-shadow: inset 0 2px 0 rgba(39, 65, 90, 0.075);
+  text-decoration: none;
+  transition: background 0.5s;
+  &:hover{
+    color: #FFF;
+  }
+}