Final styling tweaks.

Moved share svg inline so I could color it, although better would be to edit the external svg to use fill="currentColor"
Some final notes

FrontendMentor/article-preview-component/css/style.css

@@ -48,11 +48,6 @@ body {
     overflow: hidden;
 }
 
-    /* 
-    * image size is: 660x528
-    * sketch: 327x200
-    * currently: 326.25x200.5
-    */
 .previewImage > img {
     width: 100%;
     margin:-5% 0 -14.5% 0%;
@@ -118,6 +113,7 @@ body {
 
 .articleShareButton {
     background-color: var(--lightGrayishBlue);
+    color: #6E8098;
 
     width: 30px;
     height: 30px;
@@ -135,11 +131,8 @@ body {
 }
 
 .buttonDark {
-    background-color: var(--veryDarkGrayishBlue);
+    background-color: var(--desaturatedDarkBlue);
-}
+    color: var(--lightGrayishBlue);
-
-.buttonDark img svg path {
-    background-color: white;
 }
 
 .articleShareButtonTooltip {
@@ -193,10 +186,8 @@ body {
     font-size: 13px;
 }
 
-.attribution { position: absolute; bottom: 0; font-size: 11px; text-align: center; }
-.attribution a { color: hsl(228, 45%, 44%); }
 
-@media screen and (min-width: 500px) {
+@media screen and (min-width: 650px) {
     body {
         align-content: center;
         align-items: center; 
@@ -206,17 +197,14 @@ body {
         flex-direction: row;
         width: 50%;
         min-width: 600px;
+        overflow: visible;
     }    
 
     .previewImage {
         width: 100%;
+        border-radius: var(--cornerRadius) 0 0px var(--cornerRadius);
     }
 
-    /* 
-    * sketch: 285x280
-    * at present: 237x269
-    * 201x290 using it as a background image
-    */
     .previewImage > img {
         margin:0;
         height: 105%;
@@ -225,12 +213,12 @@ body {
     }
 
     .previewBody {
-        margin-top: 0.5rem;
+        margin-top: 0.65rem;
         margin-left: 0.25rem;
     }
 
     .articleSummary {
-        padding: 1rem 1.5rem 1rem 1.5rem;
+        padding: 1rem 1.75rem 1rem 1.5rem;
     }
 
     .articleTitle {
@@ -244,6 +232,9 @@ body {
     }
     
     .articleFooter {
-        padding: 0rem 1.5rem 1.5rem 1.5rem;
+        padding: 0rem 1.75rem 1.5rem 1.5rem;
     }
-}
+}
+
+.attribution { position: absolute; bottom: 0; font-size: 11px; text-align: center; }
+.attribution a { color: hsl(228, 45%, 44%); }

FrontendMentor/article-preview-component/index.html

@@ -46,7 +46,8 @@
               <img src="./images/icon-pinterest.svg" alt="Pinterest Icon" class="articleShareIcon">
             </div>
             <button class="articleShareButton" onclick="toggleTooltip()" >
-              <img src="./images/icon-share.svg" alt="Share Icon" class="">
+              <!-- <img src="./images/icon-share.svg" alt="Share Icon" class=""> -->
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13"><path fill="currentColor" d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"/></svg>
               <div class="articleShareButtonTooltip">
                 <p>SHARE</p>
                 <img src="./images/icon-facebook.svg" alt="Facebook Icon" class="articleShareIcon">

FrontendMentor/article-preview-component/js/challenge.js

@@ -8,7 +8,7 @@ function toggleTooltip() {
     const articleShareTooltip = document.querySelector(".articleShareButtonTooltip");
     const articleShareSection = document.querySelector(".articleShareSection");
 
-    if (window.innerWidth <= 500) {
+    if (window.innerWidth <= 650) {
         if (isTooltipVisible) {
             articleFooter.classList.remove("backgroundDark");
             articleShareButton.classList.remove("buttonDark");

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

@@ -45,4 +45,28 @@ Used this https://cssdeck.com/labs/bv45bh6p for the callout/tooltip
 
 Don't understand why the img/svg inside the button shifts up when tooltip appears.
 
-~~~Broke the desktop version while adding the share stuff. Not entirely sure how.~~~
+~~Broke the desktop version while adding the share stuff. Not entirely sure how.~~
+
+---
+
+Notes before submission.
+
+Had to disable overflow in articlePreview on desktop to show full callout/tooltip. That meant I had to put code previewImage for border-radius.
+
+Don't get why the svg img is pushed upwards when pressing the share button.
+
+Had to change buttonDark to a lighter shade because I couldn't colour the svg. I've since searched on google and found this q/a with a bunch of options 
+
+https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css
+
+I have inlined the svg and used fill="currentColor" rather than edit the supplied svg.
+
+So this is where I leave it
+
+![Mobile Final](./mobile-final.jpg)
+![Desktop Final](./desktop-final.jpg)
+
+Differences from design
+
+![Mobile Final Difference](./mobile-diff-final.png)
+![Desktop Final Difference](./desktop-diff-final.png)