diff options
Diffstat (limited to 'design/sass/_content.scss')
| -rw-r--r-- | design/sass/_content.scss | 236 |
1 files changed, 236 insertions, 0 deletions
diff --git a/design/sass/_content.scss b/design/sass/_content.scss new file mode 100644 index 0000000..9a81b64 --- /dev/null +++ b/design/sass/_content.scss @@ -0,0 +1,236 @@ +.hero-wrapper { + @include fancy_sans; + padding: 5rem 0 0; + &:after { + @include faded_line_after; + margin-top: 4rem; + margin-bottom: 4rem; + padding: 0; + } +} +.circle-pic { + border-radius: 50%; + border: 5px solid #000; +} +.btn { + @include fontsize(14); + display: inline-block; + border-radius: 4px; + @include fancy_sans; + @include smcaps; + -webkit-appearance: none; + text-decoration: none; + cursor: pointer; + background: $link_color; + color: #fff !important; + border: 1px solid $link_color; + padding: 7px 9px; + white-space: nowrap; + &:hover { + background: $link_hover_color; + border: 1px solid $link_hover_color; + } +} +.btn-small { + @include fontsize(10); + @include smcaps; +} +.btn-hollow { + @include fontsize(17); + padding: 6px 8px; + border: none; //1px solid $body_font_light; + color: $link_color !important; + outline: $link_color !important; + background: white; + border: 1px solid $link_color; + &:hover { + background: $link_color !important; + color: white !important; + } +} +.hed-alpha { + @include fancy_serif; + line-height: 1.2; + font-weight: 600; +} +.hed-beta { + line-height: 1.4; +} +.hed-gamma { + line-height: 1.4; + @include fontsize(20); + @include fancy_sans; + text-align: center; + letter-spacing: 1px; + margin: 0 auto; +} +.hed-delta { + @include fancy_sans; + @include fontsize(22); + font-weight: bold; + margin-bottom: .5em; +} +.hed-epsilon { + @include fontsize(14); + @include fancy_sans; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: bold; + color: $body_font_light; + line-height: 1.2; + text-align: center; + margin: 0; +} +.hed-border { + display: inline-block; + border-bottom: 3px solid #efefef; + width: auto; +} +.hero { + .hero-pic { + max-width: 50%; + margin: 1.5rem auto; + } + h3.hed-alpha { + @include fontsize(24); + } + .hed-beta { + @include fancy_sans; + @include fontsize(22); + margin: .5rem auto; + text-align: center; + &:last-of-type:after { + @include faded_line_after; + margin-top: 2rem; + margin-bottom: 2rem; + } + } + @include breakpoint(beta) { + display: flex; + align-items: flex-start; + align-content: flex-start; + .hero-text { + margin-left: 5rem; + & > * { + text-align: left; + } + } + p { + width: 90%; + @include fontsize(20); + } + .btn { + margin-top: 1.5rem; + } + } +} +.home { + h4 { + @include fancy_sans; + text-align: center; + letter-spacing: 1px; + } + hr { + border-top: 3px solid #efefef; + margin: 5em auto; + width: 40%; + } +} +.border-wrapper { + margin: 2rem auto 0; +} +.home-logos { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + width: 100%; + li { + margin: 0 .5rem; + } + img { + max-width: 80px; + } + @include breakpoint(gamma) { + @include constrain_wide; + margin: 0 auto; + img { + max-width: 120px; + } + } +} + + +.home-border-wrapper { + @include breakpoint(beta) { + margin-top: 4rem; + .btn { + margin-bottom: 4rem; + } + } + &:before { + @include faded_line_after; + margin-top: 0; + margin-bottom: 5rem; + } +} + +.card-image { + max-height: 10rem; + overflow: hidden; + border: 4px $body_font_color solid; + img { + width: 100%; + margin-top: -14%; + } +} +.home-card-wrapper { + @include breakpoint(beta) { + margin-top: 4rem; + .btn { + margin-bottom: 4rem; + } + } + &:after { + @include faded_line_after; + margin-top: 0; + margin-bottom: 5rem; + } +} +.card { + margin: 4rem auto; + p { + margin-top: .5rem; + @include fontsize(18); + } + h5 { + @include fontsize(24); + text-align: center; + margin: 1rem 0 0 0; + } + &:after { + @include faded_line_after; + } + &:last-of-type:after { + display: none; + } + @include breakpoint(beta) { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; + margin-top: 0; + margin-right: 2rem; + &:last-of-type { + margin-right: 0; + } + &:after { + display: none; + } + } +} +.flex { + @include breakpoint(gamma) { + display: flex; + justify-content: center ; + } +} |