// Typography // ==========================================================================
// Increase the base font size to 19px for the main content area // Using the core-19 mixin from the govuk_toolkit _typography.scss file
main {
@include core-19; -webkit-font-smoothing: antialiased;
}
// Core font sizes .font-xxlarge {
@include core-80;
}
.font-xlarge {
@include core-48;
}
.font-large {
@include core-36;
}
.font-medium {
@include core-24;
}
.font-small {
@include core-19;
}
.font-xsmall {
@include core-16;
}
// Bold font sizes .bold-xxlarge {
@include bold-80();
}
.bold-xlarge {
@include bold-48();
}
.bold-large {
@include bold-36();
}
.bold-medium {
@include bold-24();
}
.bold-small {
@include bold-19();
}
.bold-xsmall {
@include bold-16();
}
// Bold, without needing a font size .bold {
font-weight: 700;
}
// Common heading sizes // Using the bold-xx mixins from the govuk_toolkit _typography.scss file // Spacing is set in em, using the px to em function in the elements _helpers.scss file
// Headings .heading-xlarge {
@include bold-48(); margin-top: em(15, 32); margin-bottom: em(30, 32); @include media(tablet) { margin-top: em(30, 48); margin-bottom: em(60, 48); } .heading-secondary { @include heading-27(); display: block; color: $secondary-text-colour; }
}
.heading-large {
@include bold-36(); margin-top: em(25, 24); margin-bottom: em(10, 24); @include media(tablet) { margin-top: em(45, 36); margin-bottom: em(20, 36); } .heading-secondary { @include heading-24(); display: block; color: $secondary-text-colour; }
}
.heading-medium {
@include bold-24(); margin-top: em(25, 20); margin-bottom: em(10, 20); @include media(tablet) { margin-top: em(45, 24); margin-bottom: em(20, 24); }
}
.heading-small {
@include bold-19(); margin-top: em(10, 16); margin-bottom: em(5, 16); @include media(tablet) { margin-top: em(20, 19); }
}
// Text p, .body-text {
margin-top: em(5, 16); margin-bottom: em(20, 16); @include media(tablet) { margin-top: em(5); margin-bottom: em(20); }
}
.body-text {
display: block;
}
// Lede, or intro text .lede {
@include core-24;
}
// Set a max-width for text blocks // Less than 75 characters per line of text .text {
max-width: 30em;
}
.text-secondary {
color: $secondary-text-colour;
}
// Link styles .link {
color: $link-colour; text-decoration: underline;
}
.visited {
color: $link-visited-colour;
}
.hover {
color: $link-hover-colour;
}
.active {
color: $link-colour;
}
// Back link styles - with left pointing arrow
.link-back {
@include inline-block; position: relative; @include core-16; margin-top: $gutter-half; margin-bottom: $gutter-half; padding-left: 14px; color: $black; &:link, &:visited, &:hover, a#{&}:focus, &:active { color: $black; } text-decoration: none; border-bottom: 1px solid $black; // Back arrow - left pointing black arrow &::before { content: ''; display: block; width: 0; height: 0; border-top: 5px solid transparent; border-right: 6px solid $text-colour; border-bottom: 5px solid transparent; position: absolute; left: 0; top: 50%; margin-top: -6px; } // Fallback // IE8 doesn't support rgba and only supports the single colon syntax for :before // IE7 doesn't support pseudo-elements, let's fallback to an image instead. // Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba @include ie-lte(8) { background: file-url("icon-arrow-left.png") no-repeat 0 4px; }
} // Code styles .code {
color: $text-colour; background-color: $highlight-colour; text-shadow: 0 1px $page-colour; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; border: 1px solid $border-colour; padding: 4px 4px 2px;
}
// Horizontal rule style hr {
display: block; background: $border-colour; border: 0; height: 1px; margin-top: $gutter; margin-bottom: $gutter; padding: 0; @include ie-lte(7) { color: $border-colour; }
}
// Notice, text with an icon to the left .notice {
@extend %contain-floats; position: relative; .icon { position: absolute; left: 0; top: 50%; margin-top: -17px; // Half the height of the important icon } strong { display: block; padding-left: (35 + 30) + px; margin-left: -$gutter-half; }
}
// Data .data {
margin-top: em(5, 16); margin-bottom: em(20, 16); @include media(tablet) { margin-top: em(5, 19); margin-bottom: em(20, 19); }
}
.data-item {
display: block; line-height: 1;
}