Updated preview pictures to be positioned and sized better

Author: dphuang2

_scss/_components.scss

@@ -89,18 +89,26 @@
   &__link {
     display: block;
     //padding: 2em 1em;
-    padding: 2em calc(2em + 3.5em) 2em 1em;
+    padding: 2em calc(2em + 6.5em) 2em 1em;
     position: relative;
 
     @media (min-width: $mq-md) {
       //padding: 3em 8em;
-      padding: 3em calc(3em + 3.5em) 3em 8em;
+      padding: 3em calc(3em + 5em) 3em 2em;
+    }
+
+    @media (min-width: $mq-lg) {
+      padding: 3em calc(3em + 8em) 3em 3em;
+    }
+
+    @media (min-width: $mq-xl) {
+      padding: 3em calc(3em + 8em) 3em 5em;
     }
 
     @media (min-width: $mq-xxl) {
       padding-left: 10em;
       //padding-right: 10em;
-      padding-right: 13.5em;
+      padding-right: 14em;
     }
   }
 

_scss/main.scss

@@ -27,12 +27,34 @@
     font-size: 0.7em;
 }
 
-.post-image{
-    height: 5em;
-    width: 5em;
+.post-image-wrapper{
+    height: 7em;
+    width: 7em;
     border-radius: 50%;
     position: absolute;
     right: 1em;
     top: 50%;
     transform: translateY(-50%);
+    overflow: hidden;
+
+    @media(min-width: $mq-md){
+        right: 2em;
+    }
+    @media(min-width: $mq-lg){
+        right: 3em;
+    }
+    @media(min-width: $mq-xl){
+        right: 5em;
+    }
+}
+
+.post-image{
+    width: initial;
+    max-width: initial;
+
+    height: inherit;
+    min-width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
 }

css/main.css

@@ -246,15 +246,21 @@ section {
             animation: fade-in 1s both; }
   .preview__link {
     display: block;
-    padding: 2em calc(2em + 3.5em) 2em 1em;
+    padding: 2em calc(2em + 6.5em) 2em 1em;
     position: relative; }
     @media (min-width: 54em) {
       .preview__link {
-        padding: 3em calc(3em + 3.5em) 3em 8em; } }
+        padding: 3em calc(3em + 5em) 3em 2em; } }
+    @media (min-width: 64em) {
+      .preview__link {
+        padding: 3em calc(3em + 8em) 3em 3em; } }
+    @media (min-width: 76.5em) {
+      .preview__link {
+        padding: 3em calc(3em + 8em) 3em 5em; } }
     @media (min-width: 114em) {
       .preview__link {
         padding-left: 10em;
-        padding-right: 13.5em; } }
+        padding-right: 14em; } }
   .preview__date {
     font-family: "Space Mono", monospace;
     color: #0a0a0a; }
@@ -932,12 +938,32 @@ section {
   margin-left: .5em;
   font-size: 0.7em; }
 
-.post-image {
-  height: 5em;
-  width: 5em;
+.post-image-wrapper {
+  height: 7em;
+  width: 7em;
   border-radius: 50%;
   position: absolute;
   right: 1em;
   top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  overflow: hidden; }
+  @media (min-width: 54em) {
+    .post-image-wrapper {
+      right: 2em; } }
+  @media (min-width: 64em) {
+    .post-image-wrapper {
+      right: 3em; } }
+  @media (min-width: 76.5em) {
+    .post-image-wrapper {
+      right: 5em; } }
+
+.post-image {
+  width: initial;
+  max-width: initial;
+  height: inherit;
+  min-width: 100%;
+  position: absolute;
+  top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%); }

index.html

@@ -40,7 +40,9 @@ <h1>{{ site.title }}</h1>
             <a class="preview__link" href="{{ post.url | prepend: site.baseurl }}" itemprop="url">
               <span class="preview__date" itemprop="datePublished" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%b %-d, %Y" }}</span>
               <h2 class="preview__header" itemprop="name">{{ post.title }}</h2>
-              <img class="post-image" src="{{post.image}}">
+              <div class="post-image-wrapper">
+                  <img class="post-image" src="{{post.image}}">
+              </div>
               <!--<p class="preview__excerpt" itemprop="description">{{ post.content | strip_html | truncatewords: 30 }}</p>-->
               <!--<span class="preview__more">Read More</span>-->
             </a>