Yuzu Theme

from meowapps.com

assets/less/_article-cards.less

@@ -0,0 +1,193 @@
+// main: style.less
+
+
+@media screen and (max-width: @tablet) {
+  .row {
+    display: inline;
+  }
+}
+
+.article-card-container {
+  display: inline-block;
+  padding: 30px 15px;
+  box-sizing: border-box;
+  font-size: 16px;
+
+  .article-card {
+    position: relative;
+    width: 100%;
+    background: @card_bg;
+    background: var(--card_bg);
+    box-shadow: @shadow;
+    box-shadow: var(--shadow);
+    color: var(--card_color);
+    transition: .2s;
+
+    &:hover {
+      box-shadow: @deeper_shadow;
+      box-shadow: var(--deeper_shadow);
+      transition: .3s;
+    }
+
+    .article-featured-image {
+      display: block;
+      background-size: cover;
+      background-position: center;
+    }
+
+    .article-meta {
+
+      .article-categories {
+
+        .article-category {
+          display: inline-block;
+          text-transform: uppercase;
+          font-size: 14px;
+          color: @card_color;
+          color: var(--card_color);
+          opacity: .3;
+        }
+      }
+
+      .article-title {
+        display: block;
+        font-size: 28px;
+        font-weight: 400;
+        margin-top: 0;
+        margin-bottom: 20px;
+        color: @card_color;
+        color: var(--card_color);
+      }
+
+      .article-excerpt {
+        line-height: 160%;
+        opacity: .6;
+      }
+
+      .read-more-btn {
+        display: inline-block;
+        color: @read_more_btn_color;
+        color: var(--read_more_btn_color);
+        background: @read_more_btn_bg;
+        background: var(--read_more_btn_bg);
+        padding: 15px 0;
+        width: 140px;
+        text-align: center;
+        line-height: 22px;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        margin-left: -70px;
+        margin-bottom: -26px;
+        box-shadow: @shadow;
+        box-shadow: var(--shadow);
+        border-radius: 25px;
+        transition: .2s;
+        
+        &:hover {
+          box-shadow: @deeper_shadow;
+          box-shadow: var(--deeper_shadow);
+          transition: .3s;
+        }
+      }
+    }
+  }
+
+  &.large {
+    width: 100%;
+
+    .article-card {
+      display: flex;
+      width: 100%;
+
+      .article-featured-image {
+        display: flex;
+        width: 60%;
+        padding-bottom: 40%;
+      }
+
+      .article-meta {
+        position: relative;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: center;
+        padding: 30px;
+        box-sizing: border-box;
+      }
+    }
+
+    @media screen and (max-width: @tablet) {
+      width: 50%;
+
+      .article-card {
+        display: block;
+
+        .article-featured-image {
+          width: 100%;
+          padding-bottom: 66.66%;
+        }
+
+        .article-meta {
+          padding: 30px;
+          padding-bottom: 90px;
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    @media screen and (max-width: @big_phone) {
+      width: 100%;
+    }
+  }
+
+  &.medium {
+    width: 50%;
+    vertical-align: top;
+
+    .article-card {
+
+      .article-featured-image {
+        width: 100%;
+        padding-bottom: 66.66%;
+      }
+
+      .article-meta {
+        padding: 30px;
+        padding-bottom: 90px;
+        box-sizing: border-box;
+      }
+    }
+
+    @media screen and (max-width: @big_phone) {
+      width: 100%;
+    }
+  }
+
+  &.small {
+    width: 33.33%;
+    vertical-align: top;
+
+    .article-card {
+
+      .article-featured-image {
+        width: 100%;
+        padding-bottom: 66.66%;
+      }
+
+      .article-meta {
+        padding: 30px;
+        padding-bottom: 90px;
+        box-sizing: border-box;
+      }
+    }
+
+    @media screen and (max-width: @tablet) {
+      width: 50%;
+    }
+
+    @media screen and (max-width: @big_phone) {
+      width: 100%;
+    }
+  }
+}