Hello
Welcome to my sandbox. This is where I experiment & play with Bearblog features & CSS theming (i.e., break things).
I also have a brain dump.
Experiments
- WIP = everything is a work in progress, but these are especially rough
- ⭐ = a good starting place for those looking to build something similar
Embedded stylesheet
Apply CSS to a single page or post via <style> embed.
Short-form content feed
Riffs on my short-form content feed post.
- ⭐ Short-form content feed with text/emoji links on bottom right
- Short-form content feed with (fake) linked dates
- Tiny notes on the side (dynamic)
- Tiny notes everywhere (dynamic)
- Polaroid-style image gallery (dynamic)
- Tiny notes + photos together (dynamic)
- ⭐ Skeleton image gallery (dynamic)
- Little windows
Layouts
Playing with the placement of things.
- Header on side
- Microblog
- Post content reorder
- Polaroid-style image gallery (static)
- Tiny notes everywhere (static)
- Tiny notes on the side (static)
- Red window
- Book list — WIP
- Asides styled to the right
- Masonry
- Load page fragments
Blog posts lists
- Blog posts list with date after post title
- Blog posts list with dates on right
- Blog posts list with dates on right + leading dots
- Tags first on blog page
- Blog posts list with row highlight on hover
Themes
Where I test new themes & save old ones.
- Base for testing
- Catppuccin, sans-serif
- Rosé Pine, serif
- Neon poppy & chartreuse v1
- Neon poppy & chartreuse v2
Toast buttons
Colors
Fonts
Embedding different fonts & seeing how they look.
Nav
Ideas, things to try
Colors
Rosé Pine color paletteThe colors in this Peaches en Regalia posterThe colors in this Masayoshi Takanaka – All of Me poster
Design & layout
Do I need a header nav? Alternative ways to link- Subtle background patterns
- Transparent textures
- Paper, graph paper
Try more pixel fonts? Old school PC fonts- This font: Mayonnaise
A book list: Bookshelf Town
Titles
Sylvia’s space, Sylvia’s sandbox, something Sylvia (because alliteration is fun), but I also don't really want to use my nameA parenthetical departure; a digression.- Hide titles entirely
Make current URL titles small- A neon sign
- Flowers growing out of letters
Toast buttons
Non-heart toast emojis? (But so difficult to find options that occupy the same space across devices)Monospace kaomojis/ASCII art- Sprite illustrations
Sarah Joy's very cool new toast button
References
Resources I go to often:
About this website
This website is:
- Powered by Bear
- Written with Xed and a QAZ keyboard
- Purposefully without a theme CSS
- Licensed under CC BY-NC-SA (not everything shared is written by me, but original authors are referenced & linked — they have their own licenses)
- Created by human, not by AI
Don't mind the post dates. I adjust them so none of my test posts display on the recent discovery feed.
This website was created on and last updated 2 weeks, 5 days ago. It can be reached at dev.departure.blog or sylvia-dev.bearblog.dev.
Theme CSS
html {
color-scheme: light dark;
}
.highlight pre {
white-space: break-spaces;
}
Toggle
<details>
<summary>View the CSS, HTML, and Markdown on this page</summary>
**CSS:**
**HTML + Markdown:**
</details>