Color

Colors are pretty barebones in Obsidian. They provide sensible defaults to get going with if you're prototyping but have the ability to be overridden. Most of the values are generated from postcss-color-function.

Media Queries

This project uses mobile-first media queries, meaning that a base set of styles is targeted and then styled conditionally for increasing larger viewports. --sm targets viewports 500px wide and larger, --md targets viewports 768px wide and larger, --lg targets viewports 924px wide and larger, finally --xl targets 1200px and wider.

Before, this projected used postcss-custom-media, but now just uses standard media queries.

@custom-media --sm only screen and (width >= 31.25rem);
@custom-media --md only screen and (width >= 48rem);
@custom-media --lg only screen and (width >= 57.75rem);
@custom-media --xl only screen and (width >= 75rem);

Global Defaults

There are lots of default declarations in this project, notably Obsidian uses a base space of 1rem for most things, 100% for an initial font-size, a base container size of 75rem (~1200px) and default of 375 milliseconds for transitions. For information about rem units check out The Lengths of CSS from CSS-Tricks.

For font families themselves, there's a few font stacks (that you should override for your needs) for sans-serif, serif and monospace fonts; plus there's a system font stack. The current default font is the system font stack.

Theme

The theme portion of Obsidian is admittedly in serious flux. Expect this module to change. The main thing that's useful for is to easily override font families quickly, so when you install Obsidian.css you can contour it to your needs.

Blue is the main color for buttons, links, form UI values, color-1 provides an easy handle to override it.

:root {
  /* Colors */
  --color-1: var(--blue);
  --color-2: var(--red);
  --color-3: var(--yellow);
  --color-4: var(--bluegreen);
  --color-5: var(--litegray);

  /* Font Choices */
  --headlines: var(--ff-sans-serif);
  --default: var(--ff-sans-serif);
  --body-text: var(--ff-serif);
}

Overriding Values

To override a default value in Obsidian.css specify in a :root declaration after the @import statements. For more information about CSS variables checkout Using CSS variables from MDN and the this playground.

@import 'obsidian.css';

:root {
  --ff-sans-serif: 'Proxima Nova', 'Avenir Next', 'Helvetica Neue', sans-serif;
}