improvement: add a $lineheight variable
This commit is contained in:
parent
066566d170
commit
dd51e1e170
3 changed files with 21 additions and 19 deletions
|
@ -69,7 +69,6 @@
|
|||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
/* ------------------ GLOBAL STYLE ------------------- */
|
||||
html {
|
||||
font-family: OpenSans, sans-serif;
|
||||
text-align: left;
|
||||
|
@ -151,8 +150,8 @@ ol li {
|
|||
/* ------------------ TITLES ------------------- */
|
||||
h1, h2, h3, h4, h5, h6, h7 {
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
font-size: 18px;
|
||||
line-height: 1.5rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
|
@ -245,7 +244,7 @@ pre {
|
|||
/* ------------------ SPECIAL STYLING ------------------- */
|
||||
mark {
|
||||
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);
|
||||
color: inherit;
|
||||
}
|
||||
|
|
|
@ -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"}
|
|
@ -1,14 +1,17 @@
|
|||
@import 'font-face';
|
||||
|
||||
/* ------------------ GLOBAL STYLE ------------------- */
|
||||
|
||||
$baseline: 1.5;
|
||||
// Change these two variables for styling
|
||||
$baseheight: 18px;
|
||||
$baseline: 1.5;
|
||||
|
||||
// Don't change this one, it's just to
|
||||
// make code more readable
|
||||
$lineheight: $baseline * 1rem;
|
||||
|
||||
@mixin paragraph() {
|
||||
padding:0;
|
||||
margin:0;
|
||||
margin-bottom: $baseline * 1rem;
|
||||
margin-bottom: $lineheight;
|
||||
}
|
||||
|
||||
html {
|
||||
|
@ -18,7 +21,7 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
line-height: $baseline * 1rem;
|
||||
line-height: $lineheight;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
@ -53,7 +56,7 @@ ul {
|
|||
margin-bottom:0;
|
||||
}
|
||||
li {
|
||||
margin-left: $baseline * 1rem;
|
||||
margin-left: $lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -63,7 +66,7 @@ ol {
|
|||
margin-bottom:0;
|
||||
}
|
||||
li {
|
||||
margin-left: $baseline * 1rem;
|
||||
margin-left: $lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -84,14 +87,14 @@ ol {
|
|||
$height: ceil($size / $baseline) * $baseline;
|
||||
font-size: $size * 1rem;
|
||||
line-height: $height * 1rem;
|
||||
margin-bottom: $baseline * 1rem;
|
||||
margin-bottom: $lineheight;
|
||||
font-weight: $weight;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7 {
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
font-size: $baseheight;
|
||||
line-height: $lineheight;
|
||||
padding:0;
|
||||
margin:0;
|
||||
font-weight:400;
|
||||
|
@ -130,7 +133,7 @@ hr {
|
|||
border-bottom: 1px;
|
||||
border-color: rgba(1,1,1,0.15);
|
||||
border-style: solid;
|
||||
margin-bottom: $baseline * 1rem;
|
||||
margin-bottom: $lineheight;
|
||||
}
|
||||
|
||||
/* ------------------ QUOTE ------------------- */
|
||||
|
@ -140,8 +143,8 @@ hr {
|
|||
border-style: solid;
|
||||
border-radius: 3px;
|
||||
margin:0;
|
||||
margin-bottom: $baseline * 1rem;
|
||||
padding: $baseline/2 * 1rem;
|
||||
margin-bottom: $lineheight;
|
||||
padding: $lineheight/2;
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
@ -172,7 +175,7 @@ pre {
|
|||
|
||||
mark {
|
||||
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);
|
||||
color: inherit;
|
||||
|
|
Loading…
Reference in a new issue