Team:Harvard BioDesign/assets/sass/main.scss
@import 'libs/vars'; @import 'libs/functions'; @import 'libs/mixins'; @charset "UTF-8"; @import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600'); @import url('font-awesome.min.css');
/* Helios by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
- /
@import "libs/skel";
@include skel-breakpoints(( wide: '(max-width: 1680px)', normal: '(max-width: 1280px)', narrow: '(max-width: 960px)', narrower: '(max-width: 840px)', mobile: '(max-width: 736px)' ));
@include skel-layout(( reset: 'full', boxModel: 'border', grid: ( gutters: (48px, 48px) ), conditionals: true, containers: 1400px, breakpoints: ( wide: ( containers: 1200px, ), normal: ( containers: 100%, grid: ( gutters: (36px, 36px) ), ), narrow: ( grid: ( gutters: (32px, 32px) ), ), narrower: ( containers: (100%, true), ), mobile: ( grid: ( gutters: (20px, 20px) ), ) ) ));
/* Basic */
body { background: #f0f4f4; color: #5b5b5b; font-size: 15pt; line-height: 1.85em; font-family: 'Source Sans Pro', sans-serif; font-weight: 300;
&.is-loading { *, *:after, *:before { @include vendor('transition', 'none !important'); @include vendor('animation', 'none !important'); } } }
input, textarea, select { font-size: 15pt; line-height: 1.85em; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; color: #483949; line-height: 1.25em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; border-bottom-color: transparent; }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 600; }
h2 { font-size: 2.85em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1em; margin: 0 0 0.25em 0; }
strong, b { font-weight: 400; color: #483949; }
em, i { font-style: italic; }
a { color: inherit; border-bottom: solid 1px rgba(128, 128, 128, 0.15); text-decoration: none; @include vendor('transition', ('background-color 0.35s ease-in-out', 'color 0.35s ease-in-out', 'border-bottom-color 0.35s ease-in-out'));
&:hover { color: #ef8376; border-bottom-color: transparent; } }
sub { position: relative; top: 0.5em; font-size: 0.8em; }
sup { position: relative; top: -0.5em; font-size: 0.8em; }
blockquote { border-left: solid 0.5em #ddd; padding: 1em 0 1em 2em; font-style: italic; }
p, ul, ol, dl, table { margin-bottom: 1em; }
p { text-align: justify; }
br.clear { clear: both; }
hr { position: relative; display: block; border: 0; top: 4.5em; margin-bottom: 9em; height: 6px; border-top: solid 1px rgba(128, 128, 128, 0.2); border-bottom: solid 1px rgba(128, 128, 128, 0.2);
&:before, &:after { content: ; position: absolute; top: -8px; display: block; width: 1px; height: 21px; background: rgba(128, 128, 128, 0.2); }
&:before { left: -1px; }
&:after { right: -1px; } }
.timestamp { color: rgba(128, 128, 128, 0.75); font-size: 0.8em; }
/* Sections/Article */
section, article { margin-bottom: 3em;
> :last-child, &:last-child { margin-bottom: 0; }
&.special > { header, footer { text-align: center; } } }
.row > { section, article { margin-bottom: 0; } }
header { margin: 0 0 1em 0;
> p { display: block; font-size: 1.5em; margin: 1em 0 2em 0; line-height: 1.5em; text-align: inherit; } }
footer { margin: 2.5em 0 0 0; }
/* Image */
.image { position: relative; display: inline-block; border: 0; outline: 0;
img { display: block; width: 100%; }
&.fit { display: block; width: 100%; }
&.featured { display: block; width: 100%; margin: 0 0 4em 0; }
&.left { float: left; margin: 0 2em 2em 0; }
&.centered { display: block; margin: 0 0 2em 0;
img { margin: 0 auto; width: auto; } } }
/* List */
ul { &.default { list-style: disc; padding-left: 1em; li { padding-left: 0.5em; } }
&.actions { margin: 3em 0 0 0;
form & { margin-top: 0; }
li { display: inline-block; margin: 0 0.75em 0 0.75em;
&:first-child { margin-left: 0; }
&:last-child { margin-right: 0; } } }
&.divided { li { border-top: solid 1px rgba(128, 128, 128, 0.2); padding-top: 1.5em; margin-top: 1.5em;
&:first-child { border-top: 0; padding-top: 0; margin-top: 0; } } }
&.menu { height: 1em; line-height: 1em;
li { display: inline-block; border-left: solid 1px rgba(128, 128, 128, 0.2); padding-left: 1.25em; margin-left: 1.25em;
&:first-child { border-left: 0; padding-left: 0; margin-left: 0; } } }
&.icons { position: relative; background: rgba(128, 128, 128, 0.05); border-radius: 4em; display: inline-block; padding: 0.35em 0.75em 0.35em 0.75em; font-size: 1.25em; cursor: default;
li { display: inline-block;
a { display: inline-block; background: none; width: 2.5em; height: 2.5em; line-height: 2.5em; text-align: center; border-radius: 100%; border: 0; color: inherit;
&:hover { color: #ef8376; } } } } }
ol { &.default { list-style: decimal; padding-left: 1.25em;
li { padding-left: 0.25em; } } }
/* Form */
form { label { display: block; font-weight: 400; color: #483949; margin: 0 0 1em 0; }
input[type="text"], input[type="email"], input[type="password"], select, textarea { -webkit-appearance: none; display: block; border: 0; background: #fafafa; width: 100%; border-radius: 0.5em; border: solid 1px #E5E5E5; padding: 1em; @include vendor('transition', ('background-color 0.35s ease-in-out', 'border-color 0.35s ease-in-out'));
&:focus { background: #fff; border-color: #df7366; } }
input[type="text"], input[type="email"], input[type="password"], select { line-height: 1em; }
textarea { min-height: 9em; }
.formerize-placeholder { color: #555 !important; }
::-webkit-input-placeholder { color: #555 !important; }
:-moz-placeholder { color: #555 !important; }
::-moz-placeholder { color: #555 !important; }
:-ms-input-placeholder { color: #555 !important; }
::-moz-focus-inner { border: 0; } }
/* Table */
table { width: 100%;
&.default { width: 100%;
tbody { tr { border-top: solid 1px #e5e5e5;
&:first-child { border-top: 0; }
&:nth-child(2n+1) { background: #fafafa; } } }
td { padding: 0.5em 1em 0.5em 1em; }
th { text-align: left; font-weight: 400; padding: 0.5em 1em 0.5em 1em; }
thead { border-bottom: solid 2px #e5e5e5; }
tfoot { border-top: solid 2px #e5e5e5; } } }
/* Button */
input[type="button"], input[type="submit"], input[type="reset"], button, .button { position: relative; display: inline-block; background: #df7366; color: #fff; text-align: center; border-radius: 0.5em; text-decoration: none; padding: 0.65em 3em 0.65em 3em; border: 0; cursor: pointer; outline: 0; font-weight: 300; @include vendor('transition', ('background-color 0.35s ease-in-out', 'color 0.35s ease-in-out', 'border-bottom-color 0.35s ease-in-out'));
&:hover { color: #fff; background: #ef8376; }
&.alt { background: #2B252C;
&:hover { background: #3B353C; } } }
/* Post */
.post { &.stub { text-align: center;
header { margin: 0; } } }
/* Icons */
.icon { text-decoration: none;
&:before { display: inline-block; font-family: FontAwesome; font-size: 1.25em; text-decoration: none; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
> .label { display: none; }
&.circled { position: relative; display: inline-block; background: #2b252c; color: #fff; border-radius: 100%; width: 3em; height: 3em; line-height: 3.25em; text-align: center; font-size: 1.25em;
header & { margin: 0 0 2em 0; } } }
/* Wrapper */
.wrapper { background: #fff; margin: 0 0 2em 0; padding: 6em 0 6em 0;
&.style1 { }
&.style2 { padding-top: 0; } }
/* Header */
#header { position: relative; background-image: url('../../images/header.jpg'); background-size: cover; background-position: center center; background-attachment: fixed; color: #fff; text-align: center; padding: 7.5em 0 2em 0; cursor: default;
&:before { content: ; display: inline-block; vertical-align: middle; height: 100%; }
.inner { position: relative; z-index: 1; margin: 0; display: inline-block; vertical-align: middle; }
header { display: inline-block;
> p { font-size: 1.25em; margin: 0; } }
h1 { color: #fff; font-size: 3em; line-height: 1em;
a { color: inherit; } }
.button { display: inline-block; border-radius: 100%; width: 4.5em; height: 4.5em; line-height: 4.5em; text-align: center; font-size: 1.25em; padding: 0; }
hr { top: 1.5em; margin-bottom: 3em; border-bottom-color: rgba(192, 192, 192, 0.35); box-shadow: inset 0 1px 0 0 rgba(192, 192, 192, 0.35);
&:before, &:after { background: rgba(192, 192, 192, 0.35); } }
footer { margin: 1em 0 0 0; } }
body.homepage { #header { height: 100vh; min-height: 40em;
h1 { font-size: 4em; }
&:after { content: ; background: #1C0920; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; @include vendor('transition', 'opacity 2.5s ease-in-out'); @include vendor('transition-delay', '0.5s'); } }
&.is-loading { #header { &:after { opacity: 1; } } } }
/* Nav */
#nav { position: absolute; top: 0; left: 0; width: 100%; text-align: center; padding: 1.5em 0 1.5em 0; z-index: 1; overflow: hidden;
> ul { line-height: 0px; position: relative; display: inline-block; margin: 0; height: 21px; border-left: solid 1px rgba(192, 192, 192, 0.35); border-right: solid 1px rgba(192, 192, 192, 0.35);
&:before, &:after { content: ; display: block; width: 300%; position: absolute; top: 50%; margin-top: -2px; height: 5px; border-top: solid 1px rgba(192, 192, 192, 0.35); border-bottom: solid 1px rgba(192, 192, 192, 0.35); }
&:before { left: 100%; margin-left: 1px; }
&:after { right: 100%; margin-right: 1px; }
> li { display: inline-block; margin: -9px 0.5em 0 0.5em; border-radius: 0.5em; padding: 0.85em; border: solid 1px transparent; @include vendor('transition', ('color 0.35s ease-in-out', 'border-color 0.35s ease-in-out'));
&.active { border-color: rgba(192, 192, 192, 0.35); }
> a, > span { display: block; color: inherit; text-decoration: none; border: 0; outline: 0; }
> ul { display: none; } } } }
.dropotron { background: rgba(255, 255, 255, 0.975); padding: 1em 1.25em 1em 1.25em; line-height: 1em; height: auto; text-align: left; border-radius: 0.5em; box-shadow: 0 0.15em 0.25em 0 rgba(0, 0, 0, 0.25); min-width: 12em; margin-top: -1em;
li { border-top: solid 1px rgba(128, 128, 128, 0.2); color: #5b5b5b;
&:first-child { border-top: 0; }
&:hover { color: #ef8376; }
a, span { display: block; border: 0; padding: 0.5em 0 0.5em 0; @include vendor('transition', 'color 0.35s ease-in-out'); } }
&.level-0 { margin-top: 2em; font-size: 0.9em;
&:before { content: ; position: absolute; left: 50%; top: -0.7em; margin-left: -0.75em; border-bottom: solid 0.75em rgba(255, 255, 255, 0.975); border-left: solid 0.75em rgba(64, 64, 64, 0); border-right: solid 0.75em rgba(64, 64, 64, 0); } } }
/* Banner */
#banner { background: #fff; text-align: center; padding: 4.5em 0 4.5em 0; margin-bottom: 0;
header { > p { margin-bottom: 0; } } }
/* Content */
#content { > hr { top: 3em; margin-bottom: 6em; }
> section { margin-bottom: 0; } }
/* Sidebar */
#sidebar > { hr { top: 3em; margin-bottom: 6em;
&.first { display: none; } }
section { margin-bottom: 0; } }
/* Main */
#main { margin-bottom: 0;
section:first-of-type { padding-top: 2em; } }
/* Footer */
#footer { position: relative; overflow: hidden; padding: 6em 0 6em 0; background: #2b252c; color: #fff;
.icon.circled { background: #fff; color: #2b252c; }
header { text-align: center; cursor: default; }
h2, h3, h4, h5, h6 { color: #fff; }
.contact { text-align: center;
p { text-align: center; margin: 0 0 3em 0; } }
.copyright { text-align: center; color: rgba(128, 128, 128, 0.75); font-size: 0.8em; cursor: default;
a { color: rgba(128, 128, 128, 0.75);
&:hover { color: rgba(212, 212, 212, 0.85); } } } }
/* Carousel */
.carousel { position: relative; overflow: hidden; padding: 2em 0 2em 0; margin-bottom: 0;
.forward, .backward { position: absolute; top: 50%; width: 6em; height: 12em; margin-top: -6em; cursor: pointer;
&:before { content: ; display: block; width: 6em; height: 6em; border-radius: 100%; background-color: rgba(72, 57, 73, 0.5); position: absolute; top: 50%; margin-top: -3em; -moz-transition: background-color 0.35s ease-in-out; -webkit-transition: background-color 0.35s ease-in-out; -o-transition: background-color 0.35s ease-in-out; -ms-transition: background-color 0.35s ease-in-out; transition: background-color 0.35s ease-in-out; -webkit-backface-visibility: hidden; }
&:after { content: ; width: 3em; height: 3em; position: absolute; top: 50%; margin: -1.5em 0 0 0; background: url('images/arrow.svg') no-repeat center center; }
&:hover { &:before { background-color: rgba(239, 131, 118, 0.75); } } }
.forward { right: 0;
&:before { right: -3em; }
&:after { right: -0.25em; } }
.backward { left: 0;
&:before { left: -3em; }
&:after { left: -0.25em; @include vendor('transform', 'scaleX(-1)'); } }
.reel { white-space: nowrap; position: relative; -webkit-overflow-scrolling: touch; padding: 0 2em 0 2em; }
article { display: inline-block; width: 18em; background: #fff; text-align: center; padding: 0 1em 3em 1em; margin: 0 2em 0 0; white-space: normal; opacity: 1.0; @include vendor('transition', 'opacity 0.75s ease-in-out');
&.loading { opacity: 0; }
.image { position: relative; left: -1em; top: 0; width: auto; margin-right: -2em; margin-bottom: 3em; }
p { text-align: center; } } }
/* Wide */
@include breakpoint(wide) {
/* Basic */
body, input, textarea, select { font-size: 14pt; line-height: 1.75em; }
/* Carousel */
.carousel { padding: 1.5em 0 1.5em 0;
.reel { padding: 0 1.5em 0 1.5em; }
article { width: 18em; margin: 0 1.25em 0 0; } }
}
/* Normal */
@include breakpoint(normal) {
/* Basic */
body, input, textarea, select { font-size: 12pt; line-height: 1.5em; }
/* Wrapper */
.wrapper { padding-left: 2em; padding-right: 2em; }
/* Header */
#header { background-attachment: scroll;
.inner { padding-left: 2em; padding-right: 2em; } }
/* Banner */
#banner { padding-left: 2em; padding-right: 2em; }
/* Footer */
#footer { padding-left: 2em; padding-right: 2em; }
}
/* Narrow */
@include breakpoint(narrow) { }
/* Narrower */
@include breakpoint(narrower) {
/* Basic */
body, input, textarea, select { font-size: 13pt; line-height: 1.65em; }
.tweet { text-align: center; }
.timestamp { display: block; text-align: center; }
/* Footer */
#footer { padding: 4em 2em 4em 2em; }
/* Carousel */
.carousel { padding: 1.25em 0 1.25em 0;
article { width: 18em; margin: 0 1em 0 0; } }
}
/* Mobile */
#navPanel, #titleBar { display: none; }
@include breakpoint(mobile) {
/* Basic */
html, body { overflow-x: hidden; }
body, input, textarea, select { font-size: 12.5pt; line-height: 1.5em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.25em; }
hr { top: 3em; margin-bottom: 6em; }
/* Section/Article */
section, article { margin-bottom: 2em;
&:last-child { margin-bottom: 0; } }
.row > { section, article { margin-bottom: 2em; } }
header { > p { font-size: 1.25em; } }
/* Image */
.image { &.featured { margin: 0 0 2em 0; }
&.left { margin: 0 1em 1em 0; }
&.centered { margin: 0 0 1em 0; } }
/* List */
ul { &.actions { form & { margin-top: 0; }
li { display: block; margin: 0.75em 0 0 0;
&:first-child { margin-top: 0; } } }
&.menu { height: auto; text-align: center;
li { display: block; border: 0; padding: 0.75em 0 0 0; margin: 0;
&:first-child { padding-top: 0; } } }
&.icons { font-size: 1em; padding: 0.35em 0.5em 0.35em 0.5em;
li { a { width: 2.25em; } } } }
/* Button */
input[type="button"], input[type="submit"], input[type="reset"], button, .button { display: block; padding: 0; line-height: 3em; width: 100%; }
/* Off-Canvas Navigation */
#page-wrapper { @include vendor('backface-visibility', 'hidden'); @include vendor('transition', 'transform #{_duration(navPanel)} ease'); padding-bottom: 1px; }
#navButton { @include vendor('backface-visibility', 'hidden'); @include vendor('transition', 'transform #{_duration(navPanel)} ease'); display: block; height: 44px; left: 0; position: fixed; top: 0; width: 100%; z-index: _misc(z-index-base) + 1;
.toggle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; outline: 0;
&:before { font-family: FontAwesome; text-decoration: none; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\f0c9'; color: #fff; color: rgba(255, 255, 255, 0.75); text-align: center; display: block; font-size: 14px; width: 80px; height: 30px; line-height: 30px; position: absolute; left: 50%; margin-left: -40px; background: rgba(132, 128, 136, 0.75); border-top: 0; border-radius: 0 0 0.35em 0.35em; } } }
#navPanel { @include vendor('backface-visibility', 'hidden'); @include vendor('transform', 'translateY(#{_size(navPanel) * -1})'); @include vendor('transition', ('transform #{_duration(navPanel)} ease')); display: block; height: _size(navPanel); left: 0; overflow-y: auto; position: fixed; top: 0; width: 100%; z-index: _misc(z-index-base) + 2; background: #1f1920; box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.25); font-size: 1em;
&:before { content: ; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('images/overlay.png'); background-size: 128px 128px; }
.link { position: relative; z-index: 1; display: block; text-decoration: none; padding: 0.5em; color: #ddd; border: 0; border-top: dotted 1px rgba(255, 255, 255, 0.05);
&:first-child { border-top: 0; }
&.depth-0 { color: #fff; font-weight: 600; } }
.indent-1 { display: inline-block; width: 1em; }
.indent-2 { display: inline-block; width: 2em; }
.indent-3 { display: inline-block; width: 3em; }
.indent-4 { display: inline-block; width: 4em; }
.indent-5 { display: inline-block; width: 5em; }
.depth-0 { color: #fff; } }
body { &.navPanel-visible { #page-wrapper { @include vendor('transform', 'translateY(#{_size(navPanel)})'); }
#navButton { @include vendor('transform', 'translateY(#{_size(navPanel)})'); }
#navPanel { @include vendor('transform', 'translateY(0)'); } } }
/* Wrapper */
.wrapper { padding: 3em 1em 3em 1em; }
/* Header */
#header { background-attachment: scroll; padding: 2.5em 0 0 0;
.inner { padding-top: 1.5em; padding-left: 1em; padding-right: 1em; }
header { > p { font-size: 1em; } }
h1 { font-size: 1.75em; }
hr { top: 1em; margin-bottom: 2.5em; } }
body.homepage { #header { min-height: 0; padding: 5.5em 0 5em 0; height: auto;
&:before { display: none; }
h1 { font-size: 2.5em; } } }
/* Nav */
#nav { display: none; }
/* Banner */
#banner { padding: 3em 2em 3em 2em; }
/* Sidebar */
#sidebar { > hr:first-of-type { display: block; } }
/* Main */
#main { > header { text-align: center; } }
/* Footer */
#footer { padding-left: 1em; padding-right: 1em; }
/* Carousel */
.carousel { padding: 0.5em 0 0.5em 0;
.reel { padding: 0 0.5em 0 0.5em; }
article { width: 14em; padding-bottom: 2em; margin: 0 0.5em 0 0;
.image { margin-bottom: 2em; } } }
}
