blog/_src/assets/less/content.less

.page-title {
    .h2;
    .heading-band;
    color: @brand-grey-light;
    margin-top: @line-height-computed/2;
    margin-bottom: @line-height-computed/2;
    
    .home {
        color: @link-color;
    }
}

.hentry {
	.divider-bottom;
	padding: @line-height-computed*2 0;
	
	@media @breakpoint2 {
		padding: @line-height-computed*4 0;
	}
	
	&:first-child { 
        padding-top: @line-height-computed;
    }
    
    .page-single  & {
        padding-bottom: @line-height-computed*2
    }
}

// post title
.entry-title {
	.h1;
	text-align: center;
	color: @headings-color;
	margin-top: 0;
	margin-bottom: @line-height-computed;
	
	.format-link & { .h3; }
}

// post content
.entry-content {
	h1, h2 {
		.heading-band;
	}
    
    p:last-child {
        margin-bottom: 0;
    }
}


// post category icons
/////////////////////////////////////

.posttype {
	display: block;
	width: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: @line-height-computed/2;
	margin-top: -@line-height-computed;
	
	// icon adjustments
	&:before {
		font-size: 20px;
		color: @text-color-light
	}
	
	&:hover:before {
		color: @link-color
	}
}


// LINK POST
/////////////////////////////////////

.hentry.format-link {
    
}

.linkurl {
    display: block;
    font-family: @font-family-base;
    font-size: @font-size-mini;
    color: @text-color-dimmed;
    padding: @line-height-computed/3 0;
    margin-left: auto;
    margin-right: auto;
    .ellipsis;
    
    max-width: 70%;
    @media @breakpoint2 {
        max-width: 50%;
    }
}

.permalink-link {
	float: right;
    font-size: 1.1em
}

// PHOTO POST
/////////////////////////////////////

.hentry.format-image {
	text-align: center;
    
    figure {
    	display: inline-block;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;
    	padding: .4em;
    	background: #fcfeff;
    	border: 1px solid rgba(158, 170, 178, .6);
    	border-radius: 2px;
    	.box-shadow(0 1px 4px rgba(0, 0, 0, 0.1));
    	.transition;
        
        .page-single & { margin-bottom: @line-height-computed*2; }
    
        @media @breakpoint2 {
    		.box-shadow(~"0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff");
        }
    
        img {
        	.box-shadow(none);
        	border-radius: 2px;
        	margin-left: auto;
        	margin-right: auto;
        	margin-bottom: 1em;
        }
    
        figcaption {
        	text-align: center;
        	margin-bottom: .5em;
        	color: rgba(46, 79, 92, .7);
        	font-family: @headings-font-family;
        	font-weight: @headings-font-weight;
        	font-style: normal;
        	font-size: .9em
        }
    }
}

.photo-link {
    display: block;
    
    &:hover { 
        figure { background: #c4e4df; }
    }
}

#exif {
	font-size: @font-size-small;
	color: #b9c3c9;
	text-align: center;
	margin-bottom: .5em;

	span {
		margin-right: 1em;
	}
}

// POST META
/////////////////////////////////////

.entry-meta {
    .clearfix;
    margin-top: @line-height-computed*2;
    font-size: @font-size-small;
}

.byline,
time,
.categories {
    text-align: center;
}

.byline,
time {
	font-style: italic;
	color: @text-color-light;
}

.byline {
	margin-bottom: 0;
    
    .by { display: block }
}

time {
    display: block;
    color: @text-color-dimmed
}

.categories {
    margin-top: @line-height-computed;
}


//
// Related posts
//
.related-title {
    .h5;
    color: @text-color-dimmed;
    text-align: center;
    margin-top: 0;
    margin-bottom: @line-height-computed;
}

.related-posts {
    &:hover .post-title {
        color: @text-color;
    }
}
    
.related-post {
    text-align: center;
    
    .post-title {
        font-size: 1em;
        color: @text-color-light;
        line-height: @line-height-base;
        margin-top: 0;
        margin-bottom: @line-height-computed;
        .transition;
    }
    
    a { 
        display: block;
        
        &:hover .post-title { color: @link-color-hover }
    }
}


//
// Goodies download
//
.goodie-actions {
    .clearfix;
    max-width: 640px;
    margin: 0 auto;
    
    p,
    .btn { margin-bottom: 0 }
    
    .btn { display: block; }
    
    .download { 
        margin-top: @line-height-computed/2;
        
        @media @breakpoint2 {
            margin-top: 0; 
            text-align: right
        }
    }
}



// Masonry

.masonry {
    
    @media @breakpoint2 {
        width: 125%;
        margin-left: -12.5%;
        .clearfix();
    }
    
    .hentry {
	
        @media @breakpoint1 {
            width: 49%;
    		float: left;
    		clear: none;
    		padding-top: 0;
    		padding-bottom: 0;
    		margin-bottom: .7em;
    		margin-top: 0;
    		margin-left: 0;
    		margin-right: 1%;
    		border: none;

    		&:before { display: none; }
        
            &:nth-child(2n+1) {  margin-right: 0; }

    		&:last-child { margin-bottom: 3em; }
        }
    }
}

.grid-sizer { 
    width: 100%;
    
    @media screen and (min-width: 480px) {
        width: 50%;
    }
}

// TABLES
/////////////////////////////////////

table {
	border-collapse: collapse; 
	border-spacing: 0;
	width: 100%;
	max-width: 100%;
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 1.5em;
	border-bottom: 1px solid #cfd9e1;
}

td { vertical-align: top; }

th,
td {
	padding: .7em .3em;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid #cfd9e1;
}

th {
	font-weight: bold;
}

thead th {
	vertical-align: bottom;
}

table tbody + tbody {
  border-top: 2px solid #cfd9e1;
}

table tbody tr:nth-child(odd) td,
table tbody tr:nth-child(odd) th {
  background-color: rgba(255,255,255,.2);
}

table tbody tr:hover td,
table tbody tr:hover th {
  background-color: #f5f5f5;
}


//
// Old Article Fixes
//

// text-shadow article
// fluid examples
#post-39 .entry-content > div,
#post-39 .entry-content img {
	max-width: 100%;
	height: auto !important;
	margin-left: 0 !important;
}