ross/federated-dash
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

V1 ready

Browse Source
This commit is contained in:
Ross Trottier 2024-06-26 09:55:05 -06:00
parent e4304ec3f7
commit 6bff5cbcb6
5 changed files with 88 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/html/base.tmpl.html
View File

@ -13,13 +13,13 @@
<body> <body>
<header class="header main-grid"> <header class="header main-grid">
<h1 class="header__title">Federated Core</h1> <h1 class="header__title">Federated Core</h1>
{{template "nav" .}}
</header> </header>
{{template "nav" .}}
<main class="main main-grid"> <main class="main main-grid">
{{template "main" .}} {{template "main" .}}
</main> </main>
<footer class="footer main-grid"> <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> </footer>
</body> </body>
</html> </html>

4
ui/html/pages/home.tmpl.html
View File

@ -2,7 +2,7 @@
{{define "main"}} {{define "main"}}
<section class="app-links"> <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"> <div class="app-links-container">
<!-- LOOP HERE --> <!-- LOOP HERE -->
{{range .AppLinks}} {{range .AppLinks}}
@ -15,6 +15,6 @@
</a> </a>
{{end}} {{end}}
</div> </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> </section>
{{end}} {{end}}

2
ui/html/pages/vpn.tmpl.html
View File

@ -1,5 +1,5 @@
{{define "title"}}Page Not Found{{end}} {{define "title"}}Page Not Found{{end}}
{{define "main"}} {{define "main"}}
<h2>VPN Info</h2> <h2>VPN Info Coming Soon</h2>
{{end}} {{end}}

4
ui/html/partials/nav.tmpl.html
View File

@ -1,8 +1,8 @@
{{define "nav"}} {{define "nav"}}
<nav class="nav"> <nav class="nav main-grid">
<ul class="nav-list"> <ul class="nav-list">
<li class="nav-link"><a href="/">Apps</a></li> <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> </ul>
</nav> </nav>
{{end}} {{end}}

82
ui/static/css/styles.css
View File

@ -20,6 +20,9 @@ body {
line-height: 1.6; line-height: 1.6;
font-size: 1.25rem; font-size: 1.25rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
} }
/* /*
5. Improve media defaults 5. Improve media defaults
@ -57,7 +60,7 @@ h1 {
.main-grid { .main-grid {
display: grid; display: grid;
grid-template-columns: minmax(1em 1fr) minmax(1em 1fr) minmax(1em 1fr); grid-template-columns: 1fr 2fr 1fr;
} }
/* HEADER */ /* HEADER */
@ -68,8 +71,85 @@ h1 {
text-transform: uppercase; text-transform: uppercase;
} }
.header__title {
grid-column: 2/3;
}
/* Nav */ /* Nav */
.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;
} }