first commit
This commit is contained in:
Executable
+320
@@ -0,0 +1,320 @@
|
||||
/*---------------------------------------
|
||||
15. Blog CSS
|
||||
-----------------------------------------*/
|
||||
/*-- Blog --*/
|
||||
.blog {
|
||||
& .blog-inner {
|
||||
& .blog-media {
|
||||
margin-bottom: 15px;
|
||||
& .image {
|
||||
display: block;
|
||||
& img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .blog-audio{
|
||||
& iframe{
|
||||
width: 100%;
|
||||
height: 242px;
|
||||
border: 0;
|
||||
// Responsive
|
||||
@media #{$desktop-device}{
|
||||
height: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .blog-video{
|
||||
& iframe{
|
||||
width: 100%;
|
||||
height: 242px;
|
||||
border: 0;
|
||||
// Responsive
|
||||
@media #{$desktop-device}{
|
||||
height: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .blog-gallery{
|
||||
& a{
|
||||
display: block;
|
||||
& img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .content {
|
||||
& .meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 5px;
|
||||
& li {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 30px;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 5px;
|
||||
// Responsive
|
||||
@media #{$desktop-device}{
|
||||
font-size: 14px;
|
||||
}
|
||||
@media #{$large-mobile}{
|
||||
font-size: 13px;
|
||||
}
|
||||
&::after {
|
||||
content: "-";
|
||||
margin: 0 10px;
|
||||
}
|
||||
&:last-child {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
& a {}
|
||||
}
|
||||
}
|
||||
& .title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 26px;
|
||||
margin-bottom: 10px;
|
||||
// Responsive
|
||||
@media #{$desktop-device}{
|
||||
font-size: 16px;
|
||||
}
|
||||
@media #{$large-mobile}{
|
||||
font-size: 16px;
|
||||
}
|
||||
& a {}
|
||||
}
|
||||
& .desc {
|
||||
margin-top: 20px;
|
||||
& p {}
|
||||
}
|
||||
& .read-more {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*-- Blog Details --*/
|
||||
.blog-details {
|
||||
& .blog-inner {
|
||||
& .blog-media {
|
||||
margin-bottom: 30px;
|
||||
& .image {
|
||||
display: block;
|
||||
& img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .blog-audio{
|
||||
& iframe{
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
& .blog-video{
|
||||
& iframe{
|
||||
width: 100%;
|
||||
border: 0;
|
||||
height: 565px;
|
||||
// Responsive
|
||||
@media #{$laptop-device}{
|
||||
height: 465px;
|
||||
}
|
||||
@media #{$desktop-device}{
|
||||
height: 400px;
|
||||
}
|
||||
@media #{$tablet-device}{
|
||||
height: 400px;
|
||||
}
|
||||
@media #{$large-mobile}{
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .content {
|
||||
& .meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
& li {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 5px;
|
||||
//Responsive
|
||||
@media #{$large-mobile}{
|
||||
font-size: 12px;
|
||||
}
|
||||
&::after {
|
||||
content: "-";
|
||||
margin: 0 10px;
|
||||
}
|
||||
&:last-child {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
& a {}
|
||||
}
|
||||
}
|
||||
& .title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
// Responsive
|
||||
@media #{$large-mobile}{
|
||||
font-size: 24px;
|
||||
}
|
||||
@media #{$extra-small-mobile}{
|
||||
font-size: 20px;
|
||||
}
|
||||
& a {}
|
||||
}
|
||||
& .desc {
|
||||
margin-top: 20px;
|
||||
& p {}
|
||||
}
|
||||
.blog-post-list{
|
||||
& li{
|
||||
display: block;
|
||||
list-style: none;
|
||||
line-height: 30px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: "\f101";
|
||||
font-family: FontAwesome;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
& .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
& li {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
line-height: 24px;
|
||||
margin-right: 15px;
|
||||
&::after {
|
||||
content: ",";
|
||||
margin-left: 3px;
|
||||
}
|
||||
&:first-child, &:last-child {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
& i {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
& a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.comments-wrapper{
|
||||
& h3{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.commnent-list-wrap{
|
||||
.comment{
|
||||
list-style-type: none;
|
||||
margin-top: 48px;
|
||||
padding-top: 37px;
|
||||
padding-left: 6px;
|
||||
border-top: 1px solid #eee;
|
||||
// Responsive
|
||||
@media #{$tablet-device}{
|
||||
margin-top: 25px;
|
||||
}
|
||||
.thumb{
|
||||
float: left;
|
||||
@media #{$large-mobile} {
|
||||
float: none;
|
||||
}
|
||||
img{
|
||||
border-radius: 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-left: 115px;
|
||||
@media #{$large-mobile} {
|
||||
margin-left: 0;
|
||||
margin-top: 30px;
|
||||
}
|
||||
& .info{
|
||||
& h6{
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.reply-btn{
|
||||
a{
|
||||
color: $white;
|
||||
-webkit-transition: 0.4s;
|
||||
-o-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
border: 1px solid $theme-color;
|
||||
background: $theme-color;
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px 0;
|
||||
transition: 0.3s;
|
||||
&:hover{
|
||||
color: $theme-color;
|
||||
border: 1px solid $theme-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-footer{
|
||||
span{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.comment-reply{
|
||||
padding-left: 61px;
|
||||
@media #{$large-mobile} {
|
||||
padding-left: 30px;
|
||||
}
|
||||
@media #{$extra-small-mobile} {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user