Improved design a little bit

Signed-off-by: Odyssey <hi@odyssey346.dev>

css/site.css

@@ -16,9 +16,10 @@
 
 body {
     font-family: 'Lato', sans-serif;
-    color: #FFF;
-    background-color: #151515;
+    color: var(--text);
+    background-color: var(--background-darker);
     min-height: 100vh;
+    margin: 0;
 }
 
 ::-webkit-scrollbar {
@@ -73,6 +74,20 @@ a {
     text-underline-offset: 5px;
 }
 
+.instances-header-container {
+    text-align: center;
+}
+
+.instance-container {
+    /* i want a grid */
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    margin: 8px;
+}
+
 .instance-card {
     background-color: var(--background);
     padding: 8px;
@@ -86,6 +101,8 @@ a {
     flex-direction: column;
     gap: 4px;
 
+    width: 20rem;
+
     transition: ease-in-out 0.25s;
 }
 
@@ -116,15 +133,30 @@ a:hover {
 }
 
 .header-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    margin: 8px;
+    text-align: center;
 }
 
-.header-container > h1 {
-    margin: 0;
+.header-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 8px;
+}
+
+.button {
+  background-color: var(--background);
+  padding: 8px;
+  border-radius: 4px;
+  margin: 8px;
+  color: var(--text);
+  text-decoration: none;
+  text-align: center;
+  display: inline-block;
+}
+
+.button:hover {
+  background-color: var(--secondary-background);
+  color: var(--text);
 }
 
 footer {
@@ -182,8 +214,15 @@ footer {
     }
 
     .instance-card {
-        margin-left: 0;
-        margin-bottom: 8px;
-        margin-right: 0;
+        width: 100%;
+    }
+
+    .instance-container {
+        /* i want a grid */
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        margin-right: 0px;
+        margin-left: 0px;
     }
 }

generate.ps1

@@ -11,15 +11,23 @@ html {
 
     body {
         div -Class "header-container" {
-            h1 "GotHub instances"
-            $GotHubRepo = a -href "https://codeberg.org/gothub/gothub" -Content "the GotHub repository"
-            p "This page lists all the instances for GotHub. If you want to add your instance to this list, please create a PR on $GotHubRepo."
+            h1 "GotHub"
+            p "An alternative front-end for GitHub, written in Go."
+            div -Class "header-buttons" {
+                a -href "https://codeberg.org/gothub/gothub" -Class "button" -Content "Source code"
+                a -href "https://matrix.to/#/#gothub:matrix.org" -Class "button" -Content "Matrix room"
+            }
+        }
+
+        div -Class "instances-header-container" {
+            p "GotHub instances are listed below. The list is updated every 24 hours."
         }
         $instances = Invoke-WebRequest https://codeberg.org/gothub/gothub-instances/raw/branch/master/instances.json | ConvertFrom-Json
 
         div -class "main" {
-            $instances | ForEach-Object {
-                a -href $_.link -Class "instance-card" {
+            div -Class "instance-container" {
+                $instances | ForEach-Object {
+                    a -href $_.link -Class "instance-card" {
                         div -Class "instance-header" {
                             p $_.link
                         }
@@ -34,9 +42,11 @@ html {
                             p "Country: $($_.country)"
                             p "Hosting provider: $($_.host)"
                         }
+                    }
                 }
             }
         }
+
         footer {
             $OdysseyLink = a -href "https://odyssey346.dev" -Content "Odyssey346"
             $PSHTMLLink = a -href "https://pshtml.readthedocs.io" -Content "PSHTML"