initial commit

2024-10-20 23:07:17 +02:00
commit 56bd7c6111
45 changed files with 1058 additions and 0 deletions
@@ -0,0 +1,169 @@
+@import "fonts/cormant_garamont.css";
+//@import "fonts/crimson_pro.css";
+
+:root {
+    --header-font: "Cormorant Garamond", sans-serif;
+    --body-font: "Crimson Pro", sans-serif;
+}
+
+body {
+    height: 100vh;
+    overflow: hidden;
+
+    padding: 0;
+    margin: 0;
+
+    max-width: 100vw;
+
+    display: flex;
+
+    background-color: #1a1312;
+
+    color: #d78453;
+    font-size: 16px;
+
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Cormorant Garamond", sans-serif;
+    font-weight: 700;
+}
+
+span.muted, s {
+    color: #a8a8a8;
+}
+
+#map-container {
+    display: flex;
+    position: relative;
+    max-height: 100vh;
+    max-width: 100%;
+    flex: 1;
+}
+
+.region {
+    transition: all 0.3s ease;
+    //stroke: #3a3a3a;
+    stroke-dasharray: 10;
+}
+
+.region:hover {
+    stroke: #fca171;
+    fill: rgb(252, 161, 113, .3);
+}
+
+.legend {
+    display: flex;
+    flex-direction: column;
+    padding: 0 15px;
+    flex-grow: 1;
+
+    h1 {
+        font-size: 3rem;
+        font-weight: 700;
+        width: fit-content;
+        margin-bottom: 12px;
+        margin-top: 20px;
+
+        @media (max-width: 768px) {
+            font-size: 1rem;
+        }
+    }
+
+    .border {
+        width: 100%;
+        height: 1px;
+        background-color: #d78453;
+    }
+}
+
+@media (max-width: 1200px) {
+    body {
+        flex-direction: column;
+    }
+
+    .legend {
+        max-width: 100%;
+    }
+}
+
+.tooltip {
+    position: absolute;
+    display: none;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    border-radius: 5px;
+    z-index: 1000;
+    max-width: 300px;
+
+    flex-direction: column;
+    gap: 15px;
+
+    //-webkit-user-select: none;
+    //-ms-user-select: none;
+    //user-select: none;
+
+    h3 {
+        margin: 0;
+        font-size: 26px;
+    }
+
+    a {
+        color: #fff;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    .border {
+        width: 100%;
+        height: 1px;
+        background-color: #fff;
+    }
+
+    span {
+        font-size: 1.2rem;
+    }
+
+    .detailbox {
+        display: flex;
+        //align-items: center;
+        gap: 7px;
+
+        img,svg {
+            --hw: 23px;
+            height: var(--hw);
+            width: var(--hw);
+            min-width: var(--hw);
+        }
+
+        span {
+            font-size: 1.2rem;
+            //margin-top: 0px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        h3 {
+            font-size: 1.2rem;
+        }
+
+        span {
+            font-size: .8rem;
+        }
+
+        .detailbox {
+            img, svg {
+                --hw: 15px;
+            }
+
+            span {
+                font-size: .8rem;
+            }
+        }
+    }
+}