Merge pull request #34 from stahanna/fix-menu-for-mobile

fixing upper menu for mobile or narrow screens
gammapy · Oct 4, 2024 · 590e4b9 · 590e4b9
2 parents 92f7121 + c99b676
commit 590e4b9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 20 deletions.
diff --git a/about.html b/about.html
@@ -30,12 +30,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Gammapy - About</title>
     <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
-          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
-          crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="style.css" media="screen">
     <link rel="icon" type="image/x-icon" href="img/gp_favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
           integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
           crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -45,12 +42,11 @@
 
 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
     <a class="navbar-brand" href=".">Gammapy</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"2
-            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarCollapse">
-        <ul class="navbar-nav mr-auto">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
             <li class="nav-item">
                 <a class="nav-link" href="https://github.com/gammapy/gammapy" target="_blank" rel="noopener"
                    aria-label="GitHub">
@@ -87,6 +83,7 @@
             <li class="nav-item"><a class="nav-link" href="acknowledging.html">Acknowledging</a></li>
         </ul>
     </div>
+    </div>
 </nav>
 
 <main>
@@ -125,11 +122,13 @@ <h2 id="project"><a href="#gp"> What is Gammapy?</a></h2>
             populations.
         </p>
 
+
         <br>
         <p>
             When using Gammapy for your publication, please follow the citation scheme presented in the
             <a href="acknowledging.html">acknowledgment page</a> in order to support the
             Gammapy team.
+
         </p>
 
 <!--         <br><br>
@@ -202,15 +201,19 @@ <h2 id="awards"><a href="#awards"> Awards and Prizes </a></h2>
 </footer>
 
 
-<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
-        integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
-        crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/cjs/popper-base.min.js"
-        integrity="sha512-o0ub2Xb68yocD2zlJF3T68IBMS6Tcci0ELYFMSZg22LpCZ9/zceGsjt9k7sH/HZbqCAzwewcXCzyOcjfIG21Ow=="
-        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-        crossorigin="anonymous"></script>
+<!--<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"-->
+<!--        integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="-->
+<!--        crossorigin="anonymous"></script>-->
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/cjs/popper-base.min.js"-->
+<!--        integrity="sha512-o0ub2Xb68yocD2zlJF3T68IBMS6Tcci0ELYFMSZg22LpCZ9/zceGsjt9k7sH/HZbqCAzwewcXCzyOcjfIG21Ow=="-->
+<!--        crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
+<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"-->
+<!--        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"-->
+<!--        crossorigin="anonymous"></script>-->
+<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-qLaMtvFFk2VBZxV45cd5R1ewopCBpyanISXYF/uOaGdXzI7XUBy9JCVg1LXUVUNf" crossorigin="anonymous"></script>-->
+
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -11,6 +11,20 @@
     margin-bottom: 0;
 }
 
+@media (max-width: 768px) {
+    .navbar-nav {
+        text-align: center;
+    }
+
+    .navbar-collapse {
+        background-color: var(--gammapy-secondary); /* For a full-width menu on mobile */
+    }
+
+    .bg-dark {
+        color: white; /* Ensure text is bright on dark background */
+    }
+}
+
 .bg-dark {
     background-color: #1e254a !important;
     /* TODO: Make navbar text brighter! */
@@ -77,7 +91,7 @@ footer {
 	background-color: #23b83c;
 	color: whitesmoke;
 	/* padding: 0.5em 1.1em;  */
-	padding: 0px
+	padding: 0px;
 	text-align: center;
 	text-decoration: none;
 	font-size: 1em;