212 lines
7.7 KiB
SCSS
212 lines
7.7 KiB
SCSS
/* ==========================================================================
|
|
Variables
|
|
========================================================================== */
|
|
|
|
/*
|
|
Typography
|
|
========================================================================== */
|
|
|
|
$doc-font-size: 16px !default;
|
|
$doc-font-size-medium: $doc-font-size * 1.1 !default;
|
|
$doc-font-size-large: $doc-font-size * 1.15 !default;
|
|
$doc-font-size-x-large: $doc-font-size * 1.2 !default;
|
|
|
|
/* paragraph indention */
|
|
$paragraph-indent: false !default; // true, false (default)
|
|
$indent-var: 1.3em !default;
|
|
|
|
/* Modern font stack */
|
|
/* https://github.com/system-fonts/modern-font-stacks */
|
|
|
|
/* Sans serif - modern font stack */
|
|
$system-ui: system-ui, sans-serif;
|
|
$humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
|
$geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
|
$classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
|
|
$neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
|
|
$industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
|
|
$rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
|
|
|
|
/* sans serif typefaces - defined in Minimal Mistakes */
|
|
$helvetica: Helvetica, "Helvetica Neue", Arial, sans-serif !default;
|
|
|
|
/* Serif - modern font stack */
|
|
$transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
|
$old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;;
|
|
$monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;
|
|
$slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
|
|
$antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
|
|
$didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
|
|
|
|
/* serif typefaces - defined in Minimal Mistakes */
|
|
$georgia: Georgia, serif !default;
|
|
$times: Times, serif !default;
|
|
$bodoni: "Bodoni MT", serif !default;
|
|
$calisto: "Calisto MT", serif !default;
|
|
$garamond: Garamond, serif !default;
|
|
|
|
/* Monospace - modern font stack */
|
|
$monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
|
|
|
/* Handwritten - modern font stack */
|
|
$handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
|
|
|
|
/* Defaults used in Minimal mistakes */
|
|
$default-sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
|
|
$default-serif: Georgia, Times, serif;
|
|
$default-monospace: Monaco, Consolas, "Lucida Console", monospace;
|
|
|
|
/* Emoji native from modern font stack - add to the end of the font-face for native emojis */
|
|
$emoji-native: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
|
|
/* system typefaces */
|
|
$serif: $default-serif !default;
|
|
$sans-serif: $default-sans-serif !default;
|
|
$sans-serif-narrow: $sans-serif !default;
|
|
$monospace: $default-monospace !default;
|
|
|
|
$global-font-family: $sans-serif !default;
|
|
$header-font-family: $sans-serif !default;
|
|
$caption-font-family: $serif !default;
|
|
|
|
/* type scale */
|
|
$my-text-size: calc(1em * 1.0) !default; // ~16px
|
|
$type-size-1: calc(2.441em * 1.0) !default; // ~39.056px
|
|
$type-size-2: calc(1.953em * 1.0) !default; // ~31.248px
|
|
$type-size-3: calc(1.563em * 1.0) !default; // ~25.008px
|
|
$type-size-4: calc(1.25em * 1.0) !default; // ~20px
|
|
$type-size-5: calc(1em * 1.0) !default; // ~16px
|
|
$type-size-6: calc(0.75em * 1.0) !default; // ~12px
|
|
$type-size-7: calc(0.6875em * 1.0) !default; // ~11px
|
|
$type-size-8: calc(0.625em * 1.0) !default; // ~10px
|
|
|
|
/* headline scale */
|
|
$h-size-1: 1.563em !default; // ~25.008px
|
|
$h-size-2: 1.25em !default; // ~20px
|
|
$h-size-3: 1.125em !default; // ~18px
|
|
$h-size-4: 1.0625em !default; // ~17px
|
|
$h-size-5: 1.03125em !default; // ~16.5px
|
|
$h-size-6: 1em !default; // ~16px
|
|
|
|
/*
|
|
Colors
|
|
========================================================================== */
|
|
|
|
$gray: #7a8288 !default;
|
|
$dark-gray: mix(#000, $gray, 50%) !default;
|
|
$darker-gray: mix(#000, $gray, 60%) !default;
|
|
$light-gray: mix(#fff, $gray, 50%) !default;
|
|
$lighter-gray: mix(#fff, $gray, 90%) !default;
|
|
|
|
$background-color: #fff !default;
|
|
$code-background-color: #fafafa !default;
|
|
$code-background-color-dark: $light-gray !default;
|
|
$text-color: $dark-gray !default;
|
|
$muted-text-color: mix(#fff, $text-color, 20%) !default;
|
|
$border-color: $lighter-gray !default;
|
|
$form-background-color: $lighter-gray !default;
|
|
$footer-background-color: $lighter-gray !default;
|
|
|
|
$primary-color: #6f777d !default;
|
|
$success-color: #3fa63f !default;
|
|
$warning-color: #d67f05 !default;
|
|
$danger-color: #ee5f5b !default;
|
|
$info-color: #3b9cba !default;
|
|
$focus-color: $primary-color !default;
|
|
$active-color: mix(#fff, $primary-color, 80%) !default;
|
|
|
|
/* YIQ color contrast */
|
|
$yiq-contrasted-dark-default: $dark-gray !default;
|
|
$yiq-contrasted-light-default: #fff !default;
|
|
$yiq-contrasted-threshold: 175 !default;
|
|
$yiq-debug: false !default;
|
|
|
|
/* brands */
|
|
$behance-color: #1769ff !default;
|
|
$bitbucket-color: #205081 !default;
|
|
$bluesky-color: #1083fe !default;
|
|
$dribbble-color: #ea4c89 !default;
|
|
$facebook-color: #3b5998 !default;
|
|
$flickr-color: #ff0084 !default;
|
|
$foursquare-color: #0072b1 !default;
|
|
$github-color: #171516 !default;
|
|
$gitlab-color: #e24329 !default;
|
|
$instagram-color: #517fa4 !default;
|
|
$keybase-color: #ef7639 !default;
|
|
$lastfm-color: #d51007 !default;
|
|
$linkedin-color: #007bb6 !default;
|
|
$mastodon-color: #2b90d9 !default;
|
|
$pinterest-color: #cb2027 !default;
|
|
$reddit-color: #ff4500 !default;
|
|
$rss-color: #fa9b39 !default;
|
|
$soundcloud-color: #ff3300 !default;
|
|
$stackoverflow-color: #fe7a15 !default;
|
|
$tumblr-color: #32506d !default;
|
|
$twitter-color: #55acee !default;
|
|
$vimeo-color: #1ab7ea !default;
|
|
$vine-color: #00bf8f !default;
|
|
$youtube-color: #bb0000 !default;
|
|
$xing-color: #006567 !default;
|
|
|
|
/* links */
|
|
$link-color: mix(#000, $info-color, 20%) !default;
|
|
$link-color-hover: mix(#000, $link-color, 25%) !default;
|
|
$link-color-visited: mix(#fff, $link-color, 15%) !default;
|
|
$masthead-link-color: $primary-color !default;
|
|
$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
|
|
$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
|
|
|
|
/* notices */
|
|
$notice-background-mix: 80% !default;
|
|
$code-notice-background-mix: 90% !default;
|
|
|
|
/* syntax highlighting (base16) */
|
|
$base00: #263238 !default;
|
|
$base01: #2e3c43 !default;
|
|
$base02: #314549 !default;
|
|
$base03: #546e7a !default;
|
|
$base04: #b2ccd6 !default;
|
|
$base05: #eeffff !default;
|
|
$base06: #eeffff !default;
|
|
$base07: #ffffff !default;
|
|
$base08: #f07178 !default;
|
|
$base09: #f78c6c !default;
|
|
$base0a: #ffcb6b !default;
|
|
$base0b: #c3e88d !default;
|
|
$base0c: #89ddff !default;
|
|
$base0d: #82aaff !default;
|
|
$base0e: #c792ea !default;
|
|
$base0f: #ff5370 !default;
|
|
|
|
/*
|
|
Breakpoints
|
|
========================================================================== */
|
|
|
|
$small: 600px !default;
|
|
$medium: 768px !default;
|
|
$medium-wide: 900px !default;
|
|
$large: 1024px !default;
|
|
$x-large: 1280px !default;
|
|
$max-width: $x-large !default;
|
|
|
|
/*
|
|
Grid
|
|
========================================================================== */
|
|
|
|
$right-sidebar-width-narrow: 200px !default;
|
|
$right-sidebar-width: 200px !default;
|
|
$right-sidebar-width-wide: 400px !default;
|
|
|
|
/*
|
|
Other
|
|
========================================================================== */
|
|
|
|
$border-radius: 4px !default;
|
|
$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
|
|
$nav-height: 2em !default;
|
|
$nav-toggle-height: 2rem !default;
|
|
$navicon-width: 1.5rem !default;
|
|
$navicon-height: 0.25rem !default;
|
|
$global-transition: all 0.2s ease-in-out !default;
|
|
$intro-transition: intro 0.3s both !default;
|