add base map

2026-02-11 00:19:38 +01:00
parent 85efbf4093
commit 160a8bf020
4 changed files with 107 additions and 45 deletions
--- a/frontend/static/frontend/css/base.css
+++ b/frontend/static/frontend/css/base.css
@@ -1,37 +1,4 @@
-html {
-    font-family:
-        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-        "Liberation Mono", "Courier New", monospace;
-}
-
-body {
-    background: radial-gradient(
-        circle at top,
-        #f2f1ea 0%,
-        #e6e1d7 42%,
-        #d8d2c5 100%
-    );
-    color: #2b2620;
-    margin: 0;
-    min-height: 100vh;
-}
-
-.home {
-    max-width: 960px;
-    margin: 0 auto;
-    padding: 96px 24px 80px;
-}
-
-.home h1 {
-    font-size: clamp(2.4rem, 4vw, 3.6rem);
-    margin: 0 0 16px;
-    letter-spacing: -0.03em;
-}
-
-.home p {
-    font-size: 1.05rem;
-    line-height: 1.7;
-    margin: 0;
-    max-width: 560px;
-    color: #4a4136;
+#map {
+    width: 100%;
+    height: 100vh;
 }
--- a/frontend/static/frontend/css/reset.css
+++ b/frontend/static/frontend/css/reset.css
@@ -0,0 +1,75 @@
+/* 1. Use a more-intuitive box-sizing model */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+*:not(dialog) {
+    margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+    html {
+        interpolate-size: allow-keywords;
+    }
+}
+
+body {
+    /* 4. Add accessible line-height */
+    line-height: 1.5;
+    /* 5. Improve text rendering */
+    -webkit-font-smoothing: antialiased;
+}
+
+/* 6. Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+}
+
+/* 9. Improve line wrapping */
+p {
+    text-wrap: pretty;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-wrap: balance;
+}
+
+/*
+  10. Create a root stacking context
+*/
+#root,
+#__next {
+    isolation: isolate;
+}
--- a/frontend/templates/frontend/base.html
+++ b/frontend/templates/frontend/base.html
@@ -9,14 +9,26 @@
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="{% static 'frontend/css/base.css' %}">
-        {% block extra_css %}{% endblock %}
-        <script
-            src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"
-            integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz"
+        <link rel="stylesheet" href="{% static 'frontend/css/reset.css' %}">
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/5.7.3/maplibre-gl.min.css"
+            integrity="sha512-/UDhp6sLyQgK2cEDHUYEyJFXI7+WgJ+nuxTqETJkT8XlfLiMSt2xQblBVnCjE5rGJMBr5sOWaEhflmtBL1Psww=="
            crossorigin="anonymous"
-        ></script>
+            referrerpolicy="no-referrer"
+        />
+        {% block extra_css %}{% endblock %}
+        <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js" integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz" crossorigin="anonymous"></script>
+        {% block js_top %}{% endblock %}
    </head>
    <body>
        {% block content %} {% endblock %}
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/5.7.3/maplibre-gl.min.js"
+            integrity="sha512-Gx0xDElSrwjxjT9mjMg+OsoA0ekI8IkwuPurccWk5afkFBzXQHE0eQsQ7syopu9MJ0HD1EYGmVXjY8SPZt5FAg=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        ></script>
+        {% block js_bottom %}{% endblock %}
    </body>
 </html>
--- a/frontend/templates/frontend/home.html
+++ b/frontend/templates/frontend/home.html
@@ -3,8 +3,16 @@
 {% block title %}Home{% endblock %}

 {% block content%}
-<div class="home">
-    <h1>Ciao</h1>
-    <p>Static CSS is wired up through WhiteNoise. Tweak this file to verify changes.</p>
-</div>
+<div id="map"></div>
+{% endblock %}
+
+{% block js_bottom %}
+<script>
+  var map = new maplibregl.Map({
+    container: 'map',
+    style: 'https://api.maptiler.com/maps/019be805-c88e-7c8b-9850-bc704d72e604/style.json?key=8nmgHEIZQiIgqQj3RZNa',
+    center: [-74.5, 40],
+    zoom: 9
+  });
+</script>
 {% endblock %}