Fix on mobile

StanFromIreland · StanFromIreland · commit 28b557ac14f9 · 2025-07-25T15:43:38.000+02:00
diff --git a/src/style.css b/src/style.css
@@ -4,8 +4,8 @@
 
 body {
   padding-top: 4.5rem;
-  padding-left: .5rem;
-  padding-right: .5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   padding-bottom: 3rem;
   color: #5a5a5a;
   background-color: rgb(245, 245, 245);
diff --git a/templates/base.html.jinja b/templates/base.html.jinja
@@ -9,20 +9,27 @@
 
   <title>Python Docs Translation Dashboard</title>
 
-  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.0/css/bootstrap.min.css" rel="stylesheet">
   <link href="style.css" rel="stylesheet">
 </head>
 
 <body>
   <header>
     <nav class="navbar navbar-expand-md fixed-top">
+
       <div class="navbar-brand">
         <a href="./" style="all: unset; cursor: pointer;">
           <img src="logo.png" style="height: 2rem;" alt="Translation dashboard">
           <span style="font-size: 1.25rem; font-weight: bold;">Docs Translation Dashboard</span>
         </a>
       </div>
 
+      <div class="navbar-light bg-light">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+      </div>
+
       <div class="collapse navbar-collapse" id="navbarNavDropdown">
         <ul class="navbar-nav mr-auto">
           <li class="nav-item">
@@ -46,6 +53,10 @@
 
 </body>
 
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+  crossorigin="anonymous">
+</script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 
 </html>
