diff --git a/base.css b/base.css index 6975bba..e76ec62 100644 --- a/base.css +++ b/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; } diff --git a/dark.css b/dark.css index 8d78d36..d6c329e 100644 --- a/dark.css +++ b/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{ diff --git a/index.go.html b/index.go.html index 7feec80..2a4db27 100644 --- a/index.go.html +++ b/index.go.html @@ -95,10 +95,14 @@ + @@ -188,8 +192,9 @@

This page's content is licensed under Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International - License. + License.

+
\ No newline at end of file diff --git a/index.go.yml b/index.go.yml index 9b77960..63df6fe 100644 --- a/index.go.yml +++ b/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" -cssDarkURL: "https://cityuni.captainalm.com/resources/assets/dark.css" -cssLightURL: "https://cityuni.captainalm.com/resources/assets/light.css" -jScriptURL: "https://cityuni.captainalm.com/resources/assets/index.js" -noVideoImageLocation: "https://cityuni.captainalm.com/resources/assets/novideo.png" -playVideoImageLocation: "https://cityuni.captainalm.com/resources/assets/video.png" -logoImageLocation: "https://cityuni.captainalm.com/resources/assets/logo.png" -moonImageLocation: "https://cityuni.captainalm.com/resources/assets/moon.png" -sunImageLocation: "https://cityuni.captainalm.com/resources/assets/sun.png" -sortImageLocation: "https://cityuni.captainalm.com/resources/assets/sort.png" +cssBaseURL: "resources/assets/base.css" +cssDarkURL: "resources/assets/dark.css" +cssLightURL: "resources/assets/light.css" +jScriptURL: "resources/assets/index.js" +noVideoImageLocation: "resources/assets/novideo.png" +playVideoImageLocation: "resources/assets/video.png" +logoImageLocation: "resources/assets/logo.png" +moonImageLocation: "resources/assets/moon.png" +sunImageLocation: "resources/assets/sun.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 GPG Key for my email address.

- thumbnailLocation: "https://cityuni.captainalm.com/resources/assets/imageofyou_t.jpg" - imageLocation: "https://cityuni.captainalm.com/resources/assets/imageofyou.jpg" + thumbnailLocation: "resources/assets/imageofyou_t.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: https://github.com/Captain-ALM/Ninjaformer-Processing

- The original video is available here: https://cityuni.captainalm.com/resources/stream/vid1.mp4 + The original video is available here: resources/stream/vid1.mp4

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" - - "https://cityuni.captainalm.com/resources/assets/pic2_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/pic3_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/bootcamp-1_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/bootcamp-2_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/bootcamp-3_t.jpg" + - "resources/assets/pic1_t.jpg" + - "resources/assets/pic2_t.jpg" + - "resources/assets/pic3_t.jpg" + - "resources/assets/bootcamp-1_t.jpg" + - "resources/assets/bootcamp-2_t.jpg" + - "resources/assets/bootcamp-3_t.jpg" imageLocations: - - "https://cityuni.captainalm.com/resources/assets/pic1.jpg" - - "https://cityuni.captainalm.com/resources/assets/pic2.jpg" - - "https://cityuni.captainalm.com/resources/assets/pic3.jpg" - - "https://cityuni.captainalm.com/resources/assets/bootcamp-1.jpg" - - "https://cityuni.captainalm.com/resources/assets/bootcamp-2.jpg" - - "https://cityuni.captainalm.com/resources/assets/bootcamp-3.jpg" + - "resources/assets/pic1.jpg" + - "resources/assets/pic2.jpg" + - "resources/assets/pic3.jpg" + - "resources/assets/bootcamp-1.jpg" + - "resources/assets/bootcamp-2.jpg" + - "resources/assets/bootcamp-3.jpg" imageAltTexts: - "Level select screen." - "Empty content interface (Gameplay)." @@ -135,26 +135,26 @@ entries: Here is the repo: Not public due to university anti-plagiarism policy.

- The original video is available here: https://cityuni.captainalm.com/resources/stream/vid2.mp4 + The original video is available here: resources/stream/vid2.mp4

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" - - "https://cityuni.captainalm.com/resources/assets/pic5_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/pic6_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/ninjaformer-1_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/ninjaformer-2_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/ninjaformer-3_t.jpg" + - "resources/assets/pic4_t.jpg" + - "resources/assets/pic5_t.jpg" + - "resources/assets/pic6_t.jpg" + - "resources/assets/ninjaformer-1_t.jpg" + - "resources/assets/ninjaformer-2_t.jpg" + - "resources/assets/ninjaformer-3_t.jpg" imageLocations: - - "https://cityuni.captainalm.com/resources/assets/pic4.jpg" - - "https://cityuni.captainalm.com/resources/assets/pic5.jpg" - - "https://cityuni.captainalm.com/resources/assets/pic6.jpg" - - "https://cityuni.captainalm.com/resources/assets/ninjaformer-1.jpg" - - "https://cityuni.captainalm.com/resources/assets/ninjaformer-2.jpg" - - "https://cityuni.captainalm.com/resources/assets/ninjaformer-3.jpg" + - "resources/assets/pic4.jpg" + - "resources/assets/pic5.jpg" + - "resources/assets/pic6.jpg" + - "resources/assets/ninjaformer-1.jpg" + - "resources/assets/ninjaformer-2.jpg" + - "resources/assets/ninjaformer-3.jpg" imageAltTexts: - "Cave level." - "Tutorial level." @@ -179,22 +179,22 @@ entries:

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" - - "https://cityuni.captainalm.com/resources/assets/shadowwork-3_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/shadowwork-4_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/shadowwork-5_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/shadowwork-6_t.jpg" - - "https://cityuni.captainalm.com/resources/assets/shadowwork-1_t.jpg" + - "resources/assets/shadowwork-2_t.jpg" + - "resources/assets/shadowwork-3_t.jpg" + - "resources/assets/shadowwork-4_t.jpg" + - "resources/assets/shadowwork-5_t.jpg" + - "resources/assets/shadowwork-6_t.jpg" + - "resources/assets/shadowwork-1_t.jpg" imageLocations: - - "https://cityuni.captainalm.com/resources/assets/shadowwork-2.jpg" - - "https://cityuni.captainalm.com/resources/assets/shadowwork-3.jpg" - - "https://cityuni.captainalm.com/resources/assets/shadowwork-4.jpg" - - "https://cityuni.captainalm.com/resources/assets/shadowwork-5.jpg" - - "https://cityuni.captainalm.com/resources/assets/shadowwork-6.jpg" - - "https://cityuni.captainalm.com/resources/assets/shadowwork-1.jpg" + - "resources/assets/shadowwork-2.jpg" + - "resources/assets/shadowwork-3.jpg" + - "resources/assets/shadowwork-4.jpg" + - "resources/assets/shadowwork-5.jpg" + - "resources/assets/shadowwork-6.jpg" + - "resources/assets/shadowwork-1.jpg" imageAltTexts: - "Main Menu screen." - "Controls screen." diff --git a/index.js b/index.js index 6b25dbb..f0a4314 100644 --- a/index.js +++ b/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 } \ No newline at end of file diff --git a/light.css b/light.css index 03f218c..208b748 100644 --- a/light.css +++ b/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{