Use only relative font sizes (#894)
This replaces the only use of px for font-sizes by setting up a base rem size on the root element in a way that is easy to calculate (1 rem = 10px) and scaling up according to browser settings.
This commit is contained in:
parent
d5535d1226
commit
820714a560
|
@ -87,7 +87,7 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
|
||||||
.menu-title {
|
.menu-title {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
font-size: 20px;
|
font-size: 2rem;
|
||||||
line-height: var(--menu-bar-height);
|
line-height: var(--menu-bar-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -2,6 +2,11 @@
|
||||||
|
|
||||||
@import 'variables.css';
|
@import 'variables.css';
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Browser default font-size is 16px, this way 1 rem = 10px */
|
||||||
|
font-size: 62.5%;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: "Open Sans", sans-serif;
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
|
@ -11,7 +16,7 @@ html {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1rem;
|
font-size: 1.6rem;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue