more content fixes

content/posts/2012-08-07-projectpurple.md

@@ -27,7 +27,7 @@ It [has been revealed](http://www.theverge.com/2012/8/3/3218846/schiller-forstal
 
 The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple uses 3200px as width for the default wallpapers in Mountain Lion but it seems a good width for now. And a height of 2048px makes this big size perfectly usable for the iPad 3 too.
 
-![](../media/Project-Purple-Dribbble.png)
+![Project-Purple-Dribbble](../media/Project-Purple-Dribbble.png)
 
 ## Download
 

src/components/Layout.module.scss

@@ -40,7 +40,7 @@
 
     @media (min-width: $screen-sm) and (min-height: 500px) {
         margin-top: $spacer * 2.65;
-        margin-bottom: $spacer * 20; // height of footer
+        margin-bottom: $spacer * 19; // height of footer
         position: relative;
         z-index: 2;
         min-height: 500px;

src/components/atoms/Hamburger.module.scss

@@ -55,6 +55,7 @@
     vertical-align: middle;
     display: inline-block;
     margin: 0;
+    margin-right: -($spacer / 2);
 
     &:hover,
     &:focus {

src/components/atoms/PostImage.module.scss

@@ -7,6 +7,8 @@
     font-family: $font-family-headings;
     line-height: $line-height-headings;
     font-weight: $font-weight-headings;
+    font-style: normal;
+    text-align: left;
     letter-spacing: -.02em;
     margin: 0;
     position: absolute;

src/components/molecules/Featured.jsx

@@ -16,7 +16,7 @@ const query = graphql`
             title
             image {
               childImageSharp {
-                fluid(maxWidth: 260, maxHeight: 100, cropFocus: CENTER) {
+                fluid(maxWidth: 300, maxHeight: 130, cropFocus: CENTER) {
                   ...GatsbyImageSharpFluid_withWebp_noBase64
                 }
               }

src/components/molecules/Featured.module.scss

@@ -6,21 +6,28 @@
     @include divider;
 
     display: flex;
-    margin-top: $spacer * $line-height;
+    justify-content: space-between;
-    padding-left: $spacer / 2;
+    flex-wrap: wrap;
-    padding-right: $spacer / 2;
+    padding-left: $spacer;
+    padding-right: $spacer;
     margin-bottom: -($spacer);
+    padding-bottom: $spacer * $line-height;
+
+    @media (min-width: $screen-xs) {
         padding-bottom: $spacer * 3;
+        margin-top: $spacer * $line-height;
+    }
 
     @media (min-width: $screen-md) {
         padding-left: 0;
         padding-right: 0;
+        justify-content: initial;
     }
 }
 
 .featuredTitle {
     transition: .1s ease-out;
-    font-size: $font-size-mini;
+    font-size: $font-size-base;
     margin: 0;
     position: absolute;
     top: 25%;
@@ -33,20 +40,32 @@
     left: 0;
     opacity: 0;
     transform: translate3d(0, -20px, 0);
-
-    @media (min-width: $screen-sm) {
-        font-size: $font-size-base;
-    }
 }
 
 .featuredItem {
-    flex: 1;
     position: relative;
+    max-width: 12rem;
+    flex: 0 0 48%;
+    margin-bottom: $spacer / 2;
+
+    &:last-child {
+        margin-bottom: 0;
+        display: none;
+    }
+
+    @media (min-width: $screen-xs) {
+        flex: 1;
+        max-width: none;
         margin-left: $spacer / 2;
 
+        &:last-child {
+            display: block;
+        }
+
         &:first-child {
             margin-left: 0;
         }
+    }
 
     a {
         > div {

src/styles/_buttons.scss

@@ -4,7 +4,7 @@
 .btn,
 a.btn {
     text-align: center;
-    display: inline-block;
+    display: block;
     margin-bottom: 0;
     vertical-align: middle;
     touch-action: manipulation;
@@ -162,8 +162,13 @@ a.btn-primary {
     a {
         @extend .btn;
 
+        margin-bottom: $spacer / 2;
+
+        @media (min-width: $screen-xs) {
             flex: 1;
             margin-left: $spacer / 2;
+            margin-bottom: 0;
+        }
 
         &:first-child {
             margin-left: 0;

src/styles/_variables.scss

@@ -79,8 +79,8 @@ $color-headings--dark: $brand-main-light;
 /////////////////////////////////////
 
 $spacer: ($font-size-base * $line-height);
-$padding-base-vertical: 8px;
+$padding-base-vertical: .75rem;
-$padding-base-horizontal: 12px;
+$padding-base-horizontal: 1.25rem;
 
 $border-radius: 3px;
 

src/templates/Post.module.scss

@@ -5,4 +5,8 @@
     width: 100%;
     padding-top: $spacer;
     padding-bottom: $spacer * 3;
+
+    &:only-child {
+        padding-bottom: $spacer;
+    }
 }