You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

131 lines
2.8 KiB
Sass

// Standard page width
$page-width: 1000px
// Minimum supported page width (forced on html, body)
$min-page-width: 500px
// Small card objects, wrap text or small images on lists
$card-width: 400px
$card-height: 500px
// Consistent spacing for elements
$smallest-spacer: 10px
$small-spacer: 30px
$spacer: 1rem
$large-spacer: $spacer * 1.5
$huge-spacer: $spacer * 3
// Fonts
$sans-line-height: 1.5
$mono-line-height: 1
$huge-font-size: 3em
$large-font-size: 2em
$bigger-font-size: 1.2em
$sans-font-size: 1em
$mono-font-size: 1em
// Consistent border radius
$border-radius: 0.25rem
// Z indexes for consistent ordering across site
$foremost: 100
$above: 30
$front: 20
$foreground: 1
$background: 0
$back: -1
$far: -20
$farthest: -100
// Color palette
$gray-000: #f8f9fa
$gray-100: #f1f3f5
$gray-200: #e9ecef
$gray-300: #dee2e6
$gray-400: #ced4da
$gray-500: #adb5bd
$gray-600: #868e96
$gray-700: #495057
$gray-800: #343a40
$gray-900: #212529
$red: #fa5252
$pink: #e64980
$grape: #be4bdb
$purple: #7950f2
$indigo: #4c6ef5
$blue: #228be6
$cyan: #15aabf
$teal: #12b886
$green: #40c057
$yellow: #fab005
$orange: #fd7e14
$gray: #454545
$blue-300: #74c0fc
$blue-400: #4dabf7
$yellow-100: #fff3bf
// Color Theme
$background-color: #efefef
$background-color-dark: #151515
$alt-background-color: #dfdfdf
$alt-background-color-dark: #111
$foreground-color: $gray-700
$foreground-color-dark: $gray-500
$surface-color: $cyan
$surface-color-dark: $cyan
$accent-color: $cyan
$accent-color-dark: $cyan
$text-color: #fff
$text-color-dark: #000
$title-text-color: #444
$title-text-color-dark: #ddd
\:root
--background-color: #{$background-color}
--alt-background-color: #{$alt-background-color}
--foreground-color: #{$foreground-color}
--sans-font: 'Fira Sans', 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif
--mono-font: 'Fira Mono', Menlo, 'Lucida Console', Consolas, monaco, monospace
--text-color: #{$text-color}
--title-text-color: #{$title-text-color}
--link-color: #{$blue}
--link-hover-color: #1c7ed6
--prose-link-color: #{$gray-800}
--prose-link-hover-color: #{$gray-500}
--prose-link-shadow-color: #{$gray-000}
--highlight-color: #fff
--heading-color: #{$gray-900}
--border-color: #{$gray-300}
@media (prefers-color-scheme:dark)
\:root
--background-color: #{$background-color-dark}
--alt-background-color: #{$alt-background-color-dark}
--foreground-color: #{$foreground-color-dark}
--text-color: #{$text-color-dark}
--title-text-color: #{$title-text-color-dark}
--prose-link-color: #fff
--prose-link-hover-color: #{$gray-200}
--prose-link-shadow-color: #{$gray-500}
--highlight-color: #{$gray-800}
--heading-color: #fff
--link-color: #{$blue-300}
--link-hover-color: #{$blue-400}
--border-color: rgba(255, 255, 255, 0.15)