revamped homepage (making it look similar to shiftos); updated astro

6 files changed, 138 insertions, 28 deletions

diff --git a/bun.lockb b/bun.lockb
index ff533db..fefa024 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index c9c1056..cfb20c2 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "5.16.0"
+    "astro": "5.16.5"
   }
 }
\ No newline at end of file
diff --git a/src/pages/downloads.md b/src/pages/downloads.md
index e24b919..f068700 100644
--- a/src/pages/downloads.md
+++ b/src/pages/downloads.md
@@ -4,7 +4,6 @@ description: Download ShiftOS here! This contains the ShiftOS source code and Sh
 layout: ../layouts/Page.astro
 ---
 
-
 # ShiftOS Downloads
 
 [Return to homepage](/)
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fbdd1c2..246c87f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,16 +2,30 @@
 import { Image } from 'astro:assets';
 import logo from "../assets/logo.png";
 import Layout from '../layouts/Layout.astro';
+import '../styles/window.css';
 ---
 
 <Layout title="ShiftOS: The Archive" description="ShiftOS was a game developed by Philip Adams and other developers. The original goal was to go from a bare terminal to a graphical user interface with full desktop features.">
 	<div class="center">
         <Image src={logo} alt="ShiftOS Logo" class="logo" width={logo.width} height={logo.height} />
-        <div class="container">
-            <h1>ShiftOS: The Archive</h1>
-            <p>ShiftOS was a game developed by Philip Adams and other developers. The original goal was to go from a bare terminal to a graphical user interface with full desktop features.</p>
-            <div class="nav">
-            <a href="history">History</a> | <a href="downloads">Downloads</a> | <a href="https://www.youtube.com/c/ShiftOS">YouTube Channel</a>
+        <div class="window">
+            <div class="titlebar">
+                <p class="titlebar-text">ShiftOS: The Archive</p>
+                <div class="titlebar-buttons">
+                    <div class="titlebar-box"></div>
+                    <div class="titlebar-box"></div>
+                    <div class="titlebar-box"></div>
+                </div>
+            </div>
+            <div class="border">
+                <div class="container">
+                    <p>ShiftOS was a game developed by Philip Adams and other developers. The original goal was to go from a bare terminal to a graphical user interface with full desktop features.</p>
+                    <div class="nav">
+                        <a class="button" href="history">History</a>
+                        <a class="button" href="downloads">Downloads</a>
+                        <a class="button" href="https://www.youtube.com/c/ShiftOS">Videos</a>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/styles/style.css b/src/styles/style.css
index 737c6fc..dc1ea6d 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,8 +1,47 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #252525;
+        color: #ffffff;
+    }
+
+    a {
+        color: #00e600;
+        text-decoration: none;
+    }
+
+    a:hover {
+        color: #00ff00;
+    }
+
+    a:active {
+        color: #009400;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    body {
+        background: #f3f3f3;
+        color: #000000;
+    }
+
+    a {
+        color: #009000;
+        text-decoration: none;
+    }
+
+    a:hover {
+        color: #00d000;
+    }
+
+    a:active {
+        color: #00e100;
+    }
+}
+
 body {
     font-family: "JetBrains Mono", monospace;
-    background: #252525;
-    color: white;
 }
 
 .container {
@@ -15,24 +54,6 @@ body {
     text-align: center;
 }
 
-a {
-    color: #00e600;
-    text-decoration: none;
-}
-
-a:hover {
-    color: #00ff00;
-}
-
-a:active {
-    color: #009400;
-}
-
-.nav {
-    font-size: 1.2em;
-    font-weight: bold;
-}
-
 p {
     font-size: 1.1em;
 }
diff --git a/src/styles/window.css b/src/styles/window.css
new file mode 100644
index 0000000..4adfcf0
--- /dev/null
+++ b/src/styles/window.css
@@ -0,0 +1,76 @@
+  .titlebar {
+      background-color: #808080;
+      color: #FFFFFF;
+      padding: 0.3em;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+
+  .titlebar-text {
+      margin: 0;
+      padding: 0.2em;
+      font-size: 1em;
+      font-weight: bold;
+  }
+
+  .titlebar-buttons {
+      display: flex;
+  }
+
+  .titlebar-box {
+      background-color: #000000;
+      width: 25px;
+      height: 25px;
+      margin-left: 0.2em;
+  }
+
+  .window {
+      font-family: Arial, Helvetica, sans-serif;
+      background-color: #ffffff;
+      margin: 1em 15%;
+      color: #000000;
+  }
+
+  .border {
+      border-style: solid;
+      border-top: none;
+      border-color: #808080;
+      border-width: 0.2em;
+  }
+
+  .button {
+      color: #000000;
+      padding: 15px 40px;
+      border: solid;
+      border-width: 2px;
+  }
+
+  .button:hover {
+      background-color: #bebebe;
+      color: #000000;
+  }
+
+  .button:active {
+      box-shadow: inset 0 0 0 1px #000;
+      color: #000000;
+  }
+
+  .nav {
+      display: flex;
+      gap: 10px;
+      justify-content: center;
+      padding: 20px;
+  }
+
+  @media (min-width:480px)  {
+      .nav {
+          flex-direction: column;
+      }
+
+  }
+  @media (min-width:801px)  {
+      .nav {
+          flex-direction: row;
+      }
+  }