.blog
.blog-post
margin-bottom: 40px
header
position: relative
.date
background-color: #fdfdfd
position: absolute
padding: 10px
text-align: center
font-weight: 500
z-index: 9
color: #2c2c2c
.blog-content
padding: 15px 28px
border: 1px solid #f5f5f5
h4
margin: 20px 0
letter-spacing: 1px
a
color: #333
.post-meta
text-transform: uppercase
margin-bottom: 18px
padding-bottom: 10px
font-size: 12px
border-bottom: 1px solid #F5F5F5
span
color: #CCC
&:first-child
a
color: #848484
a
color: #CCC
border-bottom: 1px rgba(0, 0, 0, 0)
a:hover
text-decoration: none
border-bottom-style: solid
border-color: inherit
.post-meta span
padding-right: 10px
border-right: 1px solid #CCC
margin-right: 10px
&:last-child
margin-right: 0
border-right: 0
padding-right: 0
p
color: #67666a
line-height: 22px
footer
border: 1px solid #DDD
padding: 0px 15px
.comment-count
color: #000
position: relative
padding-left: 25px
.comment-count:hover,
.comment-count:focus
color: #000
.comment-count:before
// position: absolute;
// content: "\f075";
// font-family: FontAwesome;
// left: 5px;
// top: 12px;
.read-more
color: #000
position: relative
padding-left: 25px
padding-right: 0
text-transform: uppercase
.read-more:hover,
.read-more:focus
color: #000
.read-more:before
// position: absolute;
// content: "\f178";
// font-family: FontAwesome;
// left: 5px;
// top: 13px;
@media (min-width: 768px)
.blog
.blog-post
header
.image-slider-carousel
.carousel-control.left
top: 200px
bottom: 5px
left: 220px
.carousel-control.right
top: 200px
@media (min-width: 992px)
.blog
.blog-post
header
.image-slider-carousel
.carousel-control.left
top: 210px
bottom: 5px
left: 235px
.carousel-control.right
top: 210px
right: 10px
bottom: 5px
.blog-standard
.blog-post
margin-bottom: 80px
&:last-child
margin-bottom: 0
.featured-image
margin-bottom: 30px
.post-title
margin-bottom: 15px
> a
color: #5c5c5c
&:hover
color: #000000
text-decoration: none
.post-meta
color: silver
letter-spacing: 1px
text-transform: uppercase
font-size: 11px
margin-bottom: 30px
a
color: #656565
span
margin: 0 6px
.read-more
margin-top: 25px
a
text-transform: uppercase
color: black
transition: all 0.2s
&:hover
color: silver
text-decoration: none
/*overriding bootstrap's default pagination
.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span
border-top-right-radius: 2px
border-bottom-right-radius: 2px
.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span
border-top-left-radius: 2px
border-bottom-left-radius: 2px
.pagination > li
display: inline-block
margin-right: 8px
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus
background-color: black
border-color: black
.pagination > li > a, .pagination > li > span
color: #909090
.sidebar
padding: 0 0 0 30px
.widget
margin-bottom: 60px
.widget-title
&.popular-posts
.widget-content
ul
padding: 15px 0 0 0
list-style: none
color: #b0b0b0
li
margin-bottom: 30px
.thumb
margin-right: 10px
margin-top: -10px
.title
color: gray
&.popular-tags
a
margin-bottom: 6px
&.categories
ul
list-style: none
padding: 0
li
line-height: 3em
&:before
content: "\f101"
font: normal normal normal 14px/1 FontAwesome
margin-right: 15px
a
color: black
&:hover
color: gray
.left-sidebar
.sidebar
padding: 0 30px 0 0
.blog-grid
.blog-element
max-height: 290px
overflow: hidden
img
width: 100%
View Compiled
$(function () {
var $content = $('#jsonContent');
var data = {
rss_url: 'http://medium.jasonmdesign.com/feed'
};
$.get('https://api.rss2json.com/v1/api.json', data, function (response) {
if (response.status == 'ok') {
var output = '';
$.each(response.items, function (k, item) {
var visibleSm;
if(k < 3){
visibleSm = '';
} else {
visibleSm = ' visible-sm';
}
output += '<div class="col-sm-6 col-md-4' + visibleSm + '">';
output += '<div class="blog-post"><header>';
output += '<h4 class="date">' + $.format.date(item.pubDate, "dd<br>MMM") + "</h4>";
var tagIndex = item.description.indexOf('<img'); // Find where the img tag starts
var srcIndex = item.description.substring(tagIndex).indexOf('src=') + tagIndex; // Find where the src attribute starts
var srcStart = srcIndex + 5; // Find where the actual image URL starts; 5 for the length of 'src="'
var srcEnd = item.description.substring(srcStart).indexOf('"') + srcStart; // Find where the URL ends
var src = item.description.substring(srcStart, srcEnd); // Extract just the URL
output += '<div class="blog-element"><img class="img-responsive" src="' + src + '" width="360px" height="240px"></div></header>';
output += '<div class="blog-content"><h4><a href="'+ item.link + '">' + item.title + '</a></h4>';
output += '<div class="post-meta"><span>By ' + item.author + '</span></div>';
var yourString = item.description.replace(/<img[^>]*>/g,""); //replace with your string.
var maxLength = 120 // maximum number of characters to extract
//trim the string to the maximum length
var trimmedString = yourString.substr(0, maxLength);
//re-trim if we are in the middle of a word
trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))
output += '<p>' + trimmedString + '...</p>';
output += '</div></div></div>';
return k < 3;
});
$content.html(output);
}
});
});