Last active
March 20, 2019 19:37
-
-
Save starryeyez024/c22e01537890efcdb2ce290035a9ab61 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h2>This is heading 2</h2> | |
| <h3>This is heading 3</h3> | |
| <h4>This is heading 4</h4> | |
| <h5>This is heading 5</h5> | |
| <h6>This is heading 6</h6> | |
| <p><strong>This is a paragraph, with bold text. </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis ornare erat, sit amet aliquet tortor. Aenean dapibus leo nec commodo blandit. Aliquam erat volutpat. Aenean ac rutrum nisl, non volutpat metus. Cras sed luctus libero. Donec id orci quis justo tincidunt placerat. Donec ut vulputate mauris. Pellentesque eu velit quis ligula scelerisque laoreet. Nunc non leo id diam lacinia tristique id nec quam. </p> | |
| <h3 style="font-weight:300">font-weight:300 - heading - RedHatDisplay - regular</h3> | |
| <h3 style="font-weight:400">font-weight:400 - heading - RedHatDisplay - medium</h3> | |
| <h3 style="font-weight:500">font-weight:500 - heading - RedHatDisplay - medium</h3> | |
| <h3 style="font-weight:600">font-weight:600 - heading - RedHatDisplay - bold</h3> | |
| <h3 style="font-weight:700">font-weight:700 - heading - RedHatDisplay - bold</h3> | |
| <h3 style="font-weight:800">font-weight:800 - heading - RedHatDisplay - bold</h3> | |
| <h3 style="font-weight:900">font-weight:900 - heading - RedHatDisplay - bold</h3> | |
| <p style="font-weight:300">font-weight:300 - paragraph - RedHatText - regular</p> | |
| <p style="font-weight:400">font-weight:400 - paragraph - RedHatText - regular</p> | |
| <p style="font-weight:500">font-weight:500 - paragraph - RedHatText - regular</p> | |
| <p style="font-weight:600">font-weight:600 - paragraph - RedHatText - medium</p> | |
| <p style="font-weight:700">font-weight:700 - paragraph - RedHatText - medium</p> | |
| <p style="font-weight:800">font-weight:800 - paragraph - RedHatText - medium</p> | |
| <p style="font-weight:900">font-weight:900 - paragraph - RedHatText - medium</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.5.4) | |
| // ---- | |
| //---------------------- | |
| // Red Hat Font | |
| //---------------------- | |
| @mixin printRedHatFont( | |
| $weightValue: 400, | |
| $weightName: "normal", | |
| $familyName: "RedHatFont", | |
| $style: "normal", | |
| $local: true | |
| ) { | |
| $filePath: "./" + $familyName + "/" + $familyName + "-" + $weightName; | |
| @if $local == false { | |
| $filePath: $fontLocation + $familyName + "/" + $familyName + "-" + $weightName; | |
| } | |
| @font-face { | |
| font-family: $familyName; | |
| src: url('#{$filePath}.eot'); /* IE9 Compat Modes */ | |
| src: url('#{$filePath}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ | |
| url('#{$filePath}.woff') format('woff'), /* Modern Browsers */ | |
| //url('#{$filePath}.otf') format('OpenType'), /* Safari, Android, iOS */ | |
| url('#{$filePath}.svg#RedHatDisplay-#{$weightName}') format('svg'); /* Legacy iOS */ | |
| font-style: $style; | |
| font-weight: $weightValue; | |
| text-rendering: optimizeLegibility; | |
| } | |
| } | |
| // If you need to set the file path, use this variable | |
| // $fontLocation: "/sites/all/libraries/redhat-font/"; | |
| // and set the $local argument to false when you call the mixin | |
| //---------------------- | |
| // Red Hat Display font | |
| //---------------------- | |
| @include printRedHatFont(300, Regular, $familyName: "RedHatDisplay"); | |
| @include printRedHatFont(400, Medium, $familyName: "RedHatDisplay"); | |
| @include printRedHatFont(700, Bold, $familyName: "RedHatDisplay"); | |
| //---------------------- | |
| // Red Hat Text font | |
| //---------------------- | |
| $fontLocation: "/sites/all/libraries/redhat-font/"; | |
| @include printRedHatFont(400, Regular, $familyName: "RedHatText"); | |
| @include printRedHatFont(700, Medium, $familyName: "RedHatText"); | |
| @include printRedHatFont(900, Bold, $familyName: "RedHatText"); | |
| // FOR DEMO PURPOSES, assuming you have the fonts installed locally: | |
| h1, h2, h3,h4,h5,h6 { | |
| font-family: "RedHatDisplay", "Red Hat Display", Helvetica, Arial, sans-serif; | |
| } | |
| p { | |
| font-family: "RedHatText", "Red Hat Text", Helvetica, Arial, sans-serif; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @font-face { | |
| font-family: "RedHatDisplay"; | |
| src: url("./RedHatDisplay/RedHatDisplay-Regular.eot"); | |
| /* IE9 Compat Modes */ | |
| src: url("./RedHatDisplay/RedHatDisplay-Regular.eot?#iefix") format("embedded-opentype"), url("./RedHatDisplay/RedHatDisplay-Regular.woff") format("woff"), url("./RedHatDisplay/RedHatDisplay-Regular.svg#RedHatDisplay-Regular") format("svg"); | |
| /* Legacy iOS */ | |
| font-style: "normal"; | |
| font-weight: 300; | |
| text-rendering: optimizeLegibility; | |
| } | |
| @font-face { | |
| font-family: "RedHatDisplay"; | |
| src: url("./RedHatDisplay/RedHatDisplay-Medium.eot"); | |
| /* IE9 Compat Modes */ | |
| src: url("./RedHatDisplay/RedHatDisplay-Medium.eot?#iefix") format("embedded-opentype"), url("./RedHatDisplay/RedHatDisplay-Medium.woff") format("woff"), url("./RedHatDisplay/RedHatDisplay-Medium.svg#RedHatDisplay-Medium") format("svg"); | |
| /* Legacy iOS */ | |
| font-style: "normal"; | |
| font-weight: 400; | |
| text-rendering: optimizeLegibility; | |
| } | |
| @font-face { | |
| font-family: "RedHatDisplay"; | |
| src: url("./RedHatDisplay/RedHatDisplay-Bold.eot"); | |
| /* IE9 Compat Modes */ | |
| src: url("./RedHatDisplay/RedHatDisplay-Bold.eot?#iefix") format("embedded-opentype"), url("./RedHatDisplay/RedHatDisplay-Bold.woff") format("woff"), url("./RedHatDisplay/RedHatDisplay-Bold.svg#RedHatDisplay-Bold") format("svg"); | |
| /* Legacy iOS */ | |
| font-style: "normal"; | |
| font-weight: 700; | |
| text-rendering: optimizeLegibility; | |
| } | |
| @font-face { | |
| font-family: "RedHatText"; | |
| src: url("./RedHatText/RedHatText-Regular.eot"); | |
| /* IE9 Compat Modes */ | |
| src: url("./RedHatText/RedHatText-Regular.eot?#iefix") format("embedded-opentype"), url("./RedHatText/RedHatText-Regular.woff") format("woff"), url("./RedHatText/RedHatText-Regular.svg#RedHatDisplay-Regular") format("svg"); | |
| /* Legacy iOS */ | |
| font-style: "normal"; | |
| font-weight: 400; | |
| text-rendering: optimizeLegibility; | |
| } | |
| @font-face { | |
| font-family: "RedHatText"; | |
| src: url("./RedHatText/RedHatText-Medium.eot"); | |
| /* IE9 Compat Modes */ | |
| src: url("./RedHatText/RedHatText-Medium.eot?#iefix") format("embedded-opentype"), url("./RedHatText/RedHatText-Medium.woff") format("woff"), url("./RedHatText/RedHatText-Medium.svg#RedHatDisplay-Medium") format("svg"); | |
| /* Legacy iOS */ | |
| font-style: "normal"; | |
| font-weight: 700; | |
| text-rendering: optimizeLegibility; | |
| } | |
| @font-face { | |
| font-family: "RedHatText"; | |
| src: url("./RedHatText/RedHatText-Bold.eot"); | |
| /* IE9 Compat Modes */ | |
| src: url("./RedHatText/RedHatText-Bold.eot?#iefix") format("embedded-opentype"), url("./RedHatText/RedHatText-Bold.woff") format("woff"), url("./RedHatText/RedHatText-Bold.svg#RedHatDisplay-Bold") format("svg"); | |
| /* Legacy iOS */ | |
| font-style: "normal"; | |
| font-weight: 900; | |
| text-rendering: optimizeLegibility; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: "RedHatDisplay", "Red Hat Display", Helvetica, Arial, sans-serif; | |
| } | |
| p { | |
| font-family: "RedHatText", "Red Hat Text", Helvetica, Arial, sans-serif; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h2>This is heading 2</h2> | |
| <h3>This is heading 3</h3> | |
| <h4>This is heading 4</h4> | |
| <h5>This is heading 5</h5> | |
| <h6>This is heading 6</h6> | |
| <p><strong>This is a paragraph, with bold text. </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis ornare erat, sit amet aliquet tortor. Aenean dapibus leo nec commodo blandit. Aliquam erat volutpat. Aenean ac rutrum nisl, non volutpat metus. Cras sed luctus libero. Donec id orci quis justo tincidunt placerat. Donec ut vulputate mauris. Pellentesque eu velit quis ligula scelerisque laoreet. Nunc non leo id diam lacinia tristique id nec quam. </p> | |
| <h3 style="font-weight:300">font-weight:300 - heading - RedHatDisplay - regular</h3> | |
| <h3 style="font-weight:400">font-weight:400 - heading - RedHatDisplay - medium</h3> | |
| <h3 style="font-weight:500">font-weight:500 - heading - RedHatDisplay - medium</h3> | |
| <h3 style="font-weight:600">font-weight:600 - heading - RedHatDisplay - bold</h3> | |
| <h3 style="font-weight:700">font-weight:700 - heading - RedHatDisplay - bold</h3> | |
| <h3 style="font-weight:800">font-weight:800 - heading - RedHatDisplay - bold</h3> | |
| <h3 style="font-weight:900">font-weight:900 - heading - RedHatDisplay - bold</h3> | |
| <p style="font-weight:300">font-weight:300 - paragraph - RedHatText - regular</p> | |
| <p style="font-weight:400">font-weight:400 - paragraph - RedHatText - regular</p> | |
| <p style="font-weight:500">font-weight:500 - paragraph - RedHatText - regular</p> | |
| <p style="font-weight:600">font-weight:600 - paragraph - RedHatText - medium</p> | |
| <p style="font-weight:700">font-weight:700 - paragraph - RedHatText - medium</p> | |
| <p style="font-weight:800">font-weight:800 - paragraph - RedHatText - medium</p> | |
| <p style="font-weight:900">font-weight:900 - paragraph - RedHatText - medium</p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment