improvement: new default height
This commit is contained in:
Kazhnuz
parent
18c8a9878a
commit
56a2c02b11
4 changed files with 39 additions and 49 deletions
|
|
@ -21,6 +21,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
|
||||
- Auto-calculate lineheight for titles
|
||||
|
||||
- Default lineheight is now 1.75
|
||||
|
||||
### Fixed
|
||||
|
||||
- Line-height is no longer affected by sup and sub
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
line-height: 1.5rem;
|
||||
line-height: 1.75rem;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
@ -84,7 +84,7 @@ body {
|
|||
.debug {
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(255, 255, 255, 0) 1px);
|
||||
background-repeat: repeat-y;
|
||||
background-size: 100% 1.5rem;
|
||||
background-size: 100% 1.75rem;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
|
|
@ -107,52 +107,40 @@ a {
|
|||
p, time {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
p:last-child, time:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
ul, ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
ul ul {
|
||||
ul ul, ol ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul li {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
ol ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ol li {
|
||||
margin-left: 1.5rem;
|
||||
ul li, ol li {
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
|
||||
/* sup, sub */
|
||||
sup, sub {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.5rem;
|
||||
line-height: 1.75rem;
|
||||
font-size: 0.8rem;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.375rem;
|
||||
top: -0.4375rem;
|
||||
}
|
||||
|
||||
sub {
|
||||
top: 0.375rem;
|
||||
top: 0.4375rem;
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
|
@ -175,7 +163,7 @@ sub {
|
|||
h1, h2, h3, h4, h5, h6, h7 {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
line-height: 1.5rem;
|
||||
line-height: 1.75rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
|
|
@ -183,43 +171,43 @@ h1, h2, h3, h4, h5, h6, h7 {
|
|||
|
||||
h1 {
|
||||
font-size: 2.3333333rem;
|
||||
line-height: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 3.5rem;
|
||||
margin-bottom: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 3.5rem;
|
||||
margin-bottom: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.75rem;
|
||||
margin-bottom: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.75rem;
|
||||
margin-bottom: 1.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.333333rem;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.75rem;
|
||||
margin-bottom: 1.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.75rem;
|
||||
margin-bottom: 1.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -233,17 +221,17 @@ hr {
|
|||
border-style: solid;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
/* ------------------ QUOTE ------------------- */
|
||||
blockquote {
|
||||
border-width: 0 0 0 0.375rem;
|
||||
border-width: 0 0 0 0.4375rem;
|
||||
border-style: solid;
|
||||
border-radius: 0.1875rem;
|
||||
border-radius: 0.21875rem;
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.75rem;
|
||||
padding: 1.75rem;
|
||||
font-size: 1.1rem;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
|
|
@ -254,12 +242,12 @@ blockquote {
|
|||
}
|
||||
|
||||
pre {
|
||||
border-width: 0 0 0 0.375rem;
|
||||
border-width: 0 0 0 0.4375rem;
|
||||
border-style: solid;
|
||||
border-radius: 0.1875rem;
|
||||
border-radius: 0.21875rem;
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.75rem;
|
||||
padding: 1.75rem;
|
||||
font-size: 1.1rem;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
|
|
@ -274,7 +262,7 @@ pre {
|
|||
/* ------------------ SPECIAL STYLING ------------------- */
|
||||
mark {
|
||||
border-radius: 0.2em;
|
||||
padding: 0 0.375rem 0 0.375rem;
|
||||
padding: 0 0.4375rem 0 0.4375rem;
|
||||
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;;ACvGJ;EACC;EACA;EACA,WAhBY;;;AAmBb;EACC,aAfY;EAgBZ;EACA;;;AAGD;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACC;;;AAGD;EACC;;;AAGD;EACE;EACA;;;AAGF;EAxCE;EACA;EACA,eALW;;AA6CX;EACE;;;AAIJ;EA/CE;EACA;EACA,eALW;;AAoDX;EACE;;AAEF;EACE,aAxDS;;;AA4Db;EAzDE;EACA;EACA,eALW;;AA8DX;EACE;;AAEF;EACE,aAlES;;;AAsEb;AAEA;EACE;EACA;EACA,aA3EW;EA4EX;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;;;AAGF;AAUA;EACE;EACD,WArHY;EAsHZ,aAjHY;EAkHZ;EACA;EACA;;;AAGD;EAfC;EACA;EACA,eA1GY;EA2GZ,aAa2B;;;AAG5B;EAnBC;EACA;EACA,eA1GY;EA2GZ,aAiBmB;;;AAGpB;EAvBC;EACA;EACA,eA1GY;EA2GZ,aAqBqB;;;AAGtB;EA3BC;EACA;EACA,eA1GY;EA2GZ,aAyBqB;;;AAGtB;EA/BC;EACA;EACA,eA1GY;EA2GZ,aA6B0B;;;AAG3B;EAnCC;EACA;EACA,eA1GY;EA2GZ,aAiCqB;;;AAGtB;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eA1JW;;;AA6Jb;AAeA;EAZE;EACD;EACA;EACA;EACA,eApKY;EAqKZ,SArKY;EAsKT;EAEH;EACG;EAKH;;AAEA;EACG;;;AAIJ;EArBE;EACD;EACA;EACA;EACA,eApKY;EAqKZ,SArKY;EAsKT;EAEH;EACG;EAcH;EACA;;AAEA;EACG;EACA;;;AAMJ;AAEA;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACC;EACA;EACA;EACA;EACG","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;EACA;EACA;;;AAGF;EACE;;;AAGF;EACC;;;AAGD;EACC;;;AAGD;EACE;EACA;;;AAGF;EAxCE;EACA;EACA,eALW;;AA6CX;EACE;;;AAIJ;EA/CE;EACA;EACA,eALW;;AAoDX;EACE;;AAEF;EACE,aAxDS;;;AA4Db;AAEA;EACE;EACA;EACA,aAjEW;EAkEX;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EAAc;EAAqB;;;AACnC;EAAmB;EAAqB;;;AAExC;AAEA;EACE;EACA;;;AAGF;AAUA;EACE;EACD,WA3GY;EA4GZ,aAvGY;EAwGZ;EACA;EACA;;;AAGD;EAfC;EACA;EACA,eAhGY;EAiGZ,aAa2B;;;AAG5B;EAnBC;EACA;EACA,eAhGY;EAiGZ,aAiBmB;;;AAGpB;EAvBC;EACA;EACA,eAhGY;EAiGZ,aAqBqB;;;AAGtB;EA3BC;EACA;EACA,eAhGY;EAiGZ,aAyBqB;;;AAGtB;EA/BC;EACA;EACA,eAhGY;EAiGZ,aA6B0B;;;AAG3B;EAnCC;EACA;EACA,eAhGY;EAiGZ,aAiCqB;;;AAGtB;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eAhJW;;;AAmJb;AAeA;EAZE;EACD;EACA;EACA;EACA,eA1JY;EA2JZ,SA3JY;EA4JT;EAEH;EACG;EAKH;;AAEA;EACG;;;AAIJ;EArBE;EACD;EACA;EACA;EACA,eA1JY;EA2JZ,SA3JY;EA4JT;EAEH;EACG;EAcH;EACA;;AAEA;EACG;EACA;;;AAMJ;AAEA;EACE;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;AAEA;EACC;EACA;EACA;EACA;EACG","file":"clear-typography.css"}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
// Change these two variables for styling
|
||||
$baseheight: 18px;
|
||||
$baseline: 1.5;
|
||||
$baseline: 1.75;
|
||||
|
||||
// Don't change this one, it's just to
|
||||
// make code more readable
|
||||
|
|
@ -29,7 +29,7 @@ body {
|
|||
.debug {
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(255, 255, 255, 0) 1px);
|
||||
background-repeat: repeat-y;
|
||||
background-size: 100% 1.5rem;
|
||||
background-size: 100% $lineheight;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
|
|
|
|||
Loading…
Reference in a new issue