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

Responsive type scaling

Browse Source
This commit is contained in:
kitajchuk
2021-03-31 08:57:15 -07:00
parent edf126468c
commit 89c404207f
4 changed files with 135 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/_colors.scss
-9
View File
@@ -1,9 +0,0 @@
$black: #000;
$white: #fff;
$grey: #f8f8f8;
$jambonz: #da1c5c;
$pink: #fff3f6;
$charcoal: #231f20;
$purple: #9662b2;
$teal: #30beb0;
$blue: #006dff;
styles/_typography.scss
+99 -11
View File
@@ -31,7 +31,7 @@ em {
}
.h1 {
font-size: 48px;
font-size: $h1-size;
line-height: 1.33;
letter-spacing: -0.06px;
font-family: 'objectivitybold';
@@ -39,10 +39,22 @@ em {
em {
font-family: 'objectivitybold_italic';
}
@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;
}
}
.h2 {
font-size: 40px;
font-size: $h2-size;
line-height: 1.35;
letter-spacing: -0.05px;
font-family: 'objectivitybold';
@@ -50,10 +62,22 @@ em {
em {
font-family: 'objectivitybold_italic';
}
@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;
}
}
.h3 {
font-size: 36px;
font-size: $h3-size;
line-height: 1.33;
letter-spacing: -0.05px;
font-family: 'objectivitybold';
@@ -61,42 +85,106 @@ em {
em {
font-family: 'objectivitybold_italic';
}
@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;
}
}
.h4 {
font-size: 32px;
line-height: 1.56;
font-size: $h4-size;
line-height: 1.5;
letter-spacing: -0.04px;
@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;
}
}
.h5 {
font-size: 24px;
font-size: $h5-size;
line-height: 1.67;
letter-spacing: -0.03px;
@media (max-width: $width-tablet-1) {
font-size: $h6-size;
}
@media (max-width: $width-tablet-2) {
font-size: $p-size;
}
@media (max-width: $width-mobile) {
font-size: $m-size;
}
}
.h6 {
font-size: 20px;
font-size: $h6-size;
line-height: 1.8;
letter-spacing: -0.03px;
@media (max-width: $width-tablet-1) {
font-size: $p-size;
}
@media (max-width: $width-tablet-2) {
font-size: $m-size;
}
@media (max-width: $width-mobile) {
font-size: $ms-size;
}
}
.p {
font-size: 18px;
font-size: $p-size;
line-height: 1.9;
@media (max-width: $width-tablet-1) {
font-size: $m-size;
}
@media (max-width: $width-tablet-2) {
font-size: $ms-size;
}
}
.m {
font-size: 16px;
font-size: $m-size;
line-height: 1.9;
@media (max-width: $width-tablet-1) {
font-size: $ms-size;
}
}
.ms {
font-size: 14px;
font-size: $ms-size;
line-height: 2;
@media (max-width: $width-tablet-1) {
font-size: $mxs-size;
}
}
.mxs {
font-size: 12px;
font-size: $mxs-size;
line-height: 2;
}
styles/_vars.scss
+34
View File
@@ -0,0 +1,34 @@
/******************************************************************************
* Colors
*******************************************************************************/
$black: #000;
$white: #fff;
$grey: #f8f8f8;
$jambonz: #da1c5c;
$pink: #fff3f6;
$charcoal: #231f20;
$purple: #9662b2;
$teal: #30beb0;
$blue: #006dff;
/******************************************************************************
* Font sizes
*******************************************************************************/
$h1-size: 48px;
$h2-size: 40px;
$h3-size: 36px;
$h4-size: 32px;
$h5-size: 24px;
$h6-size: 20px;
$p-size: 18px;
$m-size: 16px;
$ms-size: 14px;
$mxs-size: 12px;
/******************************************************************************
* Sizes
*******************************************************************************/
$width-max: 1440px;
$width-tablet-1: 1024px;
$width-tablet-2: 768px;
$width-mobile: 640px;
styles/global.scss
+2 -2
View File
@@ -1,7 +1,7 @@
/******************************************************************************
* Colors
* Variables
*******************************************************************************/
@import 'colors.scss';
@import 'vars.scss';
/******************************************************************************
* Fonts