This page is not linked from the rest of the site. It’s here for documentation of design patterns, code decisions etc and so you can copy-paste stuff from the markdown file as needed.

Key Design Info

Fonts

Nanum Gothic (body) - 400+700 weight https://fonts.google.com/specimen/Nanum+Gothic

Smoothy (Headings) - 400 weight only https://www.fontbros.com/font-family/smoothy

License purchased from Font Bros in TOWW’s name.

Colours

brand-color: #3D2A6F;
brand-color-mid: #6b52ac;
brand-color-alt: #a291bf;
white: #F5F1EC;
light-gray: #ebe5d9;
light-blue: #dfd8f1;
blue-gray: #716f8a;
gray: #767676;
dark: #43454D;
dark-blue: #1e2740;

(names are weird because inherited from theme!)

Dark Mode:

brand-color: #a291bf;
brand-color-mid: #6b52ac;
brand-color-alt: #3D2A6F;
light-gray: #f0f0f0;
gray: #9e9e9e;
dark: #22232a;
background-alt-color: #1a1a1f;
button-background-color: #8878a5;
border-color: #252629;
border-color-alt: #080b12;
th-color: #18181d;
tr-color: #080b12;

Images

Site Logo:
- 290x110 on page display.
- 1160x440px file itself, (ie, @4x) as small one looked awful.
Images:
- 1200x800px
- Standard across eg heads of pages etc.
Footer gallery:
- 800x800
- (saved as transparent pngs where the background is #f5f1ec and the image is masked out of that. The colour comes from the background of the page.
- Treated with a CSS filter in dark mode.
homepage headshots:
- 200x200
main toww logo:
- 400x400
- transparent background
sponsor logos:
- 500x350
- black on transparent background

See bottom of this page for all images in a gallery.

Technical note: CSS filters to colour change can be generated from black or from white as a starting point.

Worth running images through ImageOptim to reduce filesize

/images/fateha-begum-mcu-arfa-34-200px.jpg

/images/john-sear-mcu-arfa-36-200px.jpg

/images/katie-day-mcu-arfa-32-200px.jpg

/images/sudha-bhuchar-mcu-arfa-31-200px

If you need to reset your cookie preferences (to show the overlay again) use this:

New Cookie reset link

Old Cookie reset link

Body Copy

A paragraph looks like this — It’s another grey Birmingham morning and threatening clouds hover over us as we walk to our school, Rainbow Park Primary. I’m Nafeesa, and my dream is to be a climate justice activist like my hero Bird Girl. She’s amazing and travels the world to save rare birds and their habitats. And she’s Bengali like me. I really hope I can meet her one day soon. I’m like the oldest in Year 6 (I’m 11 already)! Maybe that’s why I got picked to be a ‘Peer Mediator’, which sounds like a big job title but it just just means fixing problems, not big ones like bullying, but helping others to be confident so it’s not hard for them to sort out their friendship troubles. Mum says it’s good experience for when I go to uni to study law. I’m walking with my best friend Karim and the new girl Amala who’s come from Somalia I think. Miss Anwar said I should take her under my wing cos I’m mature. So Karim and I call for her in the mornings and try to include her in stuff. She’s very quiet but Miss says to be patient and help her blossom.

Headings by default:

H1 Default styles for headings

H2 Default styles for headings

H3 Default styles for headings

H4 Default styles for headings

H5 Default styles for headings

H6 Default styles for headings

Here’s a standard body link.

H1 Heading Hero Style

H1 Heading Hero Style Linked

Buttons

Here’s a standard body link.

Lists

Ordered list example:

Poutine drinking vinegar bitters.
Coloring book distillery fanny pack.
Venmo biodiesel gentrify enamel pin meditation.
Jean shorts shaman listicle pickled portland.
Salvia mumblecore brunch iPhone migas.

Unordered list example:

Bitters semiotics vice thundercats synth.
Literally cred narwhal bitters wayfarers.
Kale chips chartreuse paleo tbh street art marfa.
Mlkshk polaroid sriracha brooklyn.
Pug you probably haven’t heard of them air plant man bun.

Quotes

A quote looks like this:

The longer I live, the more I realize that I am never wrong about anything, and that all the pains I have so humbly taken to verify my notions have only wasted my time!

– George Bernard Shaw

Images

Wide class

Beach Photo by Alexandra Gorn on Unsplash

Gallery Format

Gallery / Unsplash

Image inline

Sea Photo by Spacejoy on Unsplash

Youtube Embed

Standard iframe pasted

NB This does not use ’no-cookies’ YT embed.

Hugo Youtube Shortcode

Easy way of doing this in an article.

Vimeo Embed

Used like this on the homepage because homepage ‘partials’ sections can’t include shortcodes.

Vimeo Shortcode

The native hugo way of embedding a video. Use this if you’re adding one to a blog post etc

Other embed examples

Twitter will likely be just the content, with no ‘card’ as hugo is configured to strip out any code that may be used in an embed to track people.

Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC
— San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021

Instagram will have some minimal styling for the same reason.

View this post on Instagram

Table

Header 1	Header 2	Header 3	Header 4	Header 5
Row:1 Cell:1	Row:1 Cell:2	Row:1 Cell:3	Row:1 Cell:4	Row:1 Cell:5
Row:2 Cell:1	Row:2 Cell:2	Row:2 Cell:3	Row:2 Cell:4	Row:2 Cell:5
Row:3 Cell:1	Row:3 Cell:2	Row:3 Cell:3	Row:3 Cell:4	Row:3 Cell:5
Row:4 Cell:1	Row:4 Cell:2	Row:4 Cell:3	Row:4 Cell:4	Row:4 Cell:5
Row:5 Cell:1	Row:5 Cell:2	Row:5 Cell:3	Row:5 Cell:4	Row:5 Cell:5
Row:6 Cell:1	Row:6 Cell:2	Row:6 Cell:3	Row:6 Cell:4	Row:6 Cell:5

Syntax Highlighter

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-color: #1c2021;
}

li {
  width: 200px;
  min-height: 250px;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: top;
  margin: 5px;
}

  $('.top').click(function () {
    $('html, body').stop().animate({ scrollTop: 0 }, 'slow', 'swing');
  });
  $(window).scroll(function () {
    if ($(this).scrollTop() > $(window).height()) {
      $('.top').addClass("top-active");
    } else {
      $('.top').removeClass("top-active");
    };
  });