This repository has been archived on 2022-11-23. You can view files and clone it, but cannot push or open issues or pull requests.
quarante-douze-static/scss/_blog.scss

200 lines
3.1 KiB
SCSS
Raw Permalink Normal View History

/*
* 6 - Blog Elements ( _blog.scss )
*
* All elements that are used for a blog (article previews, etc).
* "Commons" elements will be in other parts
*/
/* 1.1 - Comment area */
.comment {
margin-bottom: 1.333em;
}
/* 2.1 - Previews */
.preview-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
margin-bottom:1em;
padding: 0;
width:100%;
.preview {
width: 48%;
height:220px;
}
}
.preview {
margin:auto;
margin-bottom: 1em;
&-link {
display:block;
width:100%;
height:100%;
padding:0;
margin:0;
text-decoration:none!important;
&:hover .preview-item {
background-size: 133% auto;
background-position: center center;
}
}
&-item {
height: 100%;
width: 100%;
background-size: 100% auto;
background-position: center center;
transition: background-size .5s;
}
}
.preview-overlay {
height: 100%;
width: 100%;
opacity: 1;
padding: 0;
transition: background .5s;
color: #FFF;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
color: white!important;
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 60%);
&:hover {
opacity: 1;
h1, h2 {
opacity: 1;
color: #FFF;
}
.badge {
background-color: lighten($color-category, 15%);
}
}
.badge {
background-color: $color-category;
}
h1, h2 {
max-width:100%;
margin:auto;
margin-bottom:0px;
text-align:left;
display:block;
font-size:2em;
transition: opacity .5s;
text-shadow: 1px 1px 0px rgba(0,0,0,1);
opacity: 0.6;
padding: 0.25em;
color: #FFF;
}
}
.preview-item {
.preview-content {
height: 100%;
width: 100%;
background-size: 100% auto;
background-position: center center;
transition: background-size .5s;
}
&:hover .preview-content {
background-size: 133% auto;
background-position: center center;
}
}
.preview-categories {
padding: 0.5em;
.badge {
font-size: 1em;
text-shadow: none;
}
}
/* 2.1.1 - Article list */
.list-article {
display: flex;
flex-direction: row;
&-thumbnail {
display: block;
padding-top: 1.5em;
max-width: 200px;
img {
max-width: 100%;
height: auto;
}
}
&-main {
width: 100%;
padding-left:1em;
}
&-title {
font-family: Teko;
font-weight: 600;
margin-bottom: 0em;
a {
color: #444;
}
}
&-metadata {
display:flex;
justify-content: space-between;
}
&-content {
font-style: italic;
}
}
.navigation {
.pagination {
padding-top: 2em;
display:flex;
flex-direction: row;
justify-content: flex-end;
}
}
/* 3. Article mixts */
.article-taxonomies {
display:flex;
flex-direction: row;
justify-content: space-between;
.badge:not(:last-child) {
margin-right:0.5em;
}
}
.wp-caption {
img {
max-width: 100%;
height: auto;
}
&-text {
font-size: 0.9em;
font-style: italic;
}
&.aligncenter {
margin: auto;
}
}