superbloom

now observing the inner workings of my mind!

hello and welcome to superbloom ^_^ here you can find my writing, inner rambles, interests, pet photos and more!

html * & css

* (right click, view page source, select all & paste into your blank html document!)

features

responsive for mobile / small screens
two navigation sidebars on either side of the main content
- navigation links are images* that reveal a link title on hover/focus!
  - * these can be images, emojis, unicode symbols, etc — if you want it to be full words you'll have to tinker with the css, but any of those options will work out of the box!
- text boxes for updates or other bits of text
- you can also make the image links into buttons that reveal text boxes — these are good if you want link menus!
easy to customize colors/fonts/sizes with css variables

classes

add .small to an element for it to sit side-by-side with another .small article like this.

add .scroll for an element to scroll if it gets too long.

.accent will make an element's background var(--accent-lighter) (or var(--accent-dark) if your body has the .dark class).

.center will center the text in an element.

add .dark to the body if you want a palette where your box backgrounds are dark & text is light. this makes sure the bold & other colored text stays visible!

credits

header font - mademoiselle

background & teacup pngs made from vintage art + fabric! find them on my materials page!

sample palettes

default variables: /* colors */ --background-image: url(); --background-color: #0DA6A4 ; --text: #5e333f ; --box-background: #0DA6A4; --accent: #14CCC0 ; --accent-dark: #883727 ; --accent-light: #0DA6A4 ; --accent-lighter: #ffd1e9 ; /* fonts */ --base-font: monospace; --text-size: 12px; --secondary-font: 'Mademoiselle', serif; /* misc styling */ --background-image-size: 350px; --max-width: 800px; --spacing: 15px; --border-radius: 8px; --text-underline: wavy var(--accent-light); --border: dashed var(--accent) 1px; --shadow-color: var(--accent); --shadow-color-hover: var(--accent-light); --title-color: var(--box-background); --nav-width: 120px;

raspberry tea (light): --background-color: #fcacb6 ; --text: #52202e ; --box-background: #fbf4f1; --accent: #cc3042 ; --accent-dark: #4b4b4b ; --accent-light: #69a57a ; --accent-lighter: #dbede2 ;

black tea with milk (dark): --background-color: #150b18 ; --text: #F5E1D0 ; --box-background: #2d2020; --accent: #ffe2d8 ; --accent-dark: #a95a44 ; --accent-light: #dc924d ; --accent-lighter: #efc19a ;

lavender earl grey (light): --background-color: #d4cae8 ; --text: #253657 ; --box-background: #f8e9e5; --accent: #8475b0 ; --accent-dark: #6f4367 ; --accent-light: #84b8a7 ; --accent-lighter: #d2e6da ;