Improved the readability of index.html

- reworked the index.html page to look like the codepen referenced in issue DevvitIO#1 - created stylesDirectory that holds .css files for pages
LandonPatmore · Oct 9, 2017 · 9baa430 · 9baa430
1 parent eaf6c3f
commit 9baa430
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -7,39 +7,39 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Directory</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
-
-  <style>
-    h1 {
-      text-align: center;
-    }
-
-    section {
-      text-align: center;
-      margin: auto 0;
-      width: 100%;
-    }
-  </style>
 </head>
 
 <body>
 
   <h1>Directory</h1>
-  <section>
-
-
-  <a href="subDirectory/TEMPLATE.html">Template Page</a> <br>
-  <a href="subDirectory/torPage.html">Tor</a> <br>
-  <a href="subDirectory/SirDrapplePage.html">SirDrapple / LucasProgrammierStube</a> </br>
-  <a href="subDirectory/ricoPage.html">Rico</a> <br>
-  <a href="subDirectory/gand988Page.html">Gand988</a> <br>
-  <a href="subDirectory/allanPage.html">nomadAllan / AllanOcelot </a> <br>
-  <a href="subDirectory/ljp1203Page.html">ljp1203</a> <br>
-  <a href="subDirectory/wtsamplerPage.html">WTSampler</a> <br>
-
-
-  </section>
-
-
+  <main id="pages-area">
+    <a class="page-box" href="subDirectory/TEMPLATE.html">
+      <h4>Template Page</h4>
+    </a>
+    <a class="page-box" href="subDirectory/torPage.html">
+      <h4>Tor</h4>
+    </a>
+    <a class="page-box" href="subDirectory/SirDrapplePage.html">
+      <h4>SirDrapple / LucasProgrammierStube</h4>
+    </a>
+    <a class="page-box" href="subDirectory/ricoPage.html">
+      <h4>Rico</h4>
+    </a>
+    <a class="page-box" href="subDirectory/gand988Page.html">
+      <h4>Gand988</h4>
+    </a>
+    <a class="page-box" href="subDirectory/allanPage.html">
+      <h4>nomadAllan / AllanOcelot</h4>
+    </a>
+    <a class="page-box" href="subDirectory/ljp1203Page.html">
+      <h4>ljp1203</h4>
+    </a>
+    <a class="page-box" href="subDirectory/wtsamplerPage.html">
+      <h4>WTSampler</h4>
+    </a>
+  </main>
+
+  <link rel="stylesheet" type="text/css" href="stylesDirectory/index.css">
 </body>
 
 </html>
diff --git a/stylesDirectory/index.css b/stylesDirectory/index.css
@@ -0,0 +1,62 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+html,
+body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    background: #FDD761;
+}
+
+* {
+    font-family: Roboto, sans-serif;
+}
+
+#pages-area {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.page-box {
+    width: 15%;
+    min-height: 100px;
+    max-height: 200px;
+    background: white;
+    color: steelblue;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 10px;
+    text-decoration: none;
+    font-weight: bold;
+    box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.15);
+    transition: all .2s ease-in-out;
+    text-align: center;
+}
+
+.page-box>h4 {
+    font-size: 1.2rem;
+    word-break: break-all;
+    white-space: normal;
+    padding: 5px;
+}
+
+.page-box:hover {
+    color: black;
+    transform: scale(1.2);
+    box-shadow: none;
+}
+
+h1 {
+    color: steelblue;
+    text-align: center;
+}
+
+@media only screen and (max-width: 414px) {
+    .page-box {
+    width: 40%;
+    }
+}