style: seperate navbar and footer from main tag

tfuxu · tfuxu · commit 1435a1ff2268 · 2023-06-20T15:58:48.000+02:00
diff --git a/index.html b/index.html
@@ -14,44 +14,44 @@
         <link rel="canonical" href="https://python-pillow.org/">
     </head>
     <body>
+        <nav class="navbar navbar-expand-lg bg-dark">
+            <div class="container-fluid">
+                <a class="navbar-brand" href="/">
+                    <img src="images/pillow-logo-light-text-1280x640.png"
+                         height="120"
+                         alt="Pillow Logo"
+                         class="d-inline-block align-text-top">
+                </a>
+                <ul class="nav">
+                    <li class="nav-item">
+                        <a class="nav-link"
+                           target="_blank"
+                           href="https://github.com/python-pillow/Pillow">
+                        <i class="fab fa-github fa-2x text-light"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link"
+                           target="_blank"
+                           href="https://www.facebook.com/Python-Pillow-102023528073709">
+                        <i class="fab fa-facebook fa-2x text-light"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link"
+                           target="_blank"
+                           href="https://twitter.com/PythonPillow">
+                        <i class="fab fa-twitter fa-2x text-light"></i></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link"
+                           target="_blank"
+                           href="https://fosstodon.org/@pillow"
+                           rel="me">
+                        <i class="fab fa-mastodon fa-2x text-light"></i></a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
         <main>
-            <nav class="navbar navbar-expand-lg bg-dark">
-                <div class="container-fluid">
-                    <a class="navbar-brand" href="/">
-                        <img src="images/pillow-logo-light-text-1280x640.png"
-                             height="120"
-                             alt="Pillow Logo"
-                             class="d-inline-block align-text-top">
-                    </a>
-                    <ul class="nav">
-                        <li class="nav-item">
-                            <a class="nav-link"
-                               target="_blank"
-                               href="https://github.com/python-pillow/Pillow">
-                            <i class="fab fa-github fa-2x text-light"></i></a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link"
-                               target="_blank"
-                               href="https://www.facebook.com/Python-Pillow-102023528073709">
-                            <i class="fab fa-facebook fa-2x text-light"></i></a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link"
-                               target="_blank"
-                               href="https://twitter.com/PythonPillow">
-                            <i class="fab fa-twitter fa-2x text-light"></i></a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link"
-                               target="_blank"
-                               href="https://fosstodon.org/@pillow"
-                               rel="me">
-                            <i class="fab fa-mastodon fa-2x text-light"></i></a>
-                        </li>
-                    </ul>
-                </div>
-            </nav>
             <div class="container mt-5">
                 <div class="p-5 mb-4 bg-pillow rounded-3">
                     <div class="container-fluid p-5 bg-white border rounded-1">
@@ -132,16 +132,16 @@ <h2 class="py-5">For Enterprise</h2>
                             Free Trial</a>
                         </p>
                     </div>
-                    <footer class="pt-3 mt-4 border-top">
-                        <p>
-                            &copy; 1995-2011 Fredrik Lundh and contributors. &copy; 2010-2023 Jeffrey A. Clark (Alex) and 
-                            <a target="_blank"href="https://github.com/python-pillow/Pillow/graphs/contributors">contributors</a>. 
-                            Logo by Alastair Houghton. Psychedelic art by Jeremy Kun.
-                        </p>
-                    </footer>
                 </div>
             </div>
         </main>
+        <footer class="container-fluid pt-3 mt-4 border-top text-center">
+            <p>
+                &copy; 1995-2011 Fredrik Lundh and contributors. &copy; 2010-2023 Jeffrey A. Clark (Alex) and 
+                <a target="_blank"href="https://github.com/python-pillow/Pillow/graphs/contributors">contributors</a>. 
+                Logo by Alastair Houghton. Psychedelic art by Jeremy Kun.
+            </p>
+        </footer>
         <script src="dist/bundle.js"></script>
     </body>
 </html>
