reworked sidebar, navbar and language chooser

2026-04-24 00:54:17 +02:00
parent 14caf8c3fa
commit c1ed7fe998
2 changed files with 43 additions and 11 deletions
@@ -3,7 +3,12 @@ body {
  background-color: #222222;
 }

-h1, h2, h3, h4, h5, p {
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
  color: #DDDDEE
 }

@@ -13,6 +18,28 @@ a {
 }

 #navbar {
+  position: sticky;
+  top: 0;
+  overflow: hidden;
+  display: block;
+}
+
+#navbar a {
+  padding: 5px;
+  display: inline-block;
+  font-size: larger;
+}
+
+#language {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  float: right;
+  padding: 15px;
+  font-size: larger;
+}
+
+#sidebar {
  position: fixed;
  top: 0;
  right: 0;
@@ -20,17 +47,18 @@ a {
  flex-direction: column;
  display: flex;
  float: right;
+  padding: 15px;
 }

-#navbar a {
+#sidebar a {
  float: right;
  display: block;
  text-align: end;
  padding: 5px;
  text-decoration: none;
+  font-size: larger;
 }

-#navbar a:hover {
+a:hover {
  color: #D0A7DF
 }
-
@@ -8,13 +8,17 @@
 </head>

 <body>
-    <nav>
+    <div id="language">
        {{language-switcher}}
-    </nav>
-        <div id="navbar">
-            <a href="#about">About</a>
-            <a href="#why">Why</a>
-        </div>
+    </div>
+    <div id="navbar">
+        <a href="index.html">home</a>
+        <a href="music.html">music</a>
+    </div>
+    <div id="sidebar">
+        <a href="#about">about</a>
+        <a href="#why">why</a>
+    </div>
    <header id="about">
        <h1>{{introduction-heading}}</h1>
        <p>{{introduction-subheading}}</p>