add base map
This commit is contained in:
Matteo Rosati
@@ -1,37 +1,4 @@
|
|||||||
html {
|
#map {
|
||||||
font-family:
|
width: 100%;
|
||||||
"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
height: 100vh;
|
||||||
"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;
|
|
||||||
}
|
}
|
||||||
|
|||||||
75
frontend/static/frontend/css/reset.css
Normal file
75
frontend/static/frontend/css/reset.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
@@ -9,14 +9,26 @@
|
|||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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 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' %}">
|
<link rel="stylesheet" href="{% static 'frontend/css/base.css' %}">
|
||||||
{% block extra_css %}{% endblock %}
|
<link rel="stylesheet" href="{% static 'frontend/css/reset.css' %}">
|
||||||
<script
|
<link
|
||||||
src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"
|
rel="stylesheet"
|
||||||
integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz"
|
href="https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/5.7.3/maplibre-gl.min.css"
|
||||||
|
integrity="sha512-/UDhp6sLyQgK2cEDHUYEyJFXI7+WgJ+nuxTqETJkT8XlfLiMSt2xQblBVnCjE5rGJMBr5sOWaEhflmtBL1Psww=="
|
||||||
crossorigin="anonymous"
|
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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% block content %} {% endblock %}
|
{% 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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -3,8 +3,16 @@
|
|||||||
{% block title %}Home{% endblock %}
|
{% block title %}Home{% endblock %}
|
||||||
|
|
||||||
{% block content%}
|
{% block content%}
|
||||||
<div class="home">
|
<div id="map"></div>
|
||||||
<h1>Ciao</h1>
|
{% endblock %}
|
||||||
<p>Static CSS is wired up through WhiteNoise. Tweak this file to verify changes.</p>
|
|
||||||
</div>
|
{% 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 %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user