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

View File

@ -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>

View File

@ -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}}

View File

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

View File

@ -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}}

View File

@ -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;
}