Trophy – A Free Blog Theme For Jekyll

img-0
admin December 2, 2020 code

We’re always building something here at Urban Influence. The past couple of days it has all been about building a blog theme for Jekyll.

So what exactly is Jekyll? “Jekyll is a simple, blog-aware, static site generator.” So what exactly does that mean? That basically means you can write in plain text and a static website will be generated from it. And that means no database, so everything will load a lot faster. And you also won’t have to pay more for hosting every month because you just have to host static files.

The Template

img-1
img-2
img-3

The Code

/**
 * Button Slide
 * @param - $color, $textChange - color, $padding, $border - size
 * @usage - @include button-slide(#9f8f68, #fff);
 */
@mixin button-slide($color, $textChange, $pad: 0.5em, $border: 3px) {
  display: inline-block;
  padding: $pad;

  font-family: 'Space Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: $color;
  border: $border solid $color;
  box-shadow: inset 0 0 0 0 $color;
  transition: all 0.4s ease-in-out;

  &:hover,
  &:active,
  &:focus {
    box-shadow: inset 175px 0 0 0 $color;
    color: $textChange;
  }
}

This is the mixin for the button slide effect that is seen on the index page, category cards, and archive cards. It is modified a little here to work on hovering only over the button, but the template has the hover on the parent container. The mixin is transitioning an inset box-shadow from the left to right. If you wanted to do slide from top to bottom, then you would just have to change the line to box-shadow: inset 0 175px 0 0 $color;, right to left, etc.

var Preview = (function() {
  var s;

  return {
    settings: {
      img: document.getElementsByClassName('preview__img'),
      post: document.getElementsByClassName('preview')
    },

    init: function() {
      s = this.settings;
      this.display();
      this.mouseenter();
    },

    display: function() {
      if (s.img.length) {
        [].forEach.call(s.img, function(img) {
          img.style.display = 'none';
        });
        s.img[0].style.display = 'block';
      }
    },

    mouseenter: function() {
      if (s.post.length) {
        var currentIdx = 0,
            prevIdx = currentIdx;

        [].forEach.call(s.post, function(preview, idx) {
          preview.addEventListener('mouseenter', function() {
            prevIdx = currentIdx;
            currentIdx = idx;

            if (prevIdx !== currentIdx) {
              s.img[prevIdx].style.display = 'none';
              s.img[currentIdx].style.display = 'block';
            }
          });
        });
      }
    }
  }
})();

document.addEventListener('DOMContentLoaded', function() {
  Preview.init();
});

Look at how nice that JavaScript is. We love modular patterns in the pigeon coop. This module is for the index page. All of the blog post images are loaded that have previews on the page. All the images are quickly set to not be displayed and the first one is set to be shown (add in a little CSS to get the black background and a nice fade-in transition). Then whenever the cursor enters another preview the image will not be displayed and the new image will fade-in. The current index is checked first though to make sure the picture isn’t already displayed.

You might also notice that the cards are on a little grid. I am using the flex-grid mixin for this that was shared in a previous post.

Read more about the flex-grid mixin

The Customization

Almost everything is customizable on the template without having to dig through the code. The only things that aren’t customizable without knowing a little HTML and CSS are the fonts and the colors (but why would you want to change those anyway!?). Jekyll makes changing everything easy with a _config.yml file. The blog title, the SEO settings, the SEO settings the profile card with the social icons are all editable and you will still have a static website generated.

Jekyll doesn’t have a native solution for categories and I found a way around that, so the blog is more organized for readers (I didn’t want to include categories and tags). You can add any new or existing categories to the blog post and a card will be generated in the category tab with the most recent image. The individual category page will then have all the posts sorted within that category just like WordPress has it.

Read more in the documentation

The Future

This is a free download, so not everything possible has been added to the styling for blog posts. Right now it is just text, links, and images, but I will continue adding to it to include blockquotes, lists, and whatever is requested.

The Demo & the Download

Demo

Download

Other posts

img-4

Welcome David Drury

Read Full Article life
Prev
img-5

Instafetch.JS

Read Full Article code
Next