cortex-cms/cortex

View on GitHub
app/assets/stylesheets/cortex/variables/_typography.scss

Summary

Maintainability
Test Coverage
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  src: url(asset_path('cortex/Montserrat-Regular.otf')) format("opentype");
}

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  src: url(asset_path('cortex/Montserrat-Medium.otf')) format("opentype");
}

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bolder;
  src: url(asset_path('cortex/Montserrat-SemiBold.otf')) format("opentype");
}

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: lighter;
  src: url(asset_path('cortex/Montserrat-Light.otf')) format("opentype");
}

$cortex-font-stack: Montserrat, sans-serif;
$base-font-size: 1rem;

@mixin display-text { // Cortex Logo
  color: $color-grey-dark;
  font-family: $cortex-font-stack;
  font-weight: normal;
  font-size: 2.1775rem;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.5;
}

h1,
.text-style-1 { // Bread Crumbs and Page Headers
  color: $color-teal;
  font-family: $cortex-font-stack;
  font-weight: bold;
  font-size: 1.17rem;
  text-decoration: none;
}

h2,
.text-style-2 {
  color: $color-grey;
  font-family: $cortex-font-stack;
  font-weight: lighter;
  font-size: 1.17rem;
}

h3,
.text-style-3 {
  color: $color-grey;
  font-family: $cortex-font-stack;
  font-weight: bold;
  font-size: 1.17rem;
}

h4,
.text-style-4 { // Section Headers, Dropdowns, Button Text
  color: $color-grey-dark;
  font-family: $cortex-font-stack;
  font-size: 0.83rem;
}

h5,
.text-style-5 { // Field Text
  color: $color-grey;
  font-family: $cortex-font-stack;
  font-weight: lighter;
  font-size: $base-font-size;
}

h6,
.text-style-6 { // Field Text Filled
  color: $color-anchor-blue-light;
  font-family: $cortex-font-stack;
  font-size: $base-font-size;
}

.text-style-7 { // Help Notes
  color: $color-anchor-blue-light;
  font-family: $cortex-font-stack;
  font-weight: lighter;
  font-size: 0.67rem;
}

%sidebar-nav { // Side Nav
  color: $color-grey;
  font-family: $cortex-font-stack;
  font-weight: lighter;
  font-size: 0.875rem;
  text-transform: uppercase;

  &.active { // Side Nav Selected
    font-weight: bold;
    color: $color-teal;
  }
}

p {
  color: $color-anchor-blue-light;
  font-family: $cortex-font-stack;
  font-size: $base-font-size;
}