reworked sidebar, navbar and language chooser
This commit is contained in:
+32
-4
@@ -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
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user