Minimal headerless design

Tricks & Techniques
1

I just found out about SilverBullet and have really enjoyed the experience! For fun, I played around a bit with styling and created a “theme” some might enjoy. The header has the same background as the rest of the document (pretty easily implemented), but it also gets a shadow when you scroll (a bit harder). This uses a technique described in a CSS-Tricks article.

I also changed the default font to the system’s (expect for in code blocks), and the background of the dark theme to be lighter so as to more clearly show the scroll shadow.

This can probably be improved, so if you have any suggestions, please say. Anyway, enjoy!

silverbullet-headerless-styling
silverbullet-headerless-styling1092×988 157 KB

To use this styling, place the code below in a space-script code block. I created a new file called STYLES for this purpose, but I think it can be placed anywhere.

html[data-theme="dark"] {
  --root-background-color: #1E1E1E;
}

#sb-top {
    --top-background-color: var(--root-background-color);
    --top-border-color: var(--root-background-color);
}

div:not(.sb-line-fenced-code) {
  font-family: system-ui;
}

.cm-scroller:not(.sb-modal-box *) {
  overflow: auto;

  background:
    /* Shadow Cover TOP */
    linear-gradient(
      var(--root-background-color) 30%,
      rgb(from var(--root-background-color) r g b / 50%)
    ) center top,
    
    /* Shadow Cover BOTTOM */
    linear-gradient(
      rgb(from var(--root-background-color) r g b / 50%),
      var(--root-background-color) 70%
    ) center bottom,
    
    /* Shadow TOP */
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center top,
    
    /* Shadow BOTTOM */
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center bottom;
  
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, local;
}
6 Likes