lancaster.gay is a trans-inclusive directory of queer groups and events in Lancaster, UK. Before I created this, there wasn't a single resource for queer people in Lancaster to find social groups and events tailored for them. This made it hard for people like me to find friends in the city.

But now, socialising should be easier for queer people in Lancaster. I've been reaching out to queer groups in Lancaster to see who I can get on board. If this is something you would like to participate in, please email me at jaydn@lancaster.gay. 

Hopefully, this will grow and become an invaluable community resource.

The technologies used:

  • Accessible HTML
  • CSS and SCSS
  • Twig
  • Craft CMS
  • Fortrabbit hosting
  • Ddev / Docker
  • SSH
  • Composer
  • Git

Building the website

Recently, I've been looking at Craft CMS and I rebuilt my portfolio using it. So, I used Craft for this project. It's been going really well and I found that I enjoy using it. Beyond that, I didn't have much of a plan here.

I knew I wanted to have the pride flag represented somewhere, and that I wanted it to be warm and inviting. I dove straight into the code and started playing around with some things.

Gilbert

To start with, I knew I wanted to incorporate the Gilbert typeface, inspired by Gilbert Baker (the man who designed the original pride flag). It's a stunning colour SVG font.

Lancaster is proud
Using the Gilbert font.

Unfortunately, Google Chrome doesn't appear to support colour SVG fonts, so I had to get creative. I fired up Illustrator and exported the text that I wanted as a plain SVG, and then used a visually hidden <h1> with the same text so that screen readers can still access that information.

A screenshot of the homepage for lancaster.gay. It has big, rainbow lettering saying Lancaster is Proud.
I think it turned out beautifully.

Flag representation

The next stage was to create a pride gradient that could be used as border on the navigation. Eventually, this idea bloomed into something so much better: a gradient border that could pass in different pride flags for different identities, and be reused across the site for visual cues.

A screenshot of the events page of lancaster.gay. There are two events, with the images bordered in the pride flag colours.
The group page for Queer By Gum on lancaster dot gay.
A black button that says Book Now. It is bordered by a pride flag gradient.

On the events page, the featured image of an event in the listing is bordered by the flag. I set that as a variable and through mixing CSS custom properties, sass variables, the data-* property and twig variables, I managed to create a system that represents all major identities under the LGBTQIA+ umbrella.

For example, if a group or event's target audience is trans people, then the flag motifs throughout the page change from a rainbow to the cute pastels of the trans flag. 

If you want to test it yourself, you can inspect the code and change the data-flag-theme on the body.

Here's a non-exhaustive list of values:

  • all-lgbtqia
  • trans
  • lesbian
  • gay-men
  • nonbinary

Connecting events to groups

Another thing I'm proud of is that I managed to connect groups and events. For example, when viewing an event, you can see which group is hosting it (as long as the group is on lancaster.gay) and click through to view that group's page. When viewing a group's page, you can see a feed of the events that the group is hosting.

Connecting groups to groups

I've also provisioned for subgroups. For example, Queer By Gum CIC is a group that hosts events. However, it is not a social meet-up by itself. Queer By Gum have three social groups  (at the time of writing). These social groups don't host their own events - that is handled by the wider Queer By Gum team.

Therefore, my solution: being able to assign a parent group when creating an entry for a group. Then, on the parent group's page, it pulls in all groups related to it. On the child group's page, you can see a link to the parent group and click through to the parent group.

The end of Queer By Gum CIC's group page on Lancaster.gay. There are three subgroups and event showing.

Would I do anything differently?

Right now, no. This is going to be an eternal work-in-progress. By which I mean, it has a lot of scope to grow and will be something I work on for a very long time. In its current early stages, I'm really proud of what I achieved, what this represents and the potential it has to help the local queer community (of which I am a part of).

Perhaps I could have gotten more people involved before launching, but that's fine for now. I have reached out to as many groups as I know of and will continue to search for more.

Plans for the future?

There are ways this could grow further. For example, I could add:

  • Options for queer-run groups and events
  • Options for queer-friendly groups and events
  • Sections for queer-owned and queer-friendly businesses

Wrapping up

This project means a lot to me, and I hope it flourishes. If you are local to Lancaster and want to get involved, please do email me at jaydn@lancaster.gay.