<link rel="stylesheet" href="/style.css">
<script type="text/javascript" src="/script.js" defer></script>
<script type="text/javascript" src="/slideshow.js" defer></script>
-
- <style>
-/* custom blockquote for small image */
-.blockquoteImage {
- width: 113%;
- margin: 40px 0 40px 0;
-}
-.blockquoteImage img {
- display: inline-block;
- width: 30%;
-}
-.blockquoteImage blockquote {
- display: inline-block;
- vertical-align: top;
- width: 55%;
- margin: 2% 5% 2% 5%;
- text-align: right;
-}
-
-.blockquoteImage.reversed {
- margin-left: -3%
-}
-.blockquoteImage.reversed blockquote {
- text-align: left;
-}
- </style>
</head>
<body>
<nav>
</div>
</nav>
<main>
-
-<div class="audioNote">
- <aside>
- Note about slideshows<br>
- 3 minutes. <a href="#">Transcript</a>
- </aside><audio controls src="/media/audio/voice-note-from-will.mp3"></audio>
-</div>
-
-<p>Example slideshow:</p>
-
- <div class="slideshow">
+ <div class="slideshow full">
<img
srcset="/media/photos_960/le-blanc-fine-art1.jpg,
/media/photos_1920/le-blanc-fine-art1.jpg x2,
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"
+ style="vector-effect:non-scaling-stroke;fill:#737373;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"
<script type="text/javascript" src="/slideshow.js" defer></script>
</head>
<body>
- <nav>
+ <nav class="scroll">
<h1><a href="/">Chester Robert Jones</a></h1>
<div class="menuBox">
<ul>
</li>
</ul>
</div>
+ <p class="smallTitle">Cotton Town</p>
+ <p>
+ Manchester was the world's first industrial city. Dubbed "Cottonopolis" it was the economic hub of the British Empire and grew symbiotically alongside the Transatlantic Slave Trade. As plantations in the America's expanded, more and more mills were built in the city.
+ </p>
+ <p>
+ With this project, I attempted to breathe new life into archive material using my own images, recontextualising the history of the Slave Trade and the lives of enslaved people within the setting of contemporary Manchester. This recontextualization is a means of unearthing and interrogating Manchester's history, whilst also exploring photography's ability to examine the past and create new narratives.
+ </p>
</nav>
<main>
<div class="slideshow full">
/media/photos_3840/cotton-town8.jpg x4"
src="/media/photos_3840/cotton-town8.jpg" />
</div>
-
- <p class="smallTitle">Cotton Town</p>
-
- <p>
- Manchester was the world's first industrial city. Dubbed "Cottonopolis" it was the economic hub of the British Empire and grew symbiotically alongside the Transatlantic Slave Trade. As plantations in the America's expanded, more and more mills were built in the city.
- </p>
-
- <p>
- With this project, I attempted to breathe new life into archive material using my own images, recontextualising the history of the Slave Trade and the lives of enslaved people within the setting of contemporary Manchester. This recontextualization is a means of unearthing and interrogating Manchester's history, whilst also exploring photography's ability to examine the past and create new narratives.
- </p>
</main>
</body>
</html>
<script type="text/javascript" src="/slideshow.js" defer></script>
</head>
<body>
- <nav>
+ <nav class="scroll">
<h1><a href="/">Chester Robert Jones</a></h1>
<div class="menuBox">
<ul>
</li>
</ul>
</div>
+ <p class="smallTitle">Memorabilia</p>
+ <p>
+ Memorabilia is a zine reflecting on the evocative and nostalgic power of analogue photography. Using mixed media elements and experimental techniques, I set out to create a narrative of degradation that speaks to the vulnerable and tactile qualities of both analogue photography and our own memories.
+ </p>
+ <p>
+ This project started as an exploration of analogue's perseverance in the modern world, but it slowly became more of an exploration of our connections to the past, and our constant hunger for nostalgia and reminiscence.
+ </p>
</nav>
<main>
<div class="slideshow full">
/media/photos_3840/zine6.png x4"
src="/media/photos_3840/zine6.png" />
</div>
-
- <p><b>Memorabilia</b></p>
-
- <p>
- Memorabilia is a zine reflecting on the evocative and nostalgic power of analogue photography. Using mixed media elements and experimental techniques, I set out to create a narrative of degradation that speaks to the vulnerable and tactile qualities of both analogue photography and our own memories.
- </p>
-
- <p>
- This project started as an exploration of analogue's perseverance in the modern world, but it slowly became more of an exploration of our connections to the past, and our constant hunger for nostalgia and reminiscence.
- </p>
</main>
</body>
</html>
<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>
+ <li><s>Slideshow arrows a little lighter than the current hover color</s></li>
+ <li>Hi-res versions of the images</li>
+ <li><s>square slideshow on mobile</s></li>
+ <li><s>Portrait slideshow on full on mobile</s></li>
+ <li><s>Menu text slightly bigger</s></li>
+ <li><s>Enbolden the top-level menu</s></li>
+ <li>Commit the slideshow switch between</li>
+ <li><s>Text in nav bar on desktop</s></li>
</ul>
</details>`;
list-style-type: none;
padding-inline-start: 20px;
}
+nav > div { margin-bottom: 50px; }
nav > ul { padding-inline-start: 0px; }
nav summary { list-style-type: none; }
nav summary:hover { color: var(--darkgray); }
+.menuBox > ul > li > a,
+.menuBox > ul > li > details > summary { font-weight: 600; }
+.menuBox { font-size: 1.1em; }
+
nav li { margin-top: 10px; }
nav details li:last-child { margin-bottom: 20px; }
nav details { transition: height 0.35s; }
top: 0;
bottom: 0;
left: 0;
- right: 80%;
+ right: 80vw;
padding: 50px 25px 50px 25px;
overflow: hidden;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
+ .slideshow { height: calc(55vw - 25px); }
+ .slideshow.full { height: calc((55vw - 25px + var(--full-overhang)) * 1.5); }
+
+ .floatLeft, .floatRight {
+ float: none;
+ width: 100% !important;
+ padding: 0;
+ }
}
+
+@media (orientation: landscape) {
+ .scroll { overflow: scroll; }
+}
+
projects / chester / commitdiff
