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;
    
    // icons
    &:before {
        font-size: 32px;
        color: fade(@text-color-dimmed, 70%);
        margin-right: .5em
    }
    
    @media @breakpoint2 {
        margin-left: -108%;
        .page-photos & { margin-bottom: @line-height-computed*4; }
    }
}

.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;
        border: none;
        &:before { .hide; }
    }
}

// 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;
	}
    h1 { font-size: ceil(@font-size-base * 2.5) }
    
    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-photo {
	text-align: center;
    
    figure {
        position: relative;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
            
        img,
        figcaption {
            margin-bottom: 0;
        }
        
        img { max-height: 540px }
    
        figcaption {
            position: absolute;
            left: 0;
            top: 25%;
            max-width: 55%;
            min-width: 45%;
            text-align: right;
        	font-family: @headings-font-family;
        	font-weight: @headings-font-weight;
            font-style: normal;
        	font-size: .9em;
            padding: @line-height-computed/3;
            background: @link-color;
            background: fade(@link-color, 70%);
            color: #fff;
            text-shadow: 0 1px 0 #000;
            
            opacity: 0;
            .translate(0,-20px);
            .transition;
        }
        
        &:hover figcaption {
            opacity: 1;
            .translate(0,0);
        }
    }
    
    .page-single & {
        
        padding-top: @line-height-computed*2;
        padding-bottom: @line-height-computed*3;
        
    	@media @breakpoint2 {
            padding-top: @line-height-computed*4;
            padding-bottom: @line-height-computed*6;
    	}
        
        figure img { max-height: none }
        
        figcaption {
            opacity: 1;
            .translate(0,0);
            top: auto;
            bottom: 0;
            background: #000;
            background: fade(#000, 40%);
        }
        
        .entry-content,
        .entry-meta,
        .comments { .visuallyhidden; }
    }
}


.photo-link {
    display: block;
}

#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;
}

.avatar {
    width: 80px;
    height: 80px;
    .border-radius(80px);
    border: 2px solid #fff;
}


//
// 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;
}