new first design
This commit is contained in:
parent
4cefa80cca
commit
bcd5579927
@ -3,48 +3,82 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar-container {
|
body {
|
||||||
height: 2.5rem;
|
margin: 0;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background-color: #333;
|
||||||
|
color: #fff;
|
||||||
|
/*padding: 1rem;*/
|
||||||
|
position: relative;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background-color: #181825;
|
|
||||||
color: white;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar .left {
|
.logo {
|
||||||
position: relative;
|
width: 4%;
|
||||||
|
height: 4%;
|
||||||
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar .right {
|
.nav-links {
|
||||||
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar .link {
|
.nav-links a {
|
||||||
padding: 0.3rem 0.4rem;
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar .item {
|
.nav-toggle {
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
#navbar .button {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
flex-direction: column;
|
||||||
@media (max-width: 770px) {
|
gap: 5px;
|
||||||
#navbar .item {
|
background: none;
|
||||||
display: none;
|
border: none;
|
||||||
}
|
cursor: pointer;
|
||||||
#navbar .button .item {
|
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar .item {
|
@media (max-width: 768px) {
|
||||||
|
.nav-links {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
flex-direction: column;
|
||||||
#navbar .item .open {
|
gap: 0;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #333;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links.active {
|
||||||
display: flex;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,23 +7,22 @@
|
|||||||
<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 class="right">
|
|
||||||
<div id="button" class="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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a class="item link" href="/issues">Issues</a>
|
|
||||||
<a class="item link" href="/pulls">Pull Requests</a>
|
|
||||||
<a class="item link" href="/milestones">Milestones</a>
|
|
||||||
<a class="item link" href="/explore/repos">Explore</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<button class="nav-toggle" aria-label="toggle navigation">
|
||||||
|
<img src="/static/icons/menu.svg" alt="Menu icon">
|
||||||
|
</button>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#home">Home</a></li>
|
||||||
|
<li><a href="#about">About</a></li>
|
||||||
|
<li><a href="#services">Services</a></li>
|
||||||
|
<li><a href="#contact">Contact</a></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
<script src="/static/js/scripts.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
22
static/icons/logo.svg
Normal file
22
static/icons/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 25 KiB |
5
static/icons/menu.svg
Normal file
5
static/icons/menu.svg
Normal 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>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 339 B |
8
static/js/scripts.js
Normal file
8
static/js/scripts.js
Normal 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');
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user