// 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"

;