reworked sidebar, navbar and language chooser

This commit is contained in:
2026-04-24 00:54:17 +02:00
parent 14caf8c3fa
commit c1ed7fe998
2 changed files with 43 additions and 11 deletions
+33 -5
View File
@@ -3,7 +3,12 @@ body {
background-color: #222222; background-color: #222222;
} }
h1, h2, h3, h4, h5, p { h1,
h2,
h3,
h4,
h5,
p {
color: #DDDDEE color: #DDDDEE
} }
@@ -13,6 +18,28 @@ a {
} }
#navbar { #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; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@@ -20,17 +47,18 @@ a {
flex-direction: column; flex-direction: column;
display: flex; display: flex;
float: right; float: right;
padding: 15px;
} }
#navbar a { #sidebar a {
float: right; float: right;
display: block; display: block;
text-align: end; text-align: end;
padding: 5px; padding: 5px;
text-decoration: none; text-decoration: none;
font-size: larger;
} }
#navbar a:hover { a:hover {
color: #D0A7DF color: #D0A7DF
} }
+10 -6
View File
@@ -8,13 +8,17 @@
</head> </head>
<body> <body>
<nav> <div id="language">
{{language-switcher}} {{language-switcher}}
</nav> </div>
<div id="navbar"> <div id="navbar">
<a href="#about">About</a> <a href="index.html">home</a>
<a href="#why">Why</a> <a href="music.html">music</a>
</div> </div>
<div id="sidebar">
<a href="#about">about</a>
<a href="#why">why</a>
</div>
<header id="about"> <header id="about">
<h1>{{introduction-heading}}</h1> <h1>{{introduction-heading}}</h1>
<p>{{introduction-subheading}}</p> <p>{{introduction-subheading}}</p>