Stopping point for the night / till I get internet back

FrontendMentor/article-preview-component-master/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

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

@@ -0,0 +1,118 @@
+/* 
+ * Challenge resolutions:
+ * 375x667 & 1440x800
+ */
+
+:root {
+    /* font stuff */
+    font-size: 20px;
+    /* colors */
+    --veryDarkGrayishBlue: hsl(217, 19%, 35%);
+    --desaturatedDarkBlue: hsl(214, 17%, 51%);
+    --grayishBlue: hsl(212, 23%, 69%);
+    --lightGrayishBlue: hsl(210, 46%, 95%);
+    /* corner radius */
+    --cornerRadius: 10px;
+
+}
+
+/* Base styling */ 
+
+body {
+    background-color: var(--lightGrayishBlue);
+    display: flex;
+    flex-direction: column;
+    font-size: 13px;
+    justify-content: center;
+    height: 100vh;
+}
+
+.container {
+}
+.articlePreview {
+    display: flex;
+    flex-direction: column;
+
+    border-radius: var(--cornerRadius);
+    background-color: white;
+    width: 85%;
+    margin: 0 auto;
+}
+.previewImage {
+    width: 100%;
+    object-fit: fill;
+    border-radius: var(--cornerRadius) var(--cornerRadius) 0 0;    
+}
+.previewBody {
+    margin-top: 1.5rem;
+    padding: 1rem 1rem;
+}
+.articleSummary {
+}
+.articleTitle {
+    color: var(--veryDarkGrayishBlue);
+    font-size: 18px;
+    line-height: 1.3em;
+}
+.articleSell {
+    margin-top: 0.5rem;
+    color: var(--desaturatedDarkBlue);
+    font-size: 16px;
+    line-height: 1.3em;
+}
+.articleAuthor {
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
+.authorImage {
+    border-radius: 50%;
+    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;
+    background-color: var(--lightGrayishBlue);
+    margin-left: auto;
+    margin-top: auto;
+    margin-bottom: auto;
+    /* not the right way to put a circle around the icon */
+    border-radius: 50%; 
+}
+.attribution {
+}
+
+@media screen and (min-width: 500px) {
+    body {
+        /* flex-direction: row; */
+        align-content: center;
+        align-items: center; 
+    }
+
+    .articlePreview {
+        flex-direction: row;
+        width: 50%;
+
+    }    
+
+    .previewImage {
+        width: 40%;
+        object-fit: cover;   
+        border-radius: var(--cornerRadius) 0 0 var(--cornerRadius);
+    }    
+}

FrontendMentor/article-preview-component-master/index.html

@@ -5,6 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
   <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">
   
   <title>Frontend Mentor | Article preview component</title>
 
@@ -16,21 +18,38 @@
 </head>
 <body>
 
-  Shift the overall look and feel by adding these wonderful 
+  <div class="container">
-  touches to furniture in your home
+    <div class="articlePreview">
-
+      <img src="./images/drawers.jpg" alt="Green drawers with a vase and pictures" class="previewImage">
-  Ever been in a room and felt like something was missing? Perhaps 
+      <div class="previewBody">
-  it felt slightly bare and uninviting. I’ve got some simple tips 
+          <div class="articleSummary">
-  to help you make any room feel complete.
+            <h1 class="articleTitle">
-
+              Shift the overall look and feel by adding these wonderful 
-  Michelle Appleton
+              touches to furniture in your home
-  28 Jun 2020
+            </h1>
-
+            <p class="articleSell">
-  Share
+              Ever been in a room and felt like something was missing? Perhaps 
+              it felt slightly bare and uninviting. I’ve got some simple tips 
+              to help you make any room feel complete.        
+            </p>
+          </div>
+          <div class="articleAuthor">
+            <img src="./images/avatar-michelle.jpg" alt="Author Picture" class="authorImage">
+            <div class="nameAndDate">
+              <p class="authorName">Michelle Appleton</p>
+              <p class="articleDate">28 Jun 2020</p>
+            </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>
+      </div>
+    </div>
+  </div>
 
   <div class="attribution">
     Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
-    Coded by <a href="#">Your Name Here</a>.
+    Coded by <a href="emailto:work@tarasis.net">Robert McGovern</a>.
   </div>
 </body>
 </html>

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

@@ -0,0 +1,19 @@
+Started 30th Sept 2020 at 21:04
+
+Set up basics. will need to look up how to do the for the share, however no internet right now (been down all day)
+* how to show the share icon
+* how to do a callout (desktop)
+* how to do overlay (mobile)
+* look up again how to do crop of image (image like 2/5, text 3/5 of space)
+
+How have I forgotten how to push only some of the flex to the far right.
+Seriously. margin-left: auto; 🤦‍♂️
+
+So 2 hours later. Structure in place, I have a rough version for both desktop and mobile that are close to the right size (mobile will be closer when I crop the article image down.)
+
+I can't chase sizing yet because I have no internet and can't get the font to use.
+
+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)

FrontendMentor/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}