Fix CSS to work on mobile screens.

css/style.scss

@@ -15,6 +15,8 @@ $acc-color: #C51162;
 
 @include establish-baseline;
 
+$text-pad: rhythm(0.5);
+
 @mixin flexed {
   @include display-flex;
   @include flex-wrap(nowrap);
@@ -61,8 +63,7 @@ body {
 
 .container > * {
   width: $break-point;
-  margin: rhythm(0.5);
-  padding: rhythm(0.5);
+  margin: $text-pad;
 }
 
 @media all and (max-width: 700px) {
@@ -120,12 +121,12 @@ body {
 
 .picture {
   @include flex(1 1);
-  padding: rhythm(0.5);
+  padding: $text-pad;
 }
 
 .contact {
   @include flex(1 1);
-  padding: rhythm(0.5);
+  padding: $text-pad;
 
   h3 {
     color: $main-color;
@@ -135,6 +136,7 @@ body {
 // About cell ~ 2x sidebar in normal mode
 .about {
   @include flex(2 1);
+  padding: $text-pad;
 }
 
 @media all and (max-width: $break-point) {
@@ -148,19 +150,19 @@ body {
   background: $main-color;
   color: white;
   @include adjust-font-size-to(3em,1/2);
-  padding: rhythm(0.5);
+  padding: $text-pad;
 }
 
 #mini-header-alt {
   background: $acc-color;
   color: white;
   @include adjust-font-size-to(3em,1/2);
-  padding: rhythm(0.5);
+  padding: $text-pad;
 }
 
 // Main unit for sections.
 #card {
-  padding: rhythm(0.5);
+  padding: $text-pad;
   @include single-box-shadow(0, 11px, 5px, -10px);
   background: white;
   h1 {
@@ -187,12 +189,16 @@ body {
   code {
     font-family: 'Inconsolata', monospace;
     font-weight: 500;
-  }
+  };
+}
+
+#drafts, #conference-publications {
+  padding: $text-pad;
 }
 
 #bibcell {
   vertical-align: top;
-  padding: rhythm(1/2);
+  padding: $text-pad;
 }
 
 // Latex parsed as {H} turns into spans, make these bold.