a2c032573f
This is consistent with the `body-colors` mixin and with other mixins we're about to add, like `anchor-color`.
122 lines
1.8 KiB
SCSS
122 lines
1.8 KiB
SCSS
// Table of Contents
|
|
//
|
|
// 01. Header
|
|
// 02. Navigation
|
|
// 03. Content
|
|
// 04. Sidebar
|
|
//
|
|
|
|
// 01. Header
|
|
// ----------------------
|
|
|
|
.jumbo {
|
|
background: $highlight;
|
|
margin-bottom: $line-height;
|
|
margin-top: rem-calc(-24);
|
|
padding-bottom: $line-height;
|
|
padding-top: $line-height;
|
|
|
|
@include breakpoint(medium) {
|
|
padding: rem-calc(24) 0;
|
|
}
|
|
|
|
&.light {
|
|
@include full-width-background;
|
|
background: #ecf0f1;
|
|
}
|
|
|
|
&.header-card {
|
|
@include full-width-background;
|
|
}
|
|
}
|
|
|
|
.lead {
|
|
font-size: rem-calc(24);
|
|
}
|
|
|
|
// 03. Navigation
|
|
// ----------------------
|
|
|
|
.menu-pages {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
|
|
li {
|
|
display: block;
|
|
|
|
@include breakpoint(medium) {
|
|
display: inline-block;
|
|
margin-right: $line-height / 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 03. Content
|
|
// ----------------------
|
|
|
|
.more-info-content {
|
|
|
|
h3 {
|
|
@include brand-color;
|
|
}
|
|
|
|
.additional-info {
|
|
margin-bottom: $line-height;
|
|
}
|
|
|
|
a:not(.button) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
figure {
|
|
margin: 0;
|
|
text-align: center;
|
|
|
|
figcaption {
|
|
font-size: $small-font-size;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.features {
|
|
list-style-type: circle;
|
|
margin-left: $line-height;
|
|
|
|
@include breakpoint(medium) {
|
|
margin: $line-height 0 $line-height $line-height * 2.5;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: $line-height;
|
|
}
|
|
}
|
|
|
|
.section-content {
|
|
border-top: 1px solid $medium-gray;
|
|
padding-bottom: $line-height * 2;
|
|
padding-top: $line-height * 2;
|
|
|
|
&:first-child {
|
|
border-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 04. Sidebar
|
|
// ----------------------
|
|
|
|
.more-info-sidebar {
|
|
|
|
.sidebar-card {
|
|
border: 1px solid $border;
|
|
margin-bottom: $line-height;
|
|
padding: $line-height / 2;
|
|
|
|
&.light {
|
|
background: #ecf0f1;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|