From 26ceffebd0f3fbe1884d1b6101fd4aa8ca4b1702 Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Sat, 3 Oct 2020 13:05:43 +0100
Subject: [PATCH] Check in before playing more with flex

---
 .../article-preview-component/css/style.css   | 55 +++++++++++++++----
 .../article-preview-component/index.html      |  4 +-
 .../notes/process.md                          | 17 +++++-
 3 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/FrontendMentor/article-preview-component/css/style.css b/FrontendMentor/article-preview-component/css/style.css
index 55b2bd6..b51389b 100644
--- a/FrontendMentor/article-preview-component/css/style.css
+++ b/FrontendMentor/article-preview-component/css/style.css
@@ -33,6 +33,7 @@ body {
 
 .container {
 }
+
 .articlePreview {
     display: flex;
     flex-direction: column;
@@ -41,6 +42,8 @@ body {
     background-color: white;
     width: 87%;
     margin: 0 auto;
+
+    box-shadow: 0px 40px 40px -10px rgba(201, 213, 225, 0.503415);
 }
 
 .previewImage {
@@ -56,28 +59,35 @@ body {
     */
 .previewImage > img {
     width: 100%;
-    margin:-4% 0 -15% 0%  ;
+    margin:-4% 0 -15% 0%;
 }
 
 .previewBody {
     flex: 1 60%;
-    margin-top: 1.5rem;
-    padding: 1rem 1.5rem;
+    margin-top: 0.85rem;
+    padding: 1rem 1.75rem 1rem 1.5rem;
 }
 
 .articleSummary {
 }
+
 .articleTitle {
     color: var(--veryDarkGrayishBlue);
-    font-size: 18px;
-    line-height: 1.3em;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
 }
+
 .articleSell {
     margin-top: 0.5rem;
     color: var(--desaturatedDarkBlue);
-    font-size: 16px;
-    line-height: 1.3em;
+    font-size: 13px;
+    font-weight: 500;
+    letter-spacing: 0.12px;
+    line-height: 20px;
 }
+
 .articleAuthor {
     margin-top: 1.5rem;
     display: flex;
@@ -87,23 +97,25 @@ body {
 
 .authorImage {
     border-radius: 50%;
-    width: 2.5rem;
-    height: 2.5rem;
+    width: 2rem;
+    height: 2rem;
 }
 
 .nameAndDate {
-    margin-left: 0.5rem;
+    margin-left: 0.8rem;
     margin-top: auto;
     margin-bottom: auto;
 }
 
 .authorName {
-    color: var(--veryDarkGrayishBlue)
+    color: var(--veryDarkGrayishBlue);
+    font-weight: 700;
 }
 
 .articleDate {
     margin-top: 0.3rem;
     color: var(--desaturatedDarkBlue);
+    font-weight: 500;
 }
 
 .articleShareIcon {
@@ -146,4 +158,25 @@ body {
         object-position: left;
         /* margin-bottom: 10%; */
     }
+
+    .previewBody {
+        margin-top: 0.5rem;
+        padding: 1.2rem 2.3rem 1.6rem 0rem;
+        margin-left: 2.45rem;
+    }
+
+    .articleTitle {
+        font-size: 20px;
+        letter-spacing: 0.25px;
+        line-height: 28px;
+
+    }
+    .articleSell {
+        margin-top: 0.5rem;
+    }
+    
+    .articleAuthor {
+        margin-top: 1rem;
+    }
+    
 }
\ No newline at end of file
diff --git a/FrontendMentor/article-preview-component/index.html b/FrontendMentor/article-preview-component/index.html
index 132d7ab..2c56635 100644
--- a/FrontendMentor/article-preview-component/index.html
+++ b/FrontendMentor/article-preview-component/index.html
@@ -49,9 +49,9 @@
     </div>
   </div>
 
-  <div class="attribution">
+  <!-- <div class="attribution">
     Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
     Coded by <a href="emailto:work@tarasis.net">Robert McGovern</a>.
-  </div>
+  </div> -->
 </body>
 </html>
\ No newline at end of file
diff --git a/FrontendMentor/article-preview-component/notes/process.md b/FrontendMentor/article-preview-component/notes/process.md
index d04a0cf..4aaf135 100644
--- a/FrontendMentor/article-preview-component/notes/process.md
+++ b/FrontendMentor/article-preview-component/notes/process.md
@@ -16,4 +16,19 @@ I can't chase sizing yet because I have no internet and can't get the font to us
 These are the differences at this point. Mobile with slider, and desktop with fade because it was easier to show that way.
 
 ![mobile rough version](mobile-rough.png)
-![desktop rough version](desktop-rough.png)
\ No newline at end of file
+![desktop rough version](desktop-rough.png)
+
+Okay, as I've set things up I can't use something like the following to shrink the image. using absolute takes it out of the flow of the component
+
+```css
+position: absolute;
+clip: rect(0px,60px,200px,0px);
+```
+
+Signed up to the Pro account and made the mistake of taking a look at the sketch file. I knew I couldn't resist getting some of the bits from it. *sigh*
+
+Still trying to eyeball what I can but I find myself wanting to look (for line and letter spacing).
+
+Did use it for the shadow, because I wasn't going to guess that color. Sheesh 🤯
+
+Picking this up on the 3rd. The mobile version is nearly properly positioned. Its off by a bit (whole component is a little shorter), but everything else is close. (Except still not sorted the thing around the share icon) 
\ No newline at end of file