Styled writings home

muuvmuuv · Oct 1, 2019 · 5c7c1b7 · 5c7c1b7
1 parent ca0bc8f
commit 5c7c1b7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/src/pages/writings.jsx b/src/pages/writings.jsx
@@ -47,8 +47,7 @@ const Page = () => {
             <div className="list">
               {items.map((item, index) => (
                 <Link key={index} to={item.node.fields.slug}>
-                  {item.node.frontmatter.title}
-
+                  <h2>{item.node.frontmatter.title}</h2>
                   <p>{item.node.excerpt}</p>
                 </Link>
               ))}

diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss
@@ -1,5 +1,12 @@
 [type='checkbox'] {
-  display: none;
+  position: absolute;
+  width: var(--spacing-lg);
+  height: var(--spacing-lg);
+  margin: 0;
+  border: 0;
+  z-index: 1;
+  appearance: none;
+  cursor: pointer;
 
   & + span {
     position: relative;

diff --git a/src/styles/pages/writings.scss b/src/styles/pages/writings.scss
@@ -1,8 +1,16 @@
 [page='writings'] {
   &.home {
     main {
-      margin-top: var(--spacing-xxl);
-      padding: var(--spacing-xxl) 0;
+      padding: var(--spacing-xl) 0;
+
+      @include breakpoint-up(md) {
+        margin-top: var(--spacing-xl);
+      }
+
+      @include breakpoint-up(xl) {
+        margin-top: var(--spacing-xxl);
+        padding: var(--spacing-xxl) 0;
+      }
     }
   }
 
@@ -14,4 +22,26 @@
       }
     }
   }
+
+  .list {
+    a {
+      display: block;
+      margin-bottom: var(--spacing-xl);
+      padding-bottom: var(--spacing-xs);
+
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--color-10);
+      }
+    }
+
+    h2 {
+      font-family: var(--font-serif);
+      font-size: var(--text-xl);
+      margin-bottom: var(--spacing-md);
+    }
+
+    p {
+      font-size: var(--text-lg);
+    }
+  }
 }