look changes

yohman · Feb 15, 2024 · 4f206ea · 4f206ea
1 parent 0734a92
commit 4f206ea
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 102 deletions.
diff --git a/buildinguse_change/css/style.css b/buildinguse_change/css/style.css
@@ -1,4 +1,9 @@
-body { margin: 0; padding: 0;font-family: sans-serif; }
+body { 
+    margin: 0;
+    padding: 0;
+    font-size:0.8;
+    font-family: sans-serif;
+ }
 .container { display: flex; }
 .map-container { flex: 2; }
 
@@ -29,6 +34,18 @@ body { margin: 0; padding: 0;font-family: sans-serif; }
     /* add shadow */
     box-shadow: 0 2px 4px rgba(0,0,0,0.5);
 }
+h1{
+    font-size: 1.2em;
+    margin: 0;
+    padding: 0;
+}
+
+p {
+    font-size: 0.7rem;
+    margin: 10;
+    padding: 10;
+    color:#555
+}
 .active {
     background-color: #007bff;
     color: #fff;
@@ -44,7 +61,7 @@ body { margin: 0; padding: 0;font-family: sans-serif; }
 
 .dropdown {
     padding:5px;
-    font-size: 1.2em;
+    font-size: 1em;
 }
 .options-topright {
     position: absolute;
@@ -62,9 +79,11 @@ body { margin: 0; padding: 0;font-family: sans-serif; }
     background-color: white;
     padding: 10px;
     border-radius: 5px;
+    font-size: 0.8rem;
 
 }
 .legend-container {
+    font-size: 0.8rem;
     position: absolute;
     bottom: 40px;
     left: 10px;
@@ -136,5 +155,11 @@ body { margin: 0; padding: 0;font-family: sans-serif; }
 
 }
 
+.popup-title {
+    font-size: 12px;
+    font-weight: bold;
+    border-top: 1px solid silver;
+    border-bottom: 1px solid silver;
+}
 
 
diff --git a/buildinguse_change/index.html b/buildinguse_change/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8" />
-    <title>Mapbox GL 3D Extrusion</title>
+    <title>東京物語2011年〜2016年</title>
     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
     <!-- <script src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js"></script>
     <link href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet" /> -->
@@ -34,18 +34,18 @@
         <!-- create a floating div in the top left of the page and put the div below in it -->
         <div class="title-bar">
             <div class="floating-div-content">
-                <h1>Tokyo from 2011 to 2016</h1>
-                <p>How building use has changed over time</p>
+                <h1>東京物語2011年〜2016年</h1>
+                <p>建物の用途は時間の経過とともにどのように変化したか</p>
             </div>
             <div class="year-selector">
                 <!--             
                 <button id="button-2011" class="year-button inactive" onclick="changeYear('2011')">2011</button>
                 <button id="button-2016" class="year-button active" onclick="changeYear('2016')">2016</button>
                  -->
                 <select id="dropdown" class="dropdown">
+                    <option value="集合住宅" selected>集合住宅</option>
                     <option value="独立住宅">独立住宅</option>
-                    <option value="集合住宅">集合住宅</option>
-                    <option value="事務所建築物" selected>事務所建築物</option>
+                    <option value="事務所建築物">事務所建築物</option>
                     <option value="住商併用建物">住商併用建物</option>
                     <option value="専用工場">専用工場</option>
                     <option value="住居併用工場">住居併用工場</option>
@@ -78,7 +78,8 @@ <h1>Tokyo from 2011 to 2016</h1>
         </select> -->
 
 
-        <div class="legend-container">Legend
+        <div class="legend-container">
+            Legend
             <div class="legend">
 
                 <!-- Add your info panel content here -->