From 6bff5cbcb6394606f65b55e832213d245cb9027b Mon Sep 17 00:00:00 2001
From: Ross Trottier <ross@federated.computer>
Date: Wed, 26 Jun 2024 09:55:05 -0600
Subject: [PATCH] V1 ready

---
 ui/html/base.tmpl.html         |  4 +-
 ui/html/pages/home.tmpl.html   |  4 +-
 ui/html/pages/vpn.tmpl.html    |  2 +-
 ui/html/partials/nav.tmpl.html |  4 +-
 ui/static/css/styles.css       | 82 +++++++++++++++++++++++++++++++++-
 5 files changed, 88 insertions(+), 8 deletions(-)
diff --git a/ui/html/base.tmpl.html b/ui/html/base.tmpl.html
index 6d8271c..c637334 100644
--- a/ui/html/base.tmpl.html
+++ b/ui/html/base.tmpl.html
@@ -13,13 +13,13 @@
 <body>
     <header class="header main-grid">
         <h1 class="header__title">Federated Core</h1>
+        {{template "nav" .}}
     </header>
-    {{template "nav" .}}
     <main class="main main-grid">
         {{template "main" .}}
     </main>
     <footer class="footer main-grid">
-        Powered by Federated Computer
+        <p class="footer__excerpt">Powered by <a href="https://www.federated.computer">Federated Computer</a></p>
     </footer>
 </body>
 </html>
diff --git a/ui/html/pages/home.tmpl.html b/ui/html/pages/home.tmpl.html
index 131c160..11d64be 100644
--- a/ui/html/pages/home.tmpl.html
+++ b/ui/html/pages/home.tmpl.html
@@ -2,7 +2,7 @@
 
 {{define "main"}}
     <section class="app-links">
-        <h2 class="app-links-title">Apps for {{.BaseUri}} on the {{.Tier}} tier.</h2>
+        <h2 class="app-links-title">Apps for {{.BaseUri}} on the {{.Tier}} plan.</h2>
         <div class="app-links-container">
             <!-- LOOP HERE -->
             {{range .AppLinks}}
@@ -15,6 +15,6 @@
                 </a>
             {{end}}
         </div>
-        <p>All Logos are Property of Their Respective Project</p>
+        <p class="app-links-attribution">All Logos are Property of Their Respective Project</p>
     </section>
 {{end}}
\ No newline at end of file
diff --git a/ui/html/pages/vpn.tmpl.html b/ui/html/pages/vpn.tmpl.html
index e5fa236..ac5f459 100644
--- a/ui/html/pages/vpn.tmpl.html
+++ b/ui/html/pages/vpn.tmpl.html
@@ -1,5 +1,5 @@
 {{define "title"}}Page Not Found{{end}}
 
 {{define "main"}}
-    <h2>VPN Info</h2>
+    <h2>VPN Info Coming Soon</h2>
 {{end}}
\ No newline at end of file
diff --git a/ui/html/partials/nav.tmpl.html b/ui/html/partials/nav.tmpl.html
index 4094d0c..73af0c6 100644
--- a/ui/html/partials/nav.tmpl.html
+++ b/ui/html/partials/nav.tmpl.html
@@ -1,8 +1,8 @@
 {{define "nav"}}
-<nav class="nav">
+<nav class="nav main-grid">
     <ul class="nav-list">
         <li class="nav-link"><a href="/">Apps</a></li>
-        <li class="nav-link"><a href="/vpn">VPN Info</a></li>
+        <!-- <li class="nav-link"><a href="/vpn">VPN</a></li> -->
     </ul>
 </nav>
 {{end}}
\ No newline at end of file
diff --git a/ui/static/css/styles.css b/ui/static/css/styles.css
index 5e81847..8217476 100644
--- a/ui/static/css/styles.css
+++ b/ui/static/css/styles.css
@@ -20,6 +20,9 @@ body {
     line-height: 1.6;
     font-size: 1.25rem;
     -webkit-font-smoothing: antialiased;
+    min-height: 100vh;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
 }
 /*
 5. Improve media defaults
@@ -57,7 +60,7 @@ h1 {
 
 .main-grid {
     display: grid;
-    grid-template-columns: minmax(1em 1fr) minmax(1em 1fr) minmax(1em 1fr);
+    grid-template-columns: 1fr 2fr 1fr;
 }
 
 /* HEADER */
@@ -68,8 +71,85 @@ h1 {
     text-transform: uppercase;
 }
 
+.header__title {
+    grid-column: 2/3;
+}
+
 /* Nav */
 
 .nav {
+    text-align: center;
+    margin-bottom: 10vh;
+    grid-column: 2/3;
+}
 
+.nav-list {
+    grid-column: 2/3;
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    gap: 2em;
+    margin: 0;
+    padding: 0;
+}
+
+.nav-link {
+    text-transform: uppercase;
+}
+
+.nav-link a{
+    text-decoration: none;
+    color: black;
+}
+
+/* App Links */
+
+.app-links {
+    grid-column: 2/3;
+    text-align: center;
+}
+
+.app-links-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    justify-items: center;
+    margin-top: 3em;
+}
+
+@media (max-width: 449px) {
+    .app-links-container {
+        grid-template-columns: 1fr;
+    }
+}
+
+.app-link-card-link {
+    text-decoration: none;
+    color: black;
+}
+
+.app-link-card {
+    margin-bottom: 1em;
+    max-width: 250px;
+    text-align: center;
+}
+
+.app-link-card__image {
+    max-width: 100px;
+    margin: 0 auto;
+}
+
+.app-links-attribution {
+    font-size: .6rem;
+    color: rgb(122, 116, 116);
+}
+
+/* Footer */ 
+
+.footer {
+    margin-top: auto;
+    text-align: center;
+}
+
+.footer__excerpt {
+    grid-column: 2/3;
 }
\ No newline at end of file
