Tons of mobile style tweaks

Author: joshmfrankel

_sass/_base.scss

@@ -89,14 +89,16 @@ blockquote {
     word-break: break-all;
   }
 
-  &::before {
-    content: "“";
-    display: block;
-    font-size: 90px;
-    font-family: cursive;
-    position: absolute;
-    top: 56px;
-    margin-left: -56px;
+  @media screen and (min-width: 600px) {
+    &::before {
+      content: "“";
+      display: block;
+      font-size: 90px;
+      font-family: cursive;
+      position: absolute;
+      top: 56px;
+      margin-left: -56px;
+    }
   }
 }
 ul {

_sass/components/_footer.scss

@@ -12,16 +12,29 @@ $smallWidth: 790px;
   &-links {
     display: flex;
     flex: 1;
-    font: 300 2.1rem/30px $railway, sans-serif;
+    font: 300 1.7rem/30px $railway, sans-serif;
+    flex-direction: column;
 
     a {
       @extend .expand-hover-border-from-center;
 
-      padding: 7px 10px;
+      padding: 7px 0;
+
+      &:first-of-type {
+        padding-left: 0;
+      }
+      &:last-of-type {
+        padding-right: 0;
+      }
     }
 
-    @media screen and (max-width: 600px) {
-      font-size: 1.7rem;
+    @media screen and (min-width: 600px) {
+      font-size: 2.1rem;
+      flex-direction: row;
+
+      a {
+        padding: 7px 10px;
+      }
     }
   }
   &-social {
@@ -115,7 +128,10 @@ $smallWidth: 790px;
   }
   &-posts {
     flex: 1;
-    padding-right: 100px;
+
+    @media screen and (min-width: 600px) {
+      padding-right: 100px;
+    }
   }
   &-contact {
     nav {

_sass/components/_info.scss

@@ -17,13 +17,19 @@ $margin-spacing: 20px;
   }
 
   &--full {
-    margin-left: -33.33%;
-    margin-right: -33.33%;
-    padding: 40px 33.33%;
+    margin-left: -10vw;
+    margin-right: -10vw;
+    padding: 40px 10vw;
     font-style: italic;
     font-family: "Lato";
     font-size: 24px;
 
+    @media screen and (min-width: 1125px) {
+      margin-left: -33.33%;
+      margin-right: -33.33%;
+      padding: 40px 33.33%;
+    }
+
     a {
       font-size: 20px;
       margin-top: 15px;

_sass/components/_logo.scss

@@ -57,7 +57,7 @@
   }
 
   &-logo {
-    margin: 0 15px;
+    margin: 0 0 0 15px;
     border: none;
   }
   &-first-name {

_sass/components/_post.scss

@@ -43,10 +43,16 @@
   }
 
   &-actions {
+    display: flex;
+    flex-direction: column;
     border-top: 1px solid $lightest-gray-border;
     margin-top: 30px;
     padding-top: 30px;
 
+    @media screen and (min-width: 600px) {
+      flex-direction: row;
+    }
+
     a {
       font-size: 2rem;
     }