I've decided to style these pages to look like "modals" for now, but I
haven't implemented them as such yet. I think we might be able to add
some progressive enhancement to retain the scroll position when a
co-op logo is clicked to make it feel more like a separate modal
dialog is opening.
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.
In the new designs we are no longer showing services, clients,
technologies, member counts, maps, addresses, email addresses or
social links for our member co-ops. So we can remove this metadata
altogether.
Before this commit the logos were a fairly garish mixture of different
colours, and many of the logos didn't work very well on a white
background.
In keeping with the new brand guidelines we've applied a greyscale
filter to the logos, and Natasha has created some variants of the
existing logos that work better on a black background. I've decided to
keep all the original logos and their variants in case we want to
switch again later, and chosen which one to used based on my taste.
This seems to improve things and we can ask co-ops to provide us with
higher res logos that work on black backgrounds later if we want to
improve things further.
Co-authored-by: Natasha Natarajan <natasha@outlandish.com>
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.
Ruby 2.6.6 has reached the end-of-life and I had some trouble
installing the dependencies locally as a result. I've updated to the
latest version of ruby and regenerated the Gemfile.lock with the
latest versions of the two gems we depend on, and their dependencies.
Everything looks to still be working in terms of site generation.
I'm not sure the distinction between Python and Python 2 is
particularly helpful, and because they share a logo it means we appear
to have python listed twice under technologies. I've replaced
instances of `python-2` with `python` to fix.
I've populated the data, where available, from the field "Number of
current members The number of full members (owners) in the co-op." in
the wordpress admin.
Showing all of the client logos adds a considerable amount to the page
weight of the page. This change shows 6 random clients. It will be
re-generated each time the page is deployed, which might be OK for
now, although we could add timed pipeline to keep this fresh/fair.
This updates the number to be the same as it currently is on
coops.tech. There's a separate
issue (https://git.coop/cotech/website/issues/29) to populate this
from the YAML front matter in each file under `_coops`.
This updates the number to be the same as it is today on
coops.tech (the wordpress site). There's some extra work to do to make
this "dynamic" in https://git.coop/cotech/website/issues/73.
Chris Lowis
