styles.scss

---
sitemap: false
---

// Colors
$white: #FFFFFF;
$black: #222222;
$blue: #0495DE;
$stack-blue: #0377B1;
$footer-blue: #303D4E;
$green: #00cc3d;
$yellow: #e6ba06;
$orange: #FF403D;
$red: #bd0000e0;
$gray: lighten($black, 50%);
$light-gray: lighten($black, 75%);
$dark-gray: lighten($black, 25%);

// Picnic color overrides
$picnic-white: $white !default;
$picnic-black: $black !default;
$picnic-primary: $orange !default;
$picnic-success: $green !default;
$picnic-warning: $yellow !default;
$picnic-error: $red !default;
$picnic-dull: $gray !default;

// Sitte size overides
$site-width: 1250px;
$site-padding: 1em;
$mobile-breakpoint: 60em;

$picnic-separation: $site-padding;
$picnic-breakpoint: $mobile-breakpoint;

$radius: 0.2em;
$picnic-radius: $radius;

$transparency: 0.2;
$picnic-transparency: $transparency;

$shadow: 0 0 0.2em rgba($black, $transparency*2);
$text-shadow: 0.1em 0.1em 0.1em rgba($black, $transparency*2);
$picnic-shadow: $shadow;

// Parts
@import 'fontello-embedded';
@import 'picnic/src/picnic';
@import 'mixins';
@import 'fonts';
@import 'header';
@import 'footer';
@import 'home';
@import 'courses';
@import 'blog';

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  display: flex;
  min-height: 100vh;
  flex-direction: column;

  main {
    flex: 1;
    width: 100%;
    max-width: $site-width;
    margin-left: auto;
    margin-right: auto;
    padding: $site-padding/2;
    padding-top: 0;
    @include break-over($mobile-breakpoint) {
      padding: $site-padding;
      padding-top: 0;
    }
  }

  p {
    margin: 0 0 $site-padding;
  }
}

.right {
  float: right;
}

.left {
  float: left;
}

img {
  max-width: 100%;
  border-radius: $radius;
  
  &.small {
    width: 100%;
    @include break-over(500px) {
      max-width: 40%;
    }
    @include break-over(700px) {
      max-width: 30%;
    }
    @include break-over(900px) {
      max-width: 25%;
    }
  }
  &.large {
    width: 100%;
    @include break-over(500px) {
      max-width: 50%;
    }
  }

  &.frame {
    padding: $site-padding/2;
    background-color: $light-gray;
  }

  &.float-left, &.float-right {
    width: 100%;
    @include break-over(900px) {
      max-width: 33%;
    }
    @include break-over(700px) {
      max-width: 40%;
    }
    @include break-over(500px) {
      max-width: 50%;
    }
  }

  &.float-right, &.right {
    float: right;
    margin: 0 0 $site-padding $site-padding;
    @include break-over(600px) {
      margin-left: $site-padding*1.5;
    }
  }

  &.float-left, &.left {
    float: left;
    margin: 0 $site-padding $site-padding 0;
    @include break-over(600px) {
      margin-right: $site-padding*1.5;
    }
  }
}