improve responsiveness

content/assets/stylesheets/includes/blogpost.scss

@@ -20,13 +20,6 @@
       }
     }
   }
-
-  .main-text {
-    // Larger text when on tablet
-    @include tablet {
-      font-size: $size-medium;
-    }
-  }
 }
 
 $sel: '';

content/assets/stylesheets/includes/eventpage.scss

@@ -20,17 +20,17 @@
   }
 }
 
-.event-attributes {
-  font-size: 1.3em;
-}
-
 .event-social-icons {
   margin-left: 10px;
+  line-height: 0.60em;
+  font-size: 0.60em;
 
   .fa {
     margin-right: 5px;
-    font-size: 0.60em;
-    vertical-align: baseline;
+
+    @include tablet {
+      vertical-align: baseline;
+    }
   }
 }
 
@@ -47,3 +47,11 @@
   display: flex;
   align-items: center;
 }
+
+.event-title {
+  display: flex;
+
+  @include mobile {
+    flex-direction: column;
+  }
+}

content/assets/stylesheets/includes/general.scss

@@ -123,3 +123,26 @@ footer.footer {
 .heart {
   color: $red;
 }
+
+.is-medium-responsive {
+  // Larger text when on tablet
+  @include tablet {
+    font-size: $size-medium;
+  }
+}
+
+.title-responsive {
+  @include mobile {
+    font-size: $size-1 - 0.5rem;
+  }
+}
+
+@for $i from 1 through 6 {
+  .is-#{$i}-responsive {
+    font-size: nth($sizes, $i);
+
+    @include mobile {
+      font-size: nth($sizes, $i) * 0.75;
+    }
+  }
+}

content/assets/stylesheets/includes/variables.scss

@@ -31,4 +31,4 @@ $cammie-controls-color: rgba(0, 0, 0, 0.60);
 $event-padding: 10px;
 
 // Default font size
-$size-6: 15px;
+$size-normal: 15px;

layouts/blogpost.md

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

layouts/eventpost.erb

@@ -27,7 +27,7 @@
       <div class="columns">
         <div class="column has-vertical-center">
           <div class="header-text <%= item[:header_text_background] ? 'light-background' : '' %>">
-            <p class="title is-1">
+            <p class="title is-1-responsive event-title">
               <b>
                 <%= item[:title] %>
               </b>
@@ -42,10 +42,10 @@
                 </a>
               </span>
             </p>
-            <p class="subtitle is-3">
+            <p class="subtitle is-3-responsive">
               <%= item[:description] %>
             </p>
-            <ul class="fa-ul event-attributes">
+            <ul class="fa-ul is-4-responsive">
               <li><%= fa 'clock-o', li: true %><%= item[:time].strftime '%A %d %B %Y %H:%M' %></li>
               <li><%= fa 'map-marker', li: true %><%= item[:location] %></li>
             </ul>
@@ -65,7 +65,7 @@
 <section class="section">
   <div class="columns">
     <div class="column is-8 is-offset-2">
-      <div class="content has-text-justified is-medium">
+      <div class="content has-text-justified is-medium-responsive">
         <%= yield %>
       </div>
     </div>