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:
Rostislav 2019-10-27 15:51:32 +01:00 committed by Dylan DPC
parent d5535d1226
commit 820714a560
2 changed files with 7 additions and 2 deletions

View File

@ -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;

View File

@ -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;
} }