Further adjust navbar CSS

nichtich · nichtich · commit adafdb1d0a48 · 2025-09-18T11:53:30.000+02:00
diff --git a/static/style.css b/static/style.css
@@ -1,32 +1,31 @@
+/* Align with quarto bootstrap theme cosmo */
 :root {
-  --bs-font-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --bs-body-font-family: "PT Sans", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
-  --font-color: #0f2a55;
+  --bs-body-font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --bs-body-color: #343a40;
+  --bs-root-font-size: 17px;
+  --bs-body-font-size: 1rem;
 }
 
 html {
+	font-size: var(--bs-root-font-size);
 	font-family: var(--bs-body-font-family);
-  height: 100%;
+    color: var(--bs-body-color);
+    height: 100%;
 	display: block;
-	font-size: 17px;
 } 
 body {
+	font-size: var(--bs-body-font-size);
 	display:block;	
-  margin:0;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-}
-nav {
-	padding-left: 1em;
-	padding-right: 1em;
+    margin:0;
+    font-weight: 400;
+    line-height: 1.5;
+}
+nav.navbar {
+    padding: 0.5em 1em;
 	background-color: rgb(248, 249, 250);
 	color: rgb(84, 85, 85);
 	display: flex;
 	align-items: center;
-	padding-top: 0.5rem;
-	padding-bottom: 0.5rem;
 }
 nav > div {
 	display:flex;
@@ -39,7 +38,7 @@ nav > div {
 	margin-right: auto;
 	margin-left:auto;
 }
-.nav-brand {
+.navbar-brand {
 	margin-left: 0px !important;
 	margin-right: 0px !important;
 	max-width; calc(100% - 115px);
@@ -48,15 +47,14 @@ nav > div {
 	align-items: center;
 	text-align:start;
 }
-.nav-logo {
+.navbar-logo {
 	margin-right: 4px;
 	display: inline-flex;
 	color: rgb(15, 42, 85);
 	overflow:hidden;
 	text-overflow: ellipsis;
 	padding-top: 0.3125rem;
 	padding-bottom: 0.3125rem;
-	font-size: 1.25rem;
 	text-decoration: none;
 	white-space: nowrap;
 	text-underline-offset: 3px;
@@ -66,17 +64,14 @@ a > img {
 	width: auto;
 	padding-right: 4px;
 }
-.nav-title {
-	font-size: 1.25rem;
+.navbar-title {
+    font-size: 1.25rem;
 	color: rgb(15, 42, 85);
 	overflow: hidden;
 	text-overflow: ellipsis;
-	padding-top: 0.3125rem;
-	padding-bottom: 0.3125rem;;
 	margin-right: 1rem;
 	text-decoration: none;
 	white-space: nowrap;
-	text-underline-offset: 3px;
 }
 .nav-list {
 	display: flex !important;
diff --git a/templates/base.html b/templates/base.html
@@ -20,11 +20,11 @@
   </head>
   <body>  
     <header>
-    	<nav>
+    	<nav class="navbar">
     		<div>
-    			<div class="nav-brand">
-    				<a href="https://www.nfdi4objects.net/" class="nav-logo"><img src="{{url_for('static',filename='nfdi4objects-logo.png')}}"></a>
-        		<a href="{{url_for('index')}}" class="nav-title"><span>NFDI4<strong>Objects Knowledge Graph</strong></span></a>
+    			<div class="navbar-brand">
+    				<a href="https://www.nfdi4objects.net/" class="navbar-logo"><img src="{{url_for('static',filename='nfdi4objects-logo.png')}}"></a>
+        		<a href="{{url_for('index')}}" class="navbar-title"><span>NFDI4<strong>Objects Knowledge Graph</strong></span></a>
     			</div>
     			<div class= "nav-list">
     				<ul>
@@ -47,6 +47,13 @@
             		<a href="{{url_for('terminology')}}"><span><strong>Terminologies</strong></span></a>
           			{% else %}
             		<a href="{{url_for('terminology')}}"><span>Terminologies</span></a>
+          			{% endif %}
+        			</li>
+        			<li>
+          			{% if request.path.startswith("/repository") %}
+            		<a href="{{url_for('repository')}}"><span><strong>Repositories</strong></span></a>
+          			{% else %}
+            		<a href="{{url_for('repository')}}"><span>Repositories</span></a>
           			{% endif %}
         			</li>
         			{% if config.tools %}
