Created
May 30, 2019 14:28
-
-
Save thezenmonkey/0e841569bc28a176623a92ba02462081 to your computer and use it in GitHub Desktop.
Typography Sample
This file contains 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
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) { | |
@each $property in $properties { | |
#{$property}: $min-value; | |
} | |
@media screen and (min-width: $min-vw) { | |
@each $property in $properties { | |
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}); | |
} | |
} | |
@media screen and (min-width: $max-vw) { | |
@each $property in $properties { | |
#{$property}: $max-value; | |
} | |
} | |
} | |
@function strip-unit($value) { | |
@return $value / ($value * 0 + 1); | |
} |
This file contains 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
body { | |
@include fluid-type(font-size, 320px, 1200px, 14px, 22px); | |
@include fluid-type(line-height, 320px, 1200px, 1.75, 1.5); | |
} | |
h1, .h1, .elementor-widget-heading.elementor-widget-heading h1.elementor-heading-title { | |
@include fluid-type(font-size, 320px, 1200px, 2.85714286em, 3.36363636em); | |
@include fluid-type(line-height, 320px, 1200px, 1.25em, 1.33783784em); | |
@include fluid-type(margin-top, 320px, 1200px, 0.625em, 0.44594595em); | |
@include fluid-type(margin-bottom, 320px, 1200px, 1.25em, 0.8918919em); | |
font-family: "Sorts Mill Goudy", serif; | |
font-weight: 400; | |
} | |
h2, .h2, .elementor-widget-heading.elementor-widget-heading h2.elementor-heading-title { | |
@include fluid-type(font-size, 320px, 1200px, 2em, 2.27272727em); | |
@include fluid-type(line-height, 320px, 1200px, 1.78571429em, 1.32em); | |
@include fluid-type(margin-top, 320px, 1200px, 0.89285714em, 0.66em); | |
@include fluid-type(margin-bottom, 320px, 1200px, 0.89285714em, 0.66em); | |
font-family: "Sorts Mill Goudy", serif; | |
font-weight: 400; | |
} | |
h3, .h3, .elementor-widget-heading.elementor-widget-heading h3.elementor-heading-title { | |
@include fluid-type(font-size, 320px, 1200px, 1.42857143em, 1.5em); | |
@include fluid-type(line-height, 320px, 1200px, 1.25em, 1em); | |
@include fluid-type(margin-top, 320px, 1200px, 1.25em, 1.5em); | |
margin-bottom: 0em; | |
font-family: "Sorts Mill Goudy", serif; | |
font-weight: 400; | |
} | |
h4, .h4, .elementor-widget-heading.elementor-widget-heading h4.elementor-heading-title { | |
font-size: 1em; | |
@include fluid-type(line-height, 320px, 1200px, 1.78571429em, 1.5em); | |
@include fluid-type(margin-top, 320px, 1200px, 1.78571429em, 1.5em); | |
margin-bottom: 0em; | |
font-family: "Assistant", san-serif; | |
font-weight: 400; | |
} | |
h5, .h5, .elementor-widget-heading.elementor-widget-heading h5.elementor-heading-title, | |
h6, .h6, .elementor-widget-heading.elementor-widget-heading h6.elementor-heading-title, | |
.elementor-widget-heading.elementor-widget-heading p.elementor-heading-title, | |
.elementor-widget-heading.elementor-widget-heading div.elementor-heading-title, | |
.elementor-widget-heading.elementor-widget-heading span.elementor-heading-title { | |
font-size: 1em; | |
@include fluid-type(line-height, 320px, 1200px, 1.78571429em, 1.5em); | |
@include fluid-type(margin-top, 320px, 1200px, 1.78571429em, 1.5em); | |
margin-bottom: 0em; | |
font-family: "Assistant", san-serif; | |
font-weight: 400; | |
} | |
p, ul, ol, pre, table, blockquote { | |
margin-top: 0em; | |
@include fluid-type(margin-bottom, 320px, 1200px, 1.78571429em, 1.5em); | |
} | |
ul ul, ol ol, ul ol, ol ul { | |
margin-top: 0em; | |
margin-bottom: 0em; | |
} | |
strong, b { | |
font-weight: 600; | |
} | |
.page-content a, | |
.page-content .elementor a:not[.elementor-button-link] { | |
text-decoration: underline; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment