Update index.html
Browse files- index.html +24 -2
index.html
CHANGED
|
@@ -13,10 +13,16 @@
|
|
| 13 |
}
|
| 14 |
#viz {
|
| 15 |
width: 100%;
|
| 16 |
-
height:
|
| 17 |
position: relative;
|
| 18 |
overflow: hidden;
|
| 19 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 20 |
#popup {
|
| 21 |
display: none;
|
| 22 |
position: absolute;
|
|
@@ -63,6 +69,22 @@
|
|
| 63 |
background-color: #f8f8f8;
|
| 64 |
border-top: 1px solid #ddd;
|
| 65 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 66 |
</style>
|
| 67 |
</head>
|
| 68 |
<body>
|
|
@@ -89,7 +111,7 @@ function createVisualization() {
|
|
| 89 |
|
| 90 |
// Set dynamic width and height for responsiveness
|
| 91 |
const width = window.innerWidth;
|
| 92 |
-
const height = window.innerHeight;
|
| 93 |
|
| 94 |
// Determine if we're on mobile (width < 768px is a common breakpoint)
|
| 95 |
const isMobile = width < 768;
|
|
|
|
| 13 |
}
|
| 14 |
#viz {
|
| 15 |
width: 100%;
|
| 16 |
+
height: 67vh;
|
| 17 |
position: relative;
|
| 18 |
overflow: hidden;
|
| 19 |
}
|
| 20 |
+
|
| 21 |
+
@media (max-width: 768px) {
|
| 22 |
+
#viz {
|
| 23 |
+
height: 100vh;
|
| 24 |
+
}
|
| 25 |
+
}
|
| 26 |
#popup {
|
| 27 |
display: none;
|
| 28 |
position: absolute;
|
|
|
|
| 69 |
background-color: #f8f8f8;
|
| 70 |
border-top: 1px solid #ddd;
|
| 71 |
}
|
| 72 |
+
@media (max-width: 768px) {
|
| 73 |
+
#popup {
|
| 74 |
+
max-width: 280px;
|
| 75 |
+
font-size: 12px;
|
| 76 |
+
}
|
| 77 |
+
|
| 78 |
+
.intro {
|
| 79 |
+
padding: 0 20px;
|
| 80 |
+
margin-bottom: 20px;
|
| 81 |
+
}
|
| 82 |
+
|
| 83 |
+
h1 {
|
| 84 |
+
font-size: 24px;
|
| 85 |
+
margin-bottom: 15px;
|
| 86 |
+
}
|
| 87 |
+
}
|
| 88 |
</style>
|
| 89 |
</head>
|
| 90 |
<body>
|
|
|
|
| 111 |
|
| 112 |
// Set dynamic width and height for responsiveness
|
| 113 |
const width = window.innerWidth;
|
| 114 |
+
const height = isMobile ? window.innerHeight : window.innerHeight * 0.67;
|
| 115 |
|
| 116 |
// Determine if we're on mobile (width < 768px is a common breakpoint)
|
| 117 |
const isMobile = width < 768;
|