fixes

added analytics and basic mobile responsiveness (but needs more work)
damianodamiani · Jul 3, 2024 · c41effa · c41effa
1 parent 63d87ad
commit c41effa
Show file tree

Hide file tree

Showing 4 changed files with 241 additions and 2 deletions.
diff --git a/_includes/google-analytics.html b/_includes/google-analytics.html
@@ -0,0 +1,11 @@
+<!-- Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-YPMHWP0DM3"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'YOUR_TRACKING_ID');
+</script>
+<!-- End Google Analytics -->
+
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,10 +1,13 @@
 <header id="header" class="navbar navbar-expand-lg fixed-top navbar-light">
     <div id="navigation-container" class="container-fluid">
         <div class="logos-left">
-            <a href="{{ '/' | relative_url }}" title="ChinaComx Logo" class="navbar-brand">
+            <a href="/" title="ChinaComx Logo" class="navbar-brand">
                 <img src="{{ '/assets/images/chinacomx-logo.png' | relative_url }}" class="brand-logo">
             </a>
         </div>
+        <button class="navbar-toggler" type="button" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
+            &#9776; <!-- Unicode for hamburger icon -->
+        </button>
         <div class="collapse navbar-collapse" id="mainNav">
             <ul class="navbar-nav">
                 <li class="nav-item"><a href="{{ '/activities/' | absolute_url }}" class="nav-link">Activities</a></li>
@@ -30,6 +33,7 @@
     </div>
 </header>
 
+
 <style>
     .navbar {
         width: 100%;
@@ -71,3 +75,14 @@
         margin-left: auto; /* Push the logos to the far right */
     }
 </style>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        const toggler = document.querySelector(".navbar-toggler");
+        const nav = document.querySelector("#mainNav");
+
+        toggler.addEventListener("click", function() {
+            nav.classList.toggle("show");
+        });
+    });
+</script>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -13,7 +13,9 @@
         <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
         <link rel="icon" href="{{ '/assets/images/favicon.ico' | relative_url }}" type="image/x-icon">
-        <link rel="shortcut icon" href="{{ '/assets/images/favicon.ico' | relative_url }}" type="image/x-icon">                </head>    
+        <link rel="shortcut icon" href="{{ '/assets/images/favicon.ico' | relative_url }}" type="image/x-icon">                
+    {% include google-analytics.html %}
+    </head>    
 <body>
     {% include header.html %}
     <main class="content-wrapper">
@@ -37,3 +39,4 @@ <h1>{{ page.title }}</h1>
     </script>
 </body>
 </html>
+
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -111,6 +111,107 @@ header .logos-right {
     margin-left: auto; /* Ensure logos are at the far right */
 }
 
+/* Navbar Styles */
+.navbar {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #fff;
+    box-shadow: 0 2px 1px -1px gray;
+}
+
+.navbar-brand img {
+    max-height: 50px;
+}
+
+.nav-logo {
+    max-height: 50px;
+    margin-left: 10px;
+}
+
+.navbar-nav {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.nav-item {
+    margin: 0 10px;
+}
+
+.nav-link {
+    color: #000;
+    text-decoration: none;
+    padding: 10px;
+}
+
+.nav-link:hover {
+    color: #555;
+}
+
+.navbar-toggler {
+    display: none;
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 10px;
+}
+
+.collapse {
+    display: flex;
+    flex-grow: 1;
+}
+
+@media (max-width: 768px) {
+    .navbar-toggler {
+        display: block;
+    }
+
+    .collapse {
+        display: none;
+        flex-direction: column;
+        width: 100%;
+        background-color: #fff;
+        padding: 10px;
+        position: absolute;
+        top: 60px; /* Adjust based on the height of your navbar */
+        left: 0;
+        box-shadow: 0 2px 1px -1px gray;
+        z-index: 1000; /* Ensure it is above other content */
+    }
+
+    .collapse.show {
+        display: flex;
+    }
+
+    .navbar-nav {
+        flex-direction: column;
+        width: 100%;
+        align-items: center;
+    }
+
+    .nav-item {
+        text-align: center;
+        width: 100%;
+    }
+
+    .nav-link {
+        padding: 10px 0;
+        border-bottom: 1px solid #ddd;
+        width: 100%;
+    }
+
+    .logos-right {
+        display: none;
+    }
+}
+
 /* General Navbar */
 .navbar {
     display: flex;
@@ -156,6 +257,115 @@ header .logos-right {
     color: #555;
 }
 
+/* Global Styles */
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+}
+
+/* Navbar Styles */
+.navbar {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #fff;
+    box-shadow: 0 2px 1px -1px gray;
+}
+
+.navbar-brand img {
+    max-height: 50px;
+}
+
+.nav-logo {
+    max-height: 50px;
+    margin-left: 10px;
+}
+
+.navbar-nav {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.nav-item {
+    margin: 0 10px;
+}
+
+.nav-link {
+    color: #000;
+    text-decoration: none;
+    padding: 10px;
+}
+
+.nav-link:hover {
+    color: #555;
+}
+
+.navbar-toggler {
+    display: none;
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 10px;
+}
+
+.collapse {
+    display: flex;
+    flex-grow: 1;
+}
+
+@media (max-width: 768px) {
+    .navbar-toggler {
+        display: block;
+    }
+
+    .collapse {
+        display: none;
+        flex-direction: column;
+        width: 100%;
+        background-color: #fff;
+        padding: 10px;
+        position: absolute;
+        top: 60px; /* Adjust based on the height of your navbar */
+        left: 0;
+        box-shadow: 0 2px 1px -1px gray;
+        z-index: 1000; /* Ensure it is above other content */
+    }
+
+    .collapse.show {
+        display: flex;
+    }
+
+    .navbar-nav {
+        flex-direction: column;
+        width: 100%;
+        align-items: center;
+    }
+
+    .nav-item {
+        text-align: center;
+        width: 100%;
+    }
+
+    .nav-link {
+        padding: 10px 0;
+        border-bottom: 1px solid #ddd;
+        width: 100%;
+    }
+
+    .logos-right {
+        display: none;
+    }
+}
+
 /* Splash Page Styles */
 .splash {
     background: url('/assets/images/splash-image.png') no-repeat center center/cover;