diff --git a/_typesettings.scss b/_typesettings.scss index 8648a23..8c2dec3 100644 --- a/_typesettings.scss +++ b/_typesettings.scss @@ -67,22 +67,24 @@ $base-em-font-size: 1em; // Generates modular scale values in Ems. [Note]If you need more size up and/or down // then add more sizes. // [1] One step down in the modular scale in EMs -// [2] Two steps down in the modular scale in EMs -// [3] Three steps down in the modular scale in EMs -// [4] One step up in the modular scale in EMs -// [5] Two steps up in the modular scale in EMs -// [6] Three steps up in the modular scale in EMs -// [7] Four steps up in the modular scale in EMs +// [2] One step up in the modular scale in EMs $ms-down1: $base-em-font-size / $ms-ratio; // [1] -$ms-down2: $ms-down1 /$ms-ratio; // [2] -$ms-down3: $ms-down2 / $ms-ratio; // [3] -$ms-up1: $base-em-font-size * $ms-ratio; // [4] -$ms-up2: $ms-up1 * $ms-ratio; // [5] -$ms-up3: $ms-up2 * $ms-ratio; // [6] -$ms-up4: $ms-up3 * $ms-ratio; // [7] +$ms-down2: $ms-down1 /$ms-ratio; +$ms-down3: $ms-down2 / $ms-ratio; +$ms-down4: $ms-down3 / $ms-ratio; +$ms-up1: $base-em-font-size * $ms-ratio; // [2] +$ms-up2: $ms-up1 * $ms-ratio; +$ms-up3: $ms-up2 * $ms-ratio; +$ms-up4: $ms-up3 * $ms-ratio; +$ms-up5: $ms-up4 * $ms-ratio; +$ms-up6: $ms-up5 * $ms-ratio; +$ms-up7: $ms-up6 * $ms-ratio; +$ms-up8: $ms-up7 * $ms-ratio; +$ms-up9: $ms-up8 * $ms-ratio; +$ms-up10: $ms-up9 * $ms-ratio; // Warning text for when an integer is not used in rhythm functions -$not-integer-txt: ' value breaks vertical rhythm. Use an interger (whole number) for $lines.'; +$not-integer-txt: ' value breaks vertical rhythm. Use an integer (whole number) for $lines.'; //============================================================================== // Helper function(s) diff --git a/_typesettings.styl b/_typesettings.styl index bf47c20..046a346 100644 --- a/_typesettings.styl +++ b/_typesettings.styl @@ -66,22 +66,24 @@ $base-em-font-size= 1em; // Generates modular scale values in Ems. [Note]If you need more size up and/or down // then add more sizes. // [1] One step down in the modular scale in EMs -// [2] Two steps down in the modular scale in EMs -// [3] Three steps down in the modular scale in EMs -// [4] One step up in the modular scale in EMs -// [5] Two steps up in the modular scale in EMs -// [6] Three steps up in the modular scale in EMs -// [7] Four steps up in the modular scale in EMs +// [2] One step up in the modular scale in EMs $ms-down1= $base-em-font-size / $ms-ratio; // [1] -$ms-down2= $ms-down1 /$ms-ratio; // [2] -$ms-down3= $ms-down2 / $ms-ratio; // [3] -$ms-up1= $base-em-font-size * $ms-ratio; // [4] -$ms-up2= $ms-up1 * $ms-ratio; // [5] -$ms-up3= $ms-up2 * $ms-ratio; // [6] -$ms-up4= $ms-up3 * $ms-ratio; // [7] +$ms-down2= $ms-down1 /$ms-ratio; +$ms-down3= $ms-down2 / $ms-ratio; +$ms-down4= $ms-down3 / $ms-ratio; +$ms-up1= $base-em-font-size * $ms-ratio; // [2] +$ms-up2= $ms-up1 * $ms-ratio; +$ms-up3= $ms-up2 * $ms-ratio; +$ms-up4= $ms-up3 * $ms-ratio; +$ms-up5= $ms-up4 * $ms-ratio; +$ms-up6= $ms-up5 * $ms-ratio; +$ms-up7= $ms-up6 * $ms-ratio; +$ms-up8= $ms-up7 * $ms-ratio; +$ms-up9= $ms-up8 * $ms-ratio; +$ms-up10= $ms-up9 * $ms-ratio; // Warning text for when an integer is not used in rhythm functions -$not-integer-txt= ' value breaks vertical rhythm. Use an interger (whole number) for $lines.'; +$not-integer-txt= ' value breaks vertical rhythm. Use an integer (whole number) for $lines.'; //============================================================================== // Helper function(s) diff --git a/test/index.html b/test/index.html index 4c535d0..3c8705a 100644 --- a/test/index.html +++ b/test/index.html @@ -26,6 +26,22 @@

Heading 4

Heading 5
Heading 6
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+ [top]
diff --git a/test/scss/styles.css b/test/scss/styles.css index 2131601..2b11807 100644 --- a/test/scss/styles.css +++ b/test/scss/styles.css @@ -163,3 +163,59 @@ hr { .div { margin-bottom: 0.215625em; } + +.ms-up10 { + line-height: 1; + font-size: 31.9517091765em; } + +.ms-up9 { + line-height: 1; + font-size: 22.5966825859em; } + +.ms-up8 { + line-height: 1; + font-size: 15.9806807538em; } + +.ms-up7 { + line-height: 1; + font-size: 11.3017544228em; } + +.ms-up6 { + line-height: 1; + font-size: 7.9927541887em; } + +.ms-up5 { + line-height: 1; + font-size: 5.6525842918em; } + +.ms-up4 { + line-height: 1; + font-size: 3.9975843648em; } + +.ms-up3 { + line-height: 1; + font-size: 2.827145944em; } + +.ms-up2 { + line-height: 1; + font-size: 1.999396em; } + +.ms-up1 { + line-height: 1; + font-size: 1.414em; } + +.ms-down1 { + line-height: 1; + font-size: 0.7072135785em; } + +.ms-down2 { + line-height: 1; + font-size: 0.5001510456em; } + +.ms-down3 { + line-height: 1; + font-size: 0.3537136108em; } + +.ms-down4 { + line-height: 1; + font-size: 0.2501510684em; } diff --git a/test/scss/styles.scss b/test/scss/styles.scss index 0062db9..64af9c1 100644 --- a/test/scss/styles.scss +++ b/test/scss/styles.scss @@ -7,5 +7,75 @@ $base-font-size: 16px; } .div { - margin-bottom: emRhythm(2.3, 4, false); + margin-bottom: emRhythm(2.3, 4, true); } + +.ms-up10 { + line-height: 1; + font-size: $ms-up10; +} + +.ms-up9 { + line-height: 1; + font-size: $ms-up9; +} + +.ms-up8 { + line-height: 1; + font-size: $ms-up8; +} + +.ms-up7 { + line-height: 1; + font-size: $ms-up7; +} + +.ms-up6 { + line-height: 1; + font-size: $ms-up6; +} + +.ms-up5 { + line-height: 1; + font-size: $ms-up5; +} + +.ms-up4 { + line-height: 1; + font-size: $ms-up4; +} + +.ms-up3 { + line-height: 1; + font-size: $ms-up3; +} + +.ms-up2 { + line-height: 1; + font-size: $ms-up2; +} + +.ms-up1 { + line-height: 1; + font-size: $ms-up1; +} + +.ms-down1 { + line-height: 1; + font-size: $ms-down1; +} + +.ms-down2 { + line-height: 1; + font-size: $ms-down2; +} + +.ms-down3 { + line-height: 1; + font-size: $ms-down3; +} + +.ms-down4 { + line-height: 1; + font-size: $ms-down4; +} \ No newline at end of file diff --git a/test/styl.html b/test/styl.html index 70b6ac1..9cdb353 100644 --- a/test/styl.html +++ b/test/styl.html @@ -26,6 +26,22 @@

Heading 4

Heading 5
Heading 6
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+
Scale
+ [top]
diff --git a/test/styl/styles.css b/test/styl/styles.css index 39ee184..5ed96f8 100644 --- a/test/styl/styles.css +++ b/test/styl/styles.css @@ -1 +1 @@ -html{font-size:100%}body{margin:0;padding:0;line-height:1.5}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;padding:0;font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#000}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{margin-top:0;padding-top:0;padding-bottom:0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:bold}h1,.h1{margin-bottom:.187556642105916em;font-size:1.999396em;line-height:1.125339852635496;}@media (min-width:43.75em){h1,.h1{margin-bottom:.132642604035301em;font-size:2.827145944em;line-height:1.06114083228241}}@media (min-width:56.25em){h1,.h1{margin-bottom:.093806650661458em;font-size:3.997584364816em;line-height:.938066506614578}}h2,.h2{margin-bottom:.265205091937765em;font-size:1.414em;line-height:1.326025459688826;}@media (min-width:43.75em){h2,.h2{margin-bottom:.187556642105916em;font-size:1.999396em;line-height:1.125339852635496}}@media (min-width:56.25em){h2,.h2{margin-bottom:.132642604035301em;font-size:2.827145944em;line-height:1.06114083228241}}h3,.h3{margin-bottom:.265205091937765em;font-size:1.414em;line-height:1.326025459688826;}@media (min-width:56.25em){h3,.h3{margin-bottom:.187556642105916em;font-size:1.999396em;line-height:1.125339852635496}}h4,.h4{margin-bottom:.265205091937765em;font-size:1.414em;line-height:1.326025459688826}h5,.h5,h6,.h6{margin-bottom:.375em;font-size:1em;line-height:1.5}p{margin-top:0;margin-bottom:1.5em;padding-top:0;padding-bottom:0;max-width:36em;-webkit-hyphens:auto;-epub-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-o-hyphens:auto;hyphens:auto;word-wrap:break-word;}@media (min-width:43.75em){p{text-align:justify}}p + p{margin-top:-1.5em;text-indent:1.5em}small,.font-small{font-size:.707213578500707em;line-height:1.590750000000001}em{font-style:italic}strong{font-weight:bold}blockquote{margin-top:1.5em;margin-bottom:1.5em;margin-left:0;padding-top:0;padding-bottom:0;padding-left:1.5em;border-left:6px solid #808080;font-family:Georgia,'Times New Roman',serif;}blockquote p{margin-bottom:.75em}blockquote footer cite:before{content:" – "}pre,code{font-family:'Lucida Console',Monaco,monospace}time,.time{text-transform:uppercase}ol,ul,dl{margin-top:0;margin-bottom:1.5em;margin-left:1.5em;padding-top:0;padding-bottom:0}ul ul,ol ol,dl dl{margin-left:0}ul{list-style:disc}ol{list-style:decimal}abbr{font-variant:small-caps;font-weight:600;text-transform:lowercase}abbr[title]:hover{cursor:help}hr{margin-top:1.5em;margin-bottom:0;border:none;border-top-color:#000;border-top-style:solid;border-top-width:1px;padding-top:1.4375em}.div{margin-bottom:.1125em}.div{margin-bottom:.215625em} \ No newline at end of file +html{font-size:100%}body{margin:0;padding:0;line-height:1.5}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;padding:0;font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#000}h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{margin-top:0;padding-top:0;padding-bottom:0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:bold}h1,.h1{margin-bottom:.187556642105916em;font-size:1.999396em;line-height:1.125339852635496;}@media (min-width:43.75em){h1,.h1{margin-bottom:.132642604035301em;font-size:2.827145944em;line-height:1.06114083228241}}@media (min-width:56.25em){h1,.h1{margin-bottom:.093806650661458em;font-size:3.997584364816em;line-height:.938066506614578}}h2,.h2{margin-bottom:.265205091937765em;font-size:1.414em;line-height:1.326025459688826;}@media (min-width:43.75em){h2,.h2{margin-bottom:.187556642105916em;font-size:1.999396em;line-height:1.125339852635496}}@media (min-width:56.25em){h2,.h2{margin-bottom:.132642604035301em;font-size:2.827145944em;line-height:1.06114083228241}}h3,.h3{margin-bottom:.265205091937765em;font-size:1.414em;line-height:1.326025459688826;}@media (min-width:56.25em){h3,.h3{margin-bottom:.187556642105916em;font-size:1.999396em;line-height:1.125339852635496}}h4,.h4{margin-bottom:.265205091937765em;font-size:1.414em;line-height:1.326025459688826}h5,.h5,h6,.h6{margin-bottom:.375em;font-size:1em;line-height:1.5}p{margin-top:0;margin-bottom:1.5em;padding-top:0;padding-bottom:0;max-width:36em;-webkit-hyphens:auto;-epub-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-o-hyphens:auto;hyphens:auto;word-wrap:break-word;}@media (min-width:43.75em){p{text-align:justify}}p + p{margin-top:-1.5em;text-indent:1.5em}small,.font-small{font-size:.707213578500707em;line-height:1.590750000000001}em{font-style:italic}strong{font-weight:bold}blockquote{margin-top:1.5em;margin-bottom:1.5em;margin-left:0;padding-top:0;padding-bottom:0;padding-left:1.5em;border-left:6px solid #808080;font-family:Georgia,'Times New Roman',serif;}blockquote p{margin-bottom:.75em}blockquote footer cite:before{content:" – "}pre,code{font-family:'Lucida Console',Monaco,monospace}time,.time{text-transform:uppercase}ol,ul,dl{margin-top:0;margin-bottom:1.5em;margin-left:1.5em;padding-top:0;padding-bottom:0}ul ul,ol ol,dl dl{margin-left:0}ul{list-style:disc}ol{list-style:decimal}abbr{font-variant:small-caps;font-weight:600;text-transform:lowercase}abbr[title]:hover{cursor:help}hr{margin-top:1.5em;margin-bottom:0;border:none;border-top-color:#000;border-top-style:solid;border-top-width:1px;padding-top:1.4375em}.div{margin-bottom:.1125em}.div{margin-bottom:.215625em}.ms-up10{line-height:1;font-size:31.951709176467357em}.ms-up9{line-height:1;font-size:22.596682585903366em}.ms-up8{line-height:1;font-size:15.980680753821336em}.ms-up7{line-height:1;font-size:11.301754422787367em}.ms-up6{line-height:1;font-size:7.992754188675649em}.ms-up5{line-height:1;font-size:5.652584291849823em}.ms-up4{line-height:1;font-size:3.997584364816em}.ms-up3{line-height:1;font-size:2.827145944em}.ms-up2{line-height:1;font-size:1.999396em}.ms-up1{line-height:1;font-size:1.414em}.ms-down1{line-height:1;font-size:.707213578500707em}.ms-down2{line-height:1;font-size:.500151045615776em}.ms-down3{line-height:1;font-size:.353713610760803em}.ms-down4{line-height:1;font-size:.250151068430554em} \ No newline at end of file diff --git a/test/styl/styles.styl b/test/styl/styles.styl index eda8ffb..f9894c9 100644 --- a/test/styl/styles.styl +++ b/test/styl/styles.styl @@ -7,3 +7,73 @@ .div { margin-bottom: emRhythm(2.3, 4, false); } + +.ms-up10 { + line-height: 1; + font-size: $ms-up10; +} + +.ms-up9 { + line-height: 1; + font-size: $ms-up9; +} + +.ms-up8 { + line-height: 1; + font-size: $ms-up8; +} + +.ms-up7 { + line-height: 1; + font-size: $ms-up7; +} + +.ms-up6 { + line-height: 1; + font-size: $ms-up6; +} + +.ms-up5 { + line-height: 1; + font-size: $ms-up5; +} + +.ms-up4 { + line-height: 1; + font-size: $ms-up4; +} + +.ms-up3 { + line-height: 1; + font-size: $ms-up3; +} + +.ms-up2 { + line-height: 1; + font-size: $ms-up2; +} + +.ms-up1 { + line-height: 1; + font-size: $ms-up1; +} + +.ms-down1 { + line-height: 1; + font-size: $ms-down1; +} + +.ms-down2 { + line-height: 1; + font-size: $ms-down2; +} + +.ms-down3 { + line-height: 1; + font-size: $ms-down3; +} + +.ms-down4 { + line-height: 1; + font-size: $ms-down4; +} \ No newline at end of file