.

base.css

@@ -7,7 +7,16 @@ Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 Internati
     padding: 0;
     box-sizing: border-box;
 }
+#st{
+    position: absolute;
+    left: -1080px;
+    top: -1080px;
+    font-size: 1em;
+    visibility: hidden;
+    white-space: nowrap;
+}
 main{
+    display: block;
 	padding-top: 70px;
 	padding-left: 6px;
 }
@@ -59,6 +68,15 @@ main{
     overflow: hidden;
 	max-height: 0;
 }
+.vnav{
+    max-height: none;
+    top: 0;
+    position: relative;
+    float: right;
+    width: auto;
+    height: 100%;
+    overflow: hidden;
+}
 .so-pane{
     display: none;
     overflow: hidden;
@@ -112,9 +130,18 @@ main{
 .nav-menu, .sort-menu{
 	display: none;
 }
-.menu a{
+.menu a, .vmenu a{
     display: block;
+}
+.menu a, .vmenu a, #st{
     padding: 24px 16px;
+    font-weight: bold;
+}
+.vmenu li{
+    float: left;
+}
+.vmenu a:hover{
+    background-color: transparent;
 }
 .hmb{
     cursor: pointer;
@@ -142,7 +169,7 @@ main{
 .hmb-line::after{
     top: -5px;
 }
-.nav-menu:checked ~ nav, .nav-open{
+.nav-menu:checked ~ #nav, .nav-open{
     max-height: 100%;
 }
 .nav-menu:checked ~ .hmb .hmb-line, .nav-open-hmb .hmb-line{
@@ -274,7 +301,7 @@ main{
     border-width: 1px;
 	margin: 2px;
 }
-@media (min-width: 560px){
+@media (min-width: 600px){
     .main-box > div{
         padding: 12px;
     }
@@ -307,6 +334,9 @@ main{
         float: right;
         width: auto;
     }
+    .vnav{
+        display: none;
+    }
     .menu li{
         float: left;
     }

dark.css

@@ -10,13 +10,13 @@ body{
 a{
 	color: #b0b0f0;
 }
-.header, .nav, footer, .so-pane{
+.header, nav, footer, .so-pane{
 	background-color: #1d1d1e;
 }
-.home-button > div, .sort-button > div, .menu a, .so-pane > form > div > * > *{
+.home-button > div, .sort-button > div, .menu a, .vmenu a, .so-pane > form > div > * > *{
 	color: #e0e0e0;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
+.home-button:hover, .menu a:hover, .vmenu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
 	background-color: #606061;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{

index.go.html

@@ -95,10 +95,14 @@
     </div>
     <input class="nav-menu" type="checkbox" id="nav-menu"/>
     <label class="hmb" for="nav-menu" title="Navigation Links"><span class="hmb-line"></span></label>
+    <nav class="vnav" id="vnav">
+        <ul class="vmenu no-lst-style" id="vmenu">
+        </ul>
+    </nav>
     <nav class="nav" id="nav">
-        <ul class="menu no-lst-style">
+        <ul class="menu no-lst-style" id="menu">
             {{ range .Data.GetHeaderLabels }}
-            <li><b><a href="{{ $.Data.GetHeaderLink . }}" class="no-dec" title="{{ . }}">{{ . }}</a></b></li>
+            <li><a href="{{ $.Data.GetHeaderLink . }}" class="no-dec" title="{{ . }}">{{ . }}</a></li>
             {{ end }}
         </ul>
     </nav>
@@ -188,8 +192,9 @@
     </p>
 	<p>
 	    This page's content is licensed under Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
-        <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/png/by-nc-nd.png" alt="License" height="16"></a>.
+        <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/png/by-nc-nd.png" alt="License" title="License" height="16"></a>.
 	</p>
 </footer>
+<div id="st"></div>
 </body>
 </html>

index.go.yml

@@ -1,15 +1,15 @@
 #This file is (C) Captain ALM
 #Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
-cssBaseURL: "https://cityuni.captainalm.com/resources/assets/base.css"
+cssBaseURL: "resources/assets/base.css"
-cssDarkURL: "https://cityuni.captainalm.com/resources/assets/dark.css"
+cssDarkURL: "resources/assets/dark.css"
-cssLightURL: "https://cityuni.captainalm.com/resources/assets/light.css"
+cssLightURL: "resources/assets/light.css"
-jScriptURL: "https://cityuni.captainalm.com/resources/assets/index.js"
+jScriptURL: "resources/assets/index.js"
-noVideoImageLocation: "https://cityuni.captainalm.com/resources/assets/novideo.png"
+noVideoImageLocation: "resources/assets/novideo.png"
-playVideoImageLocation: "https://cityuni.captainalm.com/resources/assets/video.png"
+playVideoImageLocation: "resources/assets/video.png"
-logoImageLocation: "https://cityuni.captainalm.com/resources/assets/logo.png"
+logoImageLocation: "resources/assets/logo.png"
-moonImageLocation: "https://cityuni.captainalm.com/resources/assets/moon.png"
+moonImageLocation: "resources/assets/moon.png"
-sunImageLocation: "https://cityuni.captainalm.com/resources/assets/sun.png"
+sunImageLocation: "resources/assets/sun.png"
-sortImageLocation: "https://cityuni.captainalm.com/resources/assets/sort.png"
+sortImageLocation: "resources/assets/sort.png"
 headerLinks:
   Main Portfolio: "https://portfolio.captainalm.com/"
   Root Site Home: "https://www.captainalm.com/"
@@ -51,8 +51,8 @@ about:
     I used to do Karate (Kyokushin Brown Belt) and I wish I could still fit my bike.
     Here is my <a href="https://cdn.captainalm.com/download/keys/alfred@captainalm.com.asc">GPG Key</a> for my email address.
     </p>
-  thumbnailLocation: "https://cityuni.captainalm.com/resources/assets/imageofyou_t.jpg"
+  thumbnailLocation: "resources/assets/imageofyou_t.jpg"
-  imageLocation: "https://cityuni.captainalm.com/resources/assets/imageofyou.jpg"
+  imageLocation: "resources/assets/imageofyou.jpg"
   imageAltText: "Image of me."
   birthYear: 2002
   contactEmail: "alfred@captainalm.com"
@@ -76,26 +76,26 @@ entries:
       Here is the repo: <a href="https://github.com/Captain-ALM/Ninjaformer-Processing">https://github.com/Captain-ALM/Ninjaformer-Processing</a>
       </p>
       <p>
-      The original video is available here: <a href="https://cityuni.captainalm.com/resources/stream/vid1.mp4">https://cityuni.captainalm.com/resources/stream/vid1.mp4</a>
+      The original video is available here: <a href="resources/stream/vid1.mp4">resources/stream/vid1.mp4</a>
       </p>
     startDate: "01/10/2021"
     endDate: "31/10/2021"
-    videoLocation: "https://cityuni.captainalm.com/resources/stream/vid-bootcamp.mp4"
+    videoLocation: "resources/stream/vid-bootcamp.mp4"
     videoContentType: "video/mp4"
     thumbnailLocations:
-      - "https://cityuni.captainalm.com/resources/assets/pic1_t.jpg"
+      - "resources/assets/pic1_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/pic2_t.jpg"
+      - "resources/assets/pic2_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/pic3_t.jpg"
+      - "resources/assets/pic3_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/bootcamp-1_t.jpg"
+      - "resources/assets/bootcamp-1_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/bootcamp-2_t.jpg"
+      - "resources/assets/bootcamp-2_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/bootcamp-3_t.jpg"
+      - "resources/assets/bootcamp-3_t.jpg"
     imageLocations:
-      - "https://cityuni.captainalm.com/resources/assets/pic1.jpg"
+      - "resources/assets/pic1.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/pic2.jpg"
+      - "resources/assets/pic2.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/pic3.jpg"
+      - "resources/assets/pic3.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/bootcamp-1.jpg"
+      - "resources/assets/bootcamp-1.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/bootcamp-2.jpg"
+      - "resources/assets/bootcamp-2.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/bootcamp-3.jpg"
+      - "resources/assets/bootcamp-3.jpg"
     imageAltTexts:
       - "Level select screen."
       - "Empty content interface (Gameplay)."
@@ -135,26 +135,26 @@ entries:
       Here is the repo: <a href="https://github.com/cityteaching/citygame2122-Captain-ALM"><strike><del>Not public due to university anti-plagiarism policy.</del></strike></a>
       </p>
       <p>
-      The original video is available here: <a href="https://cityuni.captainalm.com/resources/stream/vid2.mp4">https://cityuni.captainalm.com/resources/stream/vid2.mp4</a>
+      The original video is available here: <a href="resources/stream/vid2.mp4">resources/stream/vid2.mp4</a>
       </p>
     startDate: "25/02/2022"
     endDate: "08/05/2022"
-    videoLocation: "https://cityuni.captainalm.com/resources/stream/vid-ninjaformer-2022.mp4"
+    videoLocation: "resources/stream/vid-ninjaformer-2022.mp4"
     videoContentType: "video/mp4"
     thumbnailLocations:
-      - "https://cityuni.captainalm.com/resources/assets/pic4_t.jpg"
+      - "resources/assets/pic4_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/pic5_t.jpg"
+      - "resources/assets/pic5_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/pic6_t.jpg"
+      - "resources/assets/pic6_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/ninjaformer-1_t.jpg"
+      - "resources/assets/ninjaformer-1_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/ninjaformer-2_t.jpg"
+      - "resources/assets/ninjaformer-2_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/ninjaformer-3_t.jpg"
+      - "resources/assets/ninjaformer-3_t.jpg"
     imageLocations:
-      - "https://cityuni.captainalm.com/resources/assets/pic4.jpg"
+      - "resources/assets/pic4.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/pic5.jpg"
+      - "resources/assets/pic5.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/pic6.jpg"
+      - "resources/assets/pic6.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/ninjaformer-1.jpg"
+      - "resources/assets/ninjaformer-1.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/ninjaformer-2.jpg"
+      - "resources/assets/ninjaformer-2.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/ninjaformer-3.jpg"
+      - "resources/assets/ninjaformer-3.jpg"
     imageAltTexts:
       - "Cave level."
       - "Tutorial level."
@@ -179,22 +179,22 @@ entries:
       </p>
     startDate: "20/01/2022"
     endDate: "30/01/2022"
-    videoLocation: "https://cityuni.captainalm.com/resources/stream/vid-shadowwork.mp4"
+    videoLocation: "resources/stream/vid-shadowwork.mp4"
     videoContentType: "video/mp4"
     thumbnailLocations:
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-2_t.jpg"
+      - "resources/assets/shadowwork-2_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-3_t.jpg"
+      - "resources/assets/shadowwork-3_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-4_t.jpg"
+      - "resources/assets/shadowwork-4_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-5_t.jpg"
+      - "resources/assets/shadowwork-5_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-6_t.jpg"
+      - "resources/assets/shadowwork-6_t.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-1_t.jpg"
+      - "resources/assets/shadowwork-1_t.jpg"
     imageLocations:
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-2.jpg"
+      - "resources/assets/shadowwork-2.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-3.jpg"
+      - "resources/assets/shadowwork-3.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-4.jpg"
+      - "resources/assets/shadowwork-4.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-5.jpg"
+      - "resources/assets/shadowwork-5.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-6.jpg"
+      - "resources/assets/shadowwork-6.jpg"
-      - "https://cityuni.captainalm.com/resources/assets/shadowwork-1.jpg"
+      - "resources/assets/shadowwork-1.jpg"
     imageAltTexts:
       - "Main Menu screen."
       - "Controls screen."

index.js

@@ -14,6 +14,7 @@ function SetupJS() {
     SetupJSTheme()
     SetupJSHSO()
     SetupJSSOI()
+    SetupJSRSN()
 }
 function CreateEntry(id, name, videourl, videotype, start, end, duration) {
     EntryData[id] = {
@@ -77,7 +78,7 @@ function ReplaceHistory(url) {
     var s = true
     if (window.history) {
         if (window.history.replaceState) {
-            window.history.replaceState({}, "", url);
+            window.history.replaceState({}, "", url)
             s = false
         }
     }
@@ -290,4 +291,78 @@ function SortDurationD(a, b) {
     } else {
         return  1
     }
+}
+function SetupJSRSN() {
+    if (window.addEventListener) {
+        window.addEventListener("resize", PerformNavResize)
+    } else {
+        window.setAttribute("onresize", "PerformNavResize();")
+        window.onresize = PerformNavResize
+    }
+    PerformNavResize()
+}
+function PerformNavResize() {
+    var ww = 0
+    if (window.innerWidth && window.innerWidth !== 10) {
+        ww = window.innerWidth
+    } else {
+        var ht = document.getElementsByTagName("html")
+        if (ht && ht.length > 0) {ww = ht[0].clientWidth;}
+    }
+    if (ww > 0) {
+        var maxbarsz = ww - 342;
+        var men = document.getElementById("menu")
+        var vmen = document.getElementById("vmenu")
+        if (men && vmen) {
+            if (ww > 679) {
+                while (vmen.childNodes.length > 0) {InsertBefore(men, vmen.removeChild(vmen.childNodes[vmen.childNodes.length - 1]));}
+            } else {
+                var vmeni
+                var mensz = 0
+                var menc = []
+                var imenc = 0
+                for (vmeni = 0; vmeni < vmen.childNodes.length; vmeni++) {
+                    if (vmen.childNodes[vmeni].nodeType === Node.ELEMENT_NODE) {
+                        if (mensz+vmen.childNodes[vmeni].clientWidth > maxbarsz) {menc[imenc] = vmen.childNodes[vmeni]; imenc++;}
+                        mensz += vmen.childNodes[vmeni].clientWidth
+                    }
+                }
+                if (menc.length > 0) {
+                    for (vmeni = 0; vmeni < menc.length; vmeni++) {vmen.removeChild(menc[vmeni]);}
+                    for (vmeni = menc.length - 1; vmeni >= 0; vmeni--) {InsertBefore(men, menc[vmeni]);}
+                } else {
+                    for (vmeni = 0; vmeni < men.childNodes.length; vmeni++) {
+                        if (men.childNodes[vmeni].nodeType === Node.ELEMENT_NODE) {
+                            var mena = GetFirstSubElement(men.childNodes[vmeni], 0)
+                            var menaw = GetNavTextWidth(mena.textContent)
+                            if (mensz+menaw <= maxbarsz) {menc[imenc] = men.childNodes[vmeni]; imenc++;}
+                            mensz += menaw
+                        }
+                    }
+                    for (vmeni = 0; vmeni < menc.length; vmeni++) {vmen.appendChild(men.removeChild(menc[vmeni]));}
+                }
+            }
+        }
+    }
+}
+function GetFirstSubElement(t,r) {
+    for (var gfsei = 0; gfsei < t.childNodes.length; gfsei++) {
+        if (t.childNodes[gfsei].nodeType === Node.ELEMENT_NODE) {
+            if (r < 1) {return t.childNodes[gfsei];} else {return GetFirstSubElement(t.childNodes[gfsei], r - 1);}
+        }
+    }
+    return t
+}
+function InsertBefore(p,c) {
+    if (p.childNodes.length > 0) {p.insertBefore(c, p.childNodes[0]);} else {p.appendChild(c);}
+}
+function GetNavTextWidth(s) {
+    var st = document.getElementById("st")
+    if (st) {
+        st.textContent = s
+        var trw = st.clientWidth
+        st.textContent = ""
+        return trw
+    }
+    return 8 * s.length + 32
 }

light.css

@@ -10,13 +10,13 @@ body{
 a{
     color: #4f4fff;
 }
-.header, .nav, footer, .so-pane{
+.header, nav, footer, .so-pane{
     background-color: #e2e2e1;
 }
-.home-button > div, .sort-button > div, .menu a, .so-pane > form > div > * > *{
+.home-button > div, .sort-button > div, .menu a, .vmenu a, .so-pane > form > div > * > *{
     color: #1f1f1f;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
+.home-button:hover, .menu a:hover, .vmenu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > form > div > span > input, .so-pane > form > div > div > select{
     background-color: #9f9f9e;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{