app/assets/stylesheets/pages.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: calc(#{$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: calc(#{$line-height} / 2);
&.light {
background: #ecf0f1;
border: 0;
}
}
}