spaceship-monolith/journey/theme.css

Astro UI for Obsidian Vaults

@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');

@import '../galaxy/theme';

@import './textures';
@import './article';
@import './bubbles';
@import './sidebar';
@import './code';
@import './callouts';
@import './timeline';
@import './map';

@custom-variant dark (&:where(.dark, .dark *));

/* dancing-script-latin-wght-normal */
@font-face {
  font-family: 'Dancing Script Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/dancing-script:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* gloria-hallelujah-latin-400-normal */
@font-face {
  font-family: 'Gloria Hallelujah';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/gloria-hallelujah@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/gloria-hallelujah@latest/latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@theme {
  /** Accent Colors **/
  --color-primary: oklch(.83 .058 83.6);
  --color-text: oklch(.41 .077 78.9);
  --color-text-dark: oklch(.83 .058 83.6);
  
  /** Components **/
  --color-background: hsl(21, 61%, 36%);
  --color-article-background: var(--color-gray-100);
  --color-article-title-foreground: var(--color-primary);
  --color-header-background: transparent;
  --color-sidebar-background: hsl(21, 61%, 36%);
  --color-sidebar-content-background: hsl(21, 61%, 36%);
  --color-tab-background: transparent;
  --color-tab-foreground: var(--color-text-dark);
  --color-tab-active-background: hsl(21, 61%, 36%);
  --color-tab-active-foreground: var(--color-text-dark);
  --color-tab-active-border: var(--color-text);
  --color-menu-active-background: hsl(21, 61%, 36%);
  --color-menu-foreground: #2b1e13;
  --color-menu-active-foreground: oklch(.83 .058 83.6);
  --color-badge-background: #e3d5c0;
  --color-badge-foreground: var(--color-obsidian-500);
  --color-badge-border: oklch(.83 .058 83.6);
  --color-button-background: hsl(21, 61%, 36%);
  --color-button-foreground: var(--color-text-dark);
  --color-footer-background: oklch(0.91 0.048 83.6);
  --color-footer-foreground: var(--color-text);
  --color-footer-border: oklch(.83 .058 83.6);
  --color-search-border: #523823;
  --color-search-text: #523823;
  --color-search-text-mark: hsl(21, 61%, 36%);
  --color-graph-background: hsl(21, 61%, 26%);
  --color-graph-link: var(--color-primary);
  --color-graph-highlight: oklch(0.91 0.048 83.6);
  --color-graph-label: #fff;

  /** Prose **/
  --color-blockquote-foreground: var(--color-text);
  --color-code-background: oklch(0.87 0.059 83.7);
  --color-code-foreground: var(--color-text);
  --color-heading-foreground: var(--color-text);
  --color-li-marker-foreground: var(--color-text);
  --color-paragraph-foreground: var(--color-text);
  --color-pre-background: transparent;
  --color-strong-foreground: var(--color-text);
  --color-hr-border: oklch(.83.058 83.6);

  --font-title: "Dancing Script Variable", "sans-serif";
  --font-heading: "Dancing Script Variable",  "sans-serif";
  --font-paragraph: "Gloria Hallelujah",  "sans-serif";
  --font-menu: "Gloria Hallelujah",  "sans-serif";
  --font-code: "Recursive", "ui-monospace";

  --left-sidebar-content-height: calc(100vh - 80px);
  --left-sidebar-header-height: 170px;

  --shadow-card: 0px 0px 6px 0px rgba(148, 75, 36, 0.4), 0px 0px 2px rgba(148, 75, 36, 0.2), 0 0 0 1px hsla(232, calc(0.4* 80%), calc(64%), 0.2);
}
@layer theme {
  @media (width >= 28rem /** breakpoints-md **/) {
    :root {
      --left-sidebar-content-height: calc(100vh - 50px);
    }
  }
}

@utility html {
  @apply scrollbar-thumb-[#FDCDAE];
}

@utility main {
  @apply p-0 lg:p-6 lg:gap-6 leather;

  &::before {
    position: fixed;
  }
}

@utility sidebar-content {
  @apply leather;
  &::before {
    @apply rounded-xl;
  }
}
@utility sidebar-arrow {
  @apply leather;
}