Added new triangle and cursor hints

diff --git a/media/arrow.svg b/media/arrow.svg
new file mode 100644 (file)
index 0000000..74f64f0
--- /dev/null
+++ b/media/arrow.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="38.913296mm"
+   height="65.417458mm"
+   viewBox="0 0 38.913296 65.417458"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   sodipodi:docname="arrow.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showguides="true"
+     inkscape:zoom="0.46235269"
+     inkscape:cx="395.80174"
+     inkscape:cy="301.71772"
+     inkscape:window-width="1366"
+     inkscape:window-height="710"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="-5.4476346e-08,211.61787"
+       orientation="1,0"
+       id="guide1"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       sodipodi:type="star"
+       style="vector-effect:non-scaling-stroke;fill:#000000;fill-opacity:1;stroke-width:0.264583;stroke-linejoin:round;stroke-opacity:0.2;-inkscape-stroke:hairline"
+       id="path1"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="0"
+       sodipodi:cy="0"
+       sodipodi:r1="37.768787"
+       sodipodi:r2="18.884394"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 37.768787,0 -56.653181,32.708729 0,-65.417458 z"
+       inkscape:transform-center-x="-6.485549"
+       transform="matrix(0.6868687,0,0,1,12.971099,32.708729)" />
+  </g>
+</svg>

diff --git a/script.js b/script.js
index b19680cebf4e75c0db4187ed49e6a607f3633fcc..e1b24ee773eed7eebc215b4040bd2ef8a3c3302b 100644 (file)
--- a/script.js
+++ b/script.js
@@ -154,38 +154,21 @@ function setup () {
                overflow: scroll;
        ">
        <summary>Change notes Chester</summary>
-       <p>Requests implemented from last meeting:</p>
+       <p>Todo:</p>
        <ul>
-               <li>Greater line height on Riders -> Acknowlagements</li>
-               <li>Click on gray area in "focus view" to de-focus</li>
-               <li>Slideshow on Riders includes all images in the page</li>
-       </ul>
-       <p>Requests implemented from emailed document:</p>
-       <ul>
-               <li>Changed Riders subheading</li>
-               <li>Added all specified pages</li>
-               <li>Removed phone no. from contact page</li>
-       </ul>
-       <p>Additional changes:</p>
-       <ul>
-               <li>Removed "Overview" page from the nav menu, now accessed by clicking your name as is common with many sites. Page is now effectively the homepage</li>
-               <li>Actual defocus on the background elements when in focus mode</li>
-               <li>Added education and experiance headings to CV.. good/bad?</li>
-               <li>Added text indent to any paragraph not following a heading. Aligns with standard style-guide</li>
-               <li>Added keeping the drop-downs open when clicking on a subheading</li>
-               <li>CV Start lower down the page</li>
-               <li>About me text 10% bigger</li>
-               <li>Move text from inside the slideshows to below the slideshows</li>
-               <li>Added memorabilia title to match cotton town</li>
-               <li>Fixed visual glitch when enlarging contain-fitted image</li>
-               <li>Slideshow larger when in full mode</li>
-               <li>Changed slideshow styling on the buttons</li>
-       </ul>
-       <p>Still todo:</p>
-       <ul>
-               <li>Annotated images if needed</li>
-               <li>Briefly look into image scaling</li>
-               <li>Dark mode if needed</li>
+               <li><s>Change and fix arrow image</s></li>
+               <li><s>Cursor turns into arrow on hover</s></li>
+               <li>Make LIVE a little bigger</li>
+               <li>Riders add the extra images in the text</li>
+               <li>remove the space on the cv first block</li>
+               <li>make the about section normal text</li>
+               <li>Bigger text on mobile</li>
+               <li>memorobilia images fixed</li>
+               <li>Mobile: fullscreen menu</li>
+               <li>Make images bigger by default</li>
+               <li>center headings on pages with slideshows</li>
+               <li>Slidshows bigger</li>
+               <li>Text ident on CV</li>
        </ul>
 </details>`;
 

diff --git a/slideshow.js b/slideshow.js
index f9285a8828d94cf4a2f3a3ec01dd177e18e22cc2..7b01fb68c022238a15fdd601e4800c7cf2db0c9b 100644 (file)
--- a/slideshow.js
+++ b/slideshow.js
@@ -41,7 +41,9 @@ function setupSlideshow () {
 
                const prev = document.createElement("span");
                prev.classList.add("prev");
-               prev.innerHTML = "⮜";
+               const prevImage = document.createElement("img");
+               prevImage.src = "/media/arrow.svg";
+               prev.src = "/media/arrow.svg";
                prev.addEventListener("click", (e) => {
                        e.preventDefault();
 
@@ -59,7 +61,8 @@ function setupSlideshow () {
 
                const next = document.createElement("span");
                next.classList.add("next");
-               next.innerHTML = "⮞";
+               const nextImage = document.createElement("img");
+               nextImage.src = "/media/arrow.svg";
                next.addEventListener("click", (e) => {
                        e.preventDefault();
 
@@ -79,6 +82,9 @@ function setupSlideshow () {
                slideshow.prepend(prev);
                slideshow.append(next);
 
+               next.append(nextImage);
+               prev.append(prevImage);
+
                s++;
        }
 }

diff --git a/style.css b/style.css
index c4a596de11458a2d0b3674347433631132010f31..1e48666d3a7e0c5073af76cf96fe95769b31e475 100644 (file)
--- a/style.css
+++ b/style.css
@@ -131,6 +131,7 @@ blockquote {
        width: calc(55vw - 25px);
        height: calc((55vw - 25px) / 1.5);
        display: flex;
+       cursor: zoom-in;
 }
 .slideshow.full {
        --full-overhang: 12vw;
@@ -153,20 +154,28 @@ blockquote {
        height: 100%;
        line-height: 100%;
        z-index: 0;
-       cursor: pointer;
        color: var(--darkgray);
        flex-wrap: nowrap;
+       transition: opacity 0.5s;
+}
+.slideshow > span:hover { opacity: 0.65; }
+.slideshow > span > img {
+       height: 1em;
+       pointer-events: none;
 }
-.slideshow > span:hover { color: var(--mediumgray); }
 .prev {
-       justify-content: flex-start;
+       justify-content: flex-end;
        margin-left: -2%;
        margin-right: -25%;
+       cursor: w-resize;
+       -webkit-transform: scaleX(-1);
+       transform: scaleX(-1);
 }
 .next {
        justify-content: flex-end;
        margin-left: -25%;
        margin-right: -2%;
+       cursor: e-resize;
 }
 
 .slideshow:first-child { margin-top: 0; }
@@ -234,6 +243,7 @@ blockquote {
        background-color: rgba(51,51,51,0);
        backdrop-filter: blur(0px);
        transition: background-color 0.5s, backdrop-filter 0.5s;
+       cursor: zoom-out;
 }
 #dim span {
        position: absolute;
@@ -285,7 +295,7 @@ blockquote {
 
 @media (orientation: portrait) {
        :root {
-               font-size: 1.3em;
+               font-size: 1.4em;
        }
 
        nav {
@@ -356,14 +366,11 @@ blockquote {
                cursor: pointer;
                color: var(--darkgray)
        }
-       .slideshow > span:hover { color: var(--mediumgray); }
        .prev {
-               justify-content: flex-start;
                margin-left: -2%;
                margin-right: -22%;
        }
        .next {
-               justify-content: flex-end;
                margin-left: -22%;
                margin-right: -2%;
        }