More mobile support on nav + Code fix
This commit is contained in:
parent
60eb6b072d
commit
7257fdb537
GPG key ID:
BAA5BA1AA54DF371
1
src/assets/main/close.svg
Normal file
1
src/assets/main/close.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
|
||||
|
After Width: | Height: | Size: 525 B |
1
src/assets/main/menu.svg
Normal file
1
src/assets/main/menu.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||
|
After Width: | Height: | Size: 543 B |
|
|
@ -23,10 +23,48 @@
|
|||
</li>
|
||||
</a>
|
||||
<a href="https://git.keyemail.dev/explore/">
|
||||
<li class="lastIcon" style="border-top-right-radius: 10%; border-bottom-right-radius: 10%;">
|
||||
<li style="border-top-right-radius: 10%; border-bottom-right-radius: 10%;">
|
||||
Git
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
<img id="NavButton" src="/src/assets/main/menu.svg"/>
|
||||
</nav>
|
||||
<div id="NavMobile">
|
||||
<div>
|
||||
<a class="pfp" href="/src/assets/profile/profile.jpg">
|
||||
<img src="/src/assets/profile/profile.jpg"/>
|
||||
</a>
|
||||
<h1>Keyemail</h1>
|
||||
<img id="NavClose" src="/src/assets/main/close.svg"/>
|
||||
</div>
|
||||
<ul>
|
||||
<a href="/">
|
||||
<li class="{{ if eq .PageName "home" }}active{{ end }}">
|
||||
Home
|
||||
</li>
|
||||
</a>
|
||||
<a href="/gallery">
|
||||
<li class="{{ if eq .PageName "gallery" }}active{{ end }}">
|
||||
Gallery
|
||||
</li>
|
||||
</a>
|
||||
<a href="/socials">
|
||||
<li class="{{ if eq .PageName "socials" }}active{{ end }}">
|
||||
Socials
|
||||
</li>
|
||||
</a>
|
||||
<a href="/videos" class="{{ if eq .PageName "videos" }}active{{ end }}">
|
||||
<li>
|
||||
Videos
|
||||
</li>
|
||||
</a>
|
||||
<a href="https://git.keyemail.dev/explore/">
|
||||
<li>
|
||||
Git
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
<script src="/src/scripts/navbar.js"></script>
|
||||
{{ end }}
|
||||
|
|
|
|||
15
src/scripts/navbar.js
Normal file
15
src/scripts/navbar.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
let navbarButton = document.getElementById("NavButton");
|
||||
let navbarMobile = document.getElementById("NavMobile");
|
||||
let navbarClose = document.getElementById("NavClose");
|
||||
|
||||
navbarButton.addEventListener('click', function(event) {
|
||||
if (navbarMobile.style.display === 'none' || navbarMobile.style.display === '') {
|
||||
navbarMobile.style.display = 'flex';
|
||||
}
|
||||
})
|
||||
|
||||
navbarClose.addEventListener('click', function(event) {
|
||||
if (navbarMobile.style.display === 'flex' || navbarMobile.style.display === '') {
|
||||
navbarMobile.style.display = 'none';
|
||||
}
|
||||
})
|
||||
|
|
@ -28,6 +28,30 @@ header {
|
|||
font-size: 1.5rem;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.pfp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 130px !important;
|
||||
width: 130px !important;
|
||||
border: solid;
|
||||
border-width: 6px;
|
||||
border-radius: 50%;
|
||||
border-color: var(--bg-alt-color);
|
||||
overflow: hidden;
|
||||
margin-left: 20px;
|
||||
margin-top: -50px;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit: cover;
|
||||
background-color: #afb5c8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#headercontent {
|
||||
|
|
@ -37,30 +61,6 @@ header {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.pfp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 130px !important;
|
||||
width: 130px !important;
|
||||
border: solid;
|
||||
border-width: 6px;
|
||||
border-radius: 50%;
|
||||
border-color: var(--bg-alt-color);
|
||||
overflow: hidden;
|
||||
margin-left: 20px;
|
||||
margin-top: -50px;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit: cover;
|
||||
background-color: #afb5c8;
|
||||
}
|
||||
}
|
||||
|
||||
#headerImg {
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -98,6 +98,123 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
#NavButton {
|
||||
display: none;
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
padding: 0 13px;
|
||||
box-sizing: content-box;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#NavButton:hover {
|
||||
background-color: #2269d4;
|
||||
}
|
||||
|
||||
#NavMobile {
|
||||
display: none;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--bg-color);
|
||||
margin: -20px;
|
||||
z-index: 999;
|
||||
color: white;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-weight: 500;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
border-radius: 10%;
|
||||
background-color: var(--bg-alt-color);
|
||||
z-index: 1000;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
ul li {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
background-color: var(--bg-alt-color);
|
||||
margin: 5px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: #2269d4;
|
||||
}
|
||||
|
||||
#NavClose {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
width: 30px;
|
||||
padding: 0 13px;
|
||||
box-sizing: content-box;
|
||||
height: 50px;
|
||||
border-top-right-radius: 10%;
|
||||
border-bottom-right-radius: 10%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#NavClose:hover {
|
||||
background-color: #2269d4;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #2269d4 !important;
|
||||
}
|
||||
|
||||
.pfp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 45px !important;
|
||||
width: 45px !important;
|
||||
border: solid;
|
||||
border-width: 6px;
|
||||
border-radius: 50%;
|
||||
border-color: var(--bg-alt-color);
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit: cover;
|
||||
background-color: #afb5c8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 540px) {
|
||||
nav {
|
||||
justify-content: center;
|
||||
|
|
@ -110,8 +227,18 @@ nav {
|
|||
|
||||
@media screen and (max-width: 400px) {
|
||||
nav {
|
||||
ul li {
|
||||
padding: 0 8px;
|
||||
justify-content:space-between;
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#NavButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue