Create blog design

[oubiwann]

Tasks:

• Reuse existing assets as base
• Decide upon web fonts and include them
• Find good textures for open booklet (e.g., staple binding that would be good for a liner notes look)
• Find good examples of classic album liner notes
• Look for a good / appropriate Bootstrap template
• TBD

Depends upon #1.

[oubiwann]

Maybe actually make the design look like the inside of a vinyl album cover?

[oubiwann]

Possible interesting fonts:

• https://fonts.google.com/specimen/Audiowide?preview.text=Forgotten%20Tones&preview.text_type=custom (possible use for headings)
• https://fonts.google.com/specimen/Michroma?preview.text=Forgotten%20Tones&preview.text_type=custom (possible use for headings)
• https://fonts.google.com/specimen/Berkshire+Swash?preview.text=Liner%20Notes&preview.text_type=custom (possible use as title)
• https://fonts.google.com/specimen/Cambay?preview.text=Forgotten%20Tones&preview.text_type=custom (possible use for body text)
• https://fonts.google.com/specimen/Marvel?preview.text=Forgotten%20Tones&preview.text_type=custom (possible use for body text or headings)
• https://fonts.google.com/specimen/Gugi?preview.text=Forgotten%20Tones&preview.text_type=custom (title + headings)
• https://fonts.google.com/specimen/Averia+Libre?preview.text=Forgotten%20Tones&preview.text_type=custom (title)
• https://fonts.google.com/specimen/Homenaje?preview.text=Forgotten%20Tones&preview.text_type=custom (headings)
• https://fonts.google.com/specimen/Oxanium?preview.text=Forgotten%20Tones&preview.text_type=custom (headings)

[oubiwann]

V1 choices:

• Title: https://fonts.google.com/specimen/Gugi?preview.text=Liner%20Notes&preview.text_type=custom#standard-styles
• Headings: https://fonts.google.com/specimen/Marvel?preview.text=Heading%201:%20Something%20More&preview.text_type=custom
• Text: https://fonts.google.com/specimen/Raleway?preview.text=Some%20text%20to%20display%20for%20body%20content&preview.text_type=custom&query=Raleway&selection.family=Raleway:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&sidebar.open=true
• Special Use:
  • https://fonts.google.com/specimen/Averia+Libre?preview.text=Special%20Use&preview.text_type=custom
  • https://fonts.google.com/specimen/Berkshire+Swash?preview.text=Special%20use%20too&preview.text_type=custom

[oubiwann]

Font next steps:

• download
• save to assets repo
• update CSS with recommended usage on Google Fonts page
• Update the current index/plaholder to use the heading font, coloured for contrast

[oubiwann]

Possible theme starters:

• https://startbootstrap.com/theme/clean-blog
• https://getbootstrap.com/docs/5.0/examples/cover/
• https://getbootstrap.com/docs/5.0/examples/blog/