Sharing working, desktop and mobile are close.

Haven't matched design for sharing.

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

@@ -39,6 +39,7 @@ body {
     flex-direction: column;
 
     border-radius: var(--cornerRadius);
+    overflow: hidden;
     background-color: white;
     width: 87%;
     margin: 0 auto;
@@ -49,7 +50,6 @@ body {
 .previewImage {
     flex: 1 45%;
     overflow: hidden;
-    border-radius: var(--cornerRadius) var(--cornerRadius) 0 0;    
 }
 
     /* 
@@ -65,10 +65,10 @@ body {
 .previewBody {
     flex: 1 60%;
     margin-top: 0.85rem;
-    padding: 1rem 1.75rem 1rem 1.5rem;
 }
 
 .articleSummary {
+    padding: 1rem 1.75rem 1rem 1.5rem;
 }
 
 .articleTitle {
@@ -88,11 +88,14 @@ body {
     line-height: 20px;
 }
 
-.articleAuthor {
+.articleFooter {
-    margin-top: 1.5rem;
+    /* margin-top: 1.5rem; */
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
+    padding: 1rem 1.5rem 1rem 1.5rem;
+
+    transition: 250ms ease-in-out;
 }
 
 .authorImage {
@@ -118,16 +121,90 @@ body {
     font-weight: 500;
 }
 
-.articleShareIcon {
+.articleShareButton {
-    width: 20px;
-    height: 20px;
     background-color: var(--lightGrayishBlue);
+
+    width: 30px;
+    height: 30px;
+
+    border: none;
+    border-radius: 50%;
+
+    cursor: pointer;
+
     margin-left: auto;
     margin-top: auto;
     margin-bottom: auto;
-    /* not the right way to put a circle around the icon */
+
-    border-radius: 50%; 
+
+    transition: 250ms ease-in-out;
+
+
 }
+
+.articleShareButton > .articleShareIcon {
+}
+
+.buttonDark {
+    background-color: var(--veryDarkGrayishBlue);
+}
+
+.buttonDark img svg path {
+    background-color: white;
+}
+
+.articleShareButtonTooltip {
+    display: none;
+    position: relative;
+    justify-content: space-between;
+    align-items: center;
+
+    border-radius: 0.5rem;
+
+    background: var(--veryDarkGrayishBlue);
+    box-shadow: 0px 10px 10px rgba(201, 213, 225, 0.503415);
+
+    width: 170px;
+    padding: 0.75rem 1rem;
+    bottom: 80px;
+    left: -104px;
+
+    overflow: visible;
+}
+
+.articleShareButtonTooltip::before {
+    content: "";
+    width: 0px;
+    height: 0px;
+    border: 0.8rem solid transparent;
+    position: absolute;
+
+    left: 45%;
+    bottom: -25px;
+    border-top: 10px solid var(--veryDarkGrayishBlue);
+}
+
+.articleShareSection {
+    display: none;
+    align-items: center;
+    justify-content: space-around;
+
+    width: 80%;
+    height: 2rem;
+}
+
+.backgroundDark {
+    background: var(--veryDarkGrayishBlue);
+}
+
+.articleShareButtonTooltip > p, .articleShareSection > p {
+    letter-spacing: 5px;
+    color: var(--grayishBlue);
+    font-weight: 500;
+    font-size: 13px;
+
+}
+
 .attribution {
 }
 
@@ -144,7 +221,7 @@ body {
 
     .previewImage {
         width: 100%;
-        border-radius: var(--cornerRadius) 0 0 var(--cornerRadius);
+        /* border-radius: var(--cornerRadius) 0 0 var(--cornerRadius); */
     }
 
     /* 
@@ -161,8 +238,11 @@ body {
 
     .previewBody {
         margin-top: 0.5rem;
-        padding: 1.2rem 2.3rem 1.6rem 0rem;
+        margin-left: 0.25rem;
-        margin-left: 2.45rem;
+    }
+
+    .articleSummary {
+        padding: 1rem 1.5rem 1rem 1.5rem;
     }
 
     .articleTitle {
@@ -175,8 +255,8 @@ body {
         margin-top: 0.5rem;
     }
     
-    .articleAuthor {
+    .articleFooter {
-        margin-top: 1rem;
+        padding: 0rem 1.5rem 1.5rem 1.5rem;
     }
     
 }

FrontendMentor/article-preview-component/index.html

@@ -7,6 +7,7 @@
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
   <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/style.css">
+  <script src="./js/challenge.js"></script>
   
   <title>Frontend Mentor | Article preview component</title>
 
@@ -35,7 +36,7 @@
               to help you make any room feel complete.        
             </p>
           </div>
-          <div class="articleAuthor">
+          <div class="articleFooter">
             <img src="./images/avatar-michelle.jpg" alt="Author Picture" class="authorImage">
             <div class="nameAndDate">
               <p class="authorName">Michelle Appleton</p>
@@ -43,7 +44,21 @@
             </div>
             <!-- look up what to do with this. I know I've seen it. What it there for screenreader, but off the side of the screen -->
             <!-- <section>Share</section>  -->
-            <img src="./images/icon-share.svg" alt="Share Icon" class="articleShareIcon">
+            <div class="articleShareSection">
+              <p>SHARE</p>
+              <img src="./images/icon-facebook.svg" alt="Facebook Icon" class="articleShareIcon">
+              <img src="./images/icon-twitter.svg" alt="Twitter Icon" class="articleShareIcon">
+              <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="">
+              <div class="articleShareButtonTooltip">
+                <p>SHARE</p>
+                <img src="./images/icon-facebook.svg" alt="Facebook Icon" class="articleShareIcon">
+                <img src="./images/icon-twitter.svg" alt="Twitter Icon" class="articleShareIcon">
+                <img src="./images/icon-pinterest.svg" alt="Pinterest Icon" class="articleShareIcon">
+              </div>
+            </button>
           </div>
       </div>
     </div>

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

@@ -0,0 +1,38 @@
+let isTooltipVisible = false;
+
+function toggleTooltip() {
+    const articleFooter = document.querySelector(".articleFooter");
+    const articleImage = document.querySelector(".authorImage");
+    const articleAuthorAndDate = document.querySelector(".nameAndDate");
+    const articleShareButton = document.querySelector(".articleShareButton");
+    const articleShareTooltip = document.querySelector(".articleShareButtonTooltip");
+    const articleShareSection = document.querySelector(".articleShareSection");
+
+    if (window.innerWidth <= 500) {
+        if (isTooltipVisible) {
+            articleFooter.classList.remove("backgroundDark");
+            articleShareButton.classList.remove("buttonDark");
+            articleShareSection.style.display = "none";
+            articleImage.style.display = "block";
+            articleAuthorAndDate.style.display = "block";
+            isTooltipVisible = false;      
+        } else {
+            articleFooter.classList.add("backgroundDark");
+            articleShareButton.classList.add("buttonDark");
+            articleShareSection.style.display = "flex";
+            articleImage.style.display = "none";
+            articleAuthorAndDate.style.display = "none";
+            isTooltipVisible = true;      
+        }
+    } else {
+        if (isTooltipVisible) {
+            articleShareButton.classList.remove("buttonDark");
+            articleShareTooltip.style.display = "none";
+            isTooltipVisible = false;    
+        } else {
+            articleShareButton.classList.add("buttonDark");
+            articleShareTooltip.style.display = "flex";
+            isTooltipVisible = true;
+        }
+    }
+}

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

@@ -31,4 +31,18 @@ Still trying to eyeball what I can but I find myself wanting to look (for line a
 
 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) 
+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) 
+
+---
+
+Can't figure out how to properly portion to get the desktop image a bit bigger. Playing with flex portions changes too much. Grid better? I want to say the pic is 40% of the size, and body is 60% of the size.
+
+---
+
+Picked up hours later.
+
+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.