Obsidian Styles

My Obsidian styles are tangled from this note by using md-tangle. I tangle this file by running the following in my terminal:

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

I use Archivo for my system font:

@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:

: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 iframes so that they filled the width of my Obsidian Note:

.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:

.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);
}