fabolous005/engler-labs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 10 Wiki Activity

new first design

Browse Source
This commit is contained in:
fabolous005 2025-02-26 21:22:53 +01:00
parent 4cefa80cca
commit bcd5579927
5 changed files with 131 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
static/css/styles.css
View File

@ -1,50 +1,84 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#navbar-container { body {
height: 2.5rem; margin: 0;
display: flex; font-family: Arial, sans-serif;
justify-content: space-between;
background-color: #181825;
color: white;
align-items: center;
gap: 0.4rem;
} }
#navbar .left { .navbar {
position: relative; background-color: #333;
color: #fff;
/*padding: 1rem;*/
position: relative;
z-index: 1000;
} }
#navbar .right { .navbar-container {
display: flex;
}
#navbar .link {
padding: 0.3rem 0.4rem;
}
#navbar .item {
display: flex;
}
#navbar .button {
display: none;
}
@media (max-width: 770px) {
#navbar .item {
display: none;
}
#navbar .button .item {
display: flex; display: flex;
} justify-content: space-between;
align-items: center;
#navbar .item { }
display: none;
} .logo {
#navbar .item .open { width: 4%;
width: 100%; height: 4%;
padding: 0; margin-left: 5px;
display: flex; }
}
.nav-links {
list-style: none;
display: flex;
gap: 1.5rem;
margin: 1rem;
}
.nav-links a {
color: #fff;
text-decoration: none;
font-size: 1.3rem;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
}
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
gap: 0;
position: absolute;
background-color: #333;
width: 100%;
top: 100%;
left: 0;
margin: 0;
}
.nav-links.active {
display: flex;
}
.nav-toggle {
display: flex;
}
.nav-links li {
text-align: center;
padding: 1rem 0;
}
.nav-links a {
display: block;
width: 100%;
padding: 1rem 0;
}
} }

43
static/html/index.html.tera
View File

@ -1,29 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title> <title>Responsive Navbar</title>
<link rel="stylesheet" href="/static/css/styles.css"> <link rel="stylesheet" href="/static/css/styles.css">
</head> </head>
<body> <body>
<noscript>This website requires JavaScript.</noscript> <nav class="navbar">
<nav id="navbar" aria-label="Navigation Bar" class=""> <div class="navbar-container">
<div id="navbar-container"> <div class="logo">
<div class="left"> <a href="#"><img src="/static/icons/logo.svg" alt="Logo" aria-hidden="true"></a>
<a class="logo">LOGO</a> </div>
</div> <button class="nav-toggle" aria-label="toggle navigation">
<div class="right"> <img src="/static/icons/menu.svg" alt="Menu icon">
<div id="button" class="button"> </button>
<button><svg viewBox="0 0 16 16" class="svg octicon-three-bars" aria-hidden="true" width="16" height="16"><path d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75m0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75M1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5"></path></svg></button> <ul class="nav-links">
</div> <li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<a class="item link" href="/issues">Issues</a> <li><a href="#services">Services</a></li>
<a class="item link" href="/pulls">Pull Requests</a> <li><a href="#contact">Contact</a></li>
<a class="item link" href="/milestones">Milestones</a> </ul>
<a class="item link" href="/explore/repos">Explore</a> </div>
</div> </nav>
</div> <script src="/static/js/scripts.js"></script>
</nav>
</body> </body>
</html> </html>

22
static/icons/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

5
static/icons/menu.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none">
<path fill="#F8F8F2" fill-rule="evenodd" d="M19 4a1 1 0 01-1 1H2a1 1 0 010-2h16a1 1 0 011 1zm0 6a1 1 0 01-1 1H2a1 1 0 110-2h16a1 1 0 011 1zm-1 7a1 1 0 100-2H2a1 1 0 100 2h16z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 339 B

8
static/js/scripts.js Normal file
View File

@ -0,0 +1,8 @@
document.addEventListener('DOMContentLoaded', () => {
const navToggle = document.querySelector('.nav-toggle');
const navLinks = document.querySelector('.nav-links');
navToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
});