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

improvement: add a $lineheight variable

Browse source
This commit is contained in:
Kazhnuz 2019-11-07 12:22:09 +01:00
parent 066566d170
commit dd51e1e170
3 changed files with 21 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
css/clear-typography.css
View file

@ -69,7 +69,6 @@
font-weight: 800; font-weight: 800;
font-style: italic; font-style: italic;
} }
/* ------------------ GLOBAL STYLE ------------------- */
html { html {
font-family: OpenSans, sans-serif; font-family: OpenSans, sans-serif;
text-align: left; text-align: left;
@ -151,8 +150,8 @@ ol li {
/* ------------------ TITLES ------------------- */ /* ------------------ TITLES ------------------- */
h1, h2, h3, h4, h5, h6, h7 { h1, h2, h3, h4, h5, h6, h7 {
text-align: left; text-align: left;
font-size: 1em; font-size: 18px;
line-height: 1.5em; line-height: 1.5rem;
padding: 0; padding: 0;
margin: 0; margin: 0;
font-weight: 400; font-weight: 400;
@ -245,7 +244,7 @@ pre {
/* ------------------ SPECIAL STYLING ------------------- */ /* ------------------ SPECIAL STYLING ------------------- */
mark { mark {
border-radius: 0.2em; border-radius: 0.2em;
padding: 0 0.2em 0 0.2em; padding: 0 0.375rem 0 0.375rem;
background-color: rgba(255, 255, 0, 0.33); background-color: rgba(255, 255, 0, 0.33);
color: inherit; color: inherit;
} }

2
css/clear-typography.css.map
View file

@ -1 +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;AAWA;EACC;EACA;EACA,WAXY;;;AAcb;EACC;EACA;EACA;;;AAGD;EACE;;;AAGF;EACC;;;AAGD;EACC;;;AAGD;EACE;EACA;;;AAGF;EAlCE;EACA;EACA;;AAkCA;EACE;;;AAIJ;EAzCE;EACA;EACA;;AAyCA;EACE;;AAEF;EACE;;;AAIJ;EAnDE;EACA;EACA;;AAmDA;EACE;;AAEF;EACE;;;AAKJ;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;;;AAGF;AAUA;EACE;EACD;EACA;EACA;EACA;EACA;;;AAGD;EAfC;EACA;EACA;EACA,aAa2B;;;AAG5B;EAnBC;EACA;EACA;EACA,aAiBmB;;;AAGpB;EAvBC;EACA;EACA;EACA,aAqBqB;;;AAGtB;EA3BC;EACA;EACA;EACA,aAyBqB;;;AAGtB;EA/BC;EACA;EACA;EACA,aA6B0B;;;AAG3B;EAnCC;EACA;EACA;EACA,aAiCqB;;;AAGtB;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAaA;EAVE;EACD;EACA;EACA;EACA;EACA;EAEA;EAKA;;AAEA;EACG;;;AAIJ;EAnBE;EACD;EACA;EACA;EACA;EACA;EAEA;EAcA;EACA;;AAEA;EACG;EACA;;;AAMJ;AAEA;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACC;EACA;EACA;EACA","file":"clear-typography.css"} {"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;;ACvGJ;EACC;EACA;EACA,WAhBY;;;AAmBb;EACC,aAfY;EAgBZ;EACA;;;AAGD;EACE;;;AAGF;EACC;;;AAGD;EACC;;;AAGD;EACE;EACA;;;AAGF;EAlCE;EACA;EACA,eALW;;AAuCX;EACE;;;AAIJ;EAzCE;EACA;EACA,eALW;;AA8CX;EACE;;AAEF;EACE,aAlDS;;;AAsDb;EAnDE;EACA;EACA,eALW;;AAwDX;EACE;;AAEF;EACE,aA5DS;;;AAiEb;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;;;AAGF;AAUA;EACE;EACD,WA5FY;EA6FZ,aAxFY;EAyFZ;EACA;EACA;;;AAGD;EAfC;EACA;EACA,eAjFY;EAkFZ,aAa2B;;;AAG5B;EAnBC;EACA;EACA,eAjFY;EAkFZ,aAiBmB;;;AAGpB;EAvBC;EACA;EACA,eAjFY;EAkFZ,aAqBqB;;;AAGtB;EA3BC;EACA;EACA,eAjFY;EAkFZ,aAyBqB;;;AAGtB;EA/BC;EACA;EACA,eAjFY;EAkFZ,aA6B0B;;;AAG3B;EAnCC;EACA;EACA,eAjFY;EAkFZ,aAiCqB;;;AAGtB;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,eA/HY;;;AAkIb;AAaA;EAVE;EACD;EACA;EACA;EACA,eAzIY;EA0IZ;EAEA;EAKA;;AAEA;EACG;;;AAIJ;EAnBE;EACD;EACA;EACA;EACA,eAzIY;EA0IZ;EAEA;EAcA;EACA;;AAEA;EACG;EACA;;;AAMJ;AAEA;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACC;EACA;EACA;EACA","file":"clear-typography.css"}

31
scss/clear-typography.scss
View file

@ -1,14 +1,17 @@
@import 'font-face'; @import 'font-face';
/* ------------------ GLOBAL STYLE ------------------- */ // Change these two variables for styling
$baseline: 1.5;
$baseheight: 18px; $baseheight: 18px;
$baseline: 1.5;
// Don't change this one, it's just to
// make code more readable
$lineheight: $baseline * 1rem;
@mixin paragraph() { @mixin paragraph() {
padding:0; padding:0;
margin:0; margin:0;
margin-bottom: $baseline * 1rem; margin-bottom: $lineheight;
} }
html { html {
@ -18,7 +21,7 @@ html {
} }
body { body {
line-height: $baseline * 1rem; line-height: $lineheight;
color: #444; color: #444;
font-weight: 400; font-weight: 400;
} }
@ -53,7 +56,7 @@ ul {
margin-bottom:0; margin-bottom:0;
} }
li { li {
margin-left: $baseline * 1rem; margin-left: $lineheight;
} }
} }
@ -63,7 +66,7 @@ ol {
margin-bottom:0; margin-bottom:0;
} }
li { li {
margin-left: $baseline * 1rem; margin-left: $lineheight;
} }
} }
@ -84,14 +87,14 @@ ol {
$height: ceil($size / $baseline) * $baseline; $height: ceil($size / $baseline) * $baseline;
font-size: $size * 1rem; font-size: $size * 1rem;
line-height: $height * 1rem; line-height: $height * 1rem;
margin-bottom: $baseline * 1rem; margin-bottom: $lineheight;
font-weight: $weight; font-weight: $weight;
} }
h1, h2, h3, h4, h5, h6, h7 { h1, h2, h3, h4, h5, h6, h7 {
text-align: left; text-align: left;
font-size: 1em; font-size: $baseheight;
line-height: 1.5em; line-height: $lineheight;
padding:0; padding:0;
margin:0; margin:0;
font-weight:400; font-weight:400;
@ -130,7 +133,7 @@ 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-bottom: $baseline * 1rem; margin-bottom: $lineheight;
} }
/* ------------------ QUOTE ------------------- */ /* ------------------ QUOTE ------------------- */
@ -140,8 +143,8 @@ hr {
border-style: solid; border-style: solid;
border-radius: 3px; border-radius: 3px;
margin:0; margin:0;
margin-bottom: $baseline * 1rem; margin-bottom: $lineheight;
padding: $baseline/2 * 1rem; padding: $lineheight/2;
max-width: 100%; max-width: 100%;
} }
@ -172,7 +175,7 @@ pre {
mark { mark {
border-radius: 0.2em; border-radius: 0.2em;
padding:0 0.2em 0 0.2em; padding:0 $lineheight/4 0 $lineheight/4;
background-color:rgba(255,255,0,0.33); background-color:rgba(255,255,0,0.33);
color: inherit; color: inherit;