2 files changed, 89 insertions, 11 deletions
diff --git a/templates/index.luax b/templates/index.luax
index 6785491..7104964 100644
--- a/templates/index.luax
+++ b/templates/index.luax
@@ -1,14 +1,33 @@
 return function()
-    return <html>
-        <head>
-            <title>PROJECT_NAME</title>
-        </head>
-        <body>
-            <h1>PROJECT_NAME</h1>
-            <p>Random number for you: {$ tostring(math.floor(math.random() * 100)) $}</p>
-            <p style={ "font-size: " .. tostring(math.floor(math.random() * 100)) .. 'px' }>
-                What font size is this?
-            </p>
-        </body>
+  local font_sizes = { 12, 14, 18, 24 }
+  local font_size = font_sizes[math.floor(math.random() * #font_sizes) + 1]
+  return
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <link rel="stylesheet"
+              href="//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css" />
+        <link rel="stylesheet" href="style.css" />
+        <title>PROJECT_NAME</title>
+      </head>
+      <body>
+        <div id="app-main">
+          <h1>PROJECT_NAME</h1>
+          <p class="description">
+            Welcome to <strong class="project">PROJECT_NAME</strong>!
+          </p>
+          <p class="description">
+            This project runs on
+            <a class="reluax" href="https://github.com/Duckonaut/reluax">Reluax</a>.
+          </p>
+          <p>
+            Random number for you: 
+            <span class="rand">{$ tostring(math.floor(math.random() * 100)) $}</span>
+          </p>
+          <p class="randsize" style={ "font-size: " .. tostring(font_size) .. 'pt' }>
+              What font size is this?
+          </p>
+        </div>
+      </body>
     </html>
 end
diff --git a/templates/style.css b/templates/style.css
new file mode 100644
index 0000000..d770cea
--- /dev/null
+++ b/templates/style.css
@@ -0,0 +1,59 @@
+:root {
+  font-weight: 400;
+
+  color-scheme: dark;
+  color: var(--color-fg);
+  background-color: var(--color-bg);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  /* variables */
+  --color-bg: #161f30;
+  --color-fg: #a3b3d9;
+  --color-light-blue: #a3b3d9;
+  --color-yellow: #e5c07b;
+}
+
+#app-main {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 1rem 1rem 1rem 1rem;
+  text-align: center;
+  font-family: Hack, monospace;
+}
+
+h1 {
+  font-size: 30pt;
+  color: var(--color-yellow);
+  text-align: center;
+  font-weight: bold;
+}
+
+.project {
+  color: var(--color-light-blue);
+}
+
+.description {
+  font-size: 15pt;
+  text-align: center;
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+  font-weight: bold;
+}
+
+.rand, .reluax {
+  color: var(--color-yellow);
+}
+
+a:link {
+  color: var(--color-light-blue);
+  text-decoration: none;
+}
+
+a:visited {
+  color: var(--color-light-blue);
+  text-decoration: none;
+}