Yuzu Theme
from meowapps.com
This commit is contained in:
310
assets/less/_blog.less
Normal file
310
assets/less/_blog.less
Normal file
@@ -0,0 +1,310 @@
|
||||
// main: style.less
|
||||
|
||||
.articles-list {
|
||||
font-size: 0;
|
||||
width: 100%;
|
||||
|
||||
.posts-navigation {
|
||||
font-size: 16px;
|
||||
margin-top: 60px;
|
||||
|
||||
.nav-links {
|
||||
|
||||
.nav-previous, .nav-next {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
margin: 10px 4px;
|
||||
display: inline-block;
|
||||
border-radius: 30px;
|
||||
//text-transform: uppercase;
|
||||
font-size: 16px;
|
||||
padding: 10px 20px;
|
||||
background: @card_bg;
|
||||
background: var(--card_bg);
|
||||
color: @card_color;
|
||||
color: var(--card_color);
|
||||
box-shadow: @shadow;
|
||||
box-shadow: var(--shadow);
|
||||
transition: .2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @deeper_shadow;
|
||||
box-shadow: var(--deeper_shadow);
|
||||
transition: .2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-article, .single-page {
|
||||
|
||||
.entry-content {
|
||||
font-size: 18px;
|
||||
line-height: 180%;
|
||||
color: @body_color;
|
||||
color: var(--body_color);
|
||||
padding-bottom: 60px;
|
||||
|
||||
p {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
||||
p {
|
||||
padding-left: 20px;
|
||||
border-left: 2px solid @body_color;
|
||||
border-left: 2px solid var(--body_color);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-article {
|
||||
|
||||
.related-posts {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@media screen and (max-width: @big_phone) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.previous-post, .next-post {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
color: white !important;
|
||||
|
||||
@media screen and (max-width: @big_phone) {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
|
||||
.filter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 38px;
|
||||
|
||||
@media screen and (max-width: @big_phone) {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
background: @body_bg;
|
||||
background: var(--body_bg);
|
||||
color: @body_color;
|
||||
color: var(--body_color);
|
||||
padding-top: 60px;
|
||||
|
||||
#disqus_thread {
|
||||
width: 90%;
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.comment-reply-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
width: 90%;
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
padding-bottom: 50px;
|
||||
|
||||
@media screen and (max-width: @big_phone) {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border-radius: 0;
|
||||
background: @comment_form_bg;
|
||||
background: var(--comment_form_bg);
|
||||
color: @comment_form_color;
|
||||
color: var(--comment_form_color);
|
||||
border: 1px solid rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment-form-comment {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.user-infos {
|
||||
display: flex;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
border: 1px solid rgba(0,0,0,.4);
|
||||
border-top: none;
|
||||
border-radius: 0;
|
||||
padding: 10px;
|
||||
background: @comment_form_bg;
|
||||
background: var(--comment_form_bg);
|
||||
color: @comment_form_color;
|
||||
color: var(--comment_form_color);
|
||||
|
||||
&:first-of-type {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
background: @post_comment_btn_bg;
|
||||
background: var(--post_comment_btn_bg);
|
||||
border: 2px solid rgba(0,0,0,0);
|
||||
color: @post_comment_btn_color;
|
||||
color: var(--post_comment_btn_color);
|
||||
box-shadow: @shadow;
|
||||
box-shadow: var(--shadow);
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
transition: .1s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @deeper_shadow;
|
||||
box-shadow: var(--deeper_shadow);
|
||||
transition: .1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comments-list-container {
|
||||
padding: 60px 10px;
|
||||
|
||||
@media screen and (max-width: @big_phone) {
|
||||
padding: 30px 10px;
|
||||
}
|
||||
|
||||
ol.comment-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
list-style: none;
|
||||
|
||||
li.comment {
|
||||
display: block;
|
||||
background: @comment_bg;
|
||||
background: var(--comment_bg);
|
||||
color: @comment_color;
|
||||
color: var(--comment_color);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,.2);
|
||||
margin: 30px 0;
|
||||
|
||||
|
||||
&.bypostauthor {
|
||||
border-left: 4px solid @comment_color;
|
||||
border-left: 4px solid var(--comment_color);
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.comment-author-profil-picture {
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-meta {
|
||||
padding-left: 20px;
|
||||
margin-top: -5px;
|
||||
|
||||
.author-name {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.posted-on {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol.children {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 30px;
|
||||
list-style: none;
|
||||
|
||||
li.comment {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user