From 52307ee2e7d8276303ae79a88a501efb558e7eb6 Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Wed, 6 Sep 2023 13:53:15 +0200
Subject: [PATCH] Add centered nav
---
img/{nasa.svg => nasa.png} | Bin
index.html | 2 +-
styles.css | 23 +++++++++++++++++++----
3 files changed, 20 insertions(+), 5 deletions(-)
rename img/{nasa.svg => nasa.png} (100%)
diff --git a/img/nasa.svg b/img/nasa.png
similarity index 100%
rename from img/nasa.svg
rename to img/nasa.png
diff --git a/index.html b/index.html
index 412cae5..9ac818e 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
</head>
<body>
<header>
- <img class="nasa-img" src="img/nasa.svg" />
+ <img class="nasa-img" src="img/nasa.png" />
<nav>
<ul class="top-nav">
diff --git a/styles.css b/styles.css
index cec734d..c655d10 100644
--- a/styles.css
+++ b/styles.css
@@ -72,13 +72,13 @@ nav ul li a {
position: absolute;
left: 0;
top: 0;
- width: 5em;
+ margin-top: 1em;
+ width: 6em;
z-index: -1;
}
.top-nav {
display: flex;
- overflow: hidden;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-end;
@@ -97,6 +97,7 @@ nav ul li a {
.top-nav li a {
border-right: 0.05em solid #eeeeee;
+ white-space: nowrap;
}
.top-nav li:nth-child(n+7) a {
@@ -116,6 +117,7 @@ nav ul li a {
padding: 0 0.5em;
height: 100%;
background-color: #55555580;
+ white-space: nowrap;
}
.search-form input[type="search"] {
@@ -141,11 +143,24 @@ nav ul li a {
display: flex;
justify-content: center;
align-items: center;
- background-color: blue;
+ margin-top: 1em;
}
-.center-nav {
+.center-nav li {
+ padding: 0.5em 0;
+ background-color: #555555;
+}
+.center-nav li a {
+ display: block;
+ padding: 0.5em 1em;
+ font-size: 0.7em;
+ font-weight: 500;
+ white-space: nowrap;
+}
+
+.center-nav li:not(li:last-child) a {
+ border-right: 0.1em solid #eeeeee;
}
/* Extra small devices (phones, 600px and down) */
--
GitLab