Mobile pass

V1/resources/css/components/follow.css

@@ -58,7 +58,7 @@
     font-size: 40px;
 }
 
-.follow-sub-line-tile {
+.follow-sub-line-title {
     grid-column: 2;
     font-weight: 700;
     font-size: 40px;
@@ -87,4 +87,13 @@
         grid-template-columns: repeat(3, 1fr);
         margin: 25px 0px;
     }
+
+    .follow-sub-line-title {
+        grid-column: 2 / 3;
+    }
+
+    .follow-sub-line-text {
+        grid-column: 1 / 4;
+        grid-row: 2;
+    }
 }

V1/resources/css/components/footer.css

@@ -99,4 +99,11 @@ body {
 
 .footer-links-insta svg {
     margin-right: 10px;
-}
+}
+
+@media only screen and (max-width: 1200px) {
+    .footer-links-items {
+        display: flex;
+        flex-direction: column;
+    }
+}

V1/resources/css/components/menu.css

@@ -93,4 +93,10 @@
     font-weight: 200;
     font-size: 35px;
     text-transform: uppercase;
+}
+
+@media only screen and (max-width: 1200px) {
+    .menu-container {
+        display: none;
+    }
 }

V1/resources/css/components/mobile-menu.css

@@ -0,0 +1,48 @@
+.mobile-menu-container {
+    font-family: 'Mona-Sans';
+    padding: 25px 10vmin;
+    width: calc(100% - 20vmin);
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    position: fixed;
+    z-index: 50;
+}
+
+.mobile-menu-icon:hover,
+.mobile-menu-icon:focus {
+    cursor: pointer;
+}
+
+.mobile-menu-items {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    position: fixed;
+    width: 100%;
+    right: 0;
+    color: #F8FAFC;
+    background-color: #222;
+    padding: 35px 0px;
+    top: calc(10vh + 25px);
+}
+
+.mobile-menu-items a {
+    color: #F8FAFC;
+    border-bottom: 1px solid #d4d6d8;
+    text-decoration: none;
+    font-weight: 200;
+    font-size: 35px;
+    text-transform: uppercase;
+    margin-bottom: 35px;
+}
+
+.menu-menu-items a:hover {
+    text-decoration: underline;
+}
+
+@media only screen and (max-width: 1200px) {
+    .mobile-menu-container {
+        display: flex;
+    }
+}

V1/resources/css/components/mobilier.css

@@ -52,3 +52,13 @@
 .mobilier-footer-container .footer-menu {
   border-top: 1px solid;
 }
+
+@media only screen and (max-width: 1200px) {
+  .mobilier-description {
+    height: auto;
+  }
+
+  .mobilier-main-container {
+    display: block;
+  }
+}

V1/resources/css/components/projet-nav.css

@@ -0,0 +1,22 @@
+.projet-nav-container {
+    background-color: #222;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 10vmin 0vmin;
+}
+
+.projet-nav-container a {
+    background-color: #222;
+    padding: 10px 25px;
+    border-radius: 25px;
+    border: 1px solid #F8FAFC;
+    color: #F8FAFC;
+    text-decoration: none;
+    font-family: 'Mona-Sans';
+    font-weight: 700;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

V1/resources/css/components/projet.css

@@ -51,4 +51,14 @@
 
 .projet-footer-container .footer-menu {
   border-top: 1px solid;
+}
+
+@media only screen and (max-width: 1200px) {
+  .projet-description {
+    height: auto;
+  }
+
+  .projet-main-container {
+    display: block;
+  }
 }

V1/resources/css/components/punch.css

@@ -16,7 +16,7 @@
     background-image: url('/resources/img/logo_notext.png');
     background-repeat: no-repeat;
     background-position: calc(50% - 250px);
-    transition: background-color 0.3s;
+    transition: background-color 0.5s;
 }
 
 .punch-sub {
@@ -41,10 +41,12 @@
 .punch-quote-right {
     position: relative;
     bottom: -120px;
+    margin-right: 10px;
 }
 
 .punch-quote-left {
     position: relative;
     top: -120px;
     transform: rotate(180deg);
+    margin-left: 10px;
 }

V1/resources/css/pages/page_contact.css

@@ -1,4 +1,5 @@
 @import url('/resources/css/components/main.css');
 @import url('/resources/css/components/contact-form.css');
 @import url('/resources/css/components/menu.css');
+@import url('/resources/css/components/mobile-menu.css');
 @import url('/resources/css/components/footer.css');

V1/resources/css/pages/page_index.css

@@ -2,6 +2,7 @@
 @import url('/resources/css/components/hero.css');
 @import url('/resources/css/components/projets.css');
 @import url('/resources/css/components/menu.css');
+@import url('/resources/css/components/mobile-menu.css');
 @import url('/resources/css/components/punch.css');
 @import url('/resources/css/components/follow.css');
 @import url('/resources/css/components/about.css');

V1/resources/css/pages/page_legal.css

@@ -1,4 +1,5 @@
 @import url('/resources/css/components/main.css');
 @import url('/resources/css/components/legal.css');
 @import url('/resources/css/components/menu.css');
+@import url('/resources/css/components/mobile-menu.css');
 @import url('/resources/css/components/footer.css');

V1/resources/css/pages/page_mobilier.css

@@ -1,5 +1,7 @@
 @import url('/resources/css/components/main.css');
 @import url('/resources/css/components/mobilier.css');
 @import url('/resources/css/components/menu.css');
+@import url('/resources/css/components/mobile-menu.css');
 @import url('/resources/css/components/contact.css');
+@import url('/resources/css/components/projet-nav.css');
 @import url('/resources/css/components/footer.css');

V1/resources/css/pages/page_projet.css

@@ -2,6 +2,8 @@
 @import url('/resources/css/components/projet.css');
 @import url('/resources/css/components/compare.css');
 @import url('/resources/css/components/menu.css');
+@import url('/resources/css/components/mobile-menu.css');
 @import url('/resources/css/components/punch.css');
 @import url('/resources/css/components/contact.css');
+@import url('/resources/css/components/projet-nav.css');
 @import url('/resources/css/components/footer.css');

V1/resources/js/index.js

@@ -11,6 +11,9 @@ document.addEventListener('DOMContentLoaded', () => {
     const navbar = document.getElementById('navbar');
     const homeTitle = document.getElementById('home-title');
 
+    const mobileMenuIcon = document.getElementById('mobile-menu-icon');
+    const mobileMenuItems = document.getElementById('mobile-menu-items');
+
     if (navbar || punch || homeTitle) {
         let lastScrollY = window.scrollY;
         
@@ -47,4 +50,10 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
     }
+
+    if (mobileMenuIcon && mobileMenuItems) {
+        mobileMenuIcon.addEventListener('click', () => {
+            mobileMenuItems.style.display = mobileMenuItems.style.display === 'flex' ? 'none' : 'flex';
+        });
+    }
 });