more mobile friendly blogposts

content/assets/stylesheets/includes/blogpost.scss

@@ -2,24 +2,31 @@
   position: relative;
 
   #table-of-contents {
-    @include from($tablet) {
+    @include tablet {
       position: absolute;
       left: 100%;
     }
 
-    @include until($tablet) {
+    @include mobile {
       text-align: center;
     }
-  }
-}
 
-#markdown-toc {
+    #markdown-toc {
       @extend .menu-list;
 
       &, ul {
         margin: 0;
         list-style: none;
       }
+    }
+  }
+
+  .main-text {
+    // Larger text when on tablet
+    @include tablet {
+      font-size: $size-medium;
+    }
+  }
 }
 
 $sel: '';
@@ -57,7 +64,7 @@ dl {
     margin: auto;
 
     .title {
-      @include from($tablet) {
+      @include tablet {
         font-size: 4rem;
       }
       font-weight: bolder;

layouts/blogpost.md

@@ -15,7 +15,7 @@
 </div>
 <% end %>
 
-<div class="content is-medium" markdown="1">
+<div class="main-text content" markdown="1">
 <%= yield %>
 </div>
 </article>