From 20a92b96a8ea84feaf19e7f7385a928ede5b6bee Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Fri, 22 Jul 2022 16:40:52 -0400
Subject: [PATCH] Home screen skeleton

---
 layouts/default.vue |  2 ++
 pages/index.vue     | 14 +++++++++-----
 pages/stories.vue   |  1 +
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 3e6277a..1775117 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -14,6 +14,7 @@ html {
   background: white;
   color: black;
   transition: color 0.2s ease, background 0.2s ease;
+  overflow: scroll;
 }
 
 html.dark {
@@ -40,6 +41,7 @@ main {
   width: 80%;
   max-width: 60rem;
   height: 100%;
+  margin: auto;
   padding-top: 2rem;
 }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 8c51806..202596e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts"></script>
 
 <template>
-  <main>
-    <h1>Hello!</h1>
-    <HomeStatBox> Box 1 </HomeStatBox>
+  <main class="flex flex-col items-center justify-evenly">
+    <h1>Welcome!</h1>
+    <div class="flex justify-around items-center w-full flex-wrap gap-y-10">
+      <HomeStatBox> Latest blog post </HomeStatBox>
+      <HomeStatBox>Latest story</HomeStatBox>
+      <HomeStatBox>Latest commit w/details</HomeStatBox>
+    </div>
   </main>
 </template>
 
 <style scoped>
-main {
-  display: flex;
+h1 {
+  font-size: 3rem;
 }
 </style>
diff --git a/pages/stories.vue b/pages/stories.vue
index e69de29..cc340bc 100644
--- a/pages/stories.vue
+++ b/pages/stories.vue
@@ -0,0 +1 @@
+<template></template>