justin-site/css/style.scss

@import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/typography/links/link-colors";
@import "compass/typography/links/unstyled-link";
@import "compass/typography/links/hover-link";
@import "compass/typography/vertical_rhythm";

$break-point: 45em;
$bg-color: #EEEEEE;
$main-color: #2196F3;
$acc-color: #C51162;

$base-font-size: 16px;
$base-line-height: 24px;
$rhythm-unit: "em";
$min-line-padding: 1px;
@include establish-baseline;

$text-pad: rhythm(0.5);

@mixin flexed {
  @include display-flex;
  @include flex-wrap(nowrap);
  @include align-items(center);
}

body {
  margin: 0;
  background: $bg-color;
  a {
    @include hover-link;
    @include link-colors($acc-color);
  }
}

// Default table style sets the wrong font weight
// if we set this in body.
* {
  @include adjust-font-size-to(1em);
  font-family: 'roboto', sans-serif;
  font-weight: 300;
}

.container {
  @include flexed;
  @include flex-direction(column);  
  @include justify-content(flex-start);

  h1 {
    @include adjust-font-size-to(3em, 1);
  }

  h2 {
    @include adjust-font-size-to(2em, 1);
  }

  h3 {
    @include adjust-font-size-to(1.5em, 1);
  }

  p {
    @include adjust-font-size-to(1em);
  }
}

.container > * {
  width: $break-point;
  margin: $text-pad;
}

@media all and (max-width: $break-point) {
  .container > * {
    width: 100%;
  }
}

// Top banner.
.header {
  @include single-box-shadow(0, 10px, 5px, -10px);
  background: $main-color;
  padding: $text-pad;

  h1 {
    @include adjust-font-size-to(5em,1);
    color: white;
  }
}

// The top box. About, picture, and contact.
.topbox {
  @include flexed;
  @include flex-direction(row);
  @include justify-content(space-around);
  background: white;
}

.topbar > * {
  max-width: 100%;
  h1 h2 {
    color: $main-color;
  }
}

// Bar containing picture and contact info.
.bio-bar {
  @include flexed;
  @include flex-direction(column);
  @include justify-content(space-around);
  // @include flex(1 1);
  @include order(2);
}

@media all and (max-width: $break-point) {
  .topbox {
    @include flex-direction(column);
    @include align-items(stretch);
  }

  .bio-bar {
    @include flex-direction(row);  
    @include order(1);
  }
}

.picture {
  // @include flex(1 1);
  padding: $text-pad;
}

.contact {
  // @include flex(1 1);
  padding: $text-pad;

  h3 {
    color: $main-color;
  }
}

// About cell ~ 2x sidebar in normal mode
.about {
  // @include flex(2 1);
  padding: $text-pad;
}

@media all and (max-width: $break-point) {
  .about {
    @include order(2);
  }
}

// Two section headers, different bg colors.
#mini-header {
  background: $main-color;
  color: white;
  @include adjust-font-size-to(3em,1);
  padding: $text-pad;
}

#mini-header-alt {
  background: $acc-color;
  color: white;
  @include adjust-font-size-to(3em,1);
  padding: $text-pad;
}

// Main unit for sections.
#card {
  padding: $text-pad;
  @include single-box-shadow(0, 11px, 5px, -10px);
  background: white;
  h1 {
    background: $main-color;
    color: white;
  };

  h2 {
    background: white;
    color: $main-color;
  };

  b, strong {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
  };

  em {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-style: italic;
  };

  code {
    font-family: 'Inconsolata', monospace;
    font-weight: 500;
  };
}

#drafts, #conference-publications {
  padding: $text-pad;
}

#bibcell {
  vertical-align: top;
  padding: $text-pad;
}

// Latex parsed as {H} turns into spans, make these bold.
#titlecell span {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

footer * {
  text-align: center;
  background: $main-color;
  margin: 0;
  a {
    // Turn off colors. Using both colors together looks bad.
    @include unstyled-link;
    @include hover-link;
  }
}