VSCodium/vscodium.github.io
1
0
Fork 0
mirror of https://github.com/VSCodium/vscodium.github.io.git synced 2025-12-10 03:54:23 -06:00
Code Issues 8 Packages Projects Releases Wiki Activity

feat: included a menu for display on mobile (#87)

Browse Source
This commit is contained in:
DanielKorban 2024-12-27 10:51:39 -03:00 committed by GitHub
parent b4025ecdca
commit 4364cdb555
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 46 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
_includes/css/main.css
View File

@ -72,7 +72,7 @@ a:hover {
color: #fff !important;
margin: 0 -.25rem;
padding: 0 .25rem;
box-shadow: inset 500px 0 0 0 #1A5FB4;
box-shadow: inset 100px 0 0 0 #1A5FB4;
transition: color 1s ease-in-out, box-shadow 1s ease-in-out;
}
@ -189,6 +189,38 @@ nav ul li:hover, nav ul li.active {
padding-top: 0;
}
/* Mobile Styles */
.menu-toggle {
display: none;
}
@media (max-width: 400px) {
nav ul {
display: none;
flex-direction: column;
text-align: center;
}
nav ul.show {
display: flex;
}
nav ul li {
display: block;
width: 100%;
border: none;
}
.menu-toggle {
display: block;
cursor: pointer;
color: #fff;
font-size: 25px;
padding: 15px;
}
}
/* ----- sections/articles ----- */

16
index.html
View File

@ -19,12 +19,15 @@
<body>
<div role="main" id="main">
<nav><ul>
<nav>
<div class="menu-toggle">☰</div>
<ul>
{% for node in site.posts reversed %}
{% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
<li class="p-{{id}}"><a href="#{{id}}">{{node.title}}</a></li>
<li class="p-{{id}}"><a href="#{{id}}" onclick="navUl.classList.remove('show');">{{node.title}}</a></li>
{% endfor %}
</ul></nav>
</ul>
</nav>
{% for page in site.posts reversed %}
@ -68,6 +71,13 @@
// add anchors to all h2, h3, h4, h5, h6
anchors.add();
// configure mobile menu
const menuToggle = document.querySelector('.menu-toggle');
const navUl = document.querySelector('nav ul');
menuToggle.addEventListener('click', () => {
navUl.classList.toggle('show');
});
</script>
</body>
</html>