Global styles

Make the updates below to improve our theming experience.

Global

Replace the contents of src/patterns/global/global.scss with the following:

global.scss

// @file
// Site global scss file.
//
// Import variables and mixins
// Should contain NO css output.
// Only variables / mixins / settings.
@import 'utils/init';

// Import font-face fonts.
//
// This should only be imported and loaded once.
@import 'fonts/fonts';

html {
  @include font-stack-primary;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  box-sizing: border-box;
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.5;
}

// Basic sticky-footer treatment.
.layout-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

// Render the `main` element consistently in IE11.
// and style the Mediacurrent footer.
main {
  display: block;
  flex: 1;

  & + footer {
    font-size: small;
    color: $color-button-gray;
    position: relative;
    background-color: $color-navy-blue;
    width: 100%;
    padding: 15px 3vw;
    margin-top: 2rem;
  }
}

#block-training-theme-page-title {
  max-width: 1900px;
  margin: 0 auto;
  padding: 20px;
}

#block-mediacurrentfooter {
  display: flex;
  flex-direction: column;
  align-items: center;

  @media screen and (min-width: $bp-xsm) {
    flex-flow: row-reverse;
  }

  * {
    margin: 0;
  }

  h2 {
    display: none;
  }

  p {
    line-height: 1;

    a {
      color: rgba($color-white, 0.5);
      display: inline-block;
    }
  
    &:last-of-type {
      margin: 5px 0 0;

      @media screen and (min-width: $bp-xsm) {
        margin: 0 auto 0 0;
      }
    }

    img {
      width: 40px;
    }
  }
}

Mixins

Replace the content of src/patterns/global/util/_mixins.scsswith the code below:

_mixins.csss

// Mixins.

// Headings mixins
@mixin heading1 {
  font-size: 3rem;

  @include breakpoint($bp-md) {
    font-size: 3.6rem;
  }
}

@mixin heading2 {
  font-size: 2.4rem;

  @include breakpoint($bp-md) {
    font-size: 3rem;
  }
}

@mixin heading3 {
  font-size: 2.1rem;

  @include breakpoint($bp-md) {
    font-size: 2.4rem;
  }
}

@mixin heading4 {
  font-size: 1.6rem;

  @include breakpoint($bp-md) {
    font-size: 2rem;
  }
}

// Clearfix
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// Makes an element visually hidden, but accessible.
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

// Turns off the element-invisible effect.
@mixin element-invisible-off {
  position: static;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}

// Makes an element visually hidden by default, but visible when focused.
@mixin element-focusable {
  @include element-invisible;

  &:active,
  &:focus {
    @include element-invisible-off;
  }
}

// Helper function for working with Sass maps.
// Example: @include print($configuration);
@mixin print($declarations) {
  @each $property, $value in $declarations {
    #{$property}: $value;
  }
}

// Crop image in the middle and
// set a fixed height.
@mixin image-crop($height: 100%) {
  height: $height;
  overflow: hidden;
  position: relative;
  width: 100%;

  img {
    height: 100%;
    left: 50%;
    max-width: auto;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
  }
}

// vertical align mixin
@mixin vertical-align($position: relative) {
  display: block;
  position: $position;
  top: 50%;
  transform: translateY(-50%);
}

// horizontal align mixin
@mixin horizontal-align($position: relative) {
  display: inline-block;
  left: 50%;
  position: $position;
  transform: translateX(-50%);
}

// center align mixin
@mixin center-align($position: relative) {
  display: block;
  left: 50%;
  position: $position;
  top: 50%;
  transform: translate(-50%, -50%);
}

// Mixin for adding consistent spacing on components.
@mixin component-spacing($margin: 100px) {
  margin: 0 auto $margin;
  max-width: $bp-max;
}

Typography

Replace all existing typography styles in src/patterns/global/utils/_typography.scss with the code below.

_typography.scss

// Typography
//
// Typography variables.

$font-sans: 'Open Sans', sans-serif;
$font-serif: 'Georgia', serif;

@mixin font-stack-primary {
  font-family: $font-sans;
}

@mixin font-stack-secondary {
  font-family: $font-serif;
}

// Font-Weights.
$font-weight-light: 200;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-italic: italic;

// Heading mixins.
@mixin heading-1-style {
  @include font-stack-secondary;
  font-size: 1.5rem;
  // 28px.
  line-height: 1.16;

  @include breakpoint($bp-sm) {
    font-size: 3rem;
    // 56px.
    line-height: 1.16;
  }
}


h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1rem;
}

h1 {
  @include heading1;
}

h2 {
  @include heading2;
}

h3 {
  @include heading3;
}

h4 {
  @include heading4;
}

Color variables

Replace all existing color variables in src/patterns/global/colors/_colors.scss with the code below.

_colors.scss

//Colors

// Standard.
$color-white: #fff;
$color-black: #1b2b34;

// Primary.
$color-navy-blue: #003954;

// Grays.
$color-gray: #808080;
$color-gray-light: #eeeeee;
$color-gray-med: #cccccc;
$color-gray-dark: #444444;
$color-gray-darker: #131313;
$color-gray-lt: #65737e;
$color-gray-xlt: #a7adba;
$color-button-gray: #ecf2f8;

// Misc
$color-catskill-white: #edf2f7;
$color-error: #f00;
$color-success: #089e00;
$color-warning: #fff664;
$color-info: #000db5;
$color-gray-mid:  #cccccc;
$color-tan-hide: #f99157;
$color-gray-dk: #444444;
$color-tradewind: #5fb3b3;
$color-danube: $color-navy-blue;

Breakpoints

Add the following breakpoints to the existing list of breakpoints in src/global/utils/_breakpoints.scss

_breakpoints.scss

$bp-max: 1900px;
$bp-under-sm: 'max-width: 767px';

Tabs

Replace all existing styles in src/patterns/components/tabs/tabs.scss with the code below.

// Styling for Drupal tabs.

// Import site utilities.
@import '../../global/utils/init';

.tabs {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  position: relative;
}

.tabs.primary {
  max-width: 1900px;
  margin: 0 auto;
  padding: 0 15px;

  &::after {

    @include breakpoint($bp-sm) {
      background-color: $color-gray-darker;
      bottom: 0;
      content: '';
      display: block;
      height: 1px;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: $zi-below-ground;
    }
  }

  li {
    display: block;
    font-size: 1.2rem;
    margin: 0 0 8px;
    padding: 0;

    @include breakpoint($bp-sm) {
      display: inline-block;
      margin: 0 8px 0 0;
    }
  }

  a {
    background-color: $color-gray-darker;
    border: 1px solid $color-gray-darker;
    color: $color-white;
    display: block;
    padding: 8px 24px;
    text-decoration: none;

    @include breakpoint($bp-sm) {
      border-bottom: 0;
    }
  }

  a:focus,
  a:hover {
    background-color: $color-gray-lt;
    border: 1px solid $color-gray-lt;
    border-bottom: 0;
  }

  .is-active a {
    background-color: $color-white;
    border-bottom: 0;
    color: $color-gray-darker;
  }
}

.tabs.secondary {
  margin-top: 10px;

  li {
    display: inline-block;
    font-size: 0.875rem;
    margin: 8px 16px 4px 0;
  }

  a {
    background-color: transparent;
    border-bottom: 2px solid $color-gray-lt;
    color: $color-gray-mid;
    display: block;
    padding: 8px 12px 4px;
  }

  .is-active a,
  a:focus,
  a:hover {
    background-color: transparent;
    border-color: $color-black;
    color: $color-black;
    text-decoration: none;
  }
}

.tabs__local-actions {
  padding: 16px 0;
}

.tabs__local-actions-links {
  margin: 0;
}