From: Nils Forssén Date: Thu, 18 Sep 2025 00:35:17 +0000 (+0200) Subject: Fixed navigation flexboxex X-Git-Url: https://gitweb.forssennils.se/?a=commitdiff_plain;h=refs%2Fheads%2Fmain;p=forssennils.git Fixed navigation flexboxex --- diff --git a/about.html b/about.html index 2a9cc8a..4848b86 100644 --- a/about.html +++ b/about.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/css/main.css b/css/main.css index cc20f35..79762ce 100644 --- a/css/main.css +++ b/css/main.css @@ -39,7 +39,7 @@ header h1 { nav { background-color: #444; - width: 65%; + width: 70%; margin: 20px auto 0; border-radius: 15px; outline: 6px solid #000; @@ -50,23 +50,26 @@ nav ul { list-style-type: none; padding: 0; margin: 0; - overflow: hidden; + display: flex; /* horizontal layout */ } nav ul li { - float: left; - width: 14.2%; + flex: 1; /* evenly divide space (like width: calc(100% / 7)) */ } nav ul li a { - display: block; - padding: 10px 10px; - text-align: center; - text-decoration: none; - color: #fff; - border-radius: 0; - font-size:15px; - transition: background-color 0.3s; + display: flex; /* make a flex container */ + justify-content: center; /* horizontal centering of text */ + align-items: center; /* vertical centering of text */ + height: 100%; /* make fill li height */ + text-align: center; + text-decoration: none; + min-height: 40px; + padding: 10px 10px; + color: #fff; + font-size: 15px; + padding: 0; /* optional if you want exact vertical centering */ + transition: background-color 0.3s; } nav ul li a:hover { diff --git a/index.html b/index.html index 3ad7c32..ed8e03f 100644 --- a/index.html +++ b/index.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/posts/indonesien.html b/posts/indonesien.html index d5f7f2e..129d355 100644 --- a/posts/indonesien.html +++ b/posts/indonesien.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/posts/ny_gitarr.html b/posts/ny_gitarr.html index 89f1716..5669ba5 100644 --- a/posts/ny_gitarr.html +++ b/posts/ny_gitarr.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/posts/skruv_rant.html b/posts/skruv_rant.html index 19a8fb7..25d1b0f 100644 --- a/posts/skruv_rant.html +++ b/posts/skruv_rant.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/posts/star_rider.html b/posts/star_rider.html index be03736..4c32e4b 100644 --- a/posts/star_rider.html +++ b/posts/star_rider.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/posts/the_price.html b/posts/the_price.html index 389cbcd..b04a26a 100644 --- a/posts/the_price.html +++ b/posts/the_price.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/posts/uppdatering.html b/posts/uppdatering.html index 80852a6..ada74e5 100644 --- a/posts/uppdatering.html +++ b/posts/uppdatering.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/posts/welcome.html b/posts/welcome.html index 89dd51e..98e099c 100644 --- a/posts/welcome.html +++ b/posts/welcome.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/posts/welcome_2.html b/posts/welcome_2.html index f89244d..f9a1470 100644 --- a/posts/welcome_2.html +++ b/posts/welcome_2.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/projects.html b/projects.html index 40c8f8f..0a77b23 100644 --- a/projects.html +++ b/projects.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/projects/CDIO.html b/projects/CDIO.html index 0e79715..1fe69e5 100644 --- a/projects/CDIO.html +++ b/projects/CDIO.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/projects/gitarrpedaler.html b/projects/gitarrpedaler.html index a98864e..87a4f73 100644 --- a/projects/gitarrpedaler.html +++ b/projects/gitarrpedaler.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/projects/kandidatprojekt.html b/projects/kandidatprojekt.html index 3bed675..40a2e95 100644 --- a/projects/kandidatprojekt.html +++ b/projects/kandidatprojekt.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/projects/phono_preamp.html b/projects/phono_preamp.html index 12aa019..1da8977 100644 --- a/projects/phono_preamp.html +++ b/projects/phono_preamp.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)
    • diff --git a/projects/speaker.html b/projects/speaker.html index 8f130dd..01fc5f3 100644 --- a/projects/speaker.html +++ b/projects/speaker.html @@ -23,10 +23,10 @@
  • Start
  • Projekt
  • Om Mig
    • -
  • Gitweb
    • -
  • Nextcloud (VPN!)
    • -
  • Jellyfin (VPN!)
    • -
  • HASS (VPN!)
    • +
  • Gitweb
    • +
  • Nextcloud (VPN!)
    • +
  • Jellyfin (VPN!)
    • +
  • HASS (VPN!)