%PDF-
%PDF-
Mini Shell
Mini Shell
.thim-grid-posts {
position: relative;
overflow: hidden;
&.has-horizontal.has-vertical {
.grid-horizontal {
width: 66.67%;
float: left;
}
.grid-vertical {
width: 33.33%;
float: left;
.article-image{
background: #fff;
}
}
}
.item-post{
position: relative;
}
.article-wrapper {
padding: 30px;
background: #f5f5f5;
position: absolute;
&:before{
content: '';
position: absolute;
top: 58px;
left: -13px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right: 13px solid #f5f5f5;
z-index: 10;
}
.date {
color: #aaa;
font-size: 13px;
margin-top: 4px;
}
.title {
font-size: 17px;
font-weight: 500;
line-height: 1.5;
margin-top: 7px;
margin-bottom: 9px;
}
.desc {
font-size: 14px;
font-weight: 400;
line-height: 1.6;
}
.read-more{
text-transform: uppercase;
display: inline-block;
margin-top: 22px;
margin-bottom: 0;
font-size: 13px;
font-weight: 400;
&:hover{
text-decoration: none;
}
.fa{
margin-left: 7px;
}
}
}
.has-feature &{
width: 75%;
overflow: hidden;
}
}
.thim-list-post-inner{
position: relative;
&.has-feature{
z-index: 2;
}
.feature-item{
width: 25%;
position: absolute;
right: 0;
top: 0;
bottom: 0;
height: 100%;
overflow: hidden;
&:before{
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
z-index: 2;
}
img{
position: absolute;
right: 0;
top: 50%;
bottom: auto;
height: 100%;
left: 50%;
width: auto;
max-width: none;
@include translate(-50%, -50%);
}
.article-wrapper{
z-index: 3;
position: absolute;
left: 0;
right: 0;
bottom: 63px;
padding: 0 30px;
.date{
color: rgba(255,255,255,0.4);
font-size: 13px;
}
.title{
font-size: 17px;
line-height: 1.4em;
font-weight: 500;
margin-top: 5px;
margin-bottom: 10px;
a{
color: #fff;
display: inline-block;
}
}
.desc{
color: rgba(255,255,255,0.7);
font-size: 14px;
margin-bottom: 20px;
}
.read-more{
text-transform: uppercase;
color: #fff;
font-size: 13px;
font-weight: 400;
margin: 0;
.fa{
margin-left: 7px;
}
}
}
}
.link_read_more{
position: absolute;
right: 0;
top: -48px;
}
}
.grid-horizontal {
.item-post {
position: relative;
overflow: hidden;
.article-image {
width: 50%;
float: left;
}
.article-wrapper {
width: 50%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
height: 100%;
}
&:nth-child(2n) {
.article-image {
float: right;
}
.article-wrapper {
right: auto;
left: 0;
&:before{
left: auto;
right: -13px;
border-right: none;
border-left: 13px solid #eaeef2;
}
.title {
a {
color: #fff;
}
}
.date {
color: rgba(255, 255, 255, 0.4);
}
.desc{
color: rgba(255, 255, 255, 0.7);
}
.read-more{
color: #fff;
}
&:hover{
.title{
a{
color: #d6dce2;
}
}
}
}
}
}
}
.grid-vertical{
.item-post{
.article-wrapper{
&:before{
top: -26px;
left: 50%;
right: auto;
margin-left: -13px;
border-bottom: 13px solid #f5f5f5;
border-right: 13px solid transparent;
border-left: 13px solid transparent;
}
}
}
}
.thim-list-posts {
&.home-new {
.item-post {
border-bottom: 1px solid rgba(124,124,124,0.15);
padding-bottom: 30px;
margin-bottom: 30px;
h5 {
font-size: 18px;
margin-top: 0;
margin-bottom: 10px;
font-weight: 400;
a {
color: #292929
}
}
.article-date {
i {
margin-right: 10px;
color: #2ec4b6;
}
}
&:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
}
}
}
Zerion Mini Shell 1.0