This commit progressively enhances the co-op grid to show the contents
of the `/co-op/<id>` page in a HTML `<dialog>` element. This improves
the existing experience by retaining the scroll position and returning
the user to the correct page when the dialog is closed.
In case JS isn't available, and for SEO purposes we link to the co-op
pages as previously (but with the disadvantage that the "close" button
always returns to the homepage irrespective of where the co-op grid is
used).
Natasha and I went through the design together and made a number of
small tweaks.
In particular we removed the responsive line-height in favour of a
fixed one at all screen sizes.
I think it's probably easier to start from a cleaner slate for this
redesign, rather than try to incrementally refactor towards the new
design. Some of the base styles are fine and I've retained some of the
CSS variables. I've also kept the header as it probably will be useful
to refactor rather than completely re-do this.
I took the SVG favicon from the brand assets pack Creative Coop
produced and put it through an online tool[1] to
generate these files.
[1] https://realfavicongenerator.net
Creative Co-op have recently prepared some brand guidelines for
CoTech, including a new logo, typography suggestions and background
images. This commit restyles the site to apply, as best we can, these
guidelines. It's hard to split this into smaller commits because the
decision to use a black background colour means many things have to
change.
Notably we've removed the "about/join" footer, as it was hard to
choose a bg colour and without one it became more apparent that this
footer was more in the way than useful.
Co-authored-by: Natasha Natarajan <natasha@outlandish.com>
Rather than attempt to recreate the exact burger menu from the old
version of the site, since it requires a number of dependencies, I've
added a burger menu with some inline javascript to handle the toggle
states.
I used Claude 4 to help generate the CSS here.
The site had around 7000 lines of CSS and 23,000 lines of JS. It also
used a framework called "Zurb" to build the layout. We're planning to
rebrand the website and to make that work easier I think it would help
me (and hopefully those that come after me) to strip out all of these
technologies and recreate the site with a simple stylesheet.
By doing so I think we lose a couple of features, such as the zooming hover
states on the grids of images. Some features, like the "sticky" header
are probably better implemented nowadays in pure CSS.
Given that the site is maintained by volunteers I think the simpler we
can make it the better.
