A compliation of some of the resources I used to build this website: fonts, patterns, colour palettes, inspiration, and code snippets. I'd like to eventually add some buttons or blinkies to this page.
Fonts
For body text, I use Baskerville Regular, a fairly common serif font. It can be found linked here: Baskerville.
For headers and titles I use the wide version of a sans-serif font called Graphik. I found about it on this interesting website called Typewolf, an "independent typography resource" discussing trends in typography, font combinations, and more; created by Jeremiah Shoaf.
The handwritten font used for the notes on the side is a font called Cyanotype, linked as follows: Cyanotype. I really like this font, and I was curious about its history; maybe you'll also find it interesting:
Architects and engineers use a particular, very regimented script for formal drawings. This is for legibility purposes and is known as Draftsman's Hand, Engineer's Hand, or Architect's Hand. The same script is often used in pre-1950's book illustrations, when they were all done by hand. This font attempts to replicate one such example, from a set of blueprints (or cyanotypes) made by the British War Office during World War I.
Colours/Patterns
The basic colours I started designing this website with are these five core colours, shown below:
#eae6e5, "Platinum"
#478564, "Viridian"
#8e0a01, "Dark Red"
#330f0a, "Black Bean"
#003249, "Prussian Blue"
In my CSS, I have a section called :root where I define my colours as variables so that I'm able to easily change them across the site. These are all the colours I use:
:root {
--dark1:#330F0A; /* black bean */
--darkish1:#4c211c; /* lightened black bean */
--darker1:#160705; /* darker shade of black bean */
--dark2:#003249; /* prussian blue */
--accent1:#8E0A01; /* dark red */
--accent2:#478564; /* viridian */
--light:#EAE6E5; /* platinum */
--text:#444951; /* dark grey text colour*/
}
Then, when I define the colour of my text or box or whatever, I can just easily write var(--text) or whatever. Anyways, y'all probably already know how to do this, but I'm not at all a computer kind of person, so I just thought I'd show explicitly what I'm doing!
Patterns:
I used a couple of patterns from UI Verse. Sometime I'd like to figure out how to make my own, because it seems pretty math-y! But for now, here are credits to the ones I've used:
Website Design & Inspiration
Entry Page/Mobile Site
The entry page and the mobile site I'm working on is based on & uses code from the layout "Solid Shadow" by Eggramen, linked as follows: Solid Shadow. I quite like the look of it.
Main Page
The central part of the webpage uses code from Theme 22 by Repth, as linked: Theme 22.
I took a lot of inspiration (but no code) from the lovely website A Scarecrow Kid. Take a visit, it's really a beautiful website.
Code Snippets
Music Player: multiple song music player by adilene @ adilene.net.
CSS for old-style button on entry page: Button by barisdogansutcu
Clock: Vintage Clock, modified slightly.
Click-splosion: RV's free Javascript/DHTML effects.
Slowing marquee (scrolling images & text) on hover: link.
