initial navbar

Author: DougInAMug

_assets/borg.css

@@ -8,7 +8,7 @@ header {
 	background-color: black;
 	padding-top: 1.5rem;
 	padding-bottom: 1rem;
-	border-bottom: 2px solid #22D045;
+	border-bottom: 5px solid #22D045;
 }
 
 #logo {
@@ -21,6 +21,45 @@ header h1 {
 	text-align: center;
 }
 
+nav {
+	display: flex;
+	justify-content: center;
+}
+
+nav > ol {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 1rem;
+	padding: 0;
+}
+
+nav > ol > li {
+	list-style: none;
+}
+
+/* mono system font stack courtesy of https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/ */
+nav > ol > li > a {
+	font-size: 1.1rem;
+	font-weight: bold;
+	color: #22D045;
+	font-family: ui-monospace, 
+		Menlo, Monaco, 
+		"Cascadia Mono", "Segoe UI Mono", 
+		"Roboto Mono", 
+		"Oxygen Mono", 
+		"Ubuntu Monospace", 
+		"Source Code Pro",
+		"Fira Mono", 
+		"Droid Sans Mono", 
+		"Courier New", monospace;
+}
+
+nav > ol > li > a:hover {
+	text-shadow: 0 0 5px black;
+	background: radial-gradient(#22D045, transparent);
+}
+
 main.content {
 	max-width: 600px;
 	padding: 0 1rem;
@@ -54,33 +93,6 @@ main ul {
 	margin: 1.5rem 0;
 }
 
-#links {
-	padding-bottom: 1.5rem;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-around;
-}
-
-#links a {
-	color: #22D045;
-}
-
-#links a:hover .action {
-	background: white;
-	text-shadow: 0 0 5px #22D045;
-}
-
-#links .link {
-	display: flex;
-	text-align: center;
-	padding: 0.75rem 1.5rem;
-	float: left;
-}
-
-#links .action {
-	font-size: 400%;
-}
-
 .contributors {
 	line-height: 1.5;
 	font-style: italic;

index.rst

@@ -19,65 +19,5 @@ BorgBackup – Deduplicating archiver with compression and authenticated encrypt
         <li>Free software (BSD license).
         <li>Backed by a large and active open source community.
     </ul>
-
-    <div id="links">
-        <div class="link">
-            <a href="/demo.html">
-                <span class="action">See</span><br>
-                a demo
-            </a>
-        </div>
-
-        <div class="link">
-            <a href="/releases/">
-                <span class="action">Get</span><br>
-                BorgBackup
-            </a>
-        </div>
-
-        <div class="link">
-            <a href="https://borgbackup.readthedocs.io/">
-                <span class="action">Read</span><br>
-                the docs
-            </a>
-        </div>
-
-        <div class="link">
-            <a href="https://github.com/borgbackup/community">
-                <span class="action">Browse</span><br>
-                community resources
-            </a>
-        </div>
-
-        <div class="link">
-            <a href="/support/fund.html">
-                <span class="action">Fund</span><br>
-                development
-            </a>
-        </div>
-
-        <div class="link">
-            <a href="https://github.com/borgbackup/borg">
-                <span class="action">Contribute</span><br>
-                to the project
-            </a>
-        </div>
-
-        <div class="link">
-            <a href="/support/free.html">
-                <span class="action">Receive</span><br>
-                free support
-            </a>
-        </div>
-
-        <div class="link">
-            <a href="/support/commercial.html">
-                <span class="action">Pay</span><br>
-                for services
-            </a>
-        </div>
-    </div>
-
-    <div></div>
 
     <em>... and always check your backups!</em>

rst_template.txt

@@ -18,6 +18,18 @@
 			<path id="p4" transform="translate(236.429, 46.0213)" fill="#00dd00" d="M36.875 13.8021L26.6667 13.8021L26.6667 7.10543e-15L46.0937 7.10543e-15L59.8958 13.8021L59.8958 60.7812L46.0937 74.6875L15.7292 74.6875L8.80208 67.7083L8.80208 62.6042L36.875 62.6042ZM33.2292 42.3958L33.2292 48.4896L26.3542 55.3125L13.8021 55.3125L0 41.5104L0 13.8021L13.8021 0L23.0208 0L23.0208 42.3958Z"/>
 		</svg></a></h1>
 	</div>
+	<nav>
+        <ol>
+            <li><a href="/demo.html">Demo</a></li>
+            <li><a href="/releases/">Install</a></li>
+            <li><a href="https://borgbackup.readthedocs.io/">Docs</a></li>
+            <li><a href="https://github.com/borgbackup/community">Community</a></li>
+            <li><a href="/support/fund.html">Fund</a></li>
+            <li><a href="https://github.com/borgbackup/borg">Contribute</a></li>
+            <li><a href="/support/free.html">Support</a></li>
+            <li><a href="/support/commercial.html">Services</a></li>
+        </ol>
+    </nav>
 </header>
 
 <main class="content">