Skip to content

Commit

Permalink
Fix bug 225639 - use relative font sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
@craigcook
craigcook committed Dec 5, 2014
1 parent 5eb393c commit 593f723
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 93 deletions.
11 changes: 11 additions & 0 deletions media/css/sandstone/lib.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@
@smallFontSize: 12px;
@largeFontSize: 16px;

// Specify a px value and this converts to rem, keeping the px as fallback.
// Assumes default 16px to match sizes but will respect user preferences.
.font-size(@value) {
font-size: @value;
}

.font-size(@value) when (ispixel(@value)) {
font-size: @value;
font-size: unit(@value / 16, rem);
}

@textColorPrimary: #333;
@textColorSecondary: #484848;
@textColorTertiary: #666;
Expand Down
107 changes: 49 additions & 58 deletions media/css/sandstone/sandstone-resp.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,13 @@

/* {{{ Basic Colors, Text, Links */

html { background: #fff; }
html {
background: #fff;
font-size: 100%;
}

body {
font-size: @baseFontSize;
.font-size(@baseFontSize);
line-height: 1.5;
font-family: @baseFontFamily;
color: @textColorPrimary;
Expand Down Expand Up @@ -54,7 +57,7 @@ a.more {
border: none;
background: transparent;
color: @linkBlue;
font-size: @baseFontSize;
.font-size(@baseFontSize);
padding: 0;
margin: 0;
line-height: 1.5;
Expand Down Expand Up @@ -183,60 +186,53 @@ h1, h2, h3, h4, h5, h6, legend, .huge, .large, legend {
.open-sans-light;
display: block;
margin: 0 0 12px 0;
line-height: 100%;
text-shadow: 0px 1px 0px rgba(255,255,255,0.75);
line-height: 1;
text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
color: @textColorSecondary;
letter-spacing: -.035em;
}

.huge,
.huge h1 {
font-size: 108px;
letter-spacing: -4px;
line-height: 100%;
.font-size(108px);
}

.large,
.large h1 {
font-size: 72px;
letter-spacing: -3px;
line-height: 100%;
.font-size(72px);
}

h1,
.huge h2,
.large h2,
.billboard h2 {
font-size: 48px;
letter-spacing: -2px;
.font-size(48px);
}

h2 {
font-size: 32px;
letter-spacing: -1px;
.font-size(32px);
}

h3 {
font-size: 28px;
letter-spacing: -0.5px;
.font-size(28px);
}

h4, legend {
font-size: 24px;
letter-spacing: -0.25px;
.font-size(24px);
}

h5 {
font-size: @largeFontSize;
.font-size(@largeFontSize);
}

h6 {
font-size: @baseFontSize;
.font-size(@baseFontSize);
}

.small,
small {
font-size: @smallFontSize;
line-height: 16px;
.font-size(@smallFontSize);
line-height: 1.3;
}

hgroup {
Expand Down Expand Up @@ -275,9 +271,9 @@ li {

dl dt {
.open-sans-light;
font-size: 32px;
line-height: 100%;
letter-spacing: -1px;
.font-size(32px);
line-height: 1;
letter-spacing: -.035em;
margin-bottom: @baseLine / 2;
}

Expand All @@ -286,7 +282,7 @@ dl dd {
}

dl.faq dt {
font-size: 18px;
.font-size(18px);
letter-spacing: normal;
}

Expand All @@ -297,7 +293,7 @@ dl.faq dd {
pre,
code {
color: @textColorTertiary;
font-size: @baseFontSize;
.font-size(@baseFontSize);
}

.center {
Expand Down Expand Up @@ -340,7 +336,7 @@ input[type=time] {
border-style: solid;
border-width: 1px;
@shadow: 0 1px rgba(255,255,255,0.5);
font-size: @smallFontSize;
.font-size(@smallFontSize);
font-family: inherit;
padding: (@baseLine / 5) (@baseLine / 2);
.border-radius(3px);
Expand Down Expand Up @@ -392,7 +388,7 @@ input.invalid {
display: block;
margin-bottom: 0.1em;
.required {
font-size: @smallFontSize;
.font-size(@smallFontSize);
color: @linkRed;
text-transform: uppercase;
}
Expand All @@ -411,15 +407,15 @@ input.invalid {
.required-star();
}
.field-note {
font-size: @smallFontSize;
.font-size(@smallFontSize);
color: @textColorTertiary;
margin-top: 0.1em;
}
}

.form-minimal-label {
label {
font-size: @smallFontSize;
.font-size(@smallFontSize);
color: #999;
}
}
Expand All @@ -429,7 +425,7 @@ input.invalid {
margin-bottom: @baseLine / 2;
legend {
margin-bottom: @baseLine / 2;
font-size: 18px;
.font-size(18px);
letter-spacing: normal;
&.required:after {
.required-star();
Expand Down Expand Up @@ -611,7 +607,7 @@ label.error {
float: right;
margin: 0 16px;
text-transform: uppercase;
font-size: 13px;
.font-size(13px);
.open-sans;

ul {
Expand Down Expand Up @@ -692,8 +688,8 @@ label.error {
.open-sans-light;
width: 420px;
padding: 20px;
font-size: 48px;
letter-spacing: -2px;
.font-size(48px);
letter-spacing: -.05em;
color: #fff;
text-shadow: none;
background: #b30406;
Expand Down Expand Up @@ -786,7 +782,7 @@ nav.menu-bar {
td {
border-top: 0;
padding-top: 0;
font-size: @largeFontSize;
.font-size(@largeFontSize);
.open-sans-light;
}
}
Expand All @@ -806,7 +802,7 @@ nav.menu-bar {
nav,
.nav {
.open-sans-light;
font-size: @largeFontSize;
.font-size(@largeFontSize);
color: @textColorSecondary;

li {
Expand All @@ -828,7 +824,7 @@ nav.menu-bar {
}

li:first-child {
font-size: 24px;
.font-size(24px);
}

}
Expand Down Expand Up @@ -881,7 +877,7 @@ nav.menu-bar {
}

.field-privacy {
font-size: @smallFontSize;
.font-size(@smallFontSize);
input {
float: left;
}
Expand Down Expand Up @@ -966,8 +962,8 @@ nav.menu-bar {
#colophon {
color: @textColorTertiary;
padding: (@baseLine * 2) 0;
font-size: .875em;
line-height: 1.285;
.font-size(@smallFontSize);
line-height: 1.3;
background: #fff;
width: 100%;
margin: 1em 0 0;
Expand All @@ -986,7 +982,7 @@ nav.menu-bar {

h1 {
margin-bottom: @baseLine / 2;
font-size: @baseFontSize;
.font-size(@baseFontSize);
}

p, ul {
Expand Down Expand Up @@ -1095,7 +1091,7 @@ nav.menu-bar {
}

nav.menu-bar {
font-size: .9375em;
.font-size(13px);
}

.sidebar {
Expand Down Expand Up @@ -1258,42 +1254,38 @@ nav.menu-bar {
.huge h1,
.large,
.large h1 {
font-size: 48px;
letter-spacing: -2px;
.font-size(48px);
}

h1,
.large h2 {
font-size: 32px;
letter-spacing: -1px;
.font-size(32px);
}

h2,
.billboard h2 {
font-size: 28px;
letter-spacing: -0.5px;
.font-size(28px);
}

h3 {
font-size: 24px;
letter-spacing: -0.25px;
.font-size(24px);
}

h4 {
font-size: @largeFontSize;
.font-size(@largeFontSize);
}

h5 {
font-size: @baseFontSize;
.font-size(@baseFontSize);
}

dl dt {
font-size: 24px;
.font-size(24px);
}

nav.menu-bar {
text-align: inherit;
line-height: 100%;
line-height: 1;

ul {
padding-top: @baseLine / 2;
Expand All @@ -1317,8 +1309,7 @@ nav.menu-bar {

.title-shadow-box {
width: 340px;
font-size: 28px;
letter-spacing: -.5px;
.font-size(28px);
margin: -25px 0 @baseLine;
}

Expand Down

0 comments on commit 593f723

Please sign in to comment.