add download buttons and github link

pukmajster · Jun 28, 2024 · f7e90fc · f7e90fc
1 parent 2cf5778
commit f7e90fc
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 5 deletions.
diff --git a/docs/index.css b/docs/index.css
@@ -59,6 +59,12 @@ h3 {
   margin: 0.6rem 0;
 }
 
+h4 {
+  font-size:  2rem;
+  font-weight: 500;
+  margin: 0.6rem 0;
+}
+
 .Features {
   padding-top: 5rem;
   background-color: black;
@@ -86,6 +92,16 @@ h3 {
   }
 }
 
+nav {
+  display: flex;
+  justify-content: end;
+
+  .NavLink {
+    padding: 2rem;
+    color: white;
+  }
+}
+
 footer {
   background-color: #14111b;
   background-color: black;
@@ -100,4 +116,33 @@ footer {
   @media screen and (max-width: 1500px){
     padding: 3rem 2rem;
   }
+}
+
+.Downloads {
+  padding-top: 1rem;
+  display: flex;
+  gap: 1rem;
+
+  @media screen and (max-width: 780px){
+    flex-direction: column;
+
+    .DownloadButton {
+      font-size: 1rem;
+    }
+  }
+}
+
+.DownloadButton {
+  background-color: #e31818;
+  color: rgb(255, 255, 255);
+  padding: 1rem 2rem;
+  border-radius: 430px;
+  font-size: 1.2rem;
+  font-weight: 500;
+  text-decoration: none;
+
+  &:hover {
+    background-color: #ffffff;
+    color: #e31818;
+  }
 }
diff --git a/docs/index.html b/docs/index.html
@@ -14,12 +14,25 @@
   <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
 </head>
 <body>
+
+  <nav>
+    <a target="_blank" href="https://github.com/pukmajster/funky" class="NavLink">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
+    </a>
+  </nav>
+
   <main>
     <section class="Hero">
       <h1>Funky</h1>
-      <p style="font-size: 1.5rem">The funkiest mod manager for Left 4 Dead 2</p>
+      <p style="font-size: 1.5rem">The funkiest mod manager for <strong><i>Left 4 Dead 2</i></strong></p>
 
       <img src="assets/app.png" />
+
+      <h4>Download Funky 0.2.0</h4>
+      <div class="Downloads">
+        <a href="https://github.com/pukmajster/funky/releases/download/0.2.0/Funky-Setup-0.2.0.exe" class="DownloadButton">Download for Windows</a>
+        <a href="https://github.com/pukmajster/funky/releases/download/0.2.0/Funky-0.2.0.AppImage" class="DownloadButton">Download for Linux (AppImage)</a>
+      </div>
     </section>
 
     <div class="Features">
@@ -80,10 +93,6 @@ <h3>Multi-Mod Selection</h3>
     <p>
       Funky an open-source project and is not affiliated with Valve, Steam, or Left 4 Dead 2. All other trademarks are property of their respective owners.
     </p>
-
-    <div>
-      <a href="https://github.com/pukmajster/funky">GitHub</a>
-    </div>
   </footer>
 </body>
 </html>