kazhnuz/moineau
1
0
Fork 0
Code Issues 3 Pull requests Releases 2 Wiki Activity

fix: use rem instead of em for line-height

Browse source
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

206
css/clear-typography.css
View file

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