From 823dc85b17e80f3b40156c9e745f75c6892053ce Mon Sep 17 00:00:00 2001
From: Brendan Hansen <brendan.f.hansen@gmail.com>
Date: Thu, 23 Nov 2023 22:49:42 -0600
Subject: [PATCH] totally new site design

---
 src/app.onyx                                  |  21 ++-
 www/static/css/new_style.css                  | 175 +++++++++++-------
 www/static/robots.txt                         |   5 +
 www/static/vendor/highlight.min.css           |  84 ++++++++-
 www/templates/pages/base.html                 |   6 +-
 www/templates/pages/docs/env_setup.html       |  41 ++--
 www/templates/pages/docs/getting_started.html |   8 +-
 www/templates/pages/docs/install.html         |  33 ++--
 www/templates/pages/homepage.html             |  68 ++++---
 www/templates/partials/footer.html            |   4 +-
 www/templates/partials/navbar.html            |   6 +-
 www/templates/partials/news_listing.html      |   8 +-
 12 files changed, 311 insertions(+), 148 deletions(-)
 create mode 100644 www/static/robots.txt

diff --git a/src/app.onyx b/src/app.onyx
index 8734e06..15712ce 100644
--- a/src/app.onyx
+++ b/src/app.onyx
@@ -8,6 +8,7 @@ use core.encoding.json
 #inject runtime.vars {
     Enable_Heap_Debug :: true
     // Debug :: true
+    CGI_MODE :: true
 }
 
 reg: otmp.TemplateRegistry;
@@ -49,6 +50,13 @@ reg: otmp.TemplateRegistry;
 @route.{.GET, "/docs/getting_started"}
 (req: &Req, res: &Res) => res->render("pages/docs/getting_started", null);
 
+@route.{.GET, "/robots.txt"}
+(req: &Req, res: &Res) {
+    res->file("./www/static/robots.txt");
+    res->status(200);
+    res->end();
+}
+
 
 Article :: struct { name, description, path, date: str }
 news_articles: Cached_Resource([] Article);
@@ -143,12 +151,17 @@ main :: () {
     logger := http.server.logger(style=.V2);
     pipes->pipe(&logger);
 
-    app := http.server.tcp(pipes, .{ thread_count = 0 });
+    #if #defined(runtime.vars.CGI_MODE) {
+        http.server.cgi(pipes);
 
-    port := conv.parse_int(os.env("SERVER_PORT") ?? "8000");
+    } else {
+        app := http.server.tcp(pipes, .{ thread_count = 8 });
+
+        port := conv.parse_int(os.env("SERVER_PORT") ?? "8000");
 
-    app->serve(~~port);
-    println("Server stopping...");
+        app->serve(~~port);
+        println("Server stopping...");
+    }
 }
 
 
diff --git a/www/static/css/new_style.css b/www/static/css/new_style.css
index 384e11d..32a7946 100644
--- a/www/static/css/new_style.css
+++ b/www/static/css/new_style.css
@@ -5,21 +5,19 @@
 }
 
 .ui-theme {
-    --terminal-background-color: #303033;
-    --terminal-foreground-color: #ffffff;
-
-    --background-color: #f0f0f5;
-    --light-background-color: #e0e0e6;
-    --dark-background-color: var(--header-color);
-    --active-color: #cccccc;
-
-    --header-color: #303033;
+    --header-color: linear-gradient(var(--accent-background) 0, var(--background) 70%);
     --header-text: #ffffff;
-    --header-accent: #505055;
+    --header-accent: #606080;
 
-    --link-color: #448;
-    --visited-link-color: #669;
-    --foreground-color: #000000;
+    --footer-color: linear-gradient(var(--background), var(--accent-background));
+
+    --text: #ffffff;
+    --background: #060609;
+    --accent-background: #181824;
+    --primary: #45476e;
+    --secondary: #494957;
+    --accent: #00fffb;
+    --accent-text: #000000;
 }
 
 @media (min-width: 800px) {
@@ -37,31 +35,54 @@
 }
 
 body {
-    background: var(--background-color);
-    color: var(--foreground-color);
+    background: var(--background);
+    color: var(--text);
     
-    font-family: "system-ui", sans-serif;
+    font-family: 'Oxanium', sans-serif;
 }
 
 a {
-    color: var(--link-color);
+    color: var(--text);
     text-decoration: none;
 }
 
 a.link-button {
     padding: 8px;
+    border-radius: 4px;
     text-decoration: none;
-    background-color: var(--light-background-color);
+    background-color: var(--primary);
     transition: all 300ms;
+    position: relative;
+    top: 0;
 }
 
 a.link-button:hover {
-    background-color: var(--active-color);
+    top: -6px;
+    box-shadow: 0 6px 15px 8px rgba(200, 200, 230, 0.2);
     cursor: pointer;
 }
 
 a:visited {
-    color: var(--visited-link-color);
+    color: var(--text);
+}
+
+a.cta-button {
+    flex: 1;
+    border-radius: 8px;
+    padding: 16px;
+    font-size: 16pt;
+    background-color: var(--secondary);
+    color: var(--text);
+    box-shadow: 0px 3px 12px 2px rgba(200, 200, 230, 0.2);
+    position: relative;
+    top: 0;
+    transition: all 0.2s;
+}
+
+a.cta-button:hover {
+    top: -6px;
+    box-shadow: 0 6px 15px 8px rgba(200, 200, 230, 0.2);
+    cursor: pointer;
 }
 
 .container {
@@ -94,13 +115,22 @@ a:visited {
     text-align: center;
 }
 
-.container.dark {
-    background: var(--dark-background-color);
-    color: var(--header-text);
+.container.card > * {
+    background: #000;
+    box-shadow: 0px 7px 41px 30px rgba(200, 200, 230, 0.2);
+    border-radius: 8px;
+    border: 1px solid var(--primary);
+    padding: 8px;
 }
 
-.container.light {
-    background: var(--light-background-color);
+.container .title:after {
+    content: "";
+    height: 2px;
+    background: linear-gradient(to right, var(--primary), var(--background));
+    display: block;
+    max-width: 1200px;
+    margin: 0 auto;
+    margin-bottom: 32px; /* This is large because of margin collapse. */
 }
 
 .container.header {
@@ -166,19 +196,25 @@ code {
 }
 
 p code {
-    background: var(--terminal-background-color);
-    color: var(--terminal-foreground-color);
     border-radius: 4px;
     padding: 2px;
 }
 
+@font-face {
+    font-family: fira;
+    src: url(../font/FiraCode-Regular.woff);
+}
+
 
 
 /* Navigation */
 @media screen and (min-width: 800px) {
     .navbar-container {
-        background: var(--header-color);
-        color: var(--header-text);
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+        background-color: var(--accent-background);
+        color: var(--text);
 
         width: 100%;
     }
@@ -191,7 +227,7 @@ p code {
 
 @media screen and (max-width: 799px) {
     .navbar-container {
-        background: var(--header-color);
+        background-color: var(--accent-background);
         color: var(--header-text);
 
         width: 100%;
@@ -201,7 +237,7 @@ p code {
 
 
 navbar {
-    background: var(--header-color);
+    background: none;
     color: var(--header-text);
     padding: 0 12px;
 
@@ -274,7 +310,7 @@ navbar a {
     }
 
     .hamburger-piece {
-        background-color: var(--foreground-color);
+        background-color: var(--text);
         margin-bottom: 4px;
         height: 4px;
         width: 32px;
@@ -285,6 +321,10 @@ navbar a {
 
 
 /* Footer */
+.container:has(.footer-container) {
+    background: var(--footer-color);
+}
+
 .footer-container {
     display: flex;
     flex-direction: var(--default-flex-direction);
@@ -302,40 +342,14 @@ navbar a {
 
 
 
-.panel-container {
-    display: flex;
-    flex-direction: var(--default-flex-direction);
-    justify-content: space-between;
-    width: 100%;
-    gap: 24px;
-}
-
-.panel-container div {
-    flex-basis: 0;
-    flex-grow: 1;
-
-    padding: 12px 0;
-/*    background-color: var(--background-color);*/
-}
-
-.panel-container div h3 {
-    margin-bottom: 4px;
-}
-
-.panel-container div p {
-    width: 100%;
-    text-align: justify;
-}
-
-
 main {
     min-height: 100vh;
 }
 
 main pre {
-    border: 0px solid var(--dark-background-color);
+    border: 1px solid var(--primary);
     border-radius: 6px;
-    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 7px 41px 30px rgba(200, 200, 230, 0.2);
     padding: 8px;
     display: block;
     overflow-y: auto;
@@ -370,12 +384,13 @@ main li {
         display: none;
     }
 
-    #desktop_logo:hover #path67      { transform: matrix(0.147954, 0, 0, 0.147954, 35, 9); }
+    /* #desktop_logo:hover #path67      { transform: matrix(0.147954, 0, 0, 0.147954, 35, 9); } */
     #desktop_logo:hover #path31      { transform: translate(21.5px, -2.5px) rotate(60deg); }
     #desktop_logo:hover #path1180    { transform: translate(34.25px, 7px) rotate(120deg); }
     #desktop_logo:hover #path537     { transform-origin: center; transform: rotate(150deg) translate(17px, -4.3px); }
     #desktop_logo:hover #path1062    { transform: translate(36px, 2px) rotate(90deg); }
-    #desktop_logo :not(#layer2) path { transition: all 1s ease-in-out; }
+    #desktop_logo:hover path {fill: white !important;}
+    #desktop_logo path { transition: all 1s ease-in-out; }
 }
 
 @media (max-width: 799px) {
@@ -391,7 +406,37 @@ main li {
     }
 }
 
-@font-face {
-    font-family: fira;
-    src: url(../font/FiraCode-Regular.woff);
+#install-command .copy-button {
+    opacity: 0;
+    display: inline;
+    width: 20px;
+    border-radius: 4px;
+    background: var(--accent);
+    color: var(--accent-text);
+    padding: 0px 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-family: 'Oxanium', sans-serif;
+}
+
+#install-command:hover .copy-button {
+    opacity: 1;
 }
+
+::-webkit-scrollbar{
+	width: 8px;
+}
+
+::-webkit-scrollbar-track-piece{
+	background-color: var(--background);
+}
+
+::-webkit-scrollbar-thumb{
+	background-color: var(--secondary);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover{
+	background-color: var(--primary);
+}
+
diff --git a/www/static/robots.txt b/www/static/robots.txt
new file mode 100644
index 0000000..48d737c
--- /dev/null
+++ b/www/static/robots.txt
@@ -0,0 +1,5 @@
+User-agent: Googlebot
+Disallow: /nogooglebot/
+
+User-agent: *
+Allow: /
diff --git a/www/static/vendor/highlight.min.css b/www/static/vendor/highlight.min.css
index 3ced357..79db195 100644
--- a/www/static/vendor/highlight.min.css
+++ b/www/static/vendor/highlight.min.css
@@ -68,7 +68,7 @@
      * Author: Nicolas LLOBERA <nllobera@gmail.com>
      */
 
-.hljs {
+/* .hljs {
   background: #1E1E1E;
   color: #DCDCDC;
 }
@@ -151,10 +151,6 @@
   font-weight: bold;
 }
 
-/*.hljs-code {
-  font-family:'Monospace';
-}*/
-
 .hljs-bullet,
 .hljs-selector-tag,
 .hljs-selector-id,
@@ -174,4 +170,82 @@
   background-color: #600;
   display: inline-block;
   width: 100%;
+} */
+
+/*!
+  Theme: a11y-dark
+  Author: @ericwbailey
+  Maintainer: @ericwbailey
+
+  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
+*/
+/*
+  IR_Black style (c) Vasily Mikhailitchenko <vaskas@programica.ru>
+*/
+
+.hljs {
+  background: #000;
+  color: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-meta {
+  color: #7c7c7c;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-tag,
+.hljs-name {
+  color: #96cbfe;
+}
+
+.hljs-attribute,
+.hljs-selector-id {
+  color: #ffffb6;
+}
+
+.hljs-string,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition {
+  color: #a8ff60;
+}
+
+.hljs-subst {
+  color: #daefa3;
 }
+
+.hljs-regexp,
+.hljs-link {
+  color: #e9c062;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-doctag {
+  color: #ffffb6;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-literal {
+  color: #c6c5fe;
+}
+
+.hljs-number,
+.hljs-deletion {
+  color:#ff73fd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/www/templates/pages/base.html b/www/templates/pages/base.html
index dd5329c..24cbf29 100644
--- a/www/templates/pages/base.html
+++ b/www/templates/pages/base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="ui-theme">
+<html class="ui-theme" lang="en">
     <head>
         <title>{% block "title" %}</title>
 
@@ -12,6 +12,10 @@
 
         <!-- Including this on every page because why not -->
         <link rel="stylesheet" href="/static/vendor/highlight.min.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <!-- <link href="https://fonts.googleapis.com/css2?family=Quantico&display=swap" rel="stylesheet"> -->
+        <link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@300&display=swap" rel="stylesheet">
         <script src="/static/vendor/highlight.min.js"></script>
         <script defer>
             hljs.cssSelector = "pre code.language-onyx"
diff --git a/www/templates/pages/docs/env_setup.html b/www/templates/pages/docs/env_setup.html
index 0991567..f6bf213 100644
--- a/www/templates/pages/docs/env_setup.html
+++ b/www/templates/pages/docs/env_setup.html
@@ -23,10 +23,10 @@
 </div>
 
 
-<div class="container light" id="vscode">
-    <h2>Visual Studio Code</h2>
-</div>
-<div class="container">
+<div class="container" id="vscode">
+    <div class="title">
+        <h2>Visual Studio Code</h2>
+    </div>
     <p>
         <a class="link-button" href="https://marketplace.visualstudio.com/items?itemName=onyxlang.onyxlang">VS Code Extension</a>
     </p>
@@ -47,10 +47,10 @@
     <p>This extension does have support for the <code>onyx lsp</code>, assuming that is <a href="#lsp">setup</a>.
 </div>
 
-<div class="container light" id="vim">
-    <h2>Vim / Neovim</h2>
-</div>
-<div class="container">
+<div class="container" id="vim">
+    <div class="title">
+        <h2>Vim / NeoVim</h2>
+    </div>
     <p>
         <a class="link-button" href="https://github.com/onyx-lang/onyx.vim">Vim Plugin</a>
     </p>
@@ -66,10 +66,10 @@
 </div>
 
 
-<div class="container light" id="sublime-text">
-    <h2>Sublime Text</h2>
-</div>
-<div class="container">
+<div class="container" id="sublime-text">
+    <div class="title">
+        <h2>Sublime Text</h2>
+    </div>
     <p>
     Currently, Onyx does not have a published package on Sublime Text's Package Control, but like VS Code, you are able to install it manually.
     </p>
@@ -78,10 +78,10 @@
     </p>
 </div>
 
-<div class="container light" id="emacs">
-    <h2>Emacs</h2>
-</div>
-<div class="container">
+<div class="container" id="emacs">
+    <div class="title">
+        <h2>Emacs</h2>
+    </div>
     <p>
     Currently, Onyx does not have a published package for Emacs.
     </p>
@@ -92,10 +92,11 @@
     </p>
 </div>
 
-<div class="container light" id="lsp">
-    <h2>Language Server</h2>
-</div>
-<div class="container">
+<div class="container" id="lsp">
+    <div class="title">
+        <h2>Language Server</h2>
+    </div>
+
     <p>
     If you are unfamiliar, a <em>Language Server</em> abstracts the tooling and language specific functionality out of editors and into a reusable component.
     This way, it is easier to develop in-editor functionality across multiple editors, as the same work does not need to be replicated for each supported editor.
diff --git a/www/templates/pages/docs/getting_started.html b/www/templates/pages/docs/getting_started.html
index b134c50..7d318e7 100644
--- a/www/templates/pages/docs/getting_started.html
+++ b/www/templates/pages/docs/getting_started.html
@@ -16,7 +16,7 @@
 </div>
 
 <div class="container">
-    <h2>Step 1: Install Onyx</h2>
+    <h2>Install Onyx</h2>
     <p>On any Linux, MacOS, or WSL system, run the following command to install Onyx onto your system.</p>
     <pre class="hljs"><code class="language-sh">sh <(curl https://get.onyxlang.io -sSfL)</code></pre>
 
@@ -26,7 +26,7 @@
 </div>
 
 <div class="container">
-    <h2>Step 2: Create an Onyx project</h2>
+    <h2>Create an Onyx project</h2>
 
     <p>
         <em>This is an optional step, but does set you up to use packages in your project.</em>
@@ -47,7 +47,7 @@ Package version (0.0.1):</code></pre>
 </div>
 
 <div class="container">
-    <h2>Step 3: Write your first Onyx program</h2>
+    <h2>Write your first Onyx program</h2>
     <p>
         Open your favorite text editor, optionally install <a href="/docs/setup">editor support</a>, and create a new file called <code>main.onyx</code> in this project folder.
         Write the following code in that file.
@@ -65,7 +65,7 @@ main :: () {
 </div>
 
 <div class="container">
-    <h2>Step 4: Run your program!</h2>
+    <h2>Run your program!</h2>
     <p>To run the program our newly created program, we use the following command from within the project folder.</p>
     <pre class="hljs"><code class="language-onyx">$ onyx run main.onyx
 Hello, Onyx!</code></pre>
diff --git a/www/templates/pages/docs/install.html b/www/templates/pages/docs/install.html
index 7b92e63..7cae353 100644
--- a/www/templates/pages/docs/install.html
+++ b/www/templates/pages/docs/install.html
@@ -15,10 +15,10 @@
     </p>
 </div>
 
-<div class="container light" id="online">
-    <h2>Try Online</h2>
-</div>
-<div class="container">
+<div class="container" id="online">
+    <div class="title">
+        <h2>Try Online</h2>
+    </div>
     <p>
         Onyx is available to try online for free in the Onyx Playground.
         It allows you learn the syntax from examples, without installing the language onto your system.
@@ -28,10 +28,10 @@
     </p>
 </div>
 
-<div class="container light" id="linux-macos">
-    <h2>Linux / MacOS</h2>
-</div>
-<div class="container">
+<div class="container" id="linux-macos">
+    <div class="title">
+        <h2>Linux / MacOS</h2>
+    </div>
     <p>
         The easiest way to install Onyx on a Linux or MacOS system is to use the installation script you can find at <a href="https://get.onyxlang.io">get.onyxlang.io</a>.
         You can download and run the script in one bash command.
@@ -42,10 +42,10 @@
 
 </div>
 
-<div class="container light" id="windows">
-    <h2>Windows</h2>
-</div>
-<div class="container">
+<div class="container" id="windows">
+    <div class="title">
+        <h2>Windows</h2>
+    </div>
     <p>
     <ol>
         <li>Download the latest Windows release from the <a href="https://github.com/onyx-lang/onyx/releases/latest">Releases</a> on GitHub.</li>
@@ -61,11 +61,10 @@
     </p>
 </div>
 
-<div class="container light" id="source">
-    <h2>From Source</h2>
-</div>
-
-<div class="container">
+<div class="container" id="source">
+    <div class="title">
+        <h2>From Source</h2>
+    </div>
     <p>
         Building Onyx from source is easy. If you want to use the Wasmer runtime, you will need to have Wasmer installed. See their <a href="https://docs.wasmer.io/install">installation instructions</a> for details.
     </p>
diff --git a/www/templates/pages/homepage.html b/www/templates/pages/homepage.html
index 337c13d..5098da0 100644
--- a/www/templates/pages/homepage.html
+++ b/www/templates/pages/homepage.html
@@ -7,25 +7,21 @@
 {{ block "page_content" }}
 
 <div class="container header">
-    <div style="text-align: center;">
-        <h1>The <b>Onyx</b> Programming Language</h1>
-    </div>
-    <div style="font-size: 20pt; text-align: center; margin-top: 8px">
-        <p>A data-oriented, safe, and modern programming language</p>
+    <div style="height: 20rem; display: flex; flex-direction: column; place-content: center;">
+        <div style="text-align: center;">
+            <h1>The <b>Onyx</b> Programming Language</h1>
+        </div>
+        <div style="font-size: 20pt; text-align: center; margin-top: 8px">
+            <p>A data-oriented, safe, and modern programming language</p>
+        </div>
     </div>
-</div>
-
-<!-- <div class="container light">
-    <h2 style="margin-bottom: 8px">Get Started</h2>
-</div> -->
 
-<div class="container">
-    <div style="text-align: center;">
+    <!--<div style="text-align: center;">
         <div style="margin-bottom: 26px">
             Install in one command, or build <a href="/docs/install">from source</a>.
         </div>
         <div>
-            <span style="font-size: 16pt; font-family: monospace; padding: 20px; color: var(--header-text); background: var(--header-color); border-radius: 8px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.4)">
+            <span style="font-size: 16pt; font-family: monospace; padding: 20px; color: var(--header-text); background: var(--primary); border-radius: 8px; box-shadow: 0px 1px 12px 2px rgba(200, 200, 230, 0.4)">
                 sh&nbsp;&lt;(curl&nbsp;https://get.onyxlang.io&nbsp;-sSfL)
             </span>
         </div>
@@ -33,24 +29,34 @@
             Alternatively, try Onyx online and read the docs!
         </div>
         <div style="margin-top: 26px; display: flex; flex-direction: row; gap: 40px;">
-            <a style="flex: 1; border-radius: 8px; padding: 16px; font-size: 16pt; border: 1px solid var(--header-color); border-radius: 8px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.4)" href="/playground">TRY ONLINE</a>
-            <a style="flex: 1; border-radius: 8px; padding: 16px; font-size: 16pt; border: 1px solid var(--header-color); border-radius: 8px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.4)" href="/docs">READ THE DOCS</a>
+            <a class="cta-button" href="/playground">TRY ONLINE</a>
+            <a class="cta-button" href="/docs">READ THE DOCS</a>
+        </div>
+    </div>-->
+
+    <div class="container card" style="width: 800px">
+        <div style="font-size: 14pt; font-family: fira; padding: 20px;">
+            <div><span style="color: #444;">$</span> <span style="font-style: italic; color: #99a;"># Install Onyx in one command</span></div>
+            <div id="install-command">
+                <span style="color: #444;">$</span> <span style="color: var(--accent)">sh</span>&nbsp;&lt;(curl&nbsp;https://get.onyxlang.io&nbsp;-sSfL)
+                <span class="copy-button">Copy</span>
+            </div>
+            <div><span style="color: #444;">$</span> <span style="font-style: italic; color: #99a;"># Read the docs</span></div>
+            <div><span style="color: #444;">$</span> <span style="color: var(--accent)">curl</span> <a style="text-decoration: underline" href="/docs">onyxlang.io/docs</a></div>
+            <div><span style="color: #444;">$</span> <span style="font-style: italic; color: #99a;"># Try Onyx in your browser</span></div>
+            <div><span style="color: #444;">$</span> <span style="color: var(--accent)">curl</span> <a style="text-decoration: underline" href="/playground">onyxlang.io/playground</a></div>
         </div>
     </div>
 </div>
 
 
 
-<div class="container light">
-    <h2 style="margin-bottom: 8px">Recent News</h2>
-</div>
-{% partial "partials/news_listing" %}
-
-<div class="container light">
-    <h2>Language Overview</h2>
-</div>
 
 <div class="container">
+    <div class="title">
+        <h2>Language Overview</h2>
+    </div>
+
     <div>
         <h2>Syntax</h2>
         <br />
@@ -163,8 +169,24 @@ main :: () {
     </code></pre>
 </div>
 
+<div class="container">
+    <div class="title">
+        <h2 style="margin-bottom: 8px">Recent News</h2>
+    </div>
 </div>
+{% partial "partials/news_listing" %}
+
 </div>
+</div>
+
+<script>
+document.querySelector("#install-command .copy-button").addEventListener("click", e => {
+    navigator.clipboard.writeText("sh <(curl https://get.onyxlang.io -sSfL)").then(_ => {
+        e.target.innerHTML = "Copied!";
+        setTimeout(_ => { e.target.innerHTML="Copy" }, 5000);
+    });
+})
+</script>
 
 {{endblock}}
 
diff --git a/www/templates/partials/footer.html b/www/templates/partials/footer.html
index 1e8635d..c32c740 100644
--- a/www/templates/partials/footer.html
+++ b/www/templates/partials/footer.html
@@ -1,8 +1,8 @@
-<div class="container dark">
+<div class="container" style="margin-top: 32px;">
     <div class="footer-container">
         <div style="flex-grow: 2">
             <div style="display: flex; align-items: center; gap: 1rem;">
-                <img src="/static/images/logo.svg" width="60" height="60">
+                <img src="/static/images/logo.svg" width="60" height="60" alt="Onyx Logo">
                 <h2>Onyx</h2>
             </div>
 
diff --git a/www/templates/partials/navbar.html b/www/templates/partials/navbar.html
index 64c16b1..de6fae1 100644
--- a/www/templates/partials/navbar.html
+++ b/www/templates/partials/navbar.html
@@ -1,11 +1,11 @@
 
 <div class="navbar-container">
     <navbar>
-        <a href="/">
-            <svg viewBox="0 0 64 16" version="1.1" id="desktop_logo">
+        <a href="/" aria-label="Go to the homepage">
+            <svg viewBox="0 0 64 16" version="1.1" id="desktop_logo" alt="Onyx Logo">
                 {% partial "partials/logo_svg" %}
             </svg>
-            <svg viewBox="0 0 16 16" version="1.1" id="mobile_logo">
+            <svg viewBox="0 0 16 16" version="1.1" id="mobile_logo" alt="Onyx Logo">
                 {% partial "partials/logo_svg" %}
             </svg>
         </a>
diff --git a/www/templates/partials/news_listing.html b/www/templates/partials/news_listing.html
index 237d262..ec67b67 100644
--- a/www/templates/partials/news_listing.html
+++ b/www/templates/partials/news_listing.html
@@ -1,10 +1,10 @@
 
 {{ foreach $article in $articles }}
-<div class="container">
-    <div style="padding: 32px 0">
+<div class="container card">
+    <div style="padding-top: 32px; padding-bottom: 32px;">
         <h2 style="float: left; margin: 0; margin-bottom: 8px;">
-            <a href="/news/{% $article.path %}" style="color: var(--foreground-color)">
-                <span style="border-bottom: 1px solid rgba(0,0,0,0.2)">{% $article.name %}</span>
+            <a href="/news/{% $article.path %}">
+                <span>{% $article.name %}</span>
             </a>
         </h2>
         <p style="float: right; line-height: 1.5rem;"><em>{% $article.date %}</em></p>
-- 
2.25.1