Blog Posts Sidebar

blog-posts-sidebar.markdown

Blog Posts Sidebar

A simple aesthetic sidebar to show popular or recent blog posts with a touch of jQuery (which could probably be improved)

A Pen by Bryan C Guner on CodePen.

License.

index.haml

/ Declare Variable
- width = '100'
- height = '70'
.blog
    .blog-type
        .popular.active Popular
        .recent Most Recent
    .popular-posts
        .post
            %img{"src"=>"http://lorempixel.com/#{width}/#{height}/technics/5"}
            .post-meta
                .tag City  |
                .category Posted 12 Hours Ago
            %h1.title
                Zuckerberg Called Obama to Express Frustration
        .post
            %img{"src"=>"http://lorempixel.com/#{width}/#{height}/nightlife"}
            .post-meta
                .tag Nightlife  |
                .category Posted 12 Hours Ago
            %h1.title
                Bill Gates Says Microsoft was Willing to Acquire WhatsApp
        .post
            %img{"src"=>"http://lorempixel.com/#{width}/#{height}/food"}
            .post-meta
                .tag Food  |
                .category Posted 12 Hours Ago
            %h1.title
                Facebook Introduces 15-Second Video Ads
        .post
            %img{"src"=>"http://lorempixel.com/#{width}/#{height}/technics"}
            .post-meta
                .tag Technology  |
                .category Posted 12 Hours Ago
            %h1.title
                Flight for iPhone: Gorgeous Flight Status App With Weather
        .post
            %img{"src"=>"http://lorempixel.com/#{width}/#{height}/transport"}
            .post-meta
                .tag Transport  |
                .category Posted 12 Hours Ago
            %h1.title
                Netflix Unveils New TV Originals Puss In Boots and King Julien
    .recent-posts.hide
        .post
            %img{"src"=>"http://lorempixel.com/#{width}/#{height}/fashion"}
            .post-meta
                .tag Fashion  |
                .category Posted 12 Hours Ago
            %h1.title
                Why You Should Invest in Life Experiences
        .post
            %img{"src"=>"http://lorempixel.com/#{width}/#{height}/business"}
            .post-meta
                .tag Business  |
                .category Posted 12 Hours Ago
            %h1.title
                'Wonder' is a New Ad-free Video Platform for Lifestyle Content
        .post
            %img{"src"=>"http://lorempixel.com/#{width}/#{height}/animals"}
            .post-meta
                .tag Animals  |
                .category Posted 12 Hours Ago
            %h1.title
                Amazon AppStream Is Now Open To All Developers
        .post
            %img{"src"=>"http://lorempixel.com/#{width}/#{height}/people"}
            .post-meta
                .tag People  |
                .category Posted 12 Hours Ago
            %h1.title
                Google Street View Captures Colorado River
        .post
            %img{"src"=>"http://lorempixel.com/#{width}/#{height}/nature"}
            .post-meta
                .tag Nature  |
                .category Posted 12 Hours Ago
            %h1.title
                Steller Is A Beautiful Visual Storytelling App For iPhone
.content
    .image
        %img{"src"=>"http://lorempixel.com/900/300/technics/4"}
    %h1 Zuckerberg Called Obama to Express Frustration
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat facere recusandae ipsam quae pariatur possimus rerum cupiditate voluptas sint quam quaerat ducimus eos reiciendis aperiam doloribus aut ex impedit officiis quod mollitia libero velit cumque a saepe nemo voluptates at illo natus ab delectus placeat earum qui labore. Dolores magnam.
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat facere recusandae ipsam quae pariatur possimus rerum cupiditate voluptas sint quam quaerat ducimus eos reiciendis aperiam doloribus aut ex impedit officiis quod mollitia libero velit cumque a saepe nemo voluptates at illo natus ab delectus placeat earum qui labore. Dolores magnam.
    .image
        %img{"src"=>"http://lorempixel.com/900/300/technics/5"}
    %h1 Bill Gates Says Microsoft was Willing to Acquire WhatsApp
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat facere recusandae ipsam quae pariatur possimus rerum cupiditate voluptas sint quam quaerat ducimus eos reiciendis aperiam doloribus aut ex impedit officiis quod mollitia libero velit cumque a saepe nemo voluptates at illo natus ab delectus placeat earum qui labore. Dolores magnam.
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat facere recusandae ipsam quae pariatur possimus rerum cupiditate voluptas sint quam quaerat ducimus eos reiciendis aperiam doloribus aut ex impedit officiis quod mollitia libero velit cumque a saepe nemo voluptates at illo natus ab delectus placeat earum qui labore. Dolores magnam.
    .image
        %img{"src"=>"http://lorempixel.com/900/300/technics/6"}
    %h1 Facebook Introduces 15-Second Video Ads
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat facere recusandae ipsam quae pariatur possimus rerum cupiditate voluptas sint quam quaerat ducimus eos reiciendis aperiam doloribus aut ex impedit officiis quod mollitia libero velit cumque a saepe nemo voluptates at illo natus ab delectus placeat earum qui labore. Dolores magnam.
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat facere recusandae ipsam quae pariatur possimus rerum cupiditate voluptas sint quam quaerat ducimus eos reiciendis aperiam doloribus aut ex impedit officiis quod mollitia libero velit cumque a saepe nemo voluptates at illo natus ab delectus placeat earum qui labore. Dolores magnam.

script.js

$('.popular').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('.recent-posts').hide();
    $('.popular-posts').show();
});

$('.recent').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('.popular-posts').hide();
    $('.recent-posts').show();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,600,800);

$green: #1abc9c;

html, body { background: #f5f5f8;font-family: Lato, sans-serif; height:100%; padding: 1em; }
*, *:before, *:after { @include box-sizing(border-box); }

.hide { display: none }
.show { display: block }

.blog {
   width: 30%;
   max-width: 24em;
   background: white;
   overflow-y: scroll;
   margin-right: 1em;
   float: left;
   @include box-shadow(0px 0 2px 0 rgba(black, 0.1));
   @include transition(all 0.5s ease);
}

.blog-type {
   
  div {
    color: white; background: black;
    display: inline-block;
    cursor: pointer;
    padding: 1em 0;
    width: calc(50% - 0.05px);
    text-align: center;
    
    &:hover { background: $green; color: white; }
    &:last-child { margin-left: -3px; }
  }
  
  .active {
     background: white;
     color: black;
  }
}

.recent-posts, .popular-posts {
   overflow-y: auto; 
}

.post {
  padding: 1em;
  overflow: hidden;
  border-bottom: 1px dashed #ccc;
  cursor: pointer;
  
  &:hover { background: #f9f9f9; }
  &:hover h1 { color: $green; }
  
   .post-meta {
      font-size: 0.7em; 
      line-height: 2;
     
     div { display: inline-block  }
     .category { font-style: italic; font-weight: lighter; }
     
     .tag { color: $green; font-weight: bolder; }
   }
  
   img {
     float: left; 
     margin-right: 0.75em;
   }
  
   h1 {
    font-weight: bolder;
     font-size: 0.9em;
     line-height: 1.5;
     
   }
}

img {
   max-width: 100%;
   height: auto;
}

.content {
   max-width: 900px;
   margin: 0 auto;
   overflow: hidden;
   padding: 2em;
   background: white;
   @include box-shadow(0 0 2px 0 rgba(0,0,0,0.1));
   @include transition(all 400ms ease);
  
   h1 {
      font-weight: 800;
      margin-top: 1em;
      line-height: 2;
   }
  
   p {
      line-height: 1.8;
      margin: 1em 0;
      font-size: 0.9em;
      font-weight: 400;
   }
}

@media screen and (max-width: 900px){
  .blog { img { display: none } } 
}


@media screen and (max-width: 800px){
  .blog { display: none }
}