Check in before playing more with flex

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 {
@@ -61,23 +64,30 @@ body {
 
 .previewBody {
     flex: 1 60%;
-    margin-top: 1.5rem;
+    margin-top: 0.85rem;
-    padding: 1rem 1.5rem;
+    padding: 1rem 1.75rem 1rem 1.5rem;
 }
 
 .articleSummary {
 }
+
 .articleTitle {
     color: var(--veryDarkGrayishBlue);
-    font-size: 18px;
+    font-size: 16px;
-    line-height: 1.3em;
+    line-height: 24px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
 }
+
 .articleSell {
     margin-top: 0.5rem;
     color: var(--desaturatedDarkBlue);
-    font-size: 16px;
+    font-size: 13px;
-    line-height: 1.3em;
+    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;
+    width: 2rem;
-    height: 2.5rem;
+    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;
+    }
+    
 }

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>

FrontendMentor/article-preview-component/notes/process.md

@@ -17,3 +17,18 @@ These are the differences at this point. Mobile with slider, and desktop with fa
 
 ![mobile rough version](mobile-rough.png)
 ![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)