1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 18:36:11 +01:00
site/_src/_assets/styles/bigchain/_sections.scss

118 lines
1.9 KiB
SCSS

.section {
padding-top: ($spacer * 2);
padding-bottom: ($spacer * 2);
&:last-child { border-bottom: none; }
// use this so animated elements coming in from outside of screen
// don't affect layout
overflow: hidden;
// vertically center everything
display: flex;
align-items: center;
min-height: 420px;
.row { flex: 1; }
@media ($screen-sm) {
padding-top: ($spacer * 4);
padding-bottom: ($spacer * 4);
}
}
.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;
}
}
.section-title {
font-size: $font-size-h2;
margin-top: 0;
margin-bottom: ($spacer * 2);
// the bottom line
&:after {
content: "";
height: 1px;
width: 5rem;
display: block;
margin: ($spacer * 2) auto 0 auto;
background: $gray;
}
}
.section-description {
font-size: $font-size-lg;
margin-bottom: 0;
+ .section-description {
margin-top: $spacer;
}
}
.section-actions {
margin-top: $spacer;
.btn {
margin-left: 5px;
margin-right: 5px;
min-width: 200px;
}
}
//
// Section backgrounds
//
.background--blue {
background: $brand-main-blue;
}
.background--darker {
background: $gray-darker;
}
.background--light {
background: $gray-lightest;
.section-title,
p {
color: $gray;
}
}
.background--gray {
background: $brand-main-gray;
}
//
// Photo background
//
.background--photo {
@extend .color-overlay;
text-shadow: 0 1px 0 rgba(0,0,0,.1);
// background
background: url('../img/photo1.jpg') no-repeat center top;
background-size: cover;
.section-title,
.section-description,
.header__title {
//color: #fff;
}
}