TabbycatDebate/tabbycat

//------------------------------------------------------------------------------
// Web Fonts
//------------------------------------------------------------------------------

// Primary Typeface
@font-face {
  font-family: 'Inter-Regular';
  src: url('/static/fonts/Inter-Regular.woff2') format('woff2'), url('/static/fonts/Inter-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  text-rendering: optimizeLegibility;
}

h6,
.h6 {
  font-size: $small-font-size;
  text-transform: uppercase;
}

.text-heading {
  font-family: $headings-font-family;
  font-weight: $headings-font-weight;
  color: $headings-color;
}

.badge {
  font-family: $font-family-monospace; // Want evenly aligned labels
}

.mixed-text {
  font-feature-settings: "calt" off;
  overflow-wrap: anywhere;
}

//------------------------------------------------------------------------------
// Text Utilities
//------------------------------------------------------------------------------

// Override option for headings
.text-body {
  font-family: $font-family-sans-serif;
}

// Mostly for hiding it in extra lines on table cells
.hide-underline {
  border-bottom: 2px solid #fff;
}

.subtitle {
  text-transform: uppercase;
  font-weight: normal;
}

.strong {
  font-weight: bold; // deprecate; use font-weight-bold
}

.lead .strong,
.lead strong {
  font-weight: bold; // The font for .lead items doesn't have a 'bolder' weight
}

// Otherwise alert links are too dull
.alert-link {
  text-decoration: underline;
}

.list-group-item.active a {
  color: $alt-bg; // If using a bg color; ensure the links aren't the same color
  text-decoration: underline;
}

// Bootstrap only displays up to .display-4; long motions need more options
.display-5 {
  @extend .display-4;

  font-size: 3rem;
}

.display-6 {
  @extend .display-4;

  font-size: 2.5rem;
}