From be1504139d28b04bda9706ae6a3555fa7c4cd470 Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Thu, 1 Oct 2020 14:53:16 +0100
Subject: [PATCH] Rough image sizing / positioning.

---
 .../article-preview-component/css/style.css   | 53 +++++++++++++++----
 .../article-preview-component/index.html      |  4 +-
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/FrontendMentor/article-preview-component/css/style.css b/FrontendMentor/article-preview-component/css/style.css
index 6d959e7..55b2bd6 100644
--- a/FrontendMentor/article-preview-component/css/style.css
+++ b/FrontendMentor/article-preview-component/css/style.css
@@ -1,8 +1,11 @@
 /* 
  * Challenge resolutions:
  * 375x667 & 1440x800
+ * 327x512 - 730x280
  */
 
+ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap');
+
 :root {
     /* font stuff */
     font-size: 20px;
@@ -19,6 +22,7 @@
 /* Base styling */ 
 
 body {
+    font-family: 'Manrope', sans-serif;
     background-color: var(--lightGrayishBlue);
     display: flex;
     flex-direction: column;
@@ -35,18 +39,32 @@ body {
 
     border-radius: var(--cornerRadius);
     background-color: white;
-    width: 85%;
+    width: 87%;
     margin: 0 auto;
 }
+
 .previewImage {
-    width: 100%;
-    object-fit: fill;
+    flex: 1 45%;
+    overflow: hidden;
     border-radius: var(--cornerRadius) var(--cornerRadius) 0 0;    
 }
-.previewBody {
-    margin-top: 1.5rem;
-    padding: 1rem 1rem;
+
+    /* 
+    * image size is: 660x528
+    * sketch: 327x200
+    * currently: 326.25x200.5
+    */
+.previewImage > img {
+    width: 100%;
+    margin:-4% 0 -15% 0%  ;
 }
+
+.previewBody {
+    flex: 1 60%;
+    margin-top: 1.5rem;
+    padding: 1rem 1.5rem;
+}
+
 .articleSummary {
 }
 .articleTitle {
@@ -72,18 +90,22 @@ body {
     width: 2.5rem;
     height: 2.5rem;
 }
+
 .nameAndDate {
     margin-left: 0.5rem;
     margin-top: auto;
     margin-bottom: auto;
 }
+
 .authorName {
     color: var(--veryDarkGrayishBlue)
 }
+
 .articleDate {
     margin-top: 0.3rem;
     color: var(--desaturatedDarkBlue);
 }
+
 .articleShareIcon {
     width: 20px;
     height: 20px;
@@ -99,7 +121,6 @@ body {
 
 @media screen and (min-width: 500px) {
     body {
-        /* flex-direction: row; */
         align-content: center;
         align-items: center; 
     }
@@ -107,12 +128,22 @@ body {
     .articlePreview {
         flex-direction: row;
         width: 50%;
-
     }    
 
     .previewImage {
-        width: 40%;
-        object-fit: cover;   
+        width: 100%;
         border-radius: var(--cornerRadius) 0 0 var(--cornerRadius);
-    }    
+    }
+
+    /* 
+    * sketch: 285x280
+    * at present: 237x269
+    * 201x290 using it as a background image
+    */
+    .previewImage > img {
+        height: 105%;
+        object-fit: cover;
+        object-position: left;
+        /* margin-bottom: 10%; */
+    }
 }
\ No newline at end of file
diff --git a/FrontendMentor/article-preview-component/index.html b/FrontendMentor/article-preview-component/index.html
index c098885..132d7ab 100644
--- a/FrontendMentor/article-preview-component/index.html
+++ b/FrontendMentor/article-preview-component/index.html
@@ -20,7 +20,9 @@
 
   <div class="container">
     <div class="articlePreview">
-      <img src="./images/drawers.jpg" alt="Green drawers with a vase and pictures" class="previewImage">
+      <div class="previewImage">
+        <img src="./images/drawers.jpg" alt="Green drawers with a vase and pictures" class="">
+      </div>
       <div class="previewBody">
           <div class="articleSummary">
             <h1 class="articleTitle">