site/_src/_assets/styles/_sections.scss

91 lines
1.5 KiB
SCSS

.section {
padding-top: ($spacer * 3);
padding-bottom: ($spacer * 3);
&:last-child { border-bottom: 0; }
// use this so animated elements coming in from outside of screen
// don't affect layout
overflow: hidden;
.row {
flex: 0 0 100%;
}
@media ($screen-sm) {
padding-top: ($spacer * 5);
padding-bottom: ($spacer * 5);
}
}
.section-header {
margin-bottom: ($spacer * 4);
}
.section-title,
.section-description {
text-align: center;
@media ($screen-sm) {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.text-left & {
text-align: left;
}
}
.section-title {
@extend .h2;
margin-top: 0;
margin-bottom: ($spacer * 2);
// the bottom line
&:after {
content: '';
height: 2px;
width: 3rem;
display: block;
margin: ($spacer * 2) auto 0;
background: $gray-light;
}
.text-left & {
&:after {
margin-left: 0;
}
}
}
.section-description {
font-size: $font-size-lg;
margin-bottom: 0;
color: $brand-main-gray-lighter;
+ .section-description,
+ p {
margin-top: $spacer;
}
}
.section-actions {
margin-top: $spacer;
.btn {
margin-left: 5px;
margin-right: 5px;
min-width: 200px;
}
}
//
// Specific sections
//
@import '_sections/section-cta-whitepaper';
@import '_sections/section-partners';
@import '_sections/section-getstarted';