`space-style` snippets showcase 💅

Tricks & Techniques
1

Over the past year of using Silverbullet, I’ve collected a handful of space-style snippets that improve the look and feel of my workspace. Thought it’d be cool to share them here — and I’d love to see what others have come up with too :slight_smile:

1 Like
2

Fira Code Fonts + Ligatures

image.psd
image.psd322×212 5.39 KB

space-style 
@font-face {
  font-family: 'Fira Code';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Light.woff2') format('woff2'),
    url("woff/FiraCode-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Fira Code';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2') format('woff2'),
    url("woff/FiraCode-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Fira Code';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Medium.woff2') format('woff2'),
    url("woff/FiraCode-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Fira Code';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-SemiBold.woff2') format('woff2'),
    url("woff/FiraCode-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Fira Code';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2') format('woff2'),
    url("woff/FiraCode-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}


/* Use Fira Nerdfont for fancy ligatures -> <=> <= != */
#sb-root {
  --editor-font: "Fira Code", "iA-Mono","Menlo";
}
1 Like
3

Auto-collapsing Frontmatter

space-style 
/* Hiding Frontmatter when not editing */
.sb-frontmatter.sb-line-frontmatter-outside:has(+ .sb-frontmatter) ~ .sb-frontmatter {
    display:none
}

/*Making background same as top*/
.sb-frontmatter {
  background-color: var(--top-background-color) !important;
}

/* First line while editing */
:not(.sb-frontmatter) + .sb-frontmatter:not(.sb-line-frontmatter-outside) {
  padding-top: 5px;
  margin-top: -5px;
}

/* Pad lines while not editing */
.sb-frontmatter:not(.sb-line-frontmatter-outside) {
  padding-left: 10px !important;
}

/* Last line while editing */
.sb-frontmatter:not(:has(+ .sb-frontmatter)) {
  border-radius: 0px 0px 8px 8px;
  padding-bottom: 5px;
}

/* Cursor outside */
.sb-line-frontmatter-outside {
  padding-top: 0px;
  margin-top: -5px;
  border-radius: 0px 0px 8px 8px;
}

/* make frontmatter text same color as script markers */
.sb-frontmatter-marker{
  color: var(--editor-code-info-color);
}
2 Likes
4

Rounded Code Snippets

scrn-2025-04-18-12-52-42
scrn-2025-04-18-12-52-42572×331 11.5 KB

space-styles 
/* first line - editing */
div:not(.sb-line-fenced-code) + .sb-line-fenced-code {
  border-radius: 8px 8px 0px 0px;
  padding-top: 15px !important;
  padding-right: 10px !important;
}

/* only one line */
div:not(.sb-line-fenced-code) + .sb-line-fenced-code:not(:has(+ .sb-line-fenced-code)) {
  border-radius: 8px;
}

.sb-line-fenced-code:not(.sb-fenced-code-iframe) {
  padding-left: 15px !important;
  padding-right: 10px !important;
}

/* last line - editing  */
.sb-line-fenced-code.cm-line:not(:has(+ .sb-line-fenced-code)) {
  border-radius: 0px 0px 8px 8px;
}