diff --git a/src/public/css/style.css b/src/public/css/style.css new file mode 100644 index 0000000..c7e3e3f --- /dev/null +++ b/src/public/css/style.css @@ -0,0 +1 @@ +@font-face{font-family:"TitilliumWeb";src:url("/fonts/TitilliumWeb-Regular.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:"TitilliumWeb";src:url("/fonts/TitilliumWeb-Bold.woff2") format("woff2");font-weight:bold;font-style:normal;font-display:swap}body{margin:0px}body,html{font-family:TitilliumWeb,sans-serif;font-size:1.2rem;color:#fff;scroll-behavior:smooth}main{min-height:calc(100vh - 142.4px)}article{padding-bottom:100px}.anchor{height:0px}.content{padding:20px}li{color:#fff}body{background:rgb(15 25 50/var(--tw-bg-opacity, 1))}a{color:#00c8be;text-decoration:none}a:hover{color:#00c8be}h1,h2,h3,h4{font-family:"TitilliumWeb",sans-serif;font-weight:bold;text-align:left;color:#fff}h1{font-size:2.8rem;line-height:2.8rem}h2{font-size:2.6rem;line-height:2.6rem}h3{font-size:2rem;line-height:2rem}h4{font-size:1.8rem;line-height:1.8rem}.from-left{position:relative;animation-name:from-left;animation-duration:1s}@keyframes from-left{0%{left:-500px}100%{left:0}}.from-right{position:relative;animation-name:from-right;animation-duration:1s}@keyframes from-right{0%{right:-500px}100%{right:0}}.topbar{display:flex;height:57px;flex-wrap:wrap;align-items:center;text-align:left;background:rgb(30 40 85/var(--tw-bg-opacity, 1));z-index:1}@media screen and (min-width: 1080px) and (max-resolution: 1x){.topbar{position:sticky;top:0}}.topbar a{padding-left:20px}.menuToggle{display:block;position:fixed;top:20px;right:20px;z-index:1}.menuToggle a{transition:color .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 .5s cubic-bezier(.77, .2, .05, 1),background .5s cubic-bezier(.77, .2, .05, 1),opacity .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:#fff}.menuToggle input:checked~span:nth-last-child(3){opacity:0;transform:rotate(0deg) scale(.2, .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:#010101;box-shadow:0 0 20px #010101;list-style-type:none;transform:translate(100%, 0);transition:transform .5s cubic-bezier(.77, .2, .05, 1)}.menu li{padding-right:20px;padding-bottom:50px;font-size:22px}.menu li label{cursor:pointer}.menuToggle input:checked~ul{transform:none}.menu_icon_sidenav{z-index:2;width:fit-content;height:auto;background-color:#fc970b;padding:10px;margin:10px;cursor:pointer;position:fixed;top:0;right:0;box-shadow:0 0 10px #010101;border-radius:100%}.line1,.line2,.line3{width:40px;height:4px;margin:10px 8px;background-color:#fff;border-radius:50px;transition:.2s}.active .line1{transform:translate(0px, 15px) rotate(45deg)}.active .line2{opacity:0}.active .line3{transform:translate(0px, -15px) rotate(-45deg)}.sidenav{width:fit-content;background-color:#010101;position:fixed;text-align:center;z-index:1;right:-500px;pointer-events:none;transition:.3s;top:0;box-shadow:0 0 10px #010101;overflow:scroll}.sidenav nav{padding-top:80px;margin-right:40px}.sidenav nav ul li{list-style:none;margin-bottom:20px;transition:.2s}.sidenav nav ul li:hover{background-color:rgb(15 25 50/var(--tw-bg-opacity, 1));border-radius:50px}.sidenav nav ul li a{font-size:1.2rem;padding:10px 30px;display:block;text-decoration:none;text-align:center}.active_sidenav{right:0;pointer-events:fill;position:fixed;top:0;height:100vh;max-width:100%}.gap__20{height:20px}.box{display:flex;margin-top:80px;padding:20px;padding-bottom:40px;border:2px solid #fff;box-shadow:0 0 5px rgba(255,255,255,.2),0 4px 4px rgba(0,0,0,.08);flex-direction:column;justify-content:space-between}.box img{max-width:96px;margin-left:auto;margin-right:auto;display:block}.box__title{width:fit-content;padding:10px;margin-top:0;margin-bottom:0;background:rgb(15 25 50/var(--tw-bg-opacity, 1));border:0px solid #fff;translate:0px -55px;text-align:left}.box__link{text-align:center;padding:20px;display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 1080px) and (max-resolution: 1x){.box__link:hover{transform:scale(1.1);transition:all .2s}}.logo img{width:100%;max-width:500px}@media screen and (min-width: 1080px) and (max-resolution: 1x){.logo img:hover{transform:scale(1.02);transition:all .4s}}.logo--min img{max-width:48px}header{position:relative;color:#fff;text-align:left}header p{font-size:1.6rem}header::before{content:"";position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:rgb(30 40 85/var(--tw-bg-opacity, 1));z-index:-1}header h1{text-align:left;font-size:4rem}.article-services{position:relative;color:#fff;text-align:center}.article-services::before{content:"";position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:rgb(15 25 50/var(--tw-bg-opacity, 1));z-index:-1}footer{background-color:#010101;padding:40px;box-shadow:0 0 20px #010101}.botbar{width:100%;display:flex;font-size:1rem;justify-content:space-between;flex-wrap:wrap;text-align:center;color:#fff}.botbar p{margin-left:auto;margin-right:auto}.article-about{position:relative;color:#fff;text-align:center}.article-about ::before{content:"";position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:rgb(5 100 115/var(--tw-bg-opacity, 1));z-index:-1}.article-about h3{text-align:center}.article-hosting{position:relative;color:#fff;text-align:left}.article-hosting ::before{content:"";position:absolute;top:0px;right:0px;bottom:0px;left:0px;background:rgb(15 25 50/var(--tw-bg-opacity, 1));z-index:-1}.contact-form{margin-right:20px;font-size:.8rem;font-weight:bold}.contact-form input,.contact-form select,.contact-form textarea{width:100%;font-size:1rem;padding:10px;border:0;flex:1 1 auto;margin:10px 0}.contact-form>*{display:flex;font-family:TitilliumWeb,sans-serif}.contact-form textarea{min-height:150px;max-width:100%;box-shadow:0 0 10px #010101}input:focus,textarea:focus{outline:none}.submit{width:calc(100% + 22px) !important;color:#fff;background-color:#00c8be}.submit:hover{cursor:pointer}svg{display:flex;align-items:center;justify-content:left;height:64px;width:auto}.success{padding:20px;background-color:#185833}.docnav{background:rgb(5 100 115/var(--tw-bg-opacity, 1))}@media screen and (min-width: 1080px) and (max-resolution: 1x){.docnav{min-height:100vh}}.doc ul{margin-top:0;padding-top:20px;padding-bottom:20px}@media screen and (min-width: 1080px) and (max-resolution: 1x){.doc ul{position:sticky;top:57px}}@media screen and (min-width: 1080px) and (max-resolution: 1x){.col--1-1{display:grid;gap:40px;grid-template-columns:1fr 1fr;align-items:normal}.col--1-2{display:grid;gap:40px;grid-template-columns:1fr 2fr;align-items:normal}.col--1-4{display:grid;gap:40px;grid-template-columns:1fr 4fr;align-items:normal}.col--1-1-1{display:grid;gap:40px;grid-template-columns:1fr 1fr 1fr;align-items:normal}.col--1-1-2{display:grid;gap:40px;grid-template-columns:1fr 1fr 2fr;align-items:normal}}@media screen and (min-width: 1200px) and (max-resolution: 1x){.content{width:1200px;margin-left:auto;margin-right:auto}} \ No newline at end of file diff --git a/src/public/fonts/TitilliumWeb-Bold.woff2 b/src/public/fonts/TitilliumWeb-Bold.woff2 new file mode 100644 index 0000000..c34f134 Binary files /dev/null and b/src/public/fonts/TitilliumWeb-Bold.woff2 differ diff --git a/src/public/fonts/TitilliumWeb-Regular.woff2 b/src/public/fonts/TitilliumWeb-Regular.woff2 new file mode 100644 index 0000000..82b27bc Binary files /dev/null and b/src/public/fonts/TitilliumWeb-Regular.woff2 differ diff --git a/src/public/images/calc.svg b/src/public/images/calc.svg new file mode 100644 index 0000000..778c192 --- /dev/null +++ b/src/public/images/calc.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/public/images/cloud.svg b/src/public/images/cloud.svg new file mode 100644 index 0000000..cf3db6a --- /dev/null +++ b/src/public/images/cloud.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/public/images/clouds.svg b/src/public/images/clouds.svg new file mode 100644 index 0000000..37a25e8 --- /dev/null +++ b/src/public/images/clouds.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/public/images/drop.svg b/src/public/images/drop.svg new file mode 100644 index 0000000..873e387 --- /dev/null +++ b/src/public/images/drop.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/public/images/favicon.webp b/src/public/images/favicon.webp new file mode 100644 index 0000000..008d47b Binary files /dev/null and b/src/public/images/favicon.webp differ diff --git a/src/public/images/git.svg b/src/public/images/git.svg new file mode 100644 index 0000000..4409b5a --- /dev/null +++ b/src/public/images/git.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/public/images/list.svg b/src/public/images/list.svg new file mode 100644 index 0000000..d4598c6 --- /dev/null +++ b/src/public/images/list.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/public/images/mail.svg b/src/public/images/mail.svg new file mode 100644 index 0000000..2e400bf --- /dev/null +++ b/src/public/images/mail.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/public/images/other.svg b/src/public/images/other.svg new file mode 100644 index 0000000..c7a5488 --- /dev/null +++ b/src/public/images/other.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/public/images/pad.svg b/src/public/images/pad.svg new file mode 100644 index 0000000..c0d79df --- /dev/null +++ b/src/public/images/pad.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/sass/css/style.scss b/src/sass/css/style.scss index 2f9633b..7fd5c88 100644 --- a/src/sass/css/style.scss +++ b/src/sass/css/style.scss @@ -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 diff --git a/src/static/js/sidenav.js b/src/static/js/sidenav.js deleted file mode 100644 index 029bfc7..0000000 --- a/src/static/js/sidenav.js +++ /dev/null @@ -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"); - } -} diff --git a/src/templates/base.html b/src/templates/base.html index b13f509..3788369 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -7,6 +7,8 @@ + {% include "partials/topbar.html" %} + {% include "partials/navbar.html" %}
{% include "partials/header.html" %}
diff --git a/src/templates/documentation.html b/src/templates/documentation.html index d6deb7e..2365275 100644 --- a/src/templates/documentation.html +++ b/src/templates/documentation.html @@ -3,25 +3,23 @@ {% block content %}
-
+
+
  • Services
    • + +
  • Maintenance
    • + +
    diff --git a/src/templates/partials/footer.html b/src/templates/partials/footer.html index 28a5039..7c5668b 100644 --- a/src/templates/partials/footer.html +++ b/src/templates/partials/footer.html @@ -14,5 +14,4 @@

    Made with ❤️ with Zola !

    -
    - \ No newline at end of file +
    \ No newline at end of file diff --git a/src/templates/partials/header.html b/src/templates/partials/header.html index 5d38431..cf51764 100644 --- a/src/templates/partials/header.html +++ b/src/templates/partials/header.html @@ -1,5 +1,3 @@ -{% include "partials/topbar.html" %} -{% include "partials/sidenav.html" %} {% if not page %}
    diff --git a/src/templates/partials/navbar.html b/src/templates/partials/navbar.html new file mode 100644 index 0000000..dbcff3a --- /dev/null +++ b/src/templates/partials/navbar.html @@ -0,0 +1,39 @@ + \ No newline at end of file diff --git a/src/templates/partials/sidenav.html b/src/templates/partials/sidenav.html deleted file mode 100644 index 5ada8c8..0000000 --- a/src/templates/partials/sidenav.html +++ /dev/null @@ -1,18 +0,0 @@ -
    -
    -
    -
    -
    -
    - -
    \ No newline at end of file diff --git a/src/templates/partials/topbar.html b/src/templates/partials/topbar.html index b40a2a4..30cf8e7 100644 --- a/src/templates/partials/topbar.html +++ b/src/templates/partials/topbar.html @@ -1,4 +1,4 @@ -
    +
    {% if page %} {% endif %}