// Note: Fonts are not loaded here for performance reasons // Be sure to include a CDN link in your document head in order for fonts to work, ex: // @import (reference) "@design/jw-design-library/dist/less/component/page.less"; @import (reference) "@design/jw-design-library/dist/less/layout.less"; @import (reference) "@design/jw-design-library/dist/less/fonts.less"; @import (reference) '@design/jw-design-library/dist/less/brand-colors.less'; @import (reference) '@design/jw-design-library/dist/less/system-colors.less'; // Page rules .ds-page { font-family: @ds-global-font-family-custom; font-size: @ds-page-base-font-size; font-weight: @ds-page-base-font-weight; line-height: @ds-page-base-font-line-height; padding: @ds-layout-size-large; color: @ds-page-color-text-light; flex: 1; width: 100%; min-height: 100%; max-width: none; box-sizing: border-box; overflow: hidden; // Defaults to 'fluid' &--fixed { max-width: @ds-page-size-max-width; } &--full { padding: 0; margin: 0; } // Layout Helpers .ds-row { .ds-flex(@justify: space-between); > section, > div:not(.ds-row) { flex: 1; } } .ds-col { .ds-flex(@direction: column); } .ds-flex(@align: flex-start, @justify: flex-start, @direction: row) { display: flex; align-items: @align; justify-content: @justify; flex-direction: @direction; } // Typography h1, h1 a { font-size: @ds-page-h1-font-size; line-height: @ds-page-base-font-line-height; margin: 0 0 @ds-page-h1-font-margin; font-weight: @ds-page-h1-font-weight; color: @ds-page-color-text-light; } h2, h2 a { font-size: @ds-page-h2-font-size; line-height: @ds-page-base-font-line-height; margin: 0 0 @ds-page-h2-font-margin; font-weight: @ds-page-h2-font-weight; color: @ds-page-color-text-light; } h3, h3 a { font-size: @ds-page-h3-font-size; line-height: @ds-page-base-font-line-height; margin: 0 0 @ds-page-h3-font-margin; font-weight: @ds-page-h3-font-weight; color: @ds-page-color-text-light; } h4, h4 a { font-size: @ds-page-h4-font-size; line-height: @ds-page-base-font-line-height; margin: 0 0 @ds-page-h4-font-margin; font-weight: @ds-page-h4-font-weight; color: @ds-page-color-text-light; } h5, h5 a { font-size: @ds-page-h5-font-size; line-height: @ds-page-base-font-line-height; margin: 0 0 @ds-page-h5-font-margin; text-transform: uppercase; font-weight: @ds-page-h5-font-weight; color: @ds-color-brand-midnight; } p, span { font-size: @ds-page-p-font-size; line-height: @ds-page-base-font-line-height; margin: 0 0 @ds-page-p-font-margin; font-weight: @ds-page-p-font-weight; color: @ds-page-color-text-light; } span { margin: 0 0 0; } // ensures that if a link is nested within a header, the header maintains its style h1, h2, h3, h4, h5 { a, a:hover, a:active, a:visited { text-decoration: none; } } a, a:active, a:visited { font-size: inherit; font-weight: @ds-page-a-font-weight; color: @ds-page-a-color-base; text-decoration: none; &:hover { text-decoration: underline; } } ul, ol { margin: 0 0 @ds-layout-size-medium; } small { font-size: 11px; line-height: @ds-page-base-font-line-height; } h4 + p { margin-top: (-@ds-layout-size-small); } }