wp-theme/assets/_src/less/ascribe/_blog.less

219 lines
3.4 KiB
Plaintext

.hentry {
&:extend(.subtemplate);
border-bottom: 2px solid @blueLight;
&:last-child { border: none }
}
.entry-title {
margin-top: 0;
}
.entry-teaser {
width: 100%;
img {
display: block;
width: 100%;
}
}
.entry-lead {
&:extend(.large);
margin-bottom: @spacer;
}
.entry-content {
}
.entry-meta {
.chevron-divider;
opacity: 1;
line-height: 75px;
height: 75px;
padding-left: 15px;
margin-bottom: 35px;
font-weight: 500;
font-size: 16px;
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
vertical-align: middle;
display: inline-block;
margin-right: (@spacer / 4);
border: 1px solid #CFEEF3;
}
}
//
// WP Media
//
.wp-caption,
.alignnone,
.alignleft,
.alignright {
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: (@spacer/2);
}
.alignright {
@media (@screen-sm) {
float: right;
margin: 5px 0 (@spacer/2) (@spacer/2);
}
}
.alignleft {
@media (@screen-sm) {
float: left;
margin: 5px (@spacer/2) (@spacer/4) 0;
}
}
.wp-caption-text {
&:extend(.small);
color: @greyHr;
font-style: italic;
}
//
// Categories list
//
.post-categories {
&:extend(.list-unstyled all, .small);
margin-bottom: (@line-height-small / 2);
}
//
// Pagination
//
.pagination {
background: @white;
margin-top: (@spacer/2);
padding-bottom: (@spacer/2);
a {
&:extend(.button all, .button.small);
}
}
.pagination__next {
&:extend(.text-right);
}
//
// Blog header
//
.blog-categories {
background-color: @blueBright;
border-top: 2px solid fade(@white,50);
ul {
&:extend(.list-unstyled all);
display: table;
padding: 0 10px;
width: 100%;
}
li {
width: 20%;
display: table;
text-align: center;
vertical-align: middle;
padding: 0;
height: 88px;
float: left;
transition: .2s ease-out;
&:hover,
&:focus {
background-color: fade(@white,50);
}
}
a {
&:extend(.text-center, .small);
display: table-cell;
color: @white;
height: 88px;
width: 100%;
vertical-align: middle;
padding: 0 10px;
&:hover,
&:focus {
color: @blueMedium;
}
}
@media screen and (max-width: 450px) {
li {
width: 50%;
}
}
}
//
// Featured Blog Posts
//
.subtemplate--featured {
@media (@screen-sm) {
.grid__col { flex: 33%; }
}
.grid__col > a { display: block; }
}
.subtemplate--featured--more {
&:extend(.text-center);
margin-bottom: 0;
}
.featured {
position: relative;
transition: .2s ease-out;
a:hover &,
a:focus & {
transform: scale(1.01);
box-shadow: 0 4px 8px fade(#000, 20%);
}
a:active & {
top: 1px;
transform: none;
transition: none;
box-shadow: none;
}
}
.featured__title {
&:extend(.h4);
margin: 0;
font-size: @font-size-base;
color: #fff;
position: absolute;
left: 0;
bottom: 0;
background: fade(@blueDeep, 70%);
padding: (@spacer / 4);
transition: .2s ease-out;
a:hover &,
a:focus & { color: @link-color; }
}
.featured__image {
max-height: 175px;
display: block;
}