/home/vianto5/ceibaresidencial.mx/wp-content/themes/moore_old/assets/scss/base
Edit: /home/vianto5/ceibaresidencial.mx/wp-content/themes/moore_old/assets/scss/base/_content.scss (10368B)
/* Blog */
article.post-wrap{
margin-bottom: 70px;
&.sticky{
background: #f9f9f9;
padding: 30px;
border-top: 5px solid;
border-color: var(--primary);
.post-excerpt{
text-align: justify;
}
}
.post-title{
margin-top: 0;
margin-bottom: 20px;
line-height: 1.3em;
a{
color: var(--heading);
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;
word-break: break-word;
font-size: 35px;
&:hover{
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
}
}
.post-media{
margin-bottom: 30px;
}
.post-meta{
margin: 0 0px 25px 0px;
ul{
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
li{
display: inline-block;
margin: 0 10px 0px 0;
color: var(--light);
i{
font-size: 0.8em;
color: var(--primary);
padding-right: 3px;
}
a{
color: var(--light);
&:hover{
color: var(--primary);
}
}
}
}
}
.post-excerpt{
& > p{
margin-top: 0px;
margin-bottom: 25px;
}
}
.readmore{
clear: both;
a{
background-color: var(--primary);
border-color: var(--primary);
border: 1px solid;
border-radius: $border-radius-small;
color: #fff;
padding: 10px 25px;
font-size: 1em;
text-transform: none;
font-weight: 600;
box-shadow: none;
display: inline-block;
@include transaction( all, 0.2s, linear );
&:hover{
color: var(--primary);
border-color: var(--primary);
background-color: #fff;
}
}
}
}
/**
* Blog Default
*/
.blog_default{
.post-title{
text-transform: capitalize;
font-size: 30px;
font-weight: 600;
@media(max-width: 767px){
font-size: 30px;
}
}
.post-excerpt{
font-size: 14px;
}
.meta{
ul{
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
@media(max-width: 767px){
flex-direction: column;
}
li{
padding: 5px 5px;
list-style-type: none;
text-transform: uppercase;
font-weight: 500;
color: var(--heading);
&.splash{
opacity: 0.4;
@media(max-width: 767px){
display: none;
}
}
@media(max-width: 767px){
position: relative;
padding-left: 15px;
&:before{
position: absolute;
left: 0;
top: 50%;
content: "";
width: 5px;
height: 1px;
background-color: #343434;
}
}
a{
color: #343434;
text-transform: uppercase;
font-size: 14px;
position: relative;
&:after{
position: absolute;
content: "";
width: 0%;
height: 1px;
left: 0;
bottom: 0;
transition: all 0.5s ease;
background-color: #343434;
}
&:hover{
&:after{
width: 100%;
}
}
}
}
}
}
article{
&:hover{
.post-media{
img{
transition: all 0.3s ease;
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
}
}
}
.post-media{
margin-bottom: 30px;
position: relative;
overflow: hidden;
img{
transition: all 0.3s ease;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
}
}
}
}
.layout_1c{
.blog_default{
text-align: center;
max-width: 1000px;
margin: 0 auto;
.meta{
ul{
justify-content: center;
li{
@media(max-width: 767px){
&:before{
position: absolute;
content: none;
}
}
}
}
}
}
}
/*Blog Grid*/
.blog_grid{
display: grid;
gap: 25px;
grid-template-columns: repeat(3, 1fr);
@media( max-width: $desktop - 1 ){
grid-template-columns: repeat(2, 1fr);
}
@media( max-width: 767px ){
grid-template-columns: repeat(1, 1fr);
}
article.post-wrap {
.post-title{
a{
line-height: 34px;
text-transform: uppercase;
font-size: 22px;
font-weight: normal;
}
}
}
.post-excerpt{
font-size: 14px;
}
.date{
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
}
article{
&:hover{
.post-media{
img{
transition: all 0.3s ease;
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
}
}
}
.post-media{
margin-bottom: 30px;
position: relative;
overflow: hidden;
img{
transition: all 0.3s ease;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
}
}
}
}
.layout_2l, .layout_2r{
.blog_grid{
grid-template-columns: repeat(2, 1fr);
@media( max-width: 767px ){
grid-template-columns: repeat(1, 1fr);
}
}
}
/*Blog masonry*/
.blog_masonry{
margin-left: -15px;
margin-right: -15px;
article{
width: 33.3%;
min-height: 200px;
margin-bottom: 30px;
@media(max-width: 1200px){
width: 50%;
}
@media( max-width: 767px ){
width: 100%;
}
}
.content{
margin: 0px 15px;
position: relative;
min-height: 100px;
&:after{
content: "";
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
background: linear-gradient( 180deg, rgba(47, 47, 47, 0) 50%, #2F2F2F 100%);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity: 1;
}
&:hover{
.post-media{
img{
transition: all 0.3s ease;
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
}
}
}
.post-media{
margin-bottom: 0;
position: relative;
overflow: hidden;
img{
width: 100%;
transition: all 0.3s ease;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
}
}
.footer{
position: absolute;
bottom: 0;
left: 0;
padding: 26px 30px;
color: #fff;
z-index: 1;
a{
.post-title{
font-weight: normal;
font-size: 21px;
text-transform: uppercase;
line-height: 33px;
margin-bottom: 15px;
color: #fff;
font-weight: normal;
&:hover{
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
}
}
.date{
text-transform: uppercase;
font-size: 14px;
}
}
}
}
.layout_2l, .layout_2r{
.blog_masonry{
article{
width: 50%;
min-height: 200px;
@media(max-width: 767px){
width: 100%;
}
}
}
}
/* Detail */
.single{
article.post-wrap{
.post-title{
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;
margin-bottom: 20px;
margin-top: 0;
word-break: break-word;
text-transform: capitalize;
font-size: 35px;
font-weight: 600;
@media(max-width: 767px){
font-size: 30px;
}
}
.post-media{
margin-bottom: 30px;
}
.post-content{
margin-bottom: 50px;
&:before,
&:after{
clear: both;
content: '';
display: table;
}
}
.post-meta{
.date{
text-transform: uppercase;
margin: 0;
font-weight: 500;
}
.splash{
margin: 0 3px;
}
.author{
text-transform: uppercase;
margin: 0;
font-weight: 500;
&:hover{
text-decoration: underline;
}
}
}
.post-tags{
clear: both;
margin-top: 50px;
padding-top: 50px;
border-top: 1px solid #f3f3f3;
a{
text-transform: capitalize;
color: #2f2f2f;
border: none;
border-radius: 20px;
background-color: #F2F3F5;
padding: 10px 16px;
margin-right: 5px;
@include transaction( all, 0.3s, linear );
display: inline-block;
margin: 0px 5px 5px 0px;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
&:hover{
color: #fff;
background-color: var(--primary);
border-color: var(--primary);
}
}
}
&.sticky{
.post-tags{
border-top: 1px solid #e1e1e1;
}
}
.share{
ul{
padding: 0;
margin: 0;
display: flex;
li{
list-style-type: none;
background-color: #f1f1f1;
border: 1px solid #f1f1f1;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
margin: 0px 5px 30px 5px;
@include transaction( all, 0.3s, linear );
&:first-child{
margin-left: 0;
}
a{
color: #333;
line-height: 40px;
padding: 10px;
}
&:hover{
@include transaction( all, 0.3s, linear );
background-color: #fff;
border-color: #333;
a{
color: #333;
}
}
}
}
}
}
&.layout_1c{
article.post-wrap{
.post-title{
text-align: center;
padding: 0px 15%;
font-size: 52px;
@media(max-widtguh: 767px){
padding: 0;
font-size: 35px;
}
}
.post-meta{
text-align: center;
}
.post-media{
padding: 40px 0px 30px 0px;
}
.share{
ul{
justify-content: center;
}
}
.post-content,
.post-tags{
width: 80%;
margin-left: auto;
margin-right: auto;
@media( max-width: 767px ){
width: 100%;
}
}
}
#comments{
width: 80%;
margin-left: auto;
margin-right: auto;
@media( max-width: 767px ){
width: 100%;
}
}
}
}
h1.page-title{
margin-top: 0;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;
font-size: 35px;
}
.search{
.page-header{
.page-title{
margin-bottom: 60px;
border-bottom: 1px solid #e5e5e5;
span{
color: var(--primary);
}
}
}
}