Table of Contents

I made this website!  It’s a mixture of Hugo, HTML/CSS, and Cloudflare?!

This website is handwritten HTML, CSS, and some Go for the Hugo templating!
I have a list of thanks & link where I (sometimes remember to) put things I’ve used.

It’s hosted by Cloudflare ΒΏΒ‘for free!? thanks to Cloudflare Pages!

Pages and TemplatesπŸ”—

This page right here is a default single page template.
And here’s a fun little map of all the templates that go into this page you’re seeing right now!


single.html

header.html

generic-starter.html

table-of-contents.html

The actual content

properties.html

generic-finisher.html

about.html

breadcrumbs.html

footer.html

row.html

 
---
config:
  layout: elk
  look: "handDrawn"
---
flowchart LR
    single["single.html"]

    header["header.html"] --> single
    starter["generic-starter.html"] --> single
    toc["table-of-contents.html"] --> single
    content("The actual content") --> single
    properties["properties.html"] --> single
    finisher["generic-finisher.html"] --> single

    breadcrumbs["breadcrumbs.html"] --> starter
    about["about.html"] --> starter

    footer["footer.html"] --> finisher
    
    row["row.html"] --> properties
Accurate as of 2024-11-17

There will be a repo link here somewhere once I’ve set up my own git hosting (probably using Forgejo)

The logo at the top isn’t actually text art :(
It was originally this text art generated by patorjk.com:

 ┏┓    β”“ β€’      ┏┏      
 ┗┓┏┓┏┓┣┓┓┏┓ ┏┏┓╋╋┏┓┏┓  
 ┗┛┗┛┣┛┛┗┗┗ β€’β”—β”—β”›β”›β”›β”— β”—   
     β”›
But it turns out mono-space fonts are broken on Android which I was the latest in a long line of people to find out!  So I made a semi-similar SVG which is the current better-working, but less fun (to me) logo.

If you’re reading this on Android, then the text art above was probably already broken.  If you aren’t, then this is what it looks like:

Text Art that says sophie.coffee, but the lines are disjointed and broken

And the border too…πŸ”—

The border below the top nav bar was originally an SVG encoding of the following characters that may or may not display properly for you depending on fonts and all that.

β–“ 
β–’
β–‘

And it was included as a background-image:url(THE ENCODING), but it was also having issues on mobile.  🙃

To cut a very long story short, I:

  1. Made a new SVG element that didn’t use text
  2. Discovered that that wasn’t the issue at all
  3. Decided to just use the new SVG but as a mask-image instead
Title Sophie Dot Coffee
Created 2024-10-25
Published 2024-11-16
Last Updated 2024-12-02
Draft false