From: Max Value Date: Sun, 19 Apr 2026 23:55:41 +0000 (+0100) Subject: predemo commit X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=e562af5c908b27acf753ffc26720ff21315bb3b3;p=chester predemo commit --- diff --git a/about/index.html b/about/index.html index 70961ca..345b2bf 100644 --- a/about/index.html +++ b/about/index.html @@ -39,39 +39,44 @@
diff --git a/commercial/groke/index.html b/commercial/groke/index.html index d533067..35f7706 100644 --- a/commercial/groke/index.html +++ b/commercial/groke/index.html @@ -13,39 +13,44 @@
diff --git a/commercial/live-music/index.html b/commercial/live-music/index.html index f364dbb..887d986 100644 --- a/commercial/live-music/index.html +++ b/commercial/live-music/index.html @@ -13,39 +13,44 @@
diff --git a/commercial/on-set/index.html b/commercial/on-set/index.html index 3038256..e79a717 100644 --- a/commercial/on-set/index.html +++ b/commercial/on-set/index.html @@ -13,39 +13,44 @@
diff --git a/contacts/index.html b/contacts/index.html index 4d6229e..010af74 100644 --- a/contacts/index.html +++ b/contacts/index.html @@ -13,39 +13,44 @@
diff --git a/cv/index.html b/cv/index.html index 41b653f..10e9d7f 100644 --- a/cv/index.html +++ b/cv/index.html @@ -12,39 +12,44 @@
diff --git a/index.html b/index.html index f328970..d34026e 100644 --- a/index.html +++ b/index.html @@ -13,39 +13,44 @@
diff --git a/media/arrow-white.svg b/media/arrow-white.svg new file mode 100644 index 0000000..6ee1d8c --- /dev/null +++ b/media/arrow-white.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + diff --git a/personal/cotton-town/index.html b/personal/cotton-town/index.html index ab898bd..7d6bc31 100644 --- a/personal/cotton-town/index.html +++ b/personal/cotton-town/index.html @@ -13,39 +13,44 @@
diff --git a/personal/memorabilia/index.html b/personal/memorabilia/index.html index 3c11752..406e169 100644 --- a/personal/memorabilia/index.html +++ b/personal/memorabilia/index.html @@ -13,39 +13,44 @@
diff --git a/personal/photojournalism/index.html b/personal/photojournalism/index.html index fc07b73..91a20a3 100644 --- a/personal/photojournalism/index.html +++ b/personal/photojournalism/index.html @@ -13,39 +13,44 @@
diff --git a/personal/riders/index.html b/personal/riders/index.html index 69ad5c6..9d130a0 100644 --- a/personal/riders/index.html +++ b/personal/riders/index.html @@ -11,39 +11,44 @@
diff --git a/script.js b/script.js index 0247bd3..e12d781 100644 --- a/script.js +++ b/script.js @@ -43,11 +43,13 @@ function setup () { const dim = document.createElement("div"); dim.id = "dim"; dim.style.pointerEvents = "none"; + dim.style.opacity = 0; dim.appendChild(close); main.parentNode.appendChild(dim); close.addEventListener("click", (e) => { dim.style.backgroundColor = "rgba(51,51,51,0)"; + dim.style.opacity = 0; dim.style.backdropFilter = "blur(0px)"; dim.style.pointerEvents = "none"; close.style.pointerEvents = "none"; @@ -60,6 +62,7 @@ function setup () { dim.addEventListener("click", (e) => { dim.style.backgroundColor = "rgba(51,51,51,0)"; + dim.style.opacity = 0; dim.style.backdropFilter = "blur(0px)"; dim.style.pointerEvents = "none"; close.style.pointerEvents = "none"; @@ -71,11 +74,12 @@ function setup () { }); // sets up the image enlarge - const images = document.querySelectorAll("img"); + const images = document.querySelectorAll("img:not(.menuBack > img)"); for (image of images) { image.addEventListener("click", (e) => { // dim the lights dim.style.backgroundColor = "rgba(51,51,51,0.7)"; + dim.style.opacity = 1; dim.style.backdropFilter = "blur(2px)"; dim.style.pointerEvents = "auto"; close.style.pointerEvents = "auto"; @@ -139,6 +143,31 @@ function setup () { */ + // setup the mobile menu + // will still be functional without js + + const menuBox = document.getElementsByClassName("menuBox")[0]; + const menuBar = document.createElement("div"); + menuBar.classList.add("menuBar"); + menuBar.innerHTML = "Menu"; + + menuBox.parentNode.insertBefore(menuBar, menuBox); + + const menuBack = document.getElementsByClassName("menuBack")[0]; + menuBack.addEventListener("click", (e) => { + const menuBox = document.getElementsByClassName("menuBox")[0]; + menuBox.style.opacity = 0; + + setTimeout(function () { + menuBox.style.display = "none"; + }, 500); + }); + + menuBar.addEventListener("click", (e) => { + menuBox.style.display = "inline-flex"; + menuBox.style.opacity = 1; + }); + // add in the change notes chester const template = document.createElement('template'); @@ -167,8 +196,9 @@ function setup () {
  • Make images bigger by default
  • Slidshows bigger
  • Make LIVE a little bigger
    • -
  • Riders add the extra images in the text
    • -
  • Mobile: fullscreen menu
    • +
  • Riders add the extra images in the text
    • +
  • Mobile: fullscreen menu
    • +
  • Mobile: slideshows appear in more appropriate format
    • `; diff --git a/style.css b/style.css index 64930d4..32e8d5b 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,14 @@ :root { --darkgray: #333333; --mediumgray: #555555; + --lightgray: #EEEEEE; font-family: "Proxima Nova", sans-serif; font-size: 0.9rem; } +body { margin: 0; padding: 0; } + h3 { font-size: 1.5em } h1, h2, h3, h4, h5, h6 { font-weight: 600; } b { @@ -311,9 +314,12 @@ blockquote { padding: 0 0 10px 15px; } +.menuBack { display: none; } +.menuBar { display: none; } + @media (orientation: portrait) { :root { - font-size: 1.4em; + font-size: 1.6em; } nav { @@ -392,4 +398,39 @@ blockquote { margin-left: -22%; margin-right: -2%; } + + /* MENU RELATED RULES */ + .menuBar { + display: block; + color: white; + background-color: var(--darkgray); + margin: 0 -25px 0 -25px; + padding: 25px 50px 25px 50px; + cursor: pointer; + } + .menuBox { + position: fixed; + top: 0; left: 0; bottom: 0; right: 0; + display: none; + align-items: center; + justify-content: center; + font-size: 2em; + line-height: 2em; + opacity: 0; + z-index: 100; + + color: white; + background-color: var(--darkgray); + transition: opacity 0.5s; + } + .menuBox summary:hover { color: var(--lightgray); } + .menuBox a:link, .menuBox a:visited, .menuBox a:focus { color: var(--lightgray); } + .menuBox a:hover { color: white; } + .menuBack { display: block; } + .menuBack img { + cursor: pointer; + height: 0.75em; + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + } }