justin-site/css/style.scss

$break-point: 600px;
$bg-color: #EEEEEE;
$main-color: #2196F3;
$acc-color: #C51162;

$base-font-size: 16px;

$main-pad: 1.0em;
$mini-pad: 0.5em;

@mixin flexed {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

@mixin hover-link {
  text-decoration: none;
  &:hover, &:focus {
    text-decoration: underline;
  }
}

body {
  margin: 0;
  background: $bg-color;

  a {
    color: $acc-color;
    @include hover-link;
  }
}

// Default table style sets the wrong font weight
// if we set this in body.
* {
  font-size: $base-font-size;
  line-height: 1.5em;
  font-family: 'roboto', sans-serif;
  font-weight: 300;
}

#container {
  @include flexed;
  flex-direction: column;
  justify-content: flex-start;

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }

  p {
    font-size: 1em;
  }
}

#container > * {
  width: $break-point;
  margin: $main-pad;
}

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

// Top banner.
#header {
  box-shadow: 0 10px 5px -10px;
  background: $main-color;
  padding: $main-pad;

  h1 {
    font-size: 4em;
    color: white;
  }
}

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

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

// Bar containing picture and contact info.
#bio-bar {
  @include flexed;
  flex-direction: column;
  justify-content: flex-start;
  order: 2;
}

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

  #bio-bar {
    flex-direction: row;
    order: 1;
  }
}

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

#contact {
  // @include flex(1 1);
  padding: $main-pad;

  h2 {
    color: $main-color;
  }
}

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

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

// Two section headers, different bg colors.
.mini-header {
  background: $main-color;
  color: white;
  font-size: 3em;
  padding: $mini-pad;
}

.mini-header-alt {
  background: $acc-color;
  color: white;
  font-size: 3em;
  padding: $mini-pad;
}

// Main unit for sections.
.card {
  padding: $main-pad;
  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, #thesis, #pubs, #invite {
  padding: $mini-pad;
}

.bibtable {
  width: 100%;
  border-collapse:separate;
  border-spacing:0 $mini-pad;
}

.bibcell {
  vertical-align: top;
  padding: $mini-pad;
}

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

.linkscell { 
  float: right;
}

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