Initial version of site almost ready.

css/style.scss

@@ -1,99 +1,213 @@
 @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";
 
 $base-font-size: 16px;
 $base-line-height: 24px;
+$break-point: 45em;
+$bg-color: #EEEEEE;
+$main-color: #2196F3;
+$acc-color: #C51162;
 
 @include establish-baseline;
 
-.container {
+@mixin flexed {
   @include display-flex;
-  @include flex-direction(column);  
   @include flex-wrap(nowrap);
-  @include justify-content(flex-start);
   @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.
+* {
+  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/2);
+  }
+
+  h2 {
+    @include adjust-font-size-to(2em, 1/2);
+  }
+
+  h3 {
+    @include adjust-font-size-to(1.5em, 1/2);
+  }
+
+  p {
+    @include adjust-font-size-to(1em);
+  }
+}
+
 .container > * {
-  width: 50%;
-  padding: rhythm(0.5);
+  width: $break-point;
   margin: rhythm(0.5);
-}
-
-.container h1 {
-  @include adjust-font-size-to(3em);
-}
-
-.container h2 {
-  @include adjust-font-size-to(2em);
-}
-
-.container p {
-  @include adjust-font-size-to(1em);
-}
-
-.header {
-  background: purple;
-  @include border-radius(5px, 5px);
-  // @include border-radius(10px 25px, 15px 30px);
-  // @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px);
-}
-
-.header h1 {
-  @include adjust-font-size-to(5em);
-}
-
-.topbox {
-  @include display-flex;
-  @include flex-direction(row);  
-  @include flex-wrap(nowrap);
-  @include justify-content(space-around);
-  @include align-items(stretch);
-  background: blue;
-
-  max-height: 30em;
-}
-
-.topbox > * {
   padding: rhythm(0.5);
-  margin: rhythm(0.5);
 }
 
 @media all and (max-width: 700px) {
+  .container > * {
+    width: 100%;
+  }
+}
+
+// Top banner.
+.header {
+  @include single-box-shadow(0, 10px, 5px, -10px);
+  background: $main-color;
+
+  h1 {
+    @include adjust-font-size-to(5em,1/2);
+    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);  
-    background: yellow;
+    @include flex-direction(column);
+    @include align-items(stretch);
   }
 
-  .topbox > * {
-    padding: rhythm(0.5);
-    margin: rhythm(0.5);
+  .bio-bar {
+    @include flex-direction(row);  
+    @include order(1);
   }
 }
 
 .picture {
-  @include flex(1 1 10em);
-  background: green;
-  @include order(2);
+  @include flex(1 1);
+  padding: rhythm(0.5);
 }
 
 .contact {
-  @include flex(1 1 10em);
-  background: red;
-  @include order(3);
+  @include flex(1 1);
+  padding: rhythm(0.5);
+
+  h3 {
+    color: $main-color;
+  }
 }
 
-@media all and (max-width: 700px) {
-  .picture {
-    @include order(3);
-  }
+// About cell ~ 2x sidebar in normal mode
+.about {
+  @include flex(2 1);
+}
 
-  .contact {
+@media all and (max-width: $break-point) {
+  .about {
     @include order(2);
   }
 }
 
-#card {
-  background: blue;
+// Two section headers, different bg colors.
+#mini-header {
+  background: $main-color;
+  color: white;
+  @include adjust-font-size-to(3em,1/2);
+  padding: rhythm(0.5);
+}
+
+#mini-header-alt {
+  background: $acc-color;
+  color: white;
+  @include adjust-font-size-to(3em,1/2);
+  padding: rhythm(0.5);
+}
+
+// Main unit for sections.
+#card {
+  padding: rhythm(0.5);
+  @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;
+  }
+}
+
+#bibcell {
+  vertical-align: top;
+  padding: rhythm(1/2);
+}
+
+// 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;
+  }
 }