1 files changed, 117 insertions, 0 deletions

diff --git a/src/styles/pages/_blogs.scss b/src/styles/pages/_blogs.scss
new file mode 100644
index 0000000..ecc5566
--- /dev/null
+++ b/src/styles/pages/_blogs.scss
@@ -0,0 +1,117 @@
+.section.blog {
+
+  @media (max-width: var(--breakpoint-lg)) {
+    main > section {
+      margin: 2rem var(--container-margin-mobile);
+    }
+  }
+
+  main h1, main .blogs {
+    max-width: var(--theJdrSize);
+    margin: 0 auto;
+  }
+
+  .blogs {
+
+    a.blog-links {
+      position: absolute !important;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+      clip: rect(1px, 1px, 1px, 1px);
+    }
+
+    a.blog {
+      text-decoration: none;
+      padding: var(--space-4);
+      border-radius: var(--space-3);
+      display: flex;
+      color: inherit;
+      border-bottom: thin solid var(--darken-1);
+
+      @include mq($until: md) {
+        padding: var(--space-2);
+      }
+
+      .img {
+        display: inline-block;
+        background-position: center center;
+        background-size: cover;
+        --size: 16rem;
+        flex: 0 0 var(--size, 16rem);
+        height: var(--size, 16rem);
+        width: var(--size, 16rem);
+        border-radius: var(--space-2);
+        overflow: hidden;
+
+        &> * {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: 50% 50%;
+        }
+      }
+
+      .info {
+        flex: 1 1 auto;
+        margin-left: var(--space-4);
+        justify-content: center;
+
+        h2 {
+          margin: var(--space-3) 0;
+        }
+
+        .reading {
+          align-self: flex-end;
+
+          &::after {
+            content: ' min.';
+          }
+        }
+
+        .date {
+          align-self: flex-start;
+          color: var(--base-secondary-text);
+        }
+
+        p {
+          line-height: 1.75;
+        }
+      }
+    }
+
+    @include mq($until: lg) {
+      a {
+        grid-template-rows: auto 1fr;
+        grid-template-columns: auto;
+
+        .img {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+@include mq($until: sm) {
+  .section.blog .blogs a.blog {
+    display: block;
+
+    .img {
+      display: none;
+    }
+  }
+}
+
+@include mq($until: lg) {
+  .section.blog .blogs a.blog {
+    display: block;
+
+    .img {
+      --size: 8rem;
+      float: left;
+      margin-right: .5em;
+    }
+  }
+}
\ No newline at end of file