ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2026-07-23 20:42:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor all typography to utilize reusable mixins

Browse Source
This commit is contained in:
kitajchuk
2021-04-28 15:44:40 -07:00
parent 4ba773e7e6
commit 61ba227df5
2 changed files with 132 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/_mixins.scss
+125
View File
@@ -18,6 +18,126 @@
}
}
@mixin h1() {
font-size: $h1-size;
line-height: 1.33;
letter-spacing: -0.06px;
@include font-bold();
@media (max-width: $width-tablet-1) {
font-size: $h2-size;
}
@media (max-width: $width-tablet-2) {
font-size: $h3-size;
}
@media (max-width: $width-mobile) {
font-size: $h4-size;
}
}
@mixin h2() {
font-size: $h2-size;
line-height: 1.35;
letter-spacing: -0.05px;
@include font-bold();
@media (max-width: $width-tablet-1) {
font-size: $h3-size;
}
@media (max-width: $width-tablet-2) {
font-size: $h4-size;
}
@media (max-width: $width-mobile) {
font-size: $h5-size;
}
}
@mixin h3() {
font-size: $h3-size;
line-height: 1.33;
letter-spacing: -0.05px;
@include font-bold();
@media (max-width: $width-tablet-1) {
font-size: $h4-size;
}
@media (max-width: $width-tablet-2) {
font-size: $h5-size;
}
@media (max-width: $width-mobile) {
font-size: $h6-size;
}
}
@mixin h4 () {
font-size: $h4-size;
line-height: 1.5;
letter-spacing: -0.04px;
@include font-medium();
@media (max-width: $width-tablet-1) {
font-size: $h5-size;
}
@media (max-width: $width-tablet-2) {
font-size: $h6-size;
}
@media (max-width: $width-mobile) {
font-size: $p-size;
}
}
@mixin h5() {
font-size: $h5-size;
line-height: 1.67;
letter-spacing: -0.03px;
@include font-medium();
span {
color: $jambonz;
}
@media (max-width: $width-tablet-1) {
font-size: $h6-size;
}
@media (max-width: $width-tablet-2) {
font-size: $p-size;
}
// @note: Consideration on stopping type reduction here
// @media (max-width: $width-mobile) {
// font-size: $m-size;
// }
}
@mixin h6() {
font-size: $h6-size;
line-height: 1.8;
letter-spacing: -0.03px;
@include font-medium();
@media (max-width: $width-tablet-1) {
font-size: $p-size;
}
@media (max-width: $width-tablet-2) {
font-size: $m-size;
}
// @note: Consideration on stopping type reduction here
// @media (max-width: $width-mobile) {
// font-size: $ms-size;
// }
}
@mixin p() {
font-size: $p-size;
line-height: 1.9;
@@ -52,6 +172,11 @@
// }
}
@mixin mxs() {
font-size: $mxs-size;
line-height: 2;
}
@mixin cta() {
margin-top: 96px;
styles/_typography.scss
+7 -104
View File
@@ -68,123 +68,27 @@ em {
}
.h1, h1 {
font-size: $h1-size;
line-height: 1.33;
letter-spacing: -0.06px;
@include font-bold();
@media (max-width: $width-tablet-1) {
font-size: $h2-size;
}
@media (max-width: $width-tablet-2) {
font-size: $h3-size;
}
@media (max-width: $width-mobile) {
font-size: $h4-size;
}
@include h1();
}
.h2, h2 {
font-size: $h2-size;
line-height: 1.35;
letter-spacing: -0.05px;
@include font-bold();
@media (max-width: $width-tablet-1) {
font-size: $h3-size;
}
@media (max-width: $width-tablet-2) {
font-size: $h4-size;
}
@media (max-width: $width-mobile) {
font-size: $h5-size;
}
@include h2();
}
.h3, h3 {
font-size: $h3-size;
line-height: 1.33;
letter-spacing: -0.05px;
@include font-bold();
@media (max-width: $width-tablet-1) {
font-size: $h4-size;
}
@media (max-width: $width-tablet-2) {
font-size: $h5-size;
}
@media (max-width: $width-mobile) {
font-size: $h6-size;
}
@include h3();
}
.h4, h4 {
font-size: $h4-size;
line-height: 1.5;
letter-spacing: -0.04px;
@include font-medium();
@media (max-width: $width-tablet-1) {
font-size: $h5-size;
}
@media (max-width: $width-tablet-2) {
font-size: $h6-size;
}
@media (max-width: $width-mobile) {
font-size: $p-size;
}
@include h4();
}
.h5, h5 {
font-size: $h5-size;
line-height: 1.67;
letter-spacing: -0.03px;
@include font-medium();
span {
color: $jambonz;
}
@media (max-width: $width-tablet-1) {
font-size: $h6-size;
}
@media (max-width: $width-tablet-2) {
font-size: $p-size;
}
// @note: Consideration on stopping type reduction here
// @media (max-width: $width-mobile) {
// font-size: $m-size;
// }
@include h5();
}
.h6, h6 {
font-size: $h6-size;
line-height: 1.8;
letter-spacing: -0.03px;
@include font-medium();
@media (max-width: $width-tablet-1) {
font-size: $p-size;
}
@media (max-width: $width-tablet-2) {
font-size: $m-size;
}
// @note: Consideration on stopping type reduction here
// @media (max-width: $width-mobile) {
// font-size: $ms-size;
// }
@include h6();
}
.p, p {
@@ -200,8 +104,7 @@ em {
}
.mxs {
font-size: $mxs-size;
line-height: 2;
@include mxs();
}
.color--teal {