Yuzu Theme

from meowapps.com

assets/less/_meow-blocks.less

@@ -0,0 +1,253 @@
+// main: style.less
+
+.mwt-section-header {
+  width: 90% !important;
+  margin: auto;
+
+  h3 {
+    position: relative;
+    width: auto !important;
+    display: inline-block;
+    font-weight: 400;
+    font-size: 28px;
+    color: @body_color;
+    color: var(--body_color);
+
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: -9;
+      bottom: -5px;
+      width: 120%;
+      left: -10%;
+      height: 20px;
+      background: @body_color;
+      background: var(--body_color);
+      opacity: .05;
+    }
+  }
+}
+
+.collections-list {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+
+.collection-card-container {
+  display: inline-block;
+  width: 25%;
+  padding: 10px;
+  box-sizing: border-box;
+
+  @media screen and (max-width: @tablet) {
+    width: 33.33%;
+  }
+
+  @media screen and (max-width: @big_phone) {
+    width: 100%;
+  }
+
+  .collection-card {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding-bottom: 66.66%;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .background {
+      position: absolute;
+      width: 100%;
+      padding-bottom: 66.66%;
+      background-size: cover;
+      background-position: center;
+    }
+
+    .content {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      padding: 10px 20px;
+      background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
+      color: white;
+      box-sizing: border-box;
+      
+      h3 {
+        font-weight: 300;
+        font-size: 18px;
+        margin: 0;
+        line-height: 140%;
+        margin-bottom: 10px;
+      }
+
+      .collection-meta {
+        font-size: 13px;
+        opacity: .5;
+        margin-top: -5px;
+        line-height: 1em;
+
+        svg {
+          stroke: white;
+          vertical-align: middle;
+          margin-top: -3px;
+          margin-right: 5px;
+          height: 22px;
+          width: 22px;
+        }
+      }
+    }
+  }
+}
+
+.folders-list {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+
+.folder-card-container {
+  display: inline-block;
+  width: 25%;
+  padding: 10px;
+  box-sizing: border-box;      
+  vertical-align: top;
+
+  @media screen and (max-width: @tablet) {
+    width: 33.33%;
+  }
+
+  @media screen and (max-width: @big_phone) {
+    width: 100%;
+  }
+
+  .folder-card {
+    width: 100%;
+    box-shadow: @shadow;
+    box-shadow: var(--shadow);
+    
+    &:hover {
+      box-shadow: @deeper_shadow;
+      box-shadow: var(--deeper_shadow);
+      transition: .1s;
+    }
+
+    .card-header {
+      position: relative;
+      width: 100%;
+      padding-bottom: 66.66%;
+
+      a {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: block;
+        background: #222;
+        background-size: cover;
+        background-position: center;
+      }
+    }
+
+    .card-body {
+      background: @card_bg;
+      background: var(--card_bg);
+      padding: 10px 20px;
+      height: 110px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      h3 {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 140%;
+        margin-bottom: 10px;
+
+        a {
+          color: @card_color;
+          color: var(--card_color);
+        }
+      }
+
+      .folder-meta {
+        font-size: 14px;
+        line-height: 1em;
+        opacity: .5;
+        margin-top: -5px;
+        color: @card_color;
+        color: var(--card_color);
+      }
+    }
+  }
+}
+
+.mwt-keywords {
+  width: 90% !important;
+  margin: auto;
+
+  .mwt-tags-cloud {
+    width: 100%;
+    overflow: hidden;
+
+    a {
+      display: inline-block;
+      font-size: 16px !important;
+      color: @tag_color;
+      color: var(--tag_color);
+      border: 1px solid @tag_color;
+      border: 1px solid var(--tag_color);
+      padding: 0px 10px;
+      line-height: 38px;
+      white-space: nowrap;
+      margin: 3px;
+
+      &:hover {
+        color: @tag_hover_color;
+        color: var(--tag_hover_color);
+        border: 1px solid @tag_hover_color;
+        border: 1px solid var(--tag_hover_color);
+      }
+    }
+  }
+}
+
+.mwt-search {
+  position: relative;
+  width: 90% !important;
+  margin: auto;
+
+  form.search-form {
+    width: 100%;
+    position: relative;
+
+    .mwt-search {
+      width: 100% !important;
+      border-radius: 30px;
+      line-height: 20px;
+      padding: 10px 20px;
+      border: none;
+      outline: none;
+      background: @search_widget_bg;
+      background: var(--search_widget_bg);
+      transition: .1s;
+
+      &:focus {
+        box-shadow: @shadow;
+        box-shadow: var(--shadow);
+        transition: .1s;
+      }
+    }
+
+    svg {
+      position: absolute;
+      top: 7px;
+      right: 15px;
+      stroke: @footer_color;
+      stroke: var(--footer_color);
+      cursor: pointer;
+    }
+
+    .hidden-submit {
+      display: none;
+    }
+  }
+}