File "_blogs.scss"
Full Path: /home/tekvhqgl/public_html/dev2024_old_skip/wp-content/themes/customify/assets/sass/site/layouts/_blogs.scss
File size: 11.04 KB
MIME-type: text/plain
Charset: utf-8
$blog_gutter: $gl-gutter;
.bypostauthor {
display: inline-block;
}
.entry-title {
word-wrap: break-word;
}
.entry-meta {
> span {
display: inline-block;
padding: 5px 0;
}
.sep {
margin-left: 8px;
margin-right: 8px;
}
.author {
img {
vertical-align: middle;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;
}
}
}
.posts-layout {
.entry {
margin-bottom: 2em;
}
.entry--item {
margin-bottom: 15px;
&:last-child {
margin-bottom: 0px;
}
}
.entry-inner {
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
border-bottom: 1px solid $color_border;
padding-bottom: 2em;
@include for_device( mobile ){
display: block;
}
}
.entry-media {
position: relative;
max-width: 100%;
flex-basis: 40%;
padding-top: 0;
overflow: hidden;
@include for_device( mobile ){
margin-bottom: 1em;
width: 100% !important;
padding-top: 56.25%; // 16:9
}
&.no-ratio {
.entry-thumbnail {
position: relative;
}
}
}
.entry-thumbnail {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
display: flex;
line-height: 0;
background-color: #d5d5d5;
img {
object-fit: cover;
width: 100%;
height: auto;
}
a {
position: absolute;
top: 0px;
top: 0px;
display: block;
}
}
.entry-title {
font-size: 1.5em;
font-weight: 500;
word-wrap: break-word;
display: flex;
align-items: center;
a {
text-align: inherit;
display: block;
flex-basis: 100%;
}
}
.entry-excerpt {
p{
&:last-child {
margin-bottom: 0px;
}
}
}
.entry-media-link {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0; display: block;
z-index: 30;
}
.entry-content-data {
flex: 1;
word-wrap: break-word;
max-width: 100%;
}
.entry-readmore {
margin-top: 1em;
}
.entry-cat {
top: 0;
display: block;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.readmore-button {
display: inline-block;
line-height: 1;
border: 1px solid $color_primary;
color: $color_primary;
border-radius: 2px;
cursor: pointer;
padding: 7px 17px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: transform .18s, border .18s, background .18s, box-shadow .18s, opacity .18s, color .18s;
font-weight: 500;
&:hover {
background: $color_primary;
color: #FFFFFF;
border-color: $color_primary;
}
}
.entry-content-data {
display: flex;
flex-flow: column nowrap;
}
.entry-article-part {
position: relative;
width: 100%;
margin-bottom: 15px;
&:first-child {
margin-top: 0;
}
&.entry-article-media {
flex: none;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
&.entry-article-footer{
display: flex;
margin-top: auto;
margin-bottom: 0px;
justify-content: space-between;
&.only-more {
.entry-readmore {
width: 100%;
}
}
}
}
.entry-article-footer {
align-items: center;
> *, .entry-meta {
margin-bottom: 0px;
margin-top: 0px;
display: inline-block;
}
}
.entry-thumbnail {
transition: all .3s linear;
img {
transition: all .3s linear;
}
&:before {
transition: all .3s linear;
content: "";
display: block;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
z-index: 2;
}
}
.entry-article-media {
z-index: 5;
}
// Media content align
.mc-bottom {
.media-content-inner {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
display: block;
}
}
.mc-top {
.media-content-inner {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
display: block;
}
}
.mc-center {
.media-content-inner {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
display: flex;
flex-direction: column;
justify-content: center;
}
}
&.layout-- {
&blog_column, &blog_boxed {
.entry-inner {
display: block;
.entry-content-data, .entry-article-header {
display: flex;
flex-direction: column;
}
}
}
&blog_classic {
.entry-media {
margin-right: $blog_gutter;
@include for_device( mobile ) {
margin-right: 0px;
}
}
}
&blog_column, &blog_boxed {
.entry-media {
padding-top: 40%;
}
.entry {
display: block;
}
.sticky {
.entry-content-data {
background-color: #fcf8e3;
border: 1px solid #faf2cc;
border-top: 0px none;
color: #8a6d3b;
padding: 1em;
}
}
.entry-media {
margin-bottom: 1em;
display: block;
position: relative;
}
}
&blog_boxed {
.entry-content-data {
padding: ( $blog_gutter /2 );
}
}
}
}
// Pagination
.pagination {
margin: 30px auto;
display: block;
.nav-links {
> * {
border: 1px solid $color_border;
color: $color_meta;
padding: 4px 12px 4px;
border-radius: 1px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.8px;
display: inline-block;
&:hover {
border-color: $color_primary;
background: $color_primary;
color: #FFFFFF;
}
}
span {
border-color: $color_primary;
background: $color_primary;
color: #FFFFFF;
}
}
}
// Single post
.single {
.entry-meta {
margin-bottom: ms(1);
}
.entry-footer {
margin-bottom: ms(2);
}
}
.entry-content {
.page-links {
display: block;
margin: 5px 0px 20px;
font-weight: 500;
a {
border: 1px solid $color_border;
padding: 5px 12px 5px;
text-transform: uppercase;
color: $color_text;
margin: 0px 2px;
}
}
.table-wrapper {
max-width: 100%;
overflow: auto;
}
}
.single-post {
.entry-content {
a {
&:hover {
text-decoration: underline;
}
}
}
}
.entry-single {
.entry--item:not( .entry-title ), .entry-thumbnail {
margin-bottom: 1.41575em;
&:last-child {
margin-bottom: 0px;
}
}
.entry--item.entry-related {
margin-bottom: 0.41575em;
}
.tags-links, .cats-links {
&:before {
font: normal normal normal 16px/1 FontAwesome;
text-decoration: inherit;
text-transform: none;
position: relative;
margin-right: 5px;
color: $color_meta;
}
}
.cats-links:before {
content: "\f115";
}
.tags-links:before {
content: "\f02c";
}
.edit-link {
display: block;
width: 100%;
margin-top: ms(-3);
a {
text-transform: uppercase;
font-weight: 500;
font-size: 80%;
letter-spacing: 0.5px;
}
}
}
// Biography box
.author-bio {
display: flex;
.avatar {
flex-basis: 90px;
@include for_device( mobile ){
flex-basis: 90px;
}
}
.author-bio-details {
flex-basis: calc( 100% - 90px );
margin-left: 1.5em;
@include for_device( mobile ){
flex-basis: calc( 100% - 50px );
}
}
.author-bio-desc p:last-child {
margin-bottom: 0.72em;
}
}
.post-navigation .nav-links {
@include clearfix();
padding: 16px 0px 15px;
border-top: 1px solid $color_border;
border-bottom: 1px solid $color_border;
.nav-previous, .nav-next {
width: 49%;
a {
span.meta-nav {
display: block;
margin-bottom: 5px;
}
}
}
.nav-previous {
float: left;
text-align: left;
}
.nav-next {
float: right;
text-align: right;
}
}
// Related Posts
.related-post-title {
margin-bottom: 0.41575em;
@include for_device( mobile ){
margin-bottom: 0;
}
}
.related-post {
margin-bottom: 1em;
.entry-title {
font-size: 1.1em;
line-height: 1.3;
}
}
.related-thumbnail {
a {
display: block;
line-height: 0px;
position: relative;
}
}
.img-pos-left , .img-pos-right {
.related-post {
display: flex;
@include for_device( mobile ){
display: block;
}
}
.related-thumbnail {
flex-basis: 160px;
position: relative;
@include for_device( mobile ){
margin-bottom: 1em;
}
img {
width: 100%;
object-fit: cover;
display: block;
}
}
.related-body {
flex-basis: calc( 100% - 160px );
p {
margin-bottom: 0px;
}
}
}
.img-pos-left {
.related-body {
padding-left: 1em;
@include for_device( mobile ){
padding-left: 0em;
}
}
}
.img-pos-right {
.related-body {
order: 1;
padding-right: 1em;
@include for_device( mobile ){
padding-right: 0em;
}
}
.related-thumbnail {
order: 2;
}
}
.img-pos-top {
.related-thumbnail {
margin-bottom: 0.5em;
img {
width: 100%;
}
}
}