Chester Robert Jones

@@ -51,6 +51,13 @@

Cotton Town

+ 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. +

+ 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. +

@@ -95,16 +102,6 @@ /media/photos_3840/cotton-town8.jpg x4" src="/media/photos_3840/cotton-town8.jpg" />

- -

Cotton Town

- -

- 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. -

- -

- 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. -

diff --git a/personal/memorabilia/index.html b/personal/memorabilia/index.html index 406e169..914abeb 100644 --- a/personal/memorabilia/index.html +++ b/personal/memorabilia/index.html @@ -11,7 +11,7 @@ -

Chester Robert Jones

@@ -51,6 +51,13 @@

Memorabilia

+ 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. +

+ 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. +

@@ -85,16 +92,6 @@ /media/photos_3840/zine6.png x4" src="/media/photos_3840/zine6.png" />

- -

Memorabilia

- -

- 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. -

- -

- 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. -

diff --git a/script.js b/script.js index e12d781..868dcde 100644 --- a/script.js +++ b/script.js @@ -199,6 +199,14 @@ function setup () {

~~Riders add the extra images in the text~~

~~Mobile: fullscreen menu~~

~~Mobile: slideshows appear in more appropriate format~~

~~Slideshow arrows a little lighter than the current hover color~~

Hi-res versions of the images

~~square slideshow on mobile~~

~~Portrait slideshow on full on mobile~~

~~Menu text slightly bigger~~

~~Enbolden the top-level menu~~

Commit the slideshow switch between

~~Text in nav bar on desktop~~

`; diff --git a/style.css b/style.css index 32e8d5b..21aceda 100644 --- a/style.css +++ b/style.css @@ -31,10 +31,15 @@ nav ul { 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; } @@ -79,7 +84,7 @@ nav { top: 0; bottom: 0; left: 0; - right: 80%; + right: 80vw; padding: 50px 25px 50px 25px; overflow: hidden; @@ -433,4 +438,17 @@ blockquote { -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; } +} +