Stopping point for the night / till I get internet back

This commit is contained in:
Robert McGovern 2020-09-30 23:18:42 +01:00
parent af7aac4b1a
commit 76800cea32
8 changed files with 264 additions and 12 deletions

View File

@ -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;
}

View File

@ -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);
}
}

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 166 KiB

View File

@ -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)

48
FrontendMentor/reset.css Normal file
View File

@ -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;
}