# Obsidian Styles

> A literate programming version of the stylesheet I use for my Obsidian setup.

Source: https://curiouslychase.com/posts/obsidian-styles/

My [Obsidian](https://curiouslychase.com/tools/obsidian/) styles are [tangled](https://curiouslychase.com/engineering/literate-programming/) from this note by using `md-tangle`. I tangle this file by running the following in my [terminal](https://curiouslychase.com/tools/iterm2/):

```shell
md-tangle ~/vault/42\ -\ Dotfiles/Obsidian\ Styles.md
```

I use `Archivo` for my system font:

```css tangle:~/vault/.obsidian/snippets/minimal-plus.css
@import url("https://fonts.googleapis.com/css2?family=archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  font-family: "Archivo";
}
```

These are the root colors for my custom styling:

```css tangle:~/vault/.obsidian/snippets/minimal-plus.css
:root {
  --colors-curiousGrayscale50: #f9f8f2;
  --colors-curiousGrayscale100: #e0dfd9;
  --colors-curiousGrayscale200: #c7c6c1;
  --colors-curiousGrayscale300: #adada8;
  --colors-curiousGrayscale400: #94938f;
  --colors-curiousGrayscale500: #7a7a76;
  --colors-curiousGrayscale600: #61615e;
  --colors-curiousGrayscale700: #474745;
  --colors-curiousGrayscale800: #2e2e2c;
  --colors-curiousGrayscale900: #141414;
  --colors-curiousYellow50: #f9f8f2;
  --colors-curiousYellow100: #f9f6e5;
  --colors-curiousYellow150: #f9f4d4;
  --colors-curiousYellow200: #f9f1bb;
  --colors-curiousYellow250: #f9e770;
  --colors-curiousYellow300: #f9e24b;
  --colors-curiousYellow400: #f9dd25;
  --colors-curiousYellow500: #f9d802;
  --colors-curiousYellow600: #e0c302;
  --colors-curiousYellow650: #c7ad02;
  --colors-curiousYellow700: #ad9601;
  --colors-curiousYellow750: #948001;
  --colors-curiousYellow800: #615401;
  --colors-curiousYellow850: #473e01;
  --colors-curiousYellow900: #141200;
}
```

I style my Loom and YouTube `iframe`s so that they filled the width of my Obsidian Note:

```css tangle:~/vault/.obsidian/snippets/minimal-plus.css
.iframe-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: 2rem 0;
  height: 0;
}

iframe {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
```

I use yellow for my link text decoration in both dark and light mode and I use a gray for link color in light mode and yellow for link color in dark mode:

```css tangle:~/vault/.obsidian/snippets/minimal-plus.css
.cm-s-obsidian span.cm-link {
  color: var(--colors-curiousGrayscale900);
  font-weight: 600;
  text-decoration: underline 3px;
  text-decoration-color: var(--colors-curiousYellow500);
}

.theme-dark .cm-s-obsidian span.cm-link {
  color: var(--colors-curiousYellow500);
  font-weight: 600;
  text-decoration: underline 3px;
  text-decoration-color: var(--colors-curiousYellow500);
}
```