Skip to content

Instantly share code, notes, and snippets.

@isGabe
Created June 2, 2015 19:02
Show Gist options
  • Save isGabe/3df4f33356c261b51224 to your computer and use it in GitHub Desktop.
Save isGabe/3df4f33356c261b51224 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.4)
// ----
$font-family-base: "Roboto";
$font-family-base--lc: roboto;
$font-family-base--fallback: Arial, sans-serif;
$font-family-heading: "Roboto Condensed";
$font-family-heading--lc: robotocondensed;
$font-family-heading--fallback: "Arial Narrow", Arial, sans-serif;
$font-family-section-heading: "painted";
$font-family-section-heading--fallback: $font-family-heading--fallback;
$font-family-section-heading--lc: painted;
$font-family-article-content: "Roboto Slab";
$font-family-article-content--lc: robotoslab;
$font-family-article-content--fallback: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$string: to-lower-case($string);
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@mixin webfont($font-name, $font-weight: null, $font-style: null) {
// set defaults
$font-name--lc: str-replace($font-name, " ", "");
$font-style-code: "n" !default;
$font-weight-code: 4 !default;
// set weight if it exists
@if $font-weight {
font-weight: $font-weight;
$font-weight-code: $font-weight / 100;
}
// set style if it exists
@if $font-style {
font-style: $font-style;
$font-style-code: "i";
}
@if $font-name == $font-family-base {
font-family: $font-family-base--fallback;
}
@if $font-name == $font-family-heading {
font-family: $font-family-heading--fallback;
}
@if $font-name == $font-family-article-content {
font-family: $font-family-article-content--fallback;
}
@if $font-name == $font-family-section-heading {
font-family: $font-family-section-heading--fallback;
visibility: hidden;
.wf-#{$font-name--lc}-#{$font-style-code}#{$font-weight-code}-inactive & {
visibility: visible;
}
}
// create html class
.wf-#{$font-name--lc}-#{$font-style-code}#{$font-weight-code}-active & {
font-family: $font-name;
}
}
h1, h2, h3, h4, h5, h6 {
@include webfont($font-family-heading, 700);
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
font-family: "Arial Narrow", Arial, sans-serif;
}
.wf-robotocondensed-n7-active h1, .wf-robotocondensed-n7-active h2, .wf-robotocondensed-n7-active h3, .wf-robotocondensed-n7-active h4, .wf-robotocondensed-n7-active h5, .wf-robotocondensed-n7-active h6 {
font-family: "Roboto Condensed";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment