kazhnuz
/
clear-typography
1
0
Fork 0
Code Issues 4 Pull Requests Releases 1 Wiki Activity

fix: use rem instead of em for line-height

This commit is contained in:
Kazhnuz 2019-11-04 15:21:06 +01:00
parent 07009bf0af
commit 5234abfdd3
3 changed files with 139 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
css/clear-typography.css
View File

@ -1,163 +1,184 @@
/* ------------------ FONT LOADING ------------------- */
@font-face {
font-family: 'OpenSans';
font-family: "OpenSans";
src: url("../fonts/OpenSans-Light-webfont.eot");
src: url("../fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Light-webfont.svg#open_sansbold") format("svg");
font-weight: 300;
font-style: normal; }
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
font-family: "OpenSans";
src: url("../fonts/OpenSans-LightItalic-webfont.eot");
src: url("../fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-LightItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-LightItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-LightItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 300;
font-style: italic; }
font-style: italic;
}
@font-face {
font-family: 'OpenSans';
font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#open_sansbold") format("svg");
font-weight: 400;
font-style: normal; }
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
font-family: "OpenSans";
src: url("../fonts/OpenSans-Italic-webfont.eot");
src: url("../fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Italic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Italic-webfont.woff") format("woff"), url("../fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Italic-webfont.svg#open_sansbold") format("svg");
font-weight: 400;
font-style: italic; }
font-style: italic;
}
@font-face {
font-family: 'OpenSans';
font-family: "OpenSans";
src: url("../fonts/OpenSans-Semibold-webfont.eot");
src: url("../fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Semibold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("../fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Semibold-webfont.svg#open_sansbold") format("svg");
font-weight: 600;
font-style: normal; }
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
font-family: "OpenSans";
src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot");
src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-SemiboldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 600;
font-style: italic; }
font-style: italic;
}
@font-face {
font-family: 'OpenSans';
font-family: "OpenSans";
src: url("../fonts/OpenSans-Bold-webfont.eot");
src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
font-weight: 700;
font-style: normal; }
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
font-family: "OpenSans";
src: url("../fonts/OpenSans-BoldItalic-webfont.eot");
src: url("../fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-BoldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 700;
font-style: italic; }
font-style: italic;
}
@font-face {
font-family: 'OpenSans';
font-family: "OpenSans";
src: url("../fonts/OpenSans-ExtraBold-webfont.eot");
src: url("../fonts/OpenSans-ExtraBold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-ExtraBold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-ExtraBold-webfont.woff") format("woff"), url("../fonts/OpenSans-ExtraBold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold") format("svg");
font-weight: 800;
font-style: normal; }
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
font-family: "OpenSans";
src: url("../fonts/OpenSans-ExtraBoldItalic-webfont.eot");
src: url("../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 800;
font-style: italic; }
font-style: italic;
}
/* ------------------ GLOBAL STYLE ------------------- */
body {
font-family: OpenSans, sans-serif;
text-align: left;
font-size: 4mm;
line-height: 1.5em;
line-height: 1.5rem;
color: #444;
font-weight: 400; }
font-weight: 400;
}
.night-mode {
color: #BBB; }
color: #BBB;
}
strong {
font-weight: 600; }
font-weight: 600;
}
em {
font-style: italic; }
font-style: italic;
}
a {
color: #2484c1;
text-decoration: none; }
text-decoration: none;
}
p {
padding: 0;
padding-bottom: 1.5em;
margin: 0; }
p:last-child {
padding-bottom: 0; }
margin: 0;
padding-bottom: 1.5rem;
}
p:last-child {
padding-bottom: 0;
}
ul {
padding: 0;
padding-bottom: 1.5em;
margin: 0; }
ul ul {
padding-bottom: 0; }
ul li {
margin-left: 1.5em; }
margin: 0;
padding-bottom: 1.5rem;
}
ul ul {
padding-bottom: 0;
}
ul li {
margin-left: 1.5rem;
}
ol {
padding: 0;
padding-bottom: 1.5em;
margin: 0; }
ol ol {
padding-bottom: 0; }
ol li {
margin-left: 1.5em; }
margin: 0;
padding-bottom: 1.5rem;
}
ol ol {
padding-bottom: 0;
}
ol li {
margin-left: 1.5rem;
}
::selection {
background: #2484c1;
color: #fff; }
color: #fff;
}
::-moz-selection {
background: #2484c1;
color: #fff; }
color: #fff;
}
/* ------------------ WRAPPERS ------------------- */
.text-wrapper {
font-size: calc(2.5mm + 1vw);
margin: auto;
line-height: 1.5em; }
.text-wrapper.debug {
background-image: -webkit-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: -moz-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: -ms-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: -o-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
background-position: 50% 0;
background-size: 1.5em 1.5em; }
line-height: 1.5em;
}
.text-wrapper.debug {
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(159, 96, 96, 0.5) 95%);
background-position: 50% 0;
background-size: 1.5em 1.5em;
}
@media screen and (min-width: 640px) {
.text-wrapper.size-640 {
max-width: 640px;
font-size: calc(2.5mm + 6.4px); } }
font-size: calc(2.5mm + 6.4px);
}
}
@media screen and (min-width: 800px) {
.text-wrapper.size-800 {
font-size: calc(2.5mm + 8.0px);
max-width: 800px; } }
max-width: 800px;
}
}
@media screen and (min-width: 920px) {
.text-wrapper.size-920 {
font-size: calc(2.5mm + 9.2px);
max-width: 800px; } }
max-width: 800px;
}
}
@media screen and (min-width: 1200px) {
.text-wrapper.size-1200 {
font-size: calc(2.5mm + 12px);
max-width: 800px; } }
max-width: 800px;
}
}
/* ------------------ TITLES ------------------- */
h1, h2, h3, h4, h5, h6, h7 {
text-align: left;
@ -165,43 +186,50 @@ h1, h2, h3, h4, h5, h6, h7 {
line-height: 1.5em;
padding: 0;
margin: 0;
font-weight: 400; }
font-weight: 400;
}
h1 {
font-size: 2.33333em;
font-size: 2.3333333em;
line-height: 1em;
padding: 0.33333em 0 0.6em 0;
font-weight: 700; }
padding: 0.333333em 0 0.6em 0;
font-weight: 700;
}
h2 {
font-size: 2em;
line-height: 1.5em;
padding: 0.33333em 0 0.4em 0;
font-weight: 700; }
padding: 0.333333em 0 0.4em 0;
font-weight: 700;
}
h3 {
font-size: 1.5em;
line-height: 1em;
padding: 0em 0 1em 0;
font-weight: 700; }
font-weight: 700;
}
h4 {
font-size: 1.5em;
line-height: 1em;
padding: 0em 0 1em 0;
font-weight: 600; }
font-weight: 600;
}
h5 {
font-size: 1.33333em;
font-size: 1.333333em;
line-height: 1em;
padding: 0.1em 0 1.13333em 0;
font-weight: 600; }
padding: 0.1em 0 1.133333em 0;
font-weight: 600;
}
h6 {
font-size: 1.1em;
line-height: 1.4em;
padding: 0.1em 0 1.2em 0;
font-weight: 600; }
font-weight: 600;
}
/* ------------------ HR ------------------- */
hr {
@ -211,7 +239,8 @@ hr {
border-bottom: 1px;
border-color: rgba(1, 1, 1, 0.15);
border-style: solid;
margin: 1.5em; }
margin: 1.5em;
}
/* ------------------ QUOTE ------------------- */
blockquote {
@ -221,9 +250,11 @@ blockquote {
margin: -0.75em -0.2em 0.75em -0.2em;
padding: 0.75em 1em 0.75em 1em;
max-width: 100%;
border-color: rgba(1, 1, 1, 0.15); }
.night-mode blockquote {
border-color: rgba(255, 255, 255, 0.15); }
border-color: rgba(1, 1, 1, 0.15);
}
.night-mode blockquote {
border-color: rgba(255, 255, 255, 0.15);
}
pre {
border-width: 0 0 0 0.2em;
@ -234,24 +265,31 @@ pre {
max-width: 100%;
border-color: rgba(1, 1, 1, 0.2);
background-color: #EEE;
overflow-x: scroll; }
.night-mode pre {
background-color: #222;
border-color: rgba(255, 255, 255, 0.2); }
overflow-x: scroll;
}
.night-mode pre {
background-color: #222;
border-color: rgba(255, 255, 255, 0.2);
}
/* ------------------ SPECIAL STYLING ------------------- */
mark {
border-radius: 0.2em;
padding: 0 0.2em 0 0.2em;
background-color: rgba(255, 255, 0, 0.33);
color: inherit; }
color: inherit;
}
.night-mode mark {
background-color: rgba(128, 128, 0, 0.66); }
background-color: rgba(128, 128, 0, 0.66);
}
/* ------------------ SPECIAL STYLING ------------------- */
.time {
font-style: italic;
text-align: right;
width: 100%;
display: block; }
display: block;
}
/*# sourceMappingURL=clear-typography.css.map */

1
css/clear-typography.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/_font-face.scss","../scss/clear-typography.scss"],"names":[],"mappings":"AAAA;AAEA;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;ACrHJ;AAUA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACE;;;AAGF;EACC;;;AAGD;EACC;;;AAGD;EACE;EACA;;;AAGF;EA/BE;EACA;EACA;;AA+BA;EACE;;;AAIJ;EAtCE;EACA;EACA;;AAsCA;EACE;;AAEF;EACE;;;AAIJ;EAhDE;EACA;EACA;;AAgDA;EACE;;AAEF;EACE;;;AAKJ;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;AASA;EACE;EACD;EACA;EACA;EACA;EACA;;;AAGD;EAfC,WAgBgB;EAfhB,aAe6B;EAd7B;EACA,aAaqD;;;AAGtD;EAnBC,WAoBgB;EAnBhB,aAmBqB;EAlBrB;EACA,aAiB+C;;;AAGhD;EAvBC,WAwBgB;EAvBhB,aAuBuB;EAtBvB;EACA,aAqBsC;;;AAGvC;EA3BC,WA4BgB;EA3BhB,aA2BuB;EA1BvB;EACA,aAyBsC;;;AAGvC;EA/BC,WAgCgB;EA/BhB,aA+B4B;EA9B5B;EACA,aA6BoD;;;AAGrD;EAnCC,WAoCgB;EAnChB,aAmCuB;EAlCvB;EACA,aAiC4C;;;AAG7C;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAaA;EAVE;EACD;EACA;EAEA;EACA;EAEA;EAKA;;AAEA;EACG;;;AAIJ;EAnBE;EACD;EACA;EAEA;EACA;EAEA;EAcA;EACA;EACA;;AAEA;EACG;EACA;;;AAMJ;AAEA;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACC;EACA;EACA;EACA","file":"clear-typography.css"}

10
scss/clear-typography.scss
View File

@ -2,17 +2,19 @@
/* ------------------ GLOBAL STYLE ------------------- */
$baseline: 1.5;
@mixin paragraph() {
padding:0;
padding-bottom:1.5em;
margin:0;
padding-bottom: $baseline * 1rem;
}
body {
font-family: OpenSans, sans-serif;
text-align: left;
font-size: 4mm;
line-height: 1.5em;
line-height: $baseline * 1rem;
color: #444;
font-weight: 400;
}
@ -47,7 +49,7 @@ ul {
padding-bottom:0;
}
li {
margin-left:1.5em;
margin-left: $baseline * 1rem;
}
}
@ -57,7 +59,7 @@ ol {
padding-bottom:0;
}
li {
margin-left:1.5em;
margin-left: $baseline * 1rem;
}
}