// Font Families $base-font-family: -apple-system-font, BlinkMacSystemFont, “San Francisco”, “Helvetica Neue”, Helvetica, Arial, sans-serif !default;
$monospace-font-family: “SFMono-Regular”, Consolas, “Liberation Mono”, Menlo, Courier, monospace !default;
// Site Wide Variables $site-header-text-color: ffffff !default; $site-header-text-color-visited: darken(#828282, 25%); // –grey-color-dark in light mode $site-title-font-size: 32px !default; $site-title-small-font-size: 25px !default; $site-footer-font-size: 16px !default;
// Font Sizes // $title-large-font-size: 1px !default; $title-font-size: 42px !default; $title-medium-font-size: 34px !default; $title-small-font-size: 27px !default;
$subtitle-font-size: 32px !default; $subtitle-small-font-size: 22px !default;
$meta-font-size: 18px !default; $meta-small-font-size: 16px !default;
$lead-font-size: 21px !default; $lead-small-font-size: 19px !default;
$base-font-size: 17px !default; $caption-font-size: 17px !default; $blockquote-font-size: 18px !default; $small-font-size: $base-font-size * 0.875 !default; $nav-font-size: 16px !default;
// Font Variables $base-font-weight: 400 !default; $heavy-font-weight: 600 !default; $base-line-height: 1.5 !default;
// Spacing/Padding $spacing-unit: 20px !default; $page-content-padding: 80px !default;
// Colors $grey-color: #828282 !default; $grey-color-light: lighten(#828282, 40%); // Use the $grey-color as base $grey-color-lighter: lighten(#828282, 45%); // Use the $grey-color as base $grey-color-dark: darken(#828282, 25%); // Use the $grey-color as base $grey-color-darker: darken(#828282, 30%); // Use the $grey-color as base $dm-grey-color-light: darken(#828282, 25%); // Use the $grey-color as base $dm-grey-color-lighter: darken(#828282, 30%); // Use the $grey-color as base $dm-grey-color-dark: lighten(#828282, 40%); // Use the $grey-color as base $dm-grey-color-darker: lighten(#828282, 45%); // Use the $grey-color as base
$link-hover-opacity: .65 !default;
// Width of the content area $on-palm: 692px !default; $on-laptop: 980px !default; $on-medium: 1068px !default; $on-small: 735px !default;
// Variables that change with dark mode :root {
--link-color: #0070c9; --link-visited-color: #0059a0; --text-color: #333333; --dim-text-color: #ffffff; --background-color: #ffffff; --grey-color-light: #{$grey-color-light}; --grey-color-lighter: #{$grey-color-lighter}; --grey-color-dark: #{$grey-color-dark}; --grey-color-darker: #{$grey-color-darker}; --content-width: 820px; // Original 980px --header-content-width: 1180px; --header-background-color: #2C2C2C; --footer-background-color: #f2f2f2; --footer-text-color: ${$grey-color};
}
@media (prefers-color-scheme: dark) {
:root { --link-color: #328cd3; --link-visited-color: #2c7ab7; --text-color: #d7d7d8; --dim-text-color: #000000; --background-color: #1e1d1e; --grey-color-light: #{$dm-grey-color-light}; --grey-color-lighter: #{$dm-grey-color-lighter}; --grey-color-dark: #{$dm-grey-color-dark}; --grey-color-darker: #{$dm-grey-color-darker}; --header-background-color: #161616; --footer-background-color: #333333; --footer-text-color: lighten(#828282, 40%); // Use the $grey-color as base }
}
// Use media queries like this: // @include media-query($on-palm) { // .wrapper { // padding-right: $spacing-unit / 2; // padding-left: $spacing-unit / 2; // } // } @mixin media-query($device) {
@media screen and (max-width: $device) { @content; }
}
// Import partials. @import
"jsblog/base", "jsblog/layout", "jsblog/syntax-highlighting"
;