Implement basic navbar

Signed-off-by: Tobias Eidelpes <tobias@eidelpes.info>
This commit is contained in:
2020-04-07 13:51:05 +02:00
parent e769fffed7
commit c8bc0ca1cd
8 changed files with 126 additions and 1 deletions
+63
View File
@@ -13,3 +13,66 @@
*= require_tree .
*= require_self
*/
body {
margin: 0;
}
main {
margin: 8px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 18px 20px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav a:not(.active) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
padding: 14px 16px;
}
/* Layout for responsive class; gets added on menu click */
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}