The why
This website is part portfolio , part digital garden and part recipe blog . It is where I collect and expand upon my thoughts and discoveries, and where I showcase what I create, craft and conjure.
See the whole structure in the Tree .
Explore projects over time in the Timeline .
Fonts
When selecting fonts for this website, I was looking to combine my love for 70’s psychedelia and gothic blackletter while keeping everything mostly legible and accessible.
Fonts used on this website:
Basteleur for the larger titles
Cooper Std is used for the second level of titles
Distro is used for the third level of titles
Wrenema is used for body text
If you’re into cool fonts look up this directory of open source fonts by womxn , this crazy foundry making free fonts , this directory of free to use and free to modify fonts and the download foundry making really experimental stuff. Last thing, here’s a cool site with all the unicode characters handy .
Color theme
This website changes color theme every season. For doing so I’m using a theming system based on the one built by Devine Lu Linvega in their older JS apps, see the code and find other themes here . It uses an svg file to store the color values. By default, the first time you load the website it will apply this season’s theme, but you can also change it by dragging and dropping a theme svg file onto it. Once you do so, it will save your preferred theme in local storage so you’ll see it when you visit again. Also note that these themes are compatible with the older hundred rabbits apps like Left , Orca or Dotgrid feel free to use them for that too!
Here are the themes I’ve made so far
Images
By default it loads low resolution dithered images (generated with Ditherit.com ) to reduce the loading time and the bandwidth needed to view the website. A toggle on the top right allows to switch to high resolution images. This feature was based upon Nate Steiner’s imageswap .
Technology
This website is basically a collection of html files in folders, generated by Hugo . It does not require javascript to run. The files are hosted on DigitalOcean and the domain on Gandi .
If you’re interested in better markup and more accessible websites, go take a look at this little guide:
Html tips by Thomasorus
“Technologies aren’t created in isolation. They are imprinted with the ghosts of their past.”
– Jeremy Keith in Resilient web design
TODO
[-] Add commissions banner on home page
[-] find a way to have dark and light theme with one theme file
[ ] put earthsea illustration on home page banner
[ ] add some of the visuals i did for voidxwitch in music visuals
[ ] fix styling on large screens
[ ] make winter theme
[ ] add photos to journal entries
[ ] use built in image processing tools to resize and dither images
[ ] Make icons for all sections
[ ] finish writing printmaking tutorial
[ ] finish writing page on druidism
[ ] finish writing page on tarot
[ ] finish writing page on shinto
[ ] finish writing page on alchemy
DONE
[x] keep images on product pages full color
[x] add prefers dark mode thingy in css
[x] remove redundant single templates
[x] fix about page not loading good sidebar and spacing missing
[x] move my monthly recaps from patreon to website
[x] update style mini table of contents
[x] adjust mobile version with new spacings and layouts
[x] make optimisations for dark themes (bg of low res images)
[x] make active menu link work
[x] add reset at beginnng of css to clear some basic padding and margins
[x] move ingredients to their own field in recipes
[x] keep image to the right column in recipe
[x] add images on artwork page
[x] try having images in grayscale and multiply by default, and become full color on hover on list pages
[x] add about pages to tags
[x] hide artwork from works sidebar
[x] switch playing page to media format
[x] Improve design tree page
[x] use baseline grid for vertical spacing
[x] use vw units for margins
[x] make little piano
[x] Add code blocks
[x] change music sidebar
[x] reverse order of media pages
[x] add details of media in to watch list on hover
[x] improve design tags page
[x] show recipe cards in tag list page
[x] Add commissions link to menu
[x] Fix dictionnary entries
[x] Change names of festivals in menu
[x] Add commissions page
[x] Redesign media pages
[x] move songs i produced in data folder
[x] Make new fall theme