Stopping point for the night / till I get internet back
This commit is contained in:
parent
af7aac4b1a
commit
76800cea32
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
<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
|
||||
touches to furniture in your home
|
||||
|
||||
</h1>
|
||||
<p class="articleSell">
|
||||
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
|
||||
</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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
|
|
@ -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.
|
||||
|
||||
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
Reference in New Issue