Trophy (Jekyll theme)

index.html

<main>
  <section class="previews">
    <div>
      <figure class="absolute-bg preview__img" style="background-image: url('https://unsplash.it/2000/1200?image=16');"></figure>
      <figure class="absolute-bg preview__img" style="background-image: url('https://unsplash.it/2000/1200?image=1003');"></figure>
      <figure class="absolute-bg preview__img" style="background-image: url('https://unsplash.it/2000/1200?image=433');"></figure>
      <figure class="absolute-bg preview__img" style="background-image: url('https://unsplash.it/2000/1200?image=40');"></figure>
      <figure class="absolute-bg preview__img" style="background-image: url('https://unsplash.it/2000/1200?image=1074');"></figure>    
      <div class="previews__container">
        <span>Welcome to</span>
        <h1>Trophy</h1>
      </div>
    </div>

    <div>
      <header>
        <ul class="tabs">
          <li class="tabs__item">Posts</li>
          <li class="tabs__item">Categories</li>
        </ul>
      </header>
      <div class="tab">
        <ul itemscope itemtype="http://schema.org/Blog">    
          <li class="preview" itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
            <a class="preview__link" href="#" itemprop="url">
              <span class="preview__date" itemprop="datePublished" datetime="2016-09-08T00:00:00-07:00">Sep 8, 2016</span>
              <h2 class="preview__header" itemprop="name">Roof Party</h2>
              <p class="preview__excerpt" itemprop="description">Banh mi pug you probably haven’t heard of them occupy, drinking vinegar humblebrag vinyl locavore master cleanse sartorial bicycle rights 90’s kickstarter hashtag. 3 wolf moon XOXO man braid chartreuse....</p>
              <span class="preview__more">Read More</span>
            </a>
          </li>
          <li class="preview" itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
            <a class="preview__link" href="#" itemprop="url">
              <span class="preview__date" itemprop="datePublished" datetime="2016-09-07T00:00:00-07:00">Sep 7, 2016</span>
              <h2 class="preview__header" itemprop="name">Craft Beer</h2>
              <p class="preview__excerpt" itemprop="description">Tbh vaporware mumblecore iceland echo park DIY. Plaid woke next level enamel pin, vegan cred salvia pug. XOXO sartorial synth gluten-free, cold-pressed mumblecore craft beer helvetica. Vegan lyft squid, vice...</p>
              <span class="preview__more">Read More</span>
            </a>
          </li>   
          <li class="preview" itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
            <a class="preview__link" href="#" itemprop="url">
              <span class="preview__date" itemprop="datePublished" datetime="2016-09-06T00:00:00-07:00">Sep 6, 2016</span>
              <h2 class="preview__header" itemprop="name">Next Level Blog</h2>
              <p class="preview__excerpt" itemprop="description">Humblebrag ramps single-origin coffee, literally jean shorts polaroid mlkshk franzen williamsburg distillery venmo. Skateboard leggings disrupt banjo shoreditch blue bottle. Brooklyn church-key cronut hell of waistcoat, polaroid lomo chambray bitters...</p>
              <span class="preview__more">Read More</span>
            </a>
          </li>
          <li class="preview" itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
            <a class="preview__link" href="#" itemprop="url">
              <span class="preview__date" itemprop="datePublished" datetime="2016-09-05T00:00:00-07:00">Sep 5, 2016</span>
              <h2 class="preview__header" itemprop="name">VHS Selfies</h2>
              <p class="preview__excerpt" itemprop="description">8-bit typewriter scenester, crucifix tousled tilde leggings brunch chicharrones salvia deep v man bun. Master cleanse man braid disrupt banjo, deep v cray tumblr cronut. Truffaut street art everyday carry...</p>
              <span class="preview__more">Read More</span>
            </a>
          </li>     
          <li class="preview" itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
            <a class="preview__link" href="#" itemprop="url">
              <span class="preview__date" itemprop="datePublished" datetime="2016-09-04T00:00:00-07:00">Sep 4, 2016</span>
              <h2 class="preview__header" itemprop="name">Four Dollar Toast</h2>
              <p class="preview__excerpt" itemprop="description">Flexitarian fixie keytar vice craft beer. Forage normcore cred austin brunch, put a bird on it actually. Chia put a bird on it skateboard, salvia paleo heirloom semiotics knausgaard selvage...</p>
            <span class="preview__more">Read More</span>
          </a>
        </li>
      </ul>
      <footer class="section-padding--sm footer">
        <a class="footer__archive" href="#">Archive</a>
        <ul class="footer__social">
          <li><a class="fa fa-lg fa-envelope-o" href="mailto:thomas.vaeth@gmail.com"></a></li>
          <li><a class="fa fa-lg fa-github" href="https://github.com/thomasvaeth" target="_blank"></a></li>
          <li><a class="fa fa-lg fa-codepen" href="https://codepen.io/thomasvaeth/" target="_blank"></a></li>
          <li><a class="fa fa-lg fa-linkedin" href="https://www.linkedin.com/in/thomasvaeth" target="_blank"></a></li>
          <li><a class="fa fa-lg fa-twitter" href="https://twitter.com/thomasvaeth" target="_blank"></a></li>
          <li><a class="fa fa-lg fa-facebook" href="https://www.facebook.com/thomas.vaeth" target="_blank"></a></li>
          <li><a class="fa fa-lg fa-instagram" href="https://www.instagram.com/thomas.vaeth/" target="_blank"></a></li> 
        </ul>
      </footer>
    </div>

    <div class="tab">
      <ul class="cards">
        <li class="card">
          <a class="card__link" href="#">
            <div class="card__img">
              <figure class="absolute-bg" style="background-image: url('https://unsplash.it/500/300?image=1074');"></figure>
            </div>
            <div class="card__container">
              <h2 class="card__header">Brunch</h2>
              <p class="card__count">3 Posts</p>
              <span class="card__more">View All</span>
            </div>
          </a>
        </li>
        <li class="card">
          <a class="card__link" href="#">
            <div class="card__img">
              <figure class="absolute-bg" style="background-image: url('https://unsplash.it/500/300?image=718');"></figure>
            </div>
            <div class="card__container">
              <h2 class="card__header">Gluten-free</h2>
              <p class="card__count">2 Posts</p>
              <span class="card__more">View All</span>
            </div>
          </a>
        </li>
        <li class="card">
          <a class="card__link" href="#">
            <div class="card__img">
              <figure class="absolute-bg" style="background-image: url('https://unsplash.it/500/300?image=1060');"></figure>
            </div>  
            <div class="card__container">
              <h2 class="card__header">Cities</h2>
              <p class="card__count">3 Posts</p>
              <span class="card__more">View All</span>
            </div>
          </a>
        </li>
        <li class="card">
          <a class="card__link" href="#">
            <div class="card__img">
              <figure class="absolute-bg" style="background-image: url('https://unsplash.it/500/300?image=16');"></figure>
            </div>
            <div class="card__container">
              <h2 class="card__header">Juice</h2>
              <p class="card__count">2 Posts</p>
              <span class="card__more">View All</span>
            </div>
          </a>
        </li>
      </ul>
      <footer class="section-padding--sm footer">
        <a class="footer__archive" href="#">Archive</a>
        <ul class="footer__social">
          <li><a class="fa fa-lg fa-envelope-o" href="mailto:thomas.vaeth@gmail.com"></a></li>
          <li><a class="fa fa-lg fa-github" href="https://github.com/thomasvaeth" target="_blank"></a></li>
          <li><a class="fa fa-lg fa-codepen" href="https://codepen.io/thomasvaeth/" target="_blank"></a></li>
          <li><a class="fa fa-lg fa-linkedin" href="https://www.linkedin.com/in/thomasvaeth" target="_blank"></a></li>
          <li><a class="fa fa-lg fa-twitter" href="https://twitter.com/thomasvaeth" target="_blank"></a></li>
          <li><a class="fa fa-lg fa-facebook" href="https://www.facebook.com/thomas.vaeth" target="_blank"></a></li>
          <li><a class="fa fa-lg fa-instagram" href="https://www.instagram.com/thomas.vaeth/" target="_blank"></a></li>  
        </ul>
      </footer>
    </div>
  </section>
</main>
  

script.js

// Full blog theme demo and download available at http://thomasvaeth.com/trophy/
var Tabs = (function() {
  var s;

  return {
    settings: {
      tabs: document.getElementsByClassName('tabs__item'),
      tab: document.getElementsByClassName('tab')
    },

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

    display: function() {
      if (s.tab.length) {
        [].forEach.call(s.tab, function(tab) {
          tab.style.display = 'none';
        });
        s.tab[0].style.display = 'block';
        s.tab[0].classList.add('active');
        s.tabs[0].classList.add('active');
      }
    },

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

        [].forEach.call(s.tabs, function(tab, idx) {
          tab.addEventListener('click', function() {
            prevIdx = currentIdx;
            currentIdx = idx;

            if (prevIdx !== currentIdx) {
              s.tab[prevIdx].style.display = 'none';
              s.tab[prevIdx].classList.remove('active');
              s.tabs[prevIdx].classList.remove('active');
              s.tab[currentIdx].style.display = 'block';
              s.tab[currentIdx].classList.add('active');
              s.tabs[currentIdx].classList.add('active');
            }
          });
        });
      }
    }

  }
})();

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() {
  Tabs.init();
  Preview.init();
});

style.scss

/**
 * Base Variables
 */
$font-header: 'Space Mono', monospace;
$font-body: 'Inconsolata', monospace;
$font-post: 'Lora', serif;

$color-alpha: #9f8f68;
$color-alpha--light: #f5f3ef;

$color-black: #0a0a0a;
$color-grey: #f8f9f9;
$color-white: #fff;

$mq-xs: 20em;
$mq-sm: 30em;
$mq-md: 54em;
$mq-lg: 64em;
$mq-xl: 76.5em;
$mq-xxl: 114em;

/**
 * Base Settings/Overwrite Normalize
 */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: $font-body;
  font-feature-settings: 'liga' 0;
  font-size: 100%;
  line-height: 1.6;

  @media (min-width: $mq-xs) {
    font-size: 102.5%;
  }

  @media (min-width: $mq-sm) {
    font-size: 105%;
  }

  @media (min-width: $mq-md) {
    font-size: 107.5%;
  }

  @media (min-width: $mq-lg) {
    font-size: 110%;
  }

  @media (min-width: $mq-xl) {
    font-size: 115%;
  }

  @media (min-width: $mq-xxl) {
    font-size: 125%;
  }
}

h1, h2 {
  margin: 0;

  font-family: $font-header;
}

h1 {
  $fontSize: 3em;

  @media (min-width: $mq-md) {
    font-size: $fontSize;
  }

  @media (min-width: $mq-xl) {
    font-size: $fontSize + 0.5em;
  }
}

p {
  margin: 0 0 0.75em;
}

a {
  color: $color-black;
  text-decoration: none;
  transition: color 0.4s ease-in-out;

  &:hover,
  &:active,
  &:focus {
    color: $color-alpha;
  }
}

figure {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;

  list-style-type: none;
}

/**
 * Text Selection
 */
::selection {
  color: $color-white;
  background-color: $color-alpha;
  text-shadow: none;
}

/**
 * Underline Slide from left and back
 */
@mixin border-slide($mainColor: $color-black, $borderColor: $color-alpha, $height: 3px) {
  position: relative;

  color: $mainColor;

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;

    width: 0%;
    border-bottom: $height solid $borderColor;
    transition: width 0.4s ease-in-out;
  }

  &:hover:after {
    width: 100%;
  }
}

/**
 * Button Slide
 * Need to still add hover state in parent element
 * box-shadow: inset 175px 0 0 0 $color-alpha;
 * color: $color-white;
 */
@mixin button-slide($pad: 0.5em, $border: 3px) {
  @extend %letter-spacing;

  display: inline-block;
  padding: $pad;

  font-family: $font-header;
  color: $color-alpha;
  border: $border solid $color-alpha;
  box-shadow: inset 0 0 0 0 $color-alpha;
  transition: all 0.4s ease-in-out;
}

/**
 * Flex Grid
 */
@mixin flex-grid($sm: null, $md: null, $lg: null, $xl: null, $xxl: null, $pad: 0) {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;

  & > * {
    padding: $pad;
    flex-basis: 100% / $sm;
    max-width: 100% / $sm;
    
    @media (min-width: $mq-md) {
      flex-basis: 100% / $md;
      max-width: 100% / $md;
    }

    @if $lg {
      @media (min-width: $mq-lg) {
        flex-basis: 100%/$lg;
        max-width: 100%/$lg;
      }
    }

    @if $xl {
      @media (min-width: $mq-xl) {
        flex-basis: 100% / $xl;
        max-width: 100% / $xl;
      }
    }

    @if $xxl {
      @media (min-width: $mq-xxl) {
        flex-basis: 100% / $xxl;
        max-width: 100% / $xxl;
      }
    }
  }
}

/**
 * Box Shadow
 */
@mixin box-shadow($size, $color: $color-black) {
  box-shadow: 0 $size $size * 2 rgba($color, 0.1), 0 $size $size * 2 rgba($color, 0.2);
}

/**
 * Letter Spacing
 */
%letter-spacing {
  font-family: $font-header;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/**
 * Black Color Overlay
 */
%overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  width: 100%;

  background-color: rgba($color-black, 0.2);
  transition: background-color 0.4s ease-in-out;
}

/**
 * Body
 */
body {
  background-color: $color-grey;
}

/**
 * Sections
 */
section {
  position: relative;
}

.section-padding {
  padding: 4em 0;

  &--lg {
    padding: 6em 0;
  }

  &--sm {
    padding: 2em 0;
  }
}

/**
 * Class Container (BEM)
 */
[class*='__container'] {
  position: relative;
  z-index: 1;
}

/**
 * Blog page
 */
.previews {

  @media (max-width: $mq-md) {
    display: flex;
    flex-direction: column;
  }

  & > * {

    &:first-child {
      position: relative;

      height: 30em;

      background-color: $color-black;

      @media (min-width: $mq-md) {
        position: fixed;
        top: 0;
        left: 0;

        height: 100%;
        width: 45%;
      }

      &:after {
        @extend %overlay;
      }
    }

    &:last-child {
      min-height: 100vh;

      @media (min-width: $mq-md) {
        margin-left: 45%;
      }
    }
  }
}

/**
 * Tabs
 * On the Blog page for posts and categories
 */
.tabs {
  @extend %letter-spacing;

  display: flex;
  justify-content: space-around;
  padding: 1em;

  @media (min-width: $mq-md) {
    padding-left: 8em;
    padding-right: 8em;
  }

  @media (min-width: $mq-xxl) {
    padding-left: 10em;
    padding-right: 10em;
  }
  
  &__item {
    cursor: pointer;

    &:not(.active) {
      @include border-slide();
    }

    &.active {
      border-bottom: 3px solid $color-alpha;
    }
  }
}

.tab {

  &.active {
    will-change: opacity;
    animation: fade-in 1s both;
  }
}

/**
 * Blog Post Preview
 * On the Blog page
 */
.previews {

  &__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 2em;

    color: $color-white;

    span {
      @extend %letter-spacing;

      font-family: $font-body;
    }
  }
}

.preview {
  transition: background-color 0.2s ease-in-out;
  
  &:nth-child(even) {
    background-color: $color-white;
  }

  &:hover {
    background-color: $color-alpha--light;

    .preview__more {
      box-shadow: inset 175px 0 0 0 $color-alpha;
      color: $color-white;
    }
  }

  &__img {
    will-change: opacity;
    animation: fade-in 1s both;
  }

  &__link {
    display: block;
    padding: 2em 1em;

    @media (min-width: $mq-md) {
      padding: 4em 8em;
    }

    @media (min-width: $mq-xxl) {
      padding-left: 10em;
      padding-right: 10em;
    }
  }

  &__date {
    font-family: $font-header;
    color: $color-black;
  }

  &__header {
    color: $color-alpha;

    margin-bottom: 0.5em;
  }

  &__excerpt {
    color: $color-black;
  }

  &__more {
    @include button-slide();
  }
}

/**
 * Category Card
 * On the blog page under category tab
 */
.cards {
  @include flex-grid(1, 2, $xxl: 3, $pad: 0.25em);

  padding: 2em 1em;

  @media (min-width: $mq-md) {
    padding: 4em 2em;
  }
}

.card {

  &__link {
    @include box-shadow(1px);

    position: relative;

    display: block;

    background-color: $color-white;
    transition: background-color 0.2s ease-in-out;

    &:after {
      @include box-shadow(3px);

      content: '';
      position: absolute;
      top: 0;
      left: 0;

      height: 100%;
      width: 100%;

      opacity: 0;
      will-change: opacity;
      transition: opacity 0.4s ease-in-out;
    }

    &:hover {
      background-color: $color-alpha--light;

      &:after {
        opacity: 1;
      }
      
      .card__more {
        box-shadow: inset 175px 0 0 0 $color-alpha;
        color: $color-white;
      }
    }
  }

  &__img {
    position: relative;

    height: 12em;

    background-color: $color-black;

    &:after {
      @extend %overlay;
    }
  }

  &__container {
    padding: 2em 1em;
  }

  &__header {
    color: $color-alpha;
  }

  &__count {
    color: $color-black;
  }

  &__more {
    @include button-slide(0.25em);
  }
}

/**
 * Footer
 */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-left: 2em;
  padding-right: 2em;

  @media (min-width: $mq-sm) {
    flex-direction: row;
  }

  &__archive {
    @include border-slide();

    @extend %letter-spacing;
  }

  &__social {
    display: flex;
    margin-top: 1em;

    @media (min-width: $mq-sm) {
      margin-top: 0;
    }

    & > *:not(:last-child) {
      margin-right: 1em;
    }    
  }
}

/**
 * Animations
 */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  will-change: opacity;
  animation: fade-in 2s both;
}

/**
 * Absolute Background Cover
 */
.absolute-bg {
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  width: 100%;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
}

/**
 * Color Helpers
 */
.bg-black {
  background-color: $color-black;
}

.bg-white {
  background-color: $color-white;
}

styles

<link href="https://fonts.googleapis.com/css?family=Inconsolata|Space+Mono:700" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" rel="stylesheet" />

trophy-jekyll-theme.markdown

Trophy (Jekyll theme)

A blog theme for Jekyll built using HTML, Sass, and JavaScript (no jQuery). Demo and download available at http://thomasvaeth.com/trophy/.

A Pen by Thomas Vaeth on CodePen.

License.