corsica-van-trip/index.html at main · bogdanro/corsica-van-trip · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Corsica, day by day — swipe through the trip</title>
<meta name="description" content="The Corsica route one day at a time: a per-day map with start and finish flags, the day's running order, photos, and the detail folded away.">
<meta name="color-scheme" content="light">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="preconnect" href="https://a.tile.opentopomap.org">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Inter:wght@400..700&display=swap">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/days.css">
</head>
<body class="deckpage">

<div class="shell">
  <aside class="rail">
    <div class="rail-hd">
      <span class="brand">CORSICA <b>·</b> day by day</span>
      <div id="deckver" role="group" aria-label="Trip version"></div>
    </div>
    <nav class="rail-list" id="rail" aria-label="Days"></nav>
    <div class="rail-ft">
      <h4>Reference</h4>
      <a href="#" data-ref="stay">Hotels</a><a href="#" data-ref="camping">Camping</a>
      <a href="#" data-ref="hikes">Hikes</a><a href="#" data-ref="water">Beaches</a>
      <a href="#" data-ref="vegan">Vegan food</a><a href="#" data-ref="logistics">Logistics</a>
      <a href="#" data-ref="money">Budget</a><a href="#" data-ref="map-section">Whole map</a>
    </div>
  </aside>

  <main class="main">
    <div class="deck" id="deck" tabindex="0" aria-label="Days, swipe or use arrow keys"></div>
    <div class="bar">
      <button id="prev" type="button" aria-label="Previous day">‹</button>
      <button id="next" type="button" aria-label="Next day">›</button>
      <span class="pos" id="poslbl">1 / 16</span>
      <span class="track"><i id="prog"></i></span>
      <span class="hint">swipe, or ← →</span>
    </div>
  </main>
</div>

<script>
  /* This page used to be the long reference page, which now lives at van.html.
     Keep its old deep links working: #day7 becomes the carousel's #d7, and the
     section anchors go to the reference page they still belong to. */
  (function () {
    var SECTIONS = ['stay','camping','hikes','water','vegan','logistics','money',
                    'map-section','itinerary-section'];
    function remap() {
      var m = location.hash.match(/^#day(\d+)$/);
      if (m) { location.replace('#d' + m[1]); return; }
      var id = location.hash.slice(1);
      if (SECTIONS.indexOf(id) > -1) {
        var v = (location.search.match(/[?&]v=([a-z]+)/) || [])[1];
        location.replace((v === 'hotels' ? 'hotels.html'
                        : v === 'paced' ? 'paced.html' : 'van.html') + '#' + id);
      }
    }
    remap();
    // also catch same-document fragment navigation from an old in-page link
    addEventListener('hashchange', remap);
  })();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<script>
  // pick the dataset before the renderer runs
  (function () {
    var v = (location.search.match(/[?&]v=([a-z]+)/) || [])[1];
    document.write('<scr' + 'ipt src="assets/js/' +
      (v === 'hotels' ? 'data-hotels.js' : v === 'paced' ? 'data-paced.js' : 'data.js') +
      '"><\/scr' + 'ipt>');
  })();
</script>
<script src="assets/js/days.js"></script>
</body>
</html>