Merge pull request #46 from SaillantNicolas/Fix-responsive-GF

some responsive improvement
CGAL · Nov 14, 2024 · 9666cfb · 9666cfb
2 parents be3c65f + eeea454
commit 9666cfb
Show file tree

Hide file tree

Showing 3 changed files with 185 additions and 21 deletions.
diff --git a/_includes/themes/cgal/default.html b/_includes/themes/cgal/default.html
@@ -38,6 +38,14 @@
     <!-- Navigation & Logo-->
     <div class="mainmenu-wrapper">
     <div class="container">
+    <div class="mobile-header">
+      <a href="{{ site.baseurl }}/index.html" class="mobile-logo">
+        <img src="{{ site.baseurl }}/images/cgal_front_page_2013.png" alt="CGAL Logo" height="30">
+      </a>
+      <button class="menu-toggle" aria-label="Menu">
+        Menu
+      </button>
+    </div>
     <nav id="mainmenu" class="mainmenu" role="navigation">
     <ul>
     <li class="logo-wrapper hidden-xs hidden-sm hidden-md">
@@ -171,6 +179,16 @@ <h1>{{ page.title }} {% if page.tagline %} <small>{{ page.tagline }}</small>{% e
             }
           });
         });
+
+        document.addEventListener('DOMContentLoaded', function() {
+          const menuToggle = document.querySelector('.menu-toggle');
+          const mainMenu = document.getElementById('mainmenu');
+
+          menuToggle.addEventListener('click', function() {
+              mainMenu.classList.toggle('active');
+              menuToggle.classList.toggle('active');
+          });
+      });
       </script>
       <script src="{{ site.baseurl }}/node_modules/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"></script>
     </body>

diff --git a/assets/themes/cgal/main.css b/assets/themes/cgal/main.css
@@ -2461,41 +2461,97 @@ span.color-red {
     padding-left: 10px;
   }
 }
+
+.mobile-header {
+  display: none;
+}
+
 @media screen and (max-width: 479px) {
-  .mainmenu {
-    font-size: 120%;
-    border: none;
-  }
-  .mainmenu > ul,
-  .mainmenu .mainmenu-submenu-inner {
-    width: 100%;
+  .mainmenu-wrapper {
     padding: 0;
+    border-bottom: 4px solid #725e49;
   }
-  .mainmenu .mainmenu-submenu-inner {
-    padding: 0 1.5em;
-    font-size: 75%;
+
+  .mobile-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 10px 15px;
+    background-color: #fff;
   }
-  .mainmenu > ul > li {
+
+  .mobile-logo {
     display: block;
-    border-bottom: 4px solid #47a3da;
   }
-  .mainmenu > ul > li > a {
-    display: block;
-    padding: 1em 3em;
+
+  .mobile-logo img {
+    height: 30px;
+    width: auto;
   }
-  .mainmenu > ul > li:last-child {
+
+  .menu-toggle {
+    display: block;
+    background: none;
     border: none;
+    padding: 8px 12px;
+    color: #725e49;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .logo-wrapper.hidden-xs {
+    display: none !important;
   }
-  .mainmenu .mainmenu-submenu {
+
+  .mainmenu {
     position: relative;
   }
-  .mainmenu-submenu h4 {
-    padding-top: 0.6em;
+
+  .mainmenu > ul {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background: white;
+    padding: 0;
+    margin: 0;
+    border-top: 1px solid #e8e8e8;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    z-index: 1000;
+  }
+
+  .mainmenu.active > ul {
+    display: block;
+  }
+
+  .mainmenu > ul > li:not(.logo-wrapper) {
+    display: block;
+    border-bottom: 1px solid #e8e8e8;
+  }
+
+  .mainmenu > ul > li > a {
+    display: block;
+    padding: 15px;
+    color: #333;
   }
-  .mainmenu .mainmenu-submenu-inner > div {
+
+  .mainmenu .dropdown-menu {
+    position: static !important;
     width: 100%;
-    float: none;
+    margin: 0;
     padding: 0;
+    border: none;
+    box-shadow: none;
+    background: #f8f8f8;
+  }
+
+  .mainmenu .dropdown-menu li a {
+    padding: 12px 30px;
+    display: block;
   }
 }
 /*--------------------------------------------------------------------------

diff --git a/style.css b/style.css
@@ -315,6 +315,20 @@ code {
 }
 
 @media (max-width: 479px) {
+  .service-wrapper {
+    margin: 20px 15px;
+  }
+
+  .row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .col-sm-6, .col-sm-12 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   .bottom-container {
     display: block;
   }
@@ -446,3 +460,79 @@ code {
   color: #24292f;
   font-weight: bold;
 }
+
+.service-wrapper {
+  display: block;
+  width: 100%;
+  margin: 20px 10px;
+  padding: 20px;
+  background: #fff;
+  transition: all 0.3s ease;
+}
+
+.row-eq-height {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.vert_align_middle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+  flex-shrink: 0;
+}
+
+.vert_align_middle img {
+  max-width: none;
+  object-fit: contain;
+}
+
+.service-wrapper .col-sm-9 {
+  min-width: 0;
+  word-break: break-word;
+  padding-right: 15px;
+}
+
+.service-wrapper h3 {
+  font-size: 1.5em;
+  margin: 0 0 12px 0;
+  word-break: break-word;
+}
+
+.service-wrapper p {
+  font-size: 1.1em;
+  line-height: 1.5;
+  margin: 0;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  white-space: normal;
+}
+
+@media (max-width: 768px) {
+  .row-eq-height {
+    flex-direction: column;
+    text-align: center;
+    gap: 15px;
+  }
+  .service-wrapper .col-sm-3,
+  .service-wrapper .col-sm-9 {
+    width: 100%;
+    padding: 0 15px;
+  }
+  .vert_align_middle {
+    margin: 0;
+  }
+  .vert_align_middle img {
+    width: 65px;
+    height: 65px;
+  }
+  .service-wrapper h3 {
+    font-size: 1.4em;
+  }
+  .service-wrapper p {
+    font-size: 1em;
+  }
+}