Global styles
Make the updates below to improve our theming experience.
Global
Replace the contents of src/patterns/global/global.scss with the following:
// @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.
// 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
//
// 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
// 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
$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;
}
Last updated