?
ELwebshll2019
.blog-list {
background-color: #fff;
.post {
border-bottom: 1px solid #e3e3e3;
padding-bottom: 35px;
}
.post-media {
&:before {
display: none;
}
}
.post-inner {
padding: 0;
.post-meta {
margin-bottom: 0;
}
}
.post-format {
display: inline-block;
float: left;
margin-top: 8px;
margin-right: 15px;
a {
display: block;
.fa {
width: 45px; height: 45px;
text-align: center;
line-height: 45px;
background-color: $color;
font-size: 16px;
color: #fff;
}
}
+ .post-title,
+ .post-meta {
margin-top: 16px;
}
}
.post-meta,
.post-title {
overflow: hidden;
}
.post-title {
.h5 {
margin-bottom: 8px;
}
}
.post-body {
margin-top: 15px;
}
.post-footer {
margin-top: 30px;
}
}
.blog-timeline {
.row {
.row {
margin-left: -30px;
margin-right: -30px;
[class*="col-"] {
padding-left: 30px;
padding-right: 30px;
}
}
}
.blog-grid {
padding-top: 20px;
z-index: 9;
&:before {
content: '';
display: block;
position: absolute;
width: 2px; height: 100%;
background-color: #dbdbdb;
padding-bottom: 20px;
margin: auto;
top: 25px;
left: 0; right: 0;
z-index: -1;
}
}
.post {
margin-bottom: 30px;
}
.grid-item {
&:nth-child(2) {
margin-top: 50px;
}
.line {
display: block;
position: absolute;
height: 2px; width: 100%;
background-color: #dbdbdb;
margin: auto;
top: -1px;
left: 0; right: 0;
z-index: 5;
-webkit-background-clip: content-box;
-moz-background-clip: content-box;
-ms-background-clip: content-box;
-o-background-clip: content-box;
background-clip: content-box;
&:after {
content: '';
display: block;
position: absolute;
width: 15px; height: 15px;
@include rounded(50%);
background-color: $color;
border: 4px solid #f1f1f1;
bottom: -6px;
z-index: 8;
}
&:before {
content: '';
display: block;
position: absolute;
width: 15px; height: 15px;
@include rounded(50%);
border: 2px solid $color;
opacity: .5;
bottom: -6px;
z-index: 9;
}
&.line-left {
padding-left: 30px;
&:after {
right: -7px;
}
&:before {
right: -7px;
}
}
&.line-right {
padding-right: 30px;
&:after {
left: -7px;
}
&:before {
left: -7px;
}
}
}
}
.load-more {
margin-top: 80px;
}
}
.icon_quote {
font-family: $pd;
@include scaleX(.9);
&:before {
content: '”';
}
}
.blockquote {
position: relative;
padding-left: 30px;
border-left: 3px solid $color;
padding-top: 20px;
padding-bottom: 20px;
z-index: 9;
margin-bottom: 0;
.icon {
position: absolute;
font-size: 180px;
color: #e1e1e1;
left: 21px;
top: -50px;
z-index: -1;
}
p {
font-family: $pd;
font-style: italic;
font-size: 14px;
color: #3e3e3e;
letter-spacing: 0.02em;
line-height: 1.9em;
}
cite {
font-size: 12px;
text-transform: uppercase;
color: #606060;
letter-spacing: 0.03em;
&:before {
content: '// ';
}
}
}
.post-link {
position: relative;
display: block;
padding: 100px 30px;
background-color: $color;
z-index: 9;
&:after {
content: '';
display: block;
position: absolute;
top: 5px; bottom: 5px;
left: 5px; right: 5px;
border: 1px solid rgba(255,255,255,.6);
z-index: -1;
}
.icon, .fa {
position: absolute;
font-size: 50px;
color: rgba(255,255,255,.4);
left: 50%;
top: 50%;
z-index: -1;
@include transform(translate(-50%, -50%) scale(1));
@include transition(all .3s ease);
}
span {
font-family: $pd;
font-style: italic;
font-size: 14px;
color: #000;
letter-spacing: 0.03em;
}
&:hover {
.icon, .fa {
@include transform(translate(-50%, -50%) scale(1.5));
}
}
}
.post .wp-caption,
.post .wp-caption img {
width: auto !important;
}
.post .wp-caption img {
position: relative;
margin-bottom: 10px;
top: 5px;
}
.post .wp-caption .wp-caption-text {
font-family: $pd;
font-size: 12px;
font-style: italic;
text-align: center;
margin-bottom: 10px;
}
.single-post {
.blockquote {
margin-top: 20px;
margin-bottom: 20px;
}
}
.alignleft {
float: left;
margin-right: 30px;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignright {
float: right;
margin-left: 30px;
}
.blog-list {
.post-link {
padding: 40px 30px;
}
}
.post-slider {
.owl-wrapper-outer {
@include transition(all .3s ease);
}
.owl-controls {
.owl-buttons {
position: absolute;
bottom: 0; right: 5px;
z-index: 999;
> div {
color: #fff;
margin: 0 2px;
.icon, .fa {
width: 30px;
background-color: rgba(0,0,0,.5);
@include rounded(0);
border: 0;
&:after {
color: $color;
}
}
}
}
}
}
@media screen and (min-width: 1500px) {
.blog-masonry {
.container-fluid {
.grid-item {
width: 20%;
}
}
}
}
.blog-content {
margin-top: 50px;
}
.blog-sidebar {
margin-top: 50px;
padding-left: 50px;
}
.pagination {
font-size: 0;
padding-top: 15px;
span, a {
display: inline-block;
font-family: $ms;
font-size: 16px;
color: #323232;
min-width: 30px; height: 30px;
padding: 0 10px;
line-height: 30px;
background-color: #e1e1e1;
margin: 4px;
text-align: center;
&.current,
&:hover {
background-color: #000;
border-color: #000;
color: $color;
}
}
}
.widget_search {
form {
input {
width: 100%;
border: 1px solid #dcdcdc;
font-family: $pd;
font-style: italic;
font-size: 12px;
background-color: #fff;
}
}
}
.widget {
margin-bottom: 40px;
.h5 {
&:after {
content: '';
display: block;
width: 30px; height: 1px;
background-color: #666;
margin-top: 20px;
margin-bottom: 15px;
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
li {
margin: 0;
padding: 0;
border-bottom: 1px solid #e2e2e2;
a {
display: inline-block;
font-size: 14px;
color: #606060;
padding: 10px 0;
&:hover {
color: $color;
}
}
ul {
border-top: 1px solid #e2e2e2;
li {
padding-left: 10px;
&:last-child {
border: 0;
}
}
}
}
}
}
.widget_flickr {
overflow: hidden;
.flickr {
border: 0;
padding-top: 13px;
}
.flickr li {
float: left;
border: 0;
a {
display: block;
padding: 0;
&:hover {
opacity: .5;
}
}
}
.flickr-item-1 li {
width: 100%;
}
.flickr-item-2 li {
width: 50%;
}
.flickr-item-3 li {
width: 33.3333333333%;
}
.flickr-item-4 li {
width: 25%;
}
.flickr-item-5 li {
width: 20%;
}
.flickr-item-6 li {
width: 16.6666667%;
}
.flickr-item-7 li {
width: 14.2857143%;
}
.flickr-item-8 li {
width: 12.5%;
}
.flickr-item-9 li {
width: 11.1111111111%;
}
.flickr-item-10 li {
width: 10%;
}
.flickr-item-11 li {
width: 9.09090909%;
}
.flickr-item-12 li {
width: 8.33333333%;
}
}
.tagcloud {
margin-left: -3px;
margin-right: -3px;
font-size: 0;
padding-top: 10px;
a {
display: inline-block;
margin: 3px;
font-size: 12px !important;
color: #666;
border: 1px solid #666;
padding: 3px 8px;
&:hover {
border-color: $color;
background-color: $color;
color: #fff;
}
}
}
.about-author {
position: relative;
margin-top: 33px;
padding: 28px 0;
border-top: 1px solid #e3e3e3;
.image-thumb {
width: 120px;
}
.author-info {
margin-left: 150px;
}
.author-social {
position: absolute;
top: 32px; right: 0;
margin-left: -6px;
margin-right: -6px;
a {
display: inline-block;
font-size: 16px;
color: #161616;
margin: 4px 6px;
&:hover {
color: $color;
}
}
}
}
#comments {
padding: 38px 0;
border-top: 1px solid #e3e3e3;
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: inherit;
}
#comments-title {
margin-top: 0;
margin-bottom: 0;
color: #3e3e3e;
}
.commentlist {
> .comment {
.comment-box {
border-bottom: 1px solid #e3e3e3;
}
}
.comment-author {
float: left;
width: 100px;
overflow: hidden;
}
.comment-body {
margin-left: 125px;
color: #606060;
p {
margin-top: 10px;
}
}
.children {
margin-left: 125px;
.children {
margin-left: 30px;
}
}
}
cite.fn {
font-family: $ms;
font-weight: 700;
font-size: 14px;
a {
color: #3e3e3e;
&:hover {
color: $color;
}
}
}
.comment-meta {
font-family: $pd;
font-style: italic;
font-size: 12px;
color: #3e3e3e;
margin-top: 3px;
}
.comment-box {
position: relative;
padding-top: 30px;
padding-bottom: 30px;
}
.comment-abs {
position: absolute;
display: inline-block;
font-size: 0;
top: 30px; right: 0;
font-family: $pd;
font-style: italic;
font-size: 12px;
a {
display: inline-block;
color: #3e3e3e;
&:hover {
text-decoration: underline;
}
}
}
}
#respond {
.reply-title {
margin-bottom: 16px;
h3 {
margin: 0;
}
}
.form-item {
margin: 15px 0;
textarea {
width: 100%;
height: 100px;
}
input {
width: 100%;
}
}
.form-actions {
margin: 15px 0;
.pi-btn {
width: 100%;
}
}
}
@media screen and (max-width: 991px) {
.blog-sidebar {
padding-left: 0;
}
}
@media screen and (max-width: 767px) {
.blog-timeline {
.blog-grid {
margin-top: 0;
&:before {
display: none;
}
}
.post {
margin-bottom: 0;
}
.grid-item {
.line {
display: none;
}
}
.load-more {
margin-top: 40px;
}
}
}