fix: use rem instead of em for line-height
This commit is contained in:
parent
07009bf0af
commit
5234abfdd3
3 changed files with 139 additions and 98 deletions
|
@ -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
1
css/clear-typography.css.map
Normal 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"}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue