# Minimal headerless design

**URL:** <https://community.silverbullet.md/t/minimal-headerless-design/1118>\
**Category:** Tricks & Techniques\
**Created:** [October 15, 2024, 7:25am UTC](https://community.silverbullet.md/t/minimal-headerless-design/1118 "2024-10-15T07:25:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![majo](https://community.silverbullet.md/letter_avatar_proxy/v4/letter/m/e79b87/32.png) [@majo](https://community.silverbullet.md/u/majo)\
**Post date:** [October 15, 2024, 7:25am UTC](https://community.silverbullet.md/t/minimal-headerless-design/1118/1 "2024-10-15T07:25:20Z")

</div>

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](https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/).

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](https://community.silverbullet.md/uploads/default/original/1X/7cfa11c713a9cf59c0959bb4af57e1022c5bdd43.jpeg)

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.

```css
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;
}

```

---

<div class="post-metadata">

**Author:** ![mjf](https://community.silverbullet.md/user_avatar/community.silverbullet.md/mjf/32/654_2.png) [@mjf](https://community.silverbullet.md/u/mjf)\
**Post date:** [February 18, 2025, 6:25pm UTC](https://community.silverbullet.md/t/minimal-headerless-design/1118/2 "2025-02-18T18:25:02Z")

</div>

@majo It may be my fault, because of my over complicated style as time is passing, but it seems that the shadow is vanishing when crossing the code blocks… I just want to verify if it’s something wrong with my styling rulesets or if it’s not. Thanks.

---

<div class="post-metadata">

**Author:** ![LumenYoung](https://community.silverbullet.md/user_avatar/community.silverbullet.md/lumenyoung/32/368_2.png) [@LumenYoung](https://community.silverbullet.md/u/LumenYoung)\
**Post date:** [February 21, 2025, 6:46am UTC](https://community.silverbullet.md/t/minimal-headerless-design/1118/3 "2025-02-21T06:46:53Z")

</div>

Waow, thank you for sharing!

> [@majo](#):
>
> To use this styling, place the code below in a `space-script` code block.

but I think this should be placed in `space-style` block right?