<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details>
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details>
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details>
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details>
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details>
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details open="true">
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details>
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details open="true">
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
<div class="slideshow full"><img
<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details>
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details open="true">
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details>
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details open="true">
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
<div class="slideshow full">
<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details>
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details open="true">
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details>
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details open="true">
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
<div class="slideshow full">
<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details>
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details open="true">
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details>
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details open="true">
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
<div class="slideshow full">
<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details>
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details>
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details>
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details>
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
<dl>
<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details>
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details>
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details>
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details>
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details>
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details>
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details>
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details>
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
--- /dev/null
+<?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-white.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="396.88317"
+ 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:#ffffff;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>
<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details open="true">
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details>
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details open="true">
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details>
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
<div class="slideshow full">
<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details open="true">
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details>
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details open="true">
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details>
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
<div class="slideshow full">
<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details open="true">
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details>
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details open="true">
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details>
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
<div class="slideshow full">
<body>
<nav>
<h1><a href="/">Chester Robert Jones</a></h1>
- <ul>
- <li>
- <details open="true">
- <summary>Personal</summary>
- <ul>
- <li><a href="/personal/riders/">Riders</a></li>
- <li><a href="/personal/cotton-town/">Cotton Town</a></li>
- <li><a href="/personal/memorabilia/">Memorabilia</a></li>
- <li><a href="/personal/photojournalism/">Photojournalism</a></li>
- </ul>
- </details>
- </li>
- <li>
- <details>
- <summary>Commercial</summary>
- <ul>
- <li><a href="/commercial/groke/">GROKE</a></li>
- <li><a href="/commercial/live-music/">Live Music</a></li>
- <li><a href="/commercial/on-set/">On Set</a></li>
- <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
- </ul>
- </details>
- </li>
- <li>
- <a href="/about/">About Me</a>
- </li>
- <li>
- <a href="/cv/">CV</a>
- </li>
- <li>
- <a href="/contacts/">Contacts</a>
- </li>
- </ul>
+ <div class="menuBox">
+ <ul>
+ <li class="menuBack">
+ <img src="/media/arrow-white.svg" />
+ </li>
+ <li>
+ <details open="true">
+ <summary>Personal</summary>
+ <ul>
+ <li><a href="/personal/riders/">Riders</a></li>
+ <li><a href="/personal/cotton-town/">Cotton Town</a></li>
+ <li><a href="/personal/memorabilia/">Memorabilia</a></li>
+ <li><a href="/personal/photojournalism/">Photojournalism</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <details>
+ <summary>Commercial</summary>
+ <ul>
+ <li><a href="/commercial/groke/">GROKE</a></li>
+ <li><a href="/commercial/live-music/">Live Music</a></li>
+ <li><a href="/commercial/on-set/">On Set</a></li>
+ <li><a href="/commercial/le-blanc-fine-art/">Le Blanc Fine Art</a></li>
+ </ul>
+ </details>
+ </li>
+ <li>
+ <a href="/about/">About Me</a>
+ </li>
+ <li>
+ <a href="/cv/">CV</a>
+ </li>
+ <li>
+ <a href="/contacts/">Contacts</a>
+ </li>
+ </ul>
+ </div>
</nav>
<main>
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";
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";
});
// 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";
*/
+ // 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');
<li><s>Make images bigger by default</s></li>
<li><s>Slidshows bigger</s></li>
<li><s>Make LIVE a little bigger</s></li>
- <li>Riders add the extra images in the text</li>
- <li>Mobile: fullscreen menu</li>
+ <li><s>Riders add the extra images in the text</s></li>
+ <li><s>Mobile: fullscreen menu</s></li>
+ <li><s>Mobile: slideshows appear in more appropriate format</s></li>
</ul>
</details>`;
: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 {
padding: 0 0 10px 15px;
}
+.menuBack { display: none; }
+.menuBar { display: none; }
+
@media (orientation: portrait) {
:root {
- font-size: 1.4em;
+ font-size: 1.6em;
}
nav {
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);
+ }
}
projects / chester / commitdiff
