template: add bootstrap

Add the bootstrap web framework. Signed-off-by: Johannes Thumshirn <jth@kernel.org>
4 years ago · 80038d940a
parent 02a46a7a16
commit 80038d940a
2 changed files with 58 additions and 12 deletions
--- a/static/style.css
+++ b/static/style.css
@ -0,0 +1,27 @@
+body {
+	padding: 0;
+	margin: 0;
+	background: #ffffff;
+}
+
+.navbar {
+	background: #000000;
+}
+
+.nav-link,
+.navbar-brand {
+	color: #ffff;
+	cursor: pointer;
+}
+
+.nav-link {
+	margin-right: 1em !important;
+}
+
+.nav-link:hover {
+	color: #e70c0c;
+}
+
+.navbar-collapse {
+	justify-content: flex-end;
+}
--- a/templates/template.html
+++ b/templates/template.html
@ -2,22 +2,41 @@
 <head>
  <title>F.D.G.L e. V.</title>
  <meta charset="utf-8">
-  <link href="/static/style.css" rel="stylesheet">
+  <!-- Bootstrap CSS file -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
-  <header>
-    <img src="/static/logo.png" alt="logo">
-  </header>
-  <nav>
-    <a href="/">Home</a>
-    <a href="/verein.html">Verein</a>
-    <a href="/impressum.html">Impressum</a>
+  <nav class="navbar navbar-expand-md">
+    <a class="navbar-brand" href="/index.html"><img src="/static/logo.png" alt="logo"
+      height="100"></a>
+    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="main-navigation">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link" href="/index.html">Home</a>
+        </li>                                                                           <li class="nav-item">
+          <a class="nav-link" href="/verein.html">Verein</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/impressum.html">Impressum</a>
+        </li>
+      </ul>
+    </div>
  </nav>
+  <header class="page-header header container-fluid">
+  </header>
  <main>
  {% block content %}
  {% endblock %}
  </main>
-  <footer>
-   <p>&copy; F.D.G.L. e.V.</p>
+  <footer class="page-footer">
+    <div class="footer-copyright text-center">&copy; F.D.G.L. e.V.</div>
  </footer>
+  <!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
+  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
 </body>