diff --git a/FrontendMentor/article-preview-component-master/css/reset.css b/FrontendMentor/article-preview-component-master/css/reset.css new file mode 100644 index 0000000..af94440 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/FrontendMentor/article-preview-component-master/css/style.css b/FrontendMentor/article-preview-component-master/css/style.css new file mode 100644 index 0000000..6d959e7 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/FrontendMentor/article-preview-component-master/index.html b/FrontendMentor/article-preview-component-master/index.html index 400e7ab..c098885 100644 --- a/FrontendMentor/article-preview-component-master/index.html +++ b/FrontendMentor/article-preview-component-master/index.html @@ -5,6 +5,8 @@ + + Frontend Mentor | Article preview component @@ -16,21 +18,38 @@ - Shift the overall look and feel by adding these wonderful - touches to furniture in your home +
+
+ Green drawers with a vase and pictures +
+
+

+ Shift the overall look and feel by adding these wonderful + touches to furniture in your home +

+

+ 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. +

+
+
+ Author Picture +
+

Michelle Appleton

+

28 Jun 2020

+
+ + + Share Icon +
+
+
+
- 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. - - Michelle Appleton - 28 Jun 2020 - - Share -
Challenge by Frontend Mentor. - Coded by Your Name Here. + Coded by Robert McGovern.
\ No newline at end of file diff --git a/FrontendMentor/article-preview-component-master/js/challenge.js b/FrontendMentor/article-preview-component-master/js/challenge.js new file mode 100644 index 0000000..e69de29 diff --git a/FrontendMentor/article-preview-component-master/notes/desktop-rough.png b/FrontendMentor/article-preview-component-master/notes/desktop-rough.png new file mode 100644 index 0000000..7a5cc24 Binary files /dev/null and b/FrontendMentor/article-preview-component-master/notes/desktop-rough.png differ diff --git a/FrontendMentor/article-preview-component-master/notes/mobile-rough.png b/FrontendMentor/article-preview-component-master/notes/mobile-rough.png new file mode 100644 index 0000000..98b08ba Binary files /dev/null and b/FrontendMentor/article-preview-component-master/notes/mobile-rough.png differ diff --git a/FrontendMentor/article-preview-component-master/notes/process.md b/FrontendMentor/article-preview-component-master/notes/process.md index e69de29..d04a0cf 100644 --- a/FrontendMentor/article-preview-component-master/notes/process.md +++ b/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) \ No newline at end of file diff --git a/FrontendMentor/reset.css b/FrontendMentor/reset.css new file mode 100644 index 0000000..af94440 --- /dev/null +++ b/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; +} \ No newline at end of file