Mercurial > web

changeset 92:a143c3991472

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
navigation: fix navbar implementation
author Paper <paper@paper.us.eu.org>
date Wed, 19 Jun 2024 04:54:19 -0400
parents caf449c570be
children 92f1ea793bf2
files _includes/navigation.html css/style.css
diffstat 2 files changed, 16 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- a/_includes/navigation.html	Wed Jun 19 04:05:42 2024 -0400
+++ b/_includes/navigation.html	Wed Jun 19 04:54:19 2024 -0400
@@ -1,11 +1,12 @@
 <div class="navbar drop-shadow-box">
-	{% for item in site.data.navigation %}
+	<div class="navbar-group">
+		{% for item in site.data.navigation %}
 		<a href="{{ item.link }}" {% if page.url == item.link or page.url contains item.prefix %}class="navbar-item-active"{% else %}class="navbar-item"{% endif %}>{{ item.name }}</a>
-	{% endfor %}
-	<div class="navbar-right">
-		{% comment %}
-			This has to all be on one line or else browsers add extra spacing. argh. 
-		{% endcomment %}
-		{% for item in site.data.navigation-external %}<a href="{{ item.link }}" class="navbar-item">{{ item.name }}</a>{% endfor %}
+		{% endfor %}
+	</div>
+	<div class="navbar-group">
+		{% for item in site.data.navigation-external %}
+		<a href="{{ item.link }}" class="navbar-item navbar-right">{{ item.name }}</a>
+		{% endfor %}
 	</div>
 </div>
--- a/css/style.css	Wed Jun 19 04:05:42 2024 -0400
+++ b/css/style.css	Wed Jun 19 04:54:19 2024 -0400
@@ -26,7 +26,6 @@
 	color: hotpink;
 }
 
-/* navbar */
 .navbar {
 	display: flex;
 
@@ -34,11 +33,15 @@
 	color: white;
 
 	padding: 5px;
+
+	justify-content: space-between;
 }
 
-.project-quip,
-.navbar-right {
-	align-items: flex-end;
+.navbar-group {
+	display: flex;
+}
+
+.project-quip {
 	margin-left: auto;
 }
 
@@ -64,8 +67,7 @@
 }
 
 /* generic drop shadows that I heavily use in... everything,
- * so having them as their own classes is pretty nice :)
-*/
+ * so having them as their own classes is pretty nice :) */
 .drop-shadow-text {
 	text-shadow: 0.125em 0.125em 0.125em rgba(0, 0, 0, 0.5);
 }