Check in before playing more with flex

This commit is contained in:
Robert McGovern 2020-10-03 13:05:43 +01:00
parent be1504139d
commit 26ceffebd0
3 changed files with 62 additions and 14 deletions

View File

@ -33,6 +33,7 @@ body {
.container {
}
.articlePreview {
display: flex;
flex-direction: column;
@ -41,6 +42,8 @@ body {
background-color: white;
width: 87%;
margin: 0 auto;
box-shadow: 0px 40px 40px -10px rgba(201, 213, 225, 0.503415);
}
.previewImage {
@ -56,28 +59,35 @@ body {
*/
.previewImage > img {
width: 100%;
margin:-4% 0 -15% 0% ;
margin:-4% 0 -15% 0%;
}
.previewBody {
flex: 1 60%;
margin-top: 1.5rem;
padding: 1rem 1.5rem;
margin-top: 0.85rem;
padding: 1rem 1.75rem 1rem 1.5rem;
}
.articleSummary {
}
.articleTitle {
color: var(--veryDarkGrayishBlue);
font-size: 18px;
line-height: 1.3em;
font-size: 16px;
line-height: 24px;
font-weight: 700;
letter-spacing: 0.2px;
}
.articleSell {
margin-top: 0.5rem;
color: var(--desaturatedDarkBlue);
font-size: 16px;
line-height: 1.3em;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.12px;
line-height: 20px;
}
.articleAuthor {
margin-top: 1.5rem;
display: flex;
@ -87,23 +97,25 @@ body {
.authorImage {
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
width: 2rem;
height: 2rem;
}
.nameAndDate {
margin-left: 0.5rem;
margin-left: 0.8rem;
margin-top: auto;
margin-bottom: auto;
}
.authorName {
color: var(--veryDarkGrayishBlue)
color: var(--veryDarkGrayishBlue);
font-weight: 700;
}
.articleDate {
margin-top: 0.3rem;
color: var(--desaturatedDarkBlue);
font-weight: 500;
}
.articleShareIcon {
@ -146,4 +158,25 @@ body {
object-position: left;
/* margin-bottom: 10%; */
}
.previewBody {
margin-top: 0.5rem;
padding: 1.2rem 2.3rem 1.6rem 0rem;
margin-left: 2.45rem;
}
.articleTitle {
font-size: 20px;
letter-spacing: 0.25px;
line-height: 28px;
}
.articleSell {
margin-top: 0.5rem;
}
.articleAuthor {
margin-top: 1rem;
}
}

View File

@ -49,9 +49,9 @@
</div>
</div>
<div class="attribution">
<!-- <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="emailto:work@tarasis.net">Robert McGovern</a>.
</div>
</div> -->
</body>
</html>

View File

@ -17,3 +17,18 @@ These are the differences at this point. Mobile with slider, and desktop with fa
![mobile rough version](mobile-rough.png)
![desktop rough version](desktop-rough.png)
Okay, as I've set things up I can't use something like the following to shrink the image. using absolute takes it out of the flow of the component
```css
position: absolute;
clip: rect(0px,60px,200px,0px);
```
Signed up to the Pro account and made the mistake of taking a look at the sketch file. I knew I couldn't resist getting some of the bits from it. *sigh*
Still trying to eyeball what I can but I find myself wanting to look (for line and letter spacing).
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)