CSS: Use em instead of px for font size

Further, font size related settings have been moved to base.less to not create the impression that it's a good idea to change font sizes via themes.

refs #10294
refs #10295
This commit is contained in:
Eric Lippmann 2015-10-26 12:49:48 +01:00
parent 6e5ba364fb
commit 4801fb9563
2 changed files with 15 additions and 19 deletions

View File

@ -1,5 +1,12 @@
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
@font-size: 0.875em; // 14 px
@font-size-small: 0.786em; // 11 px
@font-weight-bold: 600;
@vertical-padding: 0.429em; // 6 px
@horizontal-padding: 0.857em; // 12 px
// Make padding not affect the final computed width of an element // Make padding not affect the final computed width of an element
html { html {
box-sizing: border-box; box-sizing: border-box;
@ -22,7 +29,7 @@ a {
} }
blockquote { blockquote {
border-left: 6px solid @gray-light; border-left: @vertical-padding solid @gray-light;
color: @text-color-light; color: @text-color-light;
// Reset default margin // Reset default margin
margin: 0; margin: 0;
@ -35,26 +42,24 @@ body {
color: @text-color; color: @text-color;
font-family: @font-family; font-family: @font-family;
font-size: @font-size; font-size: @font-size;
// Set line-height w/o unit so that the line-height is dynamically calculated as font-size * line-height
line-height: 1.3;
} }
h1 { h1 {
border-bottom: 1px solid @gray-lightest; border-bottom: 1px solid @gray-lightest;
font-size: 18px; font-size: 1.286em;
font-weight: normal; font-weight: normal;
line-height: 22px; margin: @vertical-padding 0;
} }
h2 { h2 {
border-bottom: 1px solid @gray-lightest; border-bottom: 1px solid @gray-lightest;
font-size: 16px; font-size: 1.143em;
font-weight: normal; font-weight: normal;
line-height: 19px;
} }
p { p {
color: @text-color;
font-size: @font-size;
line-height: @line-height;
// Remove default margin // Remove default margin
margin: 0; margin: 0;
} }
@ -78,6 +83,6 @@ td {
@media print { @media print {
.dont-print { .dont-print {
display:none; display: none;
} }
} }

View File

@ -29,15 +29,6 @@
// Text color on <a> // Text color on <a>
@link-color: @text-color; @link-color: @text-color;
// Font and line-height for text
@font-family: Calibri, Helvetica, sans-serif; @font-family: Calibri, Helvetica, sans-serif;
@font-family-fixed: Menlo, monospace; @font-family-fixed: Menlo, monospace;
@font-size: 14px; @font-family-wide: Tahoma, Verdana, sans-serif;
@font-size-small: 11px;
@font-weight-bold: 600;
@line-height: 17px;
@line-height-small: 14px;
// Default padding
@vertical-padding: 6px;
@horizontal-padding: 12px;