Font resizing stuff; looks better on desktop and mobile now

index.html

@@ -58,7 +58,8 @@
 				visibility: hidden;
 				font-family: "Noto Sans";
 /*				font-size:1.2em; */
-				font-size: max(0.8vmax, 16px);
+/*				font-size: max(0.8vmax, 16px);*/
+				font-size: 1.2em;
 			}
 
          .romanizationText {
@@ -201,12 +202,12 @@
 					.district {
 							stroke-width: 0.1;
 					}
-				/*	.translationText, .romanizationText {
+					.translationText, .romanizationText {
-						font-size: 1em;
+						font-size: 0.8em;
 					}
 					.languageText {
-						font-size: 0.8em;
+						font-size: 0.6em;
-					} */
+					}
 
 			} 
 

index.js

@@ -4,7 +4,7 @@ const languages = {
 			tamil: {name: "Tamil", color: "#75d795", code: "ta", text_align: "start", districts: []},
 			malayalam: {name: "Malayalam", color: "#ff7c7c", code: "ml", text_align: "end", districts: []},
 			kannada: {name: "Kannada", color: "#ffe77c", code: "kn", text_align: "middle", districts: []},
-			telugu: {name: "Telugu", color: "#7c9dff", code: "te", text_align: "middle", districts: []},
+			telugu: {name: "Telugu", color: "#7c9dff", code: "te", text_align: "start", districts: []},
 			marathi: {name: "Marathi", color: "#e0ff7c", code: "mr", text_align: "middle", districts: []},
 			konkani: {name: "Konkani", color: "#9b7cff", code: "gom", text_align: "end", districts: []},
 			hindi: {name: "Hindi", color: "#d17cff", code: "hi", text_align: "middle", districts: []},
@@ -232,7 +232,12 @@ const svg = d3.select("#svgContainer")
       //   .call(responsivefy);
 
 function drawMap(world) {
-	const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
+	let projection = null;
+	if (window.innerWidth > 1366) {
+		projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
+	} else {
+		projection = d3.geoMercator().fitWidth(mapWidth, world)
+	}
 	const path = d3.geoPath().projection(projection);
 
    requestAnimationFrame(() => {
@@ -240,9 +245,9 @@ function drawMap(world) {
     const bbox = newSvg.node().getBBox();
     const originalWidth = +newSvg.attr("width");
     newSvg
-//   .attr("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`)
+   .attr("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`)
-   .attr("viewBox", `0 ${bbox.y} ${originalWidth} ${bbox.height}`)
+//   .attr("viewBox", `0 ${bbox.y} ${originalWidth} ${bbox.height}`)
-//   .attr("width", mapHeight.toString())
+   .attr("width", bbox.width)
    .attr("height", bbox.height)
  //  .style("display", "block")
  //  .style("max-height", "100%"); // optional: keep it scalable in a flexbox
@@ -335,7 +340,9 @@ function drawMap(world) {
                   rtv += 25;
                }
 	       if (d.properties.lang_name == "Hindi") {
-		       rtv += 5 * parseFloat(getComputedStyle(document.documentElement).fontSize); // 5rem
+		       if (window.innerWidth > 768) {
+		       rtv += 3 * parseFloat(getComputedStyle(document.documentElement).fontSize); // rem
+		       }
 	       }
 
                return rtv