new

assets/scss/templates/_blog.scss

@@ -0,0 +1,145 @@
+/*=================================================================
+  Latest Posts
+==================================================================*/
+
+.blog {
+  background: darken( $light, 1.17);
+}
+
+.post {
+  background: $white;
+  margin-bottom: 55px;
+
+  @include tablet {
+    margin-bottom: 20px;
+  }
+
+  .post-media {
+    &.post-thumb {
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+
+    &.post-media-audio {
+      iframe {
+        width: 100%;
+      }
+    }
+  }
+
+  .post-title {
+    margin-top: 25px;
+    text-transform: uppercase;
+
+    a {
+      color: $color-primary;
+
+      &:hover {
+        color: $color-primary;
+      }
+    }
+  }
+
+  .post-meta {
+    font-size: 13px;
+    margin-top: 10px;
+
+    ul {
+      li {
+        display: inline-block;
+        color: lighten( $black, 56.47 );
+        margin-right: 20px;
+        font-size: 12px;
+        letter-spacing: .5px;
+
+        a {
+          color: lighten( $black, 56.47 );
+
+          &:hover {
+            color: $color-primary;
+          }
+        }
+      }
+    }
+
+    .post-author {
+      color: $black;
+    }
+  }
+
+  .post-content {
+    margin-top: 20px;
+
+    p {
+      line-height: 26px;
+    }
+
+    ul {
+      font-size: 15px;
+      padding: 10px 20px;
+      font-family: $font-primary;
+      list-style: circle;
+    }
+    ol {
+      font-size: 15px;
+      padding: 10px 20px;
+      font-family: $font-primary;
+    }
+
+    blockquote {
+      margin-top: 20px;
+      font-size: 18px;
+      border-color: $color-primary;
+      padding: 10px 20px;
+      text-align: left;
+      color: darken( $light, 50.98);
+    }
+
+    .btn-main {
+      padding: 10px 20px;
+      margin: 15px 0;
+      font-size: 12px;
+    }
+  }
+}
+
+.post-pagination {
+  margin: 0px;
+
+  @include desktop {
+    margin-bottom: 60px;
+  }
+
+  @include tablet {
+    margin-bottom: 25px;
+  }
+
+  >li {
+    margin: 0 2px;
+    display: inline-block;
+    font-size: 14px;
+
+    >a {
+      color: $black;
+      @include transition (all, 0.3s, ease);
+
+      &:hover {
+        color: $white;
+        background: $color-primary;
+        border: 1px solid $color-primary;
+      }
+    }
+
+    &.active>a {
+      background: $color-primary !important;
+      border: 1px solid $color-primary !important;
+    }
+  }
+
+  >li:first-child>a,
+  >li:last-child>a {
+    border-radius: 0;
+  }
+}