fix post titles not shrinking on mobile view, and clean up optimize-image partial

assets/sass/components/_content.scss

@@ -59,46 +59,6 @@ div#content {
       padding-left: 0.25em;
     }
   }
-
-  div.embed {
-    &.video {
-      video {
-        display: block;
-        margin: 1em auto;
-        max-width: 100%;
-        height: auto;
-      }
-    }
-
-    &.youtube {
-      position: relative;
-      padding-bottom: 56.25%;
-      margin: 1em auto;
-      height: 0;
-      overflow: hidden;
-
-      iframe.youtube-player {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: inline-block;
-        border: 0;
-      }
-    }
-
-    &.gh-buttons {
-      text-align: center;
-    }
-
-    &.codepen {
-      iframe {
-        width: 100%;
-        border: 0;
-      }
-    }
-  }
 }
 
 // Responsive

assets/sass/components/_embeds.scss

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+
+div.embed {
+  &.video {
+    video {
+      display: block;
+      margin: 1em auto;
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  &.youtube {
+    position: relative;
+    padding-bottom: 56.25%;
+    margin: 1em auto;
+    height: 0;
+    overflow: hidden;
+
+    iframe.youtube-player {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: inline-block;
+      border: 0;
+    }
+  }
+
+  &.gh-buttons {
+    text-align: center;
+
+    // GitHub's script replaces <a> with <span>, so cover both
+    > span,
+    > a {
+      margin: 0 0.5em;
+    }
+  }
+
+  &.codepen {
+    iframe {
+      width: 100%;
+      border: 0;
+    }
+  }
+}

assets/sass/components/_global.scss

@@ -73,6 +73,7 @@ a {
   }
 }
 
+b,
 strong {
   letter-spacing: 0.008em; // not sure why the discrepancy between weights
 }

assets/sass/main.scss

@@ -14,14 +14,15 @@ $max-width: unquote($max-width);
 @import "abstracts/functions";
 @import "abstracts/settings";
 @import "abstracts/themes";
+@import "abstracts/reset";
 
 // Global Styles
-@import "components/reset";
 @import "components/typography";
 @import "components/global";
 @import "components/header";
 @import "components/footer";
 @import "components/content";
+@import "components/embeds";
 
 // Pages
 @import "pages/home";

assets/sass/pages/_single.scss

@@ -44,8 +44,8 @@ div#layout--single {
   div#layout--single {
     padding: 0.8em 1.1em;
 
-    h1#title {
-      margin-top: 0.5em;
+    h1.title {
+      margin-top: 0.4em;
       font-size: 1.8em;
     }
   }