Basic page setup

- Add bootstrap
 - Add other pages
 - (responsive) navbar with links to each page
This commit is contained in:
bluepython508
2024-03-05 21:13:57 +00:00
parent d6ef3d511c
commit 92ad40d32d
4 changed files with 29 additions and 2 deletions

View File

@@ -2,9 +2,24 @@
<html>
<head>
<title>{% block title %}{% endblock title %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<nav></nav>
{% block main %}{% endblock main %}
<nav class="navbar navbar-expand-lg bg-light">
<a class="navbar-brand ms-2" href="/">Home</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="navbar-nav">
<li class="nav-item ms-2"><a class="nav-link {% block home_active %}{% endblock %}" href="/">Home</a></li>
<li class="nav-item ms-2"><a class="nav-link {% block history_active %}{% endblock %}" href="/history.html">History</a></li>
<li class="nav-item ms-2"><a class="nav-link {% block visit_active %}{% endblock %}" href="/visit.html">Visit</a></li>
</ul>
</div>
</nav>
{% block main %}{% endblock main %}
<!-- At end of body to avoid requiring downloading JS for first render -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>