Convert rem's to em's in breakpoints to fix layout jerking issue in e.g. iPad and when resizing viewport.

static/css/hyde.css

 html {
   font-family: "PT Sans", Helvetica, Arial, sans-serif;
 }
-@media (min-width: 48rem) {
+@media (min-width: 48em) {
   html {
     font-size: 16px;
   }
 }
-@media (min-width: 58rem) {
+@media (min-width: 58em) {
   html {
     font-size: 20px;
   }
   color: rgba(255,255,255,.5);
   background-color: #202020;
 }
-@media (min-width: 48rem) {
+@media (min-width: 48em) {
   .sidebar {
     position: fixed;
     top: 0;
  * contents to the bottom of the sidebar in tablets and up.
  */
 
-@media (min-width: 48rem) {
+@media (min-width: 48em) {
   .sidebar-sticky {
     position: absolute;
     right:  1rem;
   padding-bottom: 4rem;
 }
 
-@media (min-width: 48rem) {
+@media (min-width: 48em) {
   .content {
     max-width: 38rem;
     margin-left: 20rem;
   }
 }
 
-@media (min-width: 64rem) {
+@media (min-width: 64em) {
   .content {
     margin-left: 22rem;
     margin-right: 4rem;
  * Flip the orientation of the page by placing the `.sidebar` on the right.
  */
 
-@media (min-width: 48rem) {
+@media (min-width: 48em) {
   .layout-reverse .sidebar {
     left: auto;
     right: 0;
   }
 }
 
-@media (min-width: 64rem) {
+@media (min-width: 64em) {
   .layout-reverse .content {
     margin-left: 4rem;
     margin-right: 22rem;

static/css/poole.css

   font-size: 16px;
   line-height: 1.5;
 }
-@media (min-width: 38rem) {
+@media (min-width: 38em) {
   html {
     font-size: 20px;
   }
 blockquote p:last-child {
   margin-bottom: 0;
 }
-@media (min-width: 30rem) {
+@media (min-width: 30em) {
   blockquote {
     padding-right: 5rem;
     padding-left: 1.25rem;
   background-color: #f5f5f5;
 }
 
-@media (min-width: 30rem) {
+@media (min-width: 30em) {
   .pagination {
     margin: 3rem 0;
   }