netig/netig.net
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css only menu

Browse Source
This commit is contained in:
julien 2025-01-16 13:41:09 +01:00
parent 9128d039c6
commit b70afd26d1
22 changed files with 220 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/public/css/style.css Normal file
View File

File diff suppressed because one or more lines are too long

BIN
src/public/fonts/TitilliumWeb-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
src/public/fonts/TitilliumWeb-Regular.woff2 Normal file
View File

Binary file not shown.

4
src/public/images/calc.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#fff" width="800px" height="800px" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
<path d="M.75 0c-.41 0-.75.34-.75.75v5.5c0 .41.34.75.75.75h6.5c.41 0 .75-.34.75-.75v-5.5c0-.41-.34-.75-.75-.75h-6.5zm.25 1h1v1h-1v-1zm2 0h4v1h-4v-1zm-2 2h1v1h-1v-1zm2 0h4v1h-4v-1zm-2 2h1v1h-1v-1zm2 0h4v1h-4v-1z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 441 B

4
src/public/images/cloud.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 13.6493C3 16.6044 5.41766 19 8.4 19L16.5 19C18.9853 19 21 16.9839 21 14.4969C21 12.6503 19.8893 10.9449 18.3 10.25C18.1317 7.32251 15.684 5 12.6893 5C10.3514 5 8.34694 6.48637 7.5 8.5C4.8 8.9375 3 11.2001 3 13.6493Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 539 B

7
src/public/images/clouds.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M5.38846 12.7023C3.98522 12.1237 3 10.7636 3 9.17807C3 7.42863 4.3 5.8125 6.25 5.5C6.86168 4.0617 8.30934 3 9.9978 3C12.1607 3 13.9285 4.65893 14.05 6.75C14.8721 7.10549 15.5169 7.83126 15.8166 8.69914M5.38846 12.7023C4.50928 13.5938 4 14.7867 4 16.0315C4 18.7755 6.28335 21 9.1 21L16.75 21C19.0972 21 21 19.1279 21 16.8185C21 15.1039 19.951 13.5202 18.45 12.875C18.3457 11.0905 17.3135 9.5483 15.8166 8.69914M5.38846 12.7023C6.11557 11.9651 7.0957 11.4339 8.25 11.25C9.04989 9.3802 10.943 8 13.151 8C14.1227 8 15.0333 8.25474 15.8166 8.69914" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
src/public/images/drop.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21V11M12 11L9 14M12 11L15 14M7 16.8184C4.69636 16.2074 3 14.1246 3 11.6493C3 9.20008 4.8 6.9375 7.5 6.5C8.34694 4.48637 10.3514 3 12.6893 3C15.684 3 18.1317 5.32251 18.3 8.25C19.8893 8.94488 21 10.6503 21 12.4969C21 14.8148 19.25 16.7236 17 16.9725" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 573 B

BIN
src/public/images/favicon.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

4
src/public/images/git.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4142 3.82843C12.6332 3.04738 11.3668 3.04738 10.5858 3.82843L9.91421 4.5L11.482 6.06774C11.6472 6.02356 11.8208 6 12 6C13.1046 6 14 6.89543 14 8C14 8.17916 13.9764 8.35282 13.9323 8.51804L15.982 10.5677C16.1472 10.5236 16.3208 10.5 16.5 10.5C17.6046 10.5 18.5 11.3954 18.5 12.5C18.5 13.6046 17.6046 14.5 16.5 14.5C15.3954 14.5 14.5 13.6046 14.5 12.5C14.5 12.3208 14.5236 12.1472 14.5677 11.982L13 10.4142V15.2676C13.5978 15.6134 14 16.2597 14 17C14 18.1046 13.1046 19 12 19C10.8954 19 10 18.1046 10 17C10 16.2597 10.4022 15.6134 11 15.2676V9.73244C10.4022 9.38663 10 8.74028 10 8C10 7.82084 10.0236 7.64718 10.0677 7.48196L8.5 5.91421L3.82843 10.5858C3.04738 11.3668 3.04738 12.6332 3.82843 13.4142L10.5858 20.1716C11.3668 20.9526 12.6332 20.9526 13.4142 20.1716L20.1716 13.4142C20.9526 12.6332 20.9526 11.3668 20.1716 10.5858L13.4142 3.82843ZM9.17157 2.41421C10.7337 0.852115 13.2663 0.852119 14.8284 2.41422L21.5858 9.17157C23.1479 10.7337 23.1479 13.2663 21.5858 14.8284L14.8284 21.5858C13.2663 23.1479 10.7337 23.1479 9.17157 21.5858L2.41421 14.8284C0.852115 13.2663 0.852119 10.7337 2.41422 9.17157L9.17157 2.41421Z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

7
src/public/images/list.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" width="800px" height="800px" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st1{fill:none;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} </style> <polyline class="st0" points="2,16 12,22 22,16 "/> <path class="st0" d="M18,11H6c-2.2,0-4,1.8-4,4v10c0,2.2,1.8,4,4,4h12c2.2,0,4-1.8,4-4V15C22,12.8,20.2,11,18,11z"/> <line class="st0" x1="21.5" y1="13.1" x2="30" y2="8"/> <path class="st0" d="M22,21h4c2.2,0,4-1.8,4-4V7c0-2.2-1.8-4-4-4H14c-2.2,0-4,1.8-4,4v4"/> </g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
src/public/images/mail.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 8L17.4392 9.97822C15.454 11.0811 14.4614 11.6326 13.4102 11.8488C12.4798 12.0401 11.5202 12.0401 10.5898 11.8488C9.53864 11.6326 8.54603 11.0811 6.5608 9.97822L3 8M6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 956 B

7
src/public/images/other.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <title/> <g> <path d="M48,0A24.0275,24.0275,0,0,0,24,24a6,6,0,0,0,12,0,12,12,0,0,1,24,0c0,5.2031-3.0586,8.3965-8.0859,13.0371C47.2617,41.32,42,46.1719,42,54a6,6,0,0,0,12,0c0-2.4434,2.2969-4.6875,6.0469-8.1445C65.0859,41.2031,72,34.834,72,24A24.0275,24.0275,0,0,0,48,0Z"/> <path d="M48,72A12,12,0,1,0,60,84,12.0119,12.0119,0,0,0,48,72Z"/> </g> </g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 801 B

10
src/public/images/pad.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#fff" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M27,3H5A1,1,0,0,0,5,5H27a1,1,0,0,0,0-2Z"/>
<path d="M27,7H5A1,1,0,0,0,5,9H27a1,1,0,0,0,0-2Z"/>
<path d="M27,11H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
<path d="M27,15H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
<path d="M27,19H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
<path d="M27,23H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
<path d="M27,27H5a1,1,0,0,0,0,2H27a1,1,0,0,0,0-2Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 633 B

124
src/sass/css/style.scss
View File

@ -158,18 +158,121 @@ h4 {
.topbar {
display: flex;
height: 57px;
flex-wrap: wrap;
align-items: center;
text-align: left;
background: $color__ternary;
z-index: 1;
@media screen and (min-width: 1080px) and (max-resolution: 1x) {
position: sticky;
top: 0;
}
a {
padding-left: 20px;
}
}
/* Sidenav TEST
------------------------------------------------------------------------ */
.menuToggle {
display: block;
position: fixed;
top: 20px;
right: 20px;
z-index: 1;
}
.menuToggle a {
transition: color 0.3s ease;
}
.menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
.menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
}
.menuToggle span:first-child {
transform-origin: 0% 0%;
}
.menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
.menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #ffffff;
}
.menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
.menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
.menu {
position: fixed;
margin-top: 0;
padding-top: 100px;
top: 0;
right: 0;
width: fit-content;
max-width: 100%;
height: 100%;
background: $color__neutral;
box-shadow: 0 0 20px $color__neutral;
list-style-type: none;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
.menu li {
padding-right: 20px;
padding-bottom: 50px;
font-size: 22px;
}
.menu li label {
cursor: pointer;
}
.menuToggle input:checked~ul {
transform: none;
}
/* Sidenav
------------------------------------------------------------------------ */
.menu_icon_sidenav {
z-index: 2;
width: fit-content;
@ -249,7 +352,7 @@ h4 {
}
.active_sidenav {
right: 0px;
right: 0;
pointer-events: fill;
position: fixed;
top: 0;
@ -264,14 +367,6 @@ h4 {
height: 20px;
}
.gap__40 {
height: 40px;
}
.gap__80 {
height: 80px;
}
/* Boxes
------------------------------------------------------------------------ */
@ -540,6 +635,12 @@ svg {
margin-top: 0;
padding-top: 20px;
padding-bottom: 20px;
@media screen and (min-width: 1080px) and (max-resolution: 1x) {
position: sticky;
top: 57px;
}
}
/* Responsive 1080px
@ -581,11 +682,6 @@ svg {
align-items: normal;
}
.sticky {
position: sticky;
top: 0;
}
}
/* Responsive 1200px

14
src/static/js/sidenav.js
View File

@ -1,14 +0,0 @@
let menu_icon_sidenav = document.querySelector(".menu_icon_sidenav");
let sidenav = document.querySelector(".sidenav");
menu_icon_sidenav.onclick = function () {
menu_icon_sidenav.classList.toggle("active");
sidenav.classList.toggle("active_sidenav");
}
document.onclick = function (e) {
if (!menu_icon_sidenav.contains(e.target) && !sidenav.contains(e.target)) {
menu_icon_sidenav.classList.remove("active");
sidenav.classList.remove("active_sidenav");
}
}

2
src/templates/base.html
View File

@ -7,6 +7,8 @@
</head>
<body>
{% include "partials/topbar.html" %}
{% include "partials/navbar.html" %}
<header>
{% include "partials/header.html" %}
</header>

32
src/templates/documentation.html
View File

@ -3,25 +3,23 @@
{% block content %}
<div class="doc col--1-4">
<div class="docnav">
<div class="sticky">
<ul class="sticky__57">
<li><a href="#infrastructure">Infrastructure</a></li>
<ul>
<li><a href="#infrastructure">Infrastructure</a></li>
<ul>
<li><a href="#serveurs">Serveurs</a></li>
<li><a href="#reseau">Réseau</a></li>
<li><a href="#sauvegardes">Sauvegardes</a></li>
</ul>
<li><a href="#services">Services</a></li>
<ul>
<li><a href="#mail">Mail</a></li>
</ul>
<li><a href="#maintenance">Maintenance</a></li>
<ul>
<li><a href="#apk">APK</a></li>
<li><a href="#nerdctl">Nerdctl</a></li>
</ul>
<li><a href="#serveurs">Serveurs</a></li>
<li><a href="#reseau">Réseau</a></li>
<li><a href="#sauvegardes">Sauvegardes</a></li>
</ul>
</div>
<li><a href="#services">Services</a></li>
<ul>
<li><a href="#mail">Mail</a></li>
</ul>
<li><a href="#maintenance">Maintenance</a></li>
<ul>
<li><a href="#apk">APK</a></li>
<li><a href="#nerdctl">Nerdctl</a></li>
</ul>
</ul>
</div>
<div class="content">
<div class="anchor" id="{{ page.slug }}"></div>

3
src/templates/partials/footer.html
View File

@ -14,5 +14,4 @@
<p>
Made with ❤️ with <a href="https://www.getzola.org/" target="_blank">Zola</a> !
</p>
</div>
<script src="{{ get_url(path="js/sidenav.js") }}"></script>
</div>

2
src/templates/partials/header.html
View File

@ -1,5 +1,3 @@
{% include "partials/topbar.html" %}
{% include "partials/sidenav.html" %}
{% if not page %}
<div class="content col--1-2">
<div>

39
src/templates/partials/navbar.html Normal file
View File

@ -0,0 +1,39 @@
<nav>
<div class="menuToggle">
<input type="checkbox" class="menuCheckbox" />
<span></span>
<span></span>
<span></span>
<ul class="menu">
<li>
<a href="/#">
<label for="menuCheckbox" onclick="this.parentNode.click();">Accueil</label>
</a>
</li>
<li>
<a href="/#services">
<label for="menuCheckbox" onclick="this.parentNode.click();">Services</label>
</a>
</li>
<li>
<a href="/#about">
<label for="menuCheckbox" onclick="this.parentNode.click();">À propos</label>
</a>
</li>
<li>
<a href="/#hosting">
<label for="menuCheckbox" onclick="this.parentNode.click();">Hébergement</label>
</a>
</li>
<li>
<a href="/maintenance">Maintenance et incidents</a>
</li>
<li>
<a href="/documentation">Documentation</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</div>
</nav>

18
src/templates/partials/sidenav.html
View File

@ -1,18 +0,0 @@
<div class="menu_icon_sidenav">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="sidenav">
<nav>
<ul>
<li><a href="/#">Accueil</a></li>
<li><a href="/#services">Services</a></li>
<li><a href="/#about">À propos</a></li>
<li><a href="/#hosting">Hébergement</a></li>
<li><a href="/maintenance">Maintenance et incidents</a></li>
<li><a href="/documentation">Documentation</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</div>

2
src/templates/partials/topbar.html
View File

@ -1,4 +1,4 @@
<div class="topbar">
<div class="topbar sticky">
{% if page %}
<a class="logo--min" href="/#"><img class="logo" src="{{ get_url(path="images/favicon.webp") }}" alt="Logo"></a>
{% endif %}