Skip to content

Instantly share code, notes, and snippets.

@thezenmonkey
Created May 30, 2019 14:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thezenmonkey/0e841569bc28a176623a92ba02462081 to your computer and use it in GitHub Desktop.
Save thezenmonkey/0e841569bc28a176623a92ba02462081 to your computer and use it in GitHub Desktop.
Typography Sample
@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);
}
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