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.

• Demo with my theme
• Demo with McLuhan Lite theme

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

• ⭐ Toast CSS
• Toast button styles
• Toasts as stars in a jar — WIP
• Animated toast buttons — WIP

Colors

• Magnolias, winter
• Peaches en Regalia

Fonts

Embedding different fonts & seeing how they look.

• Cordata PPC-400
• Departure Mono
• TT2020
• TT2020, style E

Nav

• Bracket nav / link style

Ideas, things to try

• Colors

  • Rosé Pine color palette
  • The colors in this Peaches en Regalia poster
  • The 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 name
  • A 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:

• System colors | MDN
• CSS: Cascading Style Sheets | MDN
• CSS Flexbox Layout Guide | CSS-Tricks

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 08 Dec, 2024 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>