From 5234abfdd3899f0fc636f6e4fdf1be62cb5a1095 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Mon, 4 Nov 2019 15:21:06 +0100 Subject: [PATCH] fix: use rem instead of em for line-height --- css/clear-typography.css | 226 ++++++++++++++++++++--------------- css/clear-typography.css.map | 1 + scss/clear-typography.scss | 10 +- 3 files changed, 139 insertions(+), 98 deletions(-) create mode 100644 css/clear-typography.css.map diff --git a/css/clear-typography.css b/css/clear-typography.css index 324673d..ab94e19 100644 --- a/css/clear-typography.css +++ b/css/clear-typography.css @@ -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 */ diff --git a/css/clear-typography.css.map b/css/clear-typography.css.map new file mode 100644 index 0000000..19af280 --- /dev/null +++ b/css/clear-typography.css.map @@ -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"} \ No newline at end of file diff --git a/scss/clear-typography.scss b/scss/clear-typography.scss index 8270c53..81334cf 100644 --- a/scss/clear-typography.scss +++ b/scss/clear-typography.scss @@ -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; } }