KartoffelChipss/TensuraMap
1
1
Fork 0
Code Issues Pull Requests Actions Releases Activity

initial commit

Browse Source
This commit is contained in:
KartoffelChips
2024-10-20 23:07:17 +02:00
commit 56bd7c6111
45 changed files with 1058 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/.gitignore
+5
View File
@@ -0,0 +1,5 @@
# Ignore all CSS files
*.css
# Ignore all CSS map files
*.css.map
css/fonts/cormant_garamont.css
+80
View File
@@ -0,0 +1,80 @@
/* cormorant-garamond-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-300italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-500italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-600italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 600;
src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 700;
src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-700italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 700;
src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
css/fonts/crimson_pro.css
+128
View File
@@ -0,0 +1,128 @@
/* crimson-pro-200 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: normal;
font-weight: 200;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-200italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: italic;
font-weight: 200;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: normal;
font-weight: 300;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-300italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: italic;
font-weight: 300;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: normal;
font-weight: 400;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: italic;
font-weight: 400;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: normal;
font-weight: 500;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-500italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: italic;
font-weight: 500;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: normal;
font-weight: 600;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-600italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: italic;
font-weight: 600;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: normal;
font-weight: 700;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-700italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: italic;
font-weight: 700;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-800 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: normal;
font-weight: 800;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-800italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: italic;
font-weight: 800;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-900 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: normal;
font-weight: 900;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* crimson-pro-900italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Crimson Pro';
font-style: italic;
font-weight: 900;
src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
css/styles.scss
+169
View File
@@ -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;
}
}
}
}