Chandler Swift
b5531b7231
This appears to fix an issue (presumably where .onresize was being overwritten?) where the width of the document wouldn't update correctly. This doesn't solve that whole class of issues -- there are many assumptions made, including that the orientation or device type of the page won't change after load (so e.g. rotating a device can cause issues), but those are systemic enough that I'm not going to dare to fix them this time!
42 lines
1.1 KiB
HTML
42 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ireland 2024</title>
|
|
<link rel="stylesheet" href="dist/css/storymap.css">
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#mapdiv {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
.vco-storymap .vco-caption {
|
|
font-size: 16px !important;
|
|
line-height: 18px !important;
|
|
}
|
|
.vco-storymap p {
|
|
font-size: 20px !important;
|
|
}
|
|
.vco-storymap p a {
|
|
background-position: 0 24px !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="mapdiv"></div>
|
|
<script type="text/javascript" src="dist/js/storymap.js"></script>
|
|
<script>
|
|
const storymap_options = {};
|
|
const storymap = new KLStoryMap.StoryMap('mapdiv', 'data.json', storymap_options);
|
|
document.addEventListener("resize", function(event) {
|
|
storymap.updateDisplay(); // this isn't automatic
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|