131 lines
2.8 KiB
Sass
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)
|