jekyll-theme-potato-hacker 1.0.0

data/README.md

@@ -0,0 +1,64 @@
+# jekyll-theme-potato-hacker
+
+Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes` and your sass in `_sass`. To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
+
+![screenshot](screenshot.png "screenshot")
+
+Check out the [demo](https://luxedo.github.io/jekyll-theme-potato-hacker/)
+
+## Installation
+
+Add this line to your Jekyll site's Gemfile:
+
+```ruby
+gem "jekyll-theme-potato-hacker"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: jekyll-theme-potato-hacker
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jekyll-theme-potato-hacker
+
+## Usage
+
+This is a simple theme I made to my portfolio/blog https://luxedo.github.io/
+There are four different categories of pages for this template:
+* Main page `index.md` in the root.
+* Item pages `_items` folder.
+* Blog posts `_posts` folder.
+* Dropdown pages `_dropdown` folder.
+
+The dropdown menus are generated based on the [front matter](https://jekyllrb.com/docs/front-matter/) data in the files. Use the `dropdown` attribute to chose where the page will be placed.
+```yaml
+---
+layout: page
+title: dropdown1 item1
+description: Test page
+dropdown: dropdown1
+---
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/luxedo/jekyll-theme-potato-hacker/issues. 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`.
+
+You theme is setup just like a normal Jelyll 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.
+
+When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.
+
+## License
+
+The theme is available as open source under the terms of the [GPL-3.0 License](https://www.gnu.org/licenses/gpl-3.0.en.html).

data/_includes/footer.html

@@ -0,0 +1,55 @@
+<footer class="page-footer">
+  <center>
+    {% if site.theme_switch == true %}
+    <div class="row">
+      <div class="col-sm-8 col-sm-offset-2">
+        <a onclick="toggleTheme();">
+          Light/Dark
+        </a>
+      </div>
+    </div>
+    {% endif %}
+    <div class="row">
+      <div class="col-sm-8 col-sm-offset-2">
+        {% if site.github_username != null %}
+        <a href="https://github.com/{{site.github_username}}" target="_blank">
+          <i class="fa fa-github fa-3x"></i>
+        </a>
+        {% endif %}
+        {% if site.email != null %}
+        <a href="mailto:{{site.email}}">
+          <i class="fa fa-envelope fa-3x"></i>
+        </a>
+        {% endif %}
+        {% if site.facebook_username != null %}
+        <a href="https://www.facebook.com/{{site.facebook_username}}" target="_blank">
+          <i class="fa fa-facebook fa-3x"></i>
+        </a>
+        {% endif %}
+        {% if site.twitter_username != null %}
+        <a href="https://twitter.com/{{site.twitter_username}}" target="_blank">
+          <i class="fa fa-twitter fa-3x"></i>
+        </a>
+        {% endif %}
+        <!-- {% if site.gplus_id != null %}
+        <a href="https://plus.google.com/{{site.gplus_id}}" target="_blank">
+          <i class="fa fa-google-plus fa-3x"></i>
+        </a>
+        {% endif %} -->
+        {% if site.linkedin_id != null %}
+        <a href="https://www.linkedin.com/in/{{site.linkedin_id}}" target="_blank">
+          <i class="fa fa-linkedin fa-3x"></i>
+        </a>
+        {% endif %}
+      </div>
+    </div>
+    {% if site.email != null and site.author != null %}
+    <div class="row">
+      <div class="col-sm-8 col-sm-offset-2">
+        Copyright (c) 20{{ site.time | date: '%y' }} {{site.author}} -
+        <a href="mailto:{{site.email}}">&lt;{{site.email}}&gt;</a>
+      </div>
+    </div>
+    {% endif %}
+  </center>
+</footer>

data/_includes/head.html

@@ -0,0 +1,57 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+  <meta name="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+
+  <!-- Google Authorship Markup -->
+  <link rel="author" href="https://plus.google.com/{{site.gplus_id}}?rel=author">
+
+  <!-- Social: Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@{{site.twitter_username}}">
+  <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
+  <meta name="twitter:description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+  {% if page.image %}
+  <meta property="twitter:image:src" content="{{ site.url }}{{page.image }}">
+  {% else %}
+  <meta property="twitter:image:src" content="{{ '/assets/img/opengraph.png' | prepend: site.baseurl | prepend: site.url }}">
+  {% endif %}
+
+  <!-- Social: Facebook / Open Graph -->
+  <meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
+  {% if page.image %}
+  <meta property="og:image" content="{{ site.url }}{{page.image }}">
+  {% else %}
+  <meta property="og:image" content="{{ '/assets/img/opengraph.png' | prepend: site.baseurl | prepend: site.url }}">
+  {% endif %}
+  <meta property="og:description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+  <meta property="og:site_name" content="{{ site.title }}">
+
+  <!-- Social: Google+ / Schema.org  -->
+  <meta itemprop="name" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}"/>
+  <meta itemprop="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+  <meta itemprop="image" content="{{ '/assets/img/opengraph.png' | prepend: site.baseurl | prepend: site.url }}"/>
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" href="{{'/assets/img/icons/favicon.ico' | prepend: site.baseurl }}" type="image/x-icon" />
+
+  <!-- Android Lolipop Theme Color -->
+  <meta name="theme-color" content="rgba(42, 77, 20, 1)">
+
+  <!-- Styles -->
+  <link rel="stylesheet" id="css-theme" href="{{ '/assets/css/main-' | append: site.theme_base | append: '.css' | prepend: site.baseurl }}" media="none">
+  <link rel="stylesheet" href="{{ '/assets/css/syntax.css' | prepend: site.baseurl }}">
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
+  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
+
+  <!-- Javascript -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
+  <script type="text/javascript" src="{{ '/assets/js/main.js' | prepend: site.baseurl }}"></script>
+</head>

data/_includes/header.html

@@ -0,0 +1,55 @@
+<header>
+  <div class="row">
+    <div class="col-xs-12">
+      <nav class="navbar navbar-default navbar-fixed-top">
+        <div class="container">
+          <div class="navbar-header">
+            <a class="navbar-toggle collapsed navbar-icon" data-toggle="collapse"
+              data-target="#bs-example-navbar-collapse-1">
+              <i class="fa fa-bars fa-2x"></i>
+            </a>
+            <a class="navbar-brand navbar-icon" href="{{ site.baseurl | append: '/'}}">
+                <i class="fa fa-home fa-2x"></i>
+            </a>
+          </div>
+
+          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+            <ul class="nav navbar-nav navbar-right">
+              <li><a href="{{ site.baseurl | append: '/' }}">Home</a></li>
+              <li><a href="{{ '/blog' | prepend: site.baseurl }}">Blog</a></li>
+              {% for page in site.dropdown %}
+                <li class="dropdown dropdown-{{ page.dropdown }}">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                    role="button" aria-haspopup="true" aria-expanded="false">{{ page.dropdown }}
+                    <span class="caret"></span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-{{ page.title }}">
+                    <li><a href="{% if page.redirect_to %}{{page.redirect_to}}{% else %}{{ page.url | prepend: site.baseurl }}{% endif %}">{{ page.title }}</a></li>
+                  </ul>
+                </li>
+              {% endfor %}
+              <script>
+                // clean repeated dropdowns and add <li> to their positions
+                $(".dropdown").each((index0, value0) => {
+                  let dropdownClass = "."+$(value0)[0].classList[1];
+                  let dropdownMain = $(dropdownClass)[0].querySelector("ul");
+                  if ($(dropdownClass).length > 1) {
+                    $(dropdownClass).each((index1, value1) => {
+                      if (index1 != 0) {
+                        dropdownMain.append(value1.querySelector("ul li"))
+                        $(dropdownClass)[1].remove();
+                      }
+                    });
+                  }
+                });
+              </script>
+              {% for page in site.items %}
+                <li><a href="{% if page.redirect_to %}{{page.redirect_to}}{% else %}{{ page.url | prepend: site.baseurl }}{% endif %}">{{ page.title }}</a></li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </div>
+  </div>
+</header>

data/_layouts/default.html

@@ -0,0 +1,73 @@
+---
+---
+<!DOCTYPE html>
+<html>
+{% include head.html %}
+
+<body class="animated fadeIn">
+  <div class="container">
+    <div id="background-div">
+      <svg id="background-svg">
+        <lineargradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
+          <stop stop-opacity="0" class="bgColor2" offset="0%" />
+          <stop stop-opacity="0.5" class="bgColor2" offset="10%" />
+          <stop stop-opacity="0.5" class="bgColor1" offset="40%" />
+          <stop stop-opacity="0" class="bgColor1" offset="100%" />
+        </lineargradient>
+        <g id="bg-layer1"></g>
+        <g id="bg-layer2" class="hide"></g>
+        <g id="bg-layer3"></g>
+        <g id="bg-layer4"></g>
+      </svg>
+    </div>
+    <section class="header">
+      {% include header.html %}
+    </section>
+    <section class="content">
+      <div class="row">
+        <!-- <div class="col-sm-2">
+          <div class="pane-separator hidden-xs" style="margin-bottom:30em;"></div>
+          <div class="left-pane">
+          </div>
+        </div> -->
+        <div class="col-sm-8 col-sm-offset-2 content-div">
+          <div class="page-separator hidden-xs"><h1 class="h1-strip" style="padding-bottom:8em; margin-bottom: 0;"></h1></div>
+          <div class="page-separator visible-xs"><h1 class="h1-strip" style="padding-bottom:2em; margin-bottom: 0;"></h1></div>
+          <h1 class="post-title page-title" id="title"><a href="#title">{{ page.title }}</a></h1>
+          {{ content }}
+        </div>
+        <div class="col-sm-2">
+          <div class="pane-separator hidden-xs" style="margin-bottom:30em;"></div>
+          <div class="pane-separator visible-xs" style="margin-bottom:5em;"></div>
+          <div class="right-pane" style="margin-left: 1em;">
+            {% if page.url contains '/blog/' or page.url == '/' %}
+              <center>
+                {% if site.avatar_image != null %}
+                  <img src="{{ site.avatar_image | prepend: '/' | prepend: site.baseurl }}" alt="me" class="avatar-image">
+                {% endif %}
+                <p class="avatar-description">{{site.avatar_description}}</p>
+              </center>
+            {% endif %}
+            {% if page.url contains "/blog/" %}
+              <a href="{{ '/blog' | prepend: site.baseurl }}">
+                <h4>Posts:</h4>
+              </a>
+            <ul>
+              {% for post in site.posts %}
+              <li>
+                <a href="{{ post.url | prepend: site.baseurl  }}">{{ post.title }}</a>
+              </li>
+              {% endfor %}
+            </ul>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="footer">
+      {% include footer.html %}
+    </section>
+  </div>
+</body>
+
+</html>

data/_layouts/page.html

@@ -0,0 +1,4 @@
+---
+layout: default
+---
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+<h4 class="post-title"> {{ page.date }} </h4>
+<article class="blog-post">
+  {{ content }}
+</article>

data/_sass/_base.scss

@@ -0,0 +1,148 @@
+// Custom SCSS
+// General
+
+body {
+  background: linear-gradient($body-bg-header 10%, $body-bg 100%);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+  text-shadow: 0 0 0.01em $shadow-color;
+}
+
+a {
+  cursor: pointer;
+}
+
+blockquote {
+  border-color: $gray;
+  border-width: 0 0 0 0.2em;
+  border-style: solid;
+}
+
+h1 {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+}
+
+h1 a,
+h1 a:hover {
+  color: $brand-primary;
+}
+
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $brand-danger;
+  text-decoration-color: $brand-danger;
+  border-bottom-color: $brand-danger;
+}
+
+#background-div,
+#background-svg {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 0;
+}
+
+#title {
+  margin-top: 0;
+}
+
+// Social media hover colors colors
+$icon-shadow: 0.1em;
+$icons-list: github facebook twitter linkedin envelope;
+$icons-colors: $github-color $facebook-color $twitter-color $linkedin-color $envelope-color;
+@for $i from 1 through length($icons-list) {
+  .fa-#{nth($icons-list, $i)}:hover {
+    text-shadow: 0 0 $icon-shadow #{nth($icons-colors, $i)};
+  }
+}
+
+.bgColor1 {
+  stop-color: $bg-color1;
+}
+
+.bgColor2 {
+  stop-color: $bg-color2;
+}
+
+.page-footer {
+  margin-top: 8em;
+
+  center div div a i {
+    color: $gray !important;
+  }
+}
+
+.navbar-toggle:hover {
+  background-color: transparent !important;
+}
+
+.navbar-icon:hover {
+  text-shadow: 0 0 $icon-shadow lighten($brand-primary, 20%);
+  color: $brand-primary !important;
+}
+
+.navbar-icon {
+  color: $brand-primary !important;
+}
+
+.navbar {
+  background-color: $navbar-bg;
+  transition: background-color 0.25s ease-in-out;
+  -webkit-transition: background-color 0.25s ease-in-out;
+}
+
+nav:hover {
+  background-color: $navbar-default-bg;
+}
+
+.post-title {
+  color: $brand-primary;
+}
+
+.blog-post {
+  margin-bottom: 5em;
+}
+
+.highlight,
+.highlight .w {
+  opacity: 0.9;
+}
+$avatar-size: 10em;
+
+.avatar-image {
+  height: auto;
+  width: auto;
+  max-height: $avatar-size;
+  max-width: $avatar-size;
+  border-radius: $avatar-size;
+  border-style: solid;
+  border-width: medium;
+  border-color: $gray-light;
+}
+
+.avatar-description {
+  color: $gray-light;
+}
+
+.hide {
+  display: none;
+}
+
+.h1-overlay {
+  background: $h1-bg;
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+  padding: 1em;
+}