integral 1.3.0 → 1.4.0

data/app/assets/stylesheets/integral/frontend/layout.sass

@@ -8,7 +8,7 @@
 main
   position: relative
 
-header
+.body-header
   position: sticky
   z-index: 999
   top: 0
@@ -20,7 +20,7 @@ header
     @include breakpoint(small down)
       @include top-bar-unstack
 
-header, .off-canvas
+.body-header, .off-canvas
   ul.menu a
     color: $black
     font-weight: bold
@@ -47,7 +47,7 @@ header, .off-canvas
     display: block
     margin: 2rem 0
 
-footer
+.body-footer
   background-color: #212121
   color: $white
   padding: 2rem 0

data/app/assets/stylesheets/integral/frontend/modules/article-footer.scss

@@ -0,0 +1,55 @@
+.article-footer {
+  padding-top: 45px;
+  margin: 25px 0 45px;
+  border-top: 1px solid $medium-gray;
+  color: $black;
+  font-size: 14px;
+
+  @include breakpoint(medium) {
+    padding-top: 60px;
+  }
+
+  > header, section {
+    margin: 15px 0;
+    padding: 15px 0;
+    border-bottom: 1px solid $medium-gray;
+    border-top: 1px solid $medium-gray;
+  }
+
+  > header {
+    line-height: 40px;
+  }
+
+  &-actions {
+    @include breakpoint(medium) {
+      text-align: right;
+    }
+
+    > .button {
+      vertical-align: top;
+      height: 40px;
+      width: 49%;
+      margin: 10px 0;
+      border: 0;
+      @include breakpoint(medium) {
+        margin: 0;
+      }
+    }
+  }
+
+  &-buttons {
+    max-width: 550px;
+    margin: 20px auto 0 !important;
+  }
+
+  &-image {
+    img {
+      height: 50px;
+      width: 100%;
+      object-fit: cover;
+      @include breakpoint(medium) {
+        height: 100px;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/integral/frontend/modules/article.scss

@@ -0,0 +1,34 @@
+.article {
+  > header {
+    border-bottom: 1px solid #e2e1e1;
+    margin-bottom: 15px;
+
+    button {
+      margin-bottom: 0;
+    }
+
+    > h1 {
+      border: 0;
+      font-size: 24px;
+      color: $black;
+      padding: 0;
+
+      @include breakpoint(medium) {
+        font-size: 28px;
+      }
+    }
+  }
+
+  &-author {
+    margin-bottom: 5px;
+    font-size: 14px;
+    color: $dark-gray;
+
+    img {
+      width: 18px;
+      height: 18px;
+      object-fit: cover;
+      border-radius: 100%;
+    }
+  }
+}

data/app/assets/stylesheets/integral/frontend/modules/horizontal-post.scss

@@ -0,0 +1,44 @@
+.horizontal-post {
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #e2e1e1;
+
+  img {
+    width: 100%;
+    height: 65px;
+    object-fit: cover;
+    @include breakpoint(medium) { height: 140px; }
+    @include breakpoint(large) { height: 156px; }
+  }
+
+  &-body {
+    @include breakpoint(small only) {
+      position: relative;
+      padding-bottom: 30px;
+
+      > ul {
+        position: absolute;
+        bottom: 0;
+      }
+    }
+
+
+    > h3 > a {
+      color: $black;
+      font-size: 16px;
+
+      &:hover {
+        color: $primary-color;
+      }
+
+      @include breakpoint(medium) {
+        font-size: 20px;
+      }
+    }
+
+    > p {
+      color: rgba(59,59,59,0.85);
+      font-size: 14px;
+    }
+  }
+}

data/app/assets/stylesheets/integral/frontend/modules/inline-articles.scss

@@ -0,0 +1,23 @@
+.inline-articles {
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #e2e1e1;
+
+  img {
+    height: 120px;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  &-title {
+    @include text-truncate();
+    padding: 10px;
+    color: $black;
+    font-size: 16px;
+    font-weight: bold;
+
+    &:hover {
+      color: $primary-color;
+    }
+  }
+}

data/app/assets/stylesheets/integral/frontend/modules/latest-post.scss

@@ -0,0 +1,37 @@
+.latest-post {
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #e2e1e1;
+  font-size: 18px;
+
+  > a {
+    width: 100%;
+    > img {
+      width: 100%;
+      height: 250px;
+      object-fit: cover;
+      @include breakpoint(medium) { height: 450px; }
+      @include breakpoint(large) { height: 500px; }
+    }
+  }
+
+  > p {
+    margin-bottom: 20px;
+    color: rgba(59,59,59,0.85);
+    font-size: 16px;
+  }
+
+  &-title {
+    display: block;
+    margin: 20px 0;
+    color: $black;
+    font-size: 24px;
+    a {
+      color: $black;
+
+      &:hover {
+        color: $primary-color;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/integral/frontend/modules/list-widget.scss

@@ -0,0 +1,50 @@
+.list-widget {
+  margin-bottom: 45px;
+  border: 1px solid #e2e1e1;
+
+  &-image {
+    position: relative;
+    height: 185px;
+
+    > a {
+      display: block;
+      height: 100%;
+      width: 100%;
+
+      > img {
+        height: 185px;
+        width: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  &-tag {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    padding: 8px;
+    background: $primary-color;
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 1;
+  }
+
+  > ul {
+    margin: 0;
+    padding: 15px;
+
+    > li {
+      > a {
+        display: block;
+        @include text-truncate();
+        color: $black;
+
+        &:hover {
+          color: $primary-color;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/integral/frontend/modules/piped-list.scss

@@ -0,0 +1,33 @@
+.piped-list {
+  @include clearfix;
+  margin-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  font-size: 14px;
+
+  > li {
+    float: left;
+    color: $dark-gray;
+
+    &:after {
+      content: "/";
+      padding: 0 8px;
+      color: $dark-gray;
+    }
+
+    &:last-child {
+      &:after {
+        content: "";
+        padding: 0;
+      }
+    }
+
+    > a {
+      color: $dark-gray;
+
+      &:hover {
+        color: $primary-color;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/integral/frontend/modules/post-tags.scss

@@ -0,0 +1,19 @@
+.post-tags {
+  margin-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  li {
+    display: inline-block;
+    a {
+      @include label;
+      color: $white;
+      background-color: $dark-gray;
+      margin-bottom: 5px;
+      &:hover {
+        background-color: $primary-color;
+        cursor: pointer;
+      }
+    }
+  }
+}
+

data/app/assets/stylesheets/integral/frontend/modules/scroll-container.scss

@@ -0,0 +1,9 @@
+.scroll-container {
+  overflow-x: scroll;
+
+  .scroll-wrapper {
+    //width: calc(250px * 5);
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+}

data/app/assets/stylesheets/integral/frontend/modules/sidebar-articles.scss

@@ -0,0 +1,42 @@
+.sidebar-articles {
+  .list-item {
+    margin-bottom: 15px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #e2e1e1;
+  }
+
+  .image {
+    > a {
+      > img {
+        height: 80px;
+        width: 100%;
+        object-fit: cover;
+        margin: 0;
+        border: none;
+        box-shadow: none;
+        -webkit-box-shadow: none;
+      }
+    }
+  }
+
+  .data {
+    // display: flex;
+    // flex-direction: column;
+    // position: relative;
+    padding-left: 10px;
+
+    > a {
+      flex: 1 0 auto;
+      flex-grow: 1;
+
+      display: block;
+      color: $black;
+      font-size: 16px;
+      font-weight: bold;
+
+      &:hover {
+        color: $primary-color;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/integral/frontend/modules/sidebar-tags.scss

@@ -0,0 +1,6 @@
+.sidebar-tags {
+  ul {
+    text-align: center;
+  }
+}
+

data/app/assets/stylesheets/integral/frontend/modules/sidebar-widget.scss

@@ -0,0 +1,47 @@
+.sidebar-widget {
+  margin-bottom: 45px;
+  font-size: 16px;
+  color: $black;
+
+  &-title {
+    margin-bottom: 20px;
+    font-weight: bold;
+    font-size: 1.25rem;
+    text-align: center;
+  }
+
+  &-wrapper {
+    padding: 20px;
+    background: #ffffff;
+    box-shadow: 0 4px 10px 0 rgba(213, 213, 213, 0.5);
+  }
+
+  &-body {
+    @include breakpoint(medium only) {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    > footer {
+      text-align: center;
+      font-size: 12px;
+    }
+
+    > p {
+      text-align: center;
+      margin-bottom: 25px;
+    }
+  }
+
+  &-link {
+    display: block;
+    margin-top: 20px;
+    font-size: 12px;
+    color: $medium-gray;
+    text-align: center;
+
+    &:hover {
+      color: $primary-color;
+    }
+  }
+}

data/app/assets/stylesheets/integral/frontend/modules/vertical-post.scss

@@ -0,0 +1,31 @@
+.post-card {
+  box-shadow: none;
+  &:hover {
+    box-shadow: $card-shadow;
+  }
+  > a {
+    .card-section {
+      padding: 20px;
+      color: $black;
+      font-size: 14px;
+
+      > h3 {
+        margin-bottom: 15px;
+        font-size: 16px;
+      }
+
+      > p {
+        -webkit-line-clamp: 3;
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+
+  &-image {
+    object-fit: cover;
+    height: 185px;
+    width: 100%;
+  }
+}