theme.scss

// Semantic color scheme
$theme-colors: (
  primary: #007bff,
  secondary: #868e96,
  success: #28a745,
  info: #17a2b8,
  warning: #ffc107,
  danger: #dc3545,
  light: #f8f9fa,
  dark: #343a40
);

// Options
//
// Quickly modify global styling by enabling or disabling optional features.
 
$enable-rounded:            true !default;
$enable-shadows:            false;
$enable-gradients:          false;
$enable-transitions:        true !default;
$enable-hover-media-query:  false !default;
$enable-grid-classes:       true !default;
$enable-print-styles:       true !default;

// Variables
//
// Theme settings.

$body-bg: white;
$body-color: #292b2c;
$body-color-inverse: invert($body-color) !default;
$link-color: #00b0eb;

$font-family-base: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$headings-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;

$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-h1: 2.5 * $font-size-base;
$font-size-h2: 2 * $font-size-base;
$font-size-h3: 1.75 * $font-size-base;
$font-size-h4: 1.5 * $font-size-base;
$font-size-h5: 1.25 * $font-size-base;
$font-size-h6: $font-size-base;

$display1-size: 6 * $font-size-base;
$display2-size: 5.5 * $font-size-base;
$display3-size: 4.5 * $font-size-base;
$display4-size: 3.5 * $font-size-base;

$border-radius: .25rem;


@import 'bootstrap-4.0.0-beta.1';


body > * {
  background-size: cover;
}

.opaque-overlay {
  overflow: hidden;
  position: relative; 
  > *:first-child:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px; 
    pointer-events:none;
    background: rgba(map-get($theme-colors, 'dark'), 0.25);
  }
}


.gradient-overlay {
  overflow: hidden;
  position: relative; 
  > *:first-child:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px; 
    pointer-events:none;
    background: linear-gradient(to top, map-get($theme-colors, 'dark') 0%, transparent 100%);
  }
}