Add an index page

assets/home.css

@@ -0,0 +1,148 @@
+html {
+  background-color: black;
+}
+
+/* Layout */
+body {
+  display: flex;
+	margin: 0 auto; max-width: 1620px;
+  background-color: antiquewhite;
+}
+main {
+  position:relative;
+	height:100vh; width: 100%;
+  overflow-y: scroll;
+}
+main article {
+  margin: 3vh auto; padding: 0; max-width: 90%;
+}
+.main-filter {
+  display: none;
+}
+/* Typography */
+html {
+  font-family: sans-serif;
+}
+a,a:visited,a:link,a:focus {
+  text-decoration: none;
+  color: purple;
+  transition: color 0.5s;
+}
+a:hover {
+  color: darkorchid;
+  transition: color 0.5s;
+  text-decoration: underline;
+}
+article {
+  display: flex;
+  flex-flow: column;
+
+  h2 {
+    background-color: black;
+    color: white;
+    box-shadow: 0 10px 10px grey;
+    padding: 0.2em 0.6em;
+  }
+
+  .cards {
+    display: flex; flex-flow: row wrap;
+
+    &#adventure {
+      justify-content: space-evenly;
+
+      a {
+        width: 30%;
+        max-width: 30%;
+      }
+
+    }
+
+    &#journal {
+      justify-content: left;
+
+      a {
+        width: 20vw; max-width: 20vw; min-width: 200px;
+      }
+
+    }
+
+    a,a:visited,a:link,a:focus {
+      text-decoration: none;
+      color: black;
+      transition: color 0.5s;
+    }
+    a:hover {
+      color: #222;
+      transition: color 0.5s;
+    }
+  }
+
+  .card {
+    border: 2px solid black; border-radius: 10px;
+    padding: 0 2em; margin: 1vh 2vw;
+    transition: 
+      background-color 0.3s ease-out,
+      box-shadow 0.5s ease-in;
+
+    &#adventure {
+      background-color: grey;
+
+      &:hover {
+        background-color: lightgrey;
+        box-shadow: 10px 5px 5px black;
+        transition: 
+          background-color 0.3s ease-in,
+          box-shadow 0.5s ease-out;
+
+      }
+    }
+
+    &#journal {
+      background-color: darkgoldenrod;
+
+      &:hover {
+        background-color: goldenrod;
+        box-shadow: 10px 5px 5px black;
+        transition: 
+          background-color 0.3s ease-in,
+          box-shadow 0.5s ease-out;
+
+      }
+    }
+
+    figure {
+      width: 100%; max-width: 100%;
+      margin: 0 auto;
+    }
+
+    figcaption {
+      font-size: 1.5rem;
+    }
+
+    h1 {
+      text-align: center;
+    }
+
+    h2 {
+      text-align: center;
+      background-color: unset;
+    }
+
+    img {
+      max-width: 75%;
+      margin: 0 auto;
+    }
+  }
+}
+
+/* Responsive */
+@media only screen and (max-width: 900px) {
+  body {
+    overflow-y: hidden;
+  }
+
+  article {
+    .cards {
+      justify-content: space-around;
+    }
+}