new first design
This commit is contained in:
parent
4cefa80cca
commit
bcd5579927
@ -3,48 +3,82 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#navbar-container {
|
||||
height: 2.5rem;
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
/*padding: 1rem;*/
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #181825;
|
||||
color: white;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
#navbar .left {
|
||||
position: relative;
|
||||
.logo {
|
||||
width: 4%;
|
||||
height: 4%;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#navbar .right {
|
||||
.nav-links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
#navbar .link {
|
||||
padding: 0.3rem 0.4rem;
|
||||
.nav-links a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
#navbar .item {
|
||||
display: flex;
|
||||
}
|
||||
#navbar .button {
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (max-width: 770px) {
|
||||
#navbar .item {
|
||||
display: none;
|
||||
}
|
||||
#navbar .button .item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#navbar .item {
|
||||
@media (max-width: 768px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
#navbar .item .open {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
position: absolute;
|
||||
background-color: #333;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,23 +7,22 @@
|
||||
<link rel="stylesheet" href="/static/css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>This website requires JavaScript.</noscript>
|
||||
<nav id="navbar" aria-label="Navigation Bar" class="">
|
||||
<div id="navbar-container">
|
||||
<div class="left">
|
||||
<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>
|
||||
<nav class="navbar">
|
||||
<div class="navbar-container">
|
||||
<div class="logo">
|
||||
<a href="#"><img src="/static/icons/logo.svg" alt="Logo" aria-hidden="true"></a>
|
||||
</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>
|
||||
</nav>
|
||||
<script src="/static/js/scripts.js"></script>
|
||||
</body>
|
||||
</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