_variables.scss

/**
 * Some variables the user can overwrite
 */

// Some common breakpoints for widths of devices. Refer: https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/
$screen-tablet:  480px;
$screen-laptop:  768px;
$screen-desktop: 1024px;

:root {
  --spacing: 1rem;

  --body-bg:          var(--oc-white);
  --body-fg:          var(--oc-gray-1);
  --body-color-light: var(--oc-gray-6);
  --body-color:       var(--oc-gray-8);
  --body-color-dark:  var(--oc-black);
  --accent-color:     var(--oc-orange-8);
  --message-color:    var(--oc-green-8);

  --body-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --title-font:       'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  --code-font:        'Courier New', Courier, monospace;
  --line-height:      1.5;
  --body-font-size:   16px;
  --border-radius:    .5em;

  --header-color:      var(--oc-white);
  --header-color-dark: var(--oc-gray-4);
  --header-bg:         var(--oc-black);

  --post-card-shadow:        rgba(39, 44, 49, 0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
  --post-card-hover-shadow:  0 0 1px rgba(39, 44, 49, 0.10), 0 3px 16px rgba(39, 44, 49, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-bg:          var(--oc-gray-9);
    --body-fg:          var(--oc-gray-8);
    --body-color-light: var(--oc-gray-6);
    --body-color:       var(--oc-gray-3);
    --body-color-dark:  var(--oc-white);
    --accent-color:     var(--oc-blue-3);
    --message-color:    var(--oc-green-3);

    --post-card-shadow:  rgba(181, 205, 228, 0.06) 8px 14px 38px, rgba(181, 205, 228, 0.03) 1px 3px 8px;
    --post-card-shadow:  0 0 1px rgba(181, 205, 228, 0.10), 0 3px 16px rgba(181, 205, 228, 0.07);
  }
}

@media screen and (min-width: $screen-laptop) {
  :root {
    --body-font-size: 18px;
  }
}