feat: add download buttons (#20)

New design for downloads added to the bottom of the website as requested in #15. Closes #15. ![image](https://github.com/DigitalExtinction/Website/assets/5700145/7ada2772-7920-452b-b070-0b39511a694e)
DigitalExtinction · Sep 22, 2023 · f86e1b8 · f86e1b8
1 parent ce17890
commit f86e1b8
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 17 deletions.
diff --git a/sass/styles.scss b/sass/styles.scss
@@ -34,6 +34,7 @@ div#header {
 div.middle {
     margin: 0 auto;
     width: 45%;
+    min-width: 780px;
     box-sizing: border-box;
     & h1 {
         color: var(--main-text1-color);
@@ -48,6 +49,12 @@ div.middle {
         text-align: center;
         padding-top: 40px;
     }
+    & h3 {
+        color: var(--main-text1-color);
+        font-size: 30px;
+        text-align: center;
+        padding-top: 20px;
+    }
     & p, & ol {
         padding-top: 16px;
     }
@@ -57,16 +64,84 @@ div.middle {
     & a:hover {
         color: lightblue;
     }
+    & #download {
+        width: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+
+        & h2 {
+            color: var(--main-text1-color);
+            flex-basis: 100%;
+        }
+
+        & > a, & > div {
+            box-sizing: border-box;
+            flex-basis: 45%;
+        }
+        & > a {
+            display: block;
+
+            margin: 16px;
+            padding: 16px 0;
+            text-align: center;
+            background-color: #701e13;
+            border-radius: 10px;
+            border: 1px solid #ddb991;
+
+            // Anchor specific
+            color: lightgoldenrodyellow;
+
+            & > p {
+                margin: 0;
+                padding: 0;
+            }
+            & > img {
+                width: 26px;
+                height: 26px;
+                padding: 8px 16px 8px 32px;
+                float: left;
+            }
+
+            &:hover {
+                margin-top: 8px;
+                margin-bottom: 24px;
+                background-color: #d2854a;
+                // Anchor specific
+                color: lightgoldenrodyellow;
+                & > img {
+                    width: 34px;
+                    height: 34px;
+                    padding: 4px 12px 4px 28px;
+                }
+            }
+        }
+
+        & > div#download-steps {
+            background-color: transparent;
+            text-align: left;
+            flex-grow: 1;
+            margin: 0 10%;
+            border: 0;
+        }
+    }
 }
 
 @media only screen and (max-width: 800px) {
     div.middle {
-        width: 70%;
+        width: 80%;
+        min-width: 350px;
         & h1 {
             font-size: 45px;
         }
         & h2 {
             font-size: 35px;
         }
+        & #download a {
+            flex-basis: 100%;
+            min-width: 250px;
+        }
     }
 }
diff --git a/static/icons8-apple-logo.svg b/static/icons8-apple-logo.svg
diff --git a/static/icons8-linux.svg b/static/icons8-linux.svg
diff --git a/static/icons8-windows-10.svg b/static/icons8-windows-10.svg
diff --git a/templates/index.html b/templates/index.html
@@ -21,22 +21,35 @@ <h1>_coming&ZeroWidthSpace;_soon</h1>
   automatically generated from the latest development version each night, so
   they may be potentially unstable.
 
-  <ol>
-    <li>Download the ZIP file for your OS and CPU:
-
-      <ul>
-        <li><a href="https://download.de-game.org/x86_64-unknown-linux-gnu/nightly.zip">Linux (<code>x86_64-unknown-linux-gnu</code>)</a></li>
-        <li><a href="https://download.de-game.org/x86_64-pc-windows-gnu/nightly.zip">Windows (<code>x86_64-pc-windows-gnu</code>)</a></li>
-        <li><a href="https://download.de-game.org/aarch64-apple-darwin/nightly.zip">macOS with M series (<code>aarch64-apple-darwin</code>)</a></li>
-        <li><a href="https://download.de-game.org/x86_64-apple-darwin/nightly.zip">macOS with Intel (<code>x86_64-apple-darwin</code>)</a></li>
-      </ul>
-    </li>
-
-    <li>Extract the ZIP file.</li>
-
-    <li>Execute binary file called <code>de</code> or <code>de.exe</code>.</li>
-  </ol>
-
+  <div id="download">
+    <h2>Download</h2>
+
+    <a href="https://download.de-game.org/x86_64-unknown-linux-gnu/nightly.zip">
+      <img src="icons8-linux.svg" class="icon"/>
+      <p>Linux<br/>(<code>x86_64-unknown-linux-gnu</code>)</p>
+    </a>
+    <a href="https://download.de-game.org/x86_64-pc-windows-gnu/nightly.zip">
+      <img src="icons8-windows-10.svg" class="icon"/>
+      <p>Windows<br/>(<code>x86_64-pc-windows-gnu</code>)</p>
+    </a>
+    <a href="https://download.de-game.org/aarch64-apple-darwin/nightly.zip">
+      <img src="icons8-apple-logo.svg" class="icon"/>
+      <p>macOS with M series<br/>(<code>aarch64-apple-darwin</code>)</p>
+    </a>
+    <a href="https://download.de-game.org/x86_64-apple-darwin/nightly.zip">
+      <img src="icons8-apple-logo.svg" class="icon"/>
+      <p>macOS with Intel<br/>(<code>x86_64-apple-darwin</code>)</p>
+    </a>
+
+    <div id="download-steps">
+      <h3>Download steps</h3>
+      <ol>
+        <li>Download the ZIP file for your OS and CPU.</li>
+        <li>Extract the ZIP file.</li>
+        <li>Execute binary file called <code>de</code> or <code>de.exe</code>.</li>
+      </ol>
+    </div>
+  </div>
 </p>
 
 <p>