From 98dcc26a11dc665f7c6984914e23e5e3b45fd5f4 Mon Sep 17 00:00:00 2001
From: Lorin Werthen <werthenlorin@gmail.com>
Date: Sun, 23 Apr 2017 12:46:47 +0200
Subject: [PATCH] improve responsiveness

---
 .../assets/stylesheets/includes/blogpost.scss |  7 ------
 .../stylesheets/includes/eventpage.scss       | 20 +++++++++++-----
 .../assets/stylesheets/includes/general.scss  | 23 +++++++++++++++++++
 .../stylesheets/includes/variables.scss       |  2 +-
 layouts/blogpost.md                           |  2 +-
 layouts/eventpost.erb                         |  8 +++----
 6 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/content/assets/stylesheets/includes/blogpost.scss b/content/assets/stylesheets/includes/blogpost.scss
index 5573309..9910734 100644
--- a/content/assets/stylesheets/includes/blogpost.scss
+++ b/content/assets/stylesheets/includes/blogpost.scss
@@ -20,13 +20,6 @@
       }
     }
   }
-
-  .main-text {
-    // Larger text when on tablet
-    @include tablet {
-      font-size: $size-medium;
-    }
-  }
 }
 
 $sel: '';
diff --git a/content/assets/stylesheets/includes/eventpage.scss b/content/assets/stylesheets/includes/eventpage.scss
index e8657a4..f4e28b8 100644
--- a/content/assets/stylesheets/includes/eventpage.scss
+++ b/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;
+  }
+}
diff --git a/content/assets/stylesheets/includes/general.scss b/content/assets/stylesheets/includes/general.scss
index f42cb19..b9d58db 100644
--- a/content/assets/stylesheets/includes/general.scss
+++ b/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;
+    }
+  }
+}
diff --git a/content/assets/stylesheets/includes/variables.scss b/content/assets/stylesheets/includes/variables.scss
index feecdc3..b1ee5c0 100644
--- a/content/assets/stylesheets/includes/variables.scss
+++ b/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;
diff --git a/layouts/blogpost.md b/layouts/blogpost.md
index a289e3a..e78ebb9 100644
--- a/layouts/blogpost.md
+++ b/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>
diff --git a/layouts/eventpost.erb b/layouts/eventpost.erb
index 4204eb7..25e2b24 100644
--- a/layouts/eventpost.erb
+++ b/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>