style: centre politics

Author: francelu

website/js/geopolitics-conflicts.js

@@ -514,7 +514,7 @@
     const root = d3.select(selectors.mapRoot);
     root.selectAll("*").remove();
 
-    const width = 980;
+    const width = 900;
     const height = 520;
 
     const svg = root
@@ -686,7 +686,7 @@
     const root = d3.select(selectors.eventList);
     root.selectAll("*").remove();
 
-    root.append("h3").text("Some interesting years:");
+    root.append("h3").text("Some interesting years:").style("width", "100%");
 
     root.append("p")
       .attr("class", "geo-highlight-event")

website/js/never-medaled.js

@@ -312,7 +312,7 @@
     style.textContent = `
       #never-medaled-viz {
         width: 100%;
-        max-width: 1280px;
+        max-width: 1440px;
         margin: 0 auto;
         color: white;
       }
@@ -348,8 +348,9 @@
       .never-layout {
         display: grid;
         grid-template-columns: 1.2fr 0.8fr;
+        gap: 34px;
         align-items: start;
-        margin-top: 50px;
+        margin-top: 12px;
       }
 
       .never-map-panel,
@@ -763,7 +764,7 @@
   }
 
   function drawMap(container, data) {
-    const width = 800;
+    const width = 900;
     const height = 520;
 
     const svg = container.append("svg")

website/styles.css

@@ -512,7 +512,6 @@ h4 {
 }
 
 .geo-intro {
-  width: 100%;
   max-width: none;
   margin: 0 auto 18px;
   text-align: center;
@@ -524,14 +523,18 @@ h4 {
 
 .geo-layout {
   display: grid;
-  grid-template-columns: 1.35fr 0.9fr;
+  grid-template-columns: 1.2fr 0.8fr;
   gap: 34px;
   align-items: start;
   margin-top: 12px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1440px;
 }
 
 .geo-map-column {
   width: 100%;
+  position: relative;
 }
 
 #geopolitics-map-viz {
@@ -749,10 +752,6 @@ h4 {
   }
 }
 
-.geo-map-column {
-  position: relative;
-}
-
 .geo-map-column .geo-hover-text {
   margin-bottom: 0px;
   transform: translateY(-10px);