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 { .container {
} }
.articlePreview { .articlePreview {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -41,6 +42,8 @@ body {
background-color: white; background-color: white;
width: 87%; width: 87%;
margin: 0 auto; margin: 0 auto;
box-shadow: 0px 40px 40px -10px rgba(201, 213, 225, 0.503415);
} }
.previewImage { .previewImage {
@ -61,23 +64,30 @@ body {
.previewBody { .previewBody {
flex: 1 60%; flex: 1 60%;
margin-top: 1.5rem; margin-top: 0.85rem;
padding: 1rem 1.5rem; padding: 1rem 1.75rem 1rem 1.5rem;
} }
.articleSummary { .articleSummary {
} }
.articleTitle { .articleTitle {
color: var(--veryDarkGrayishBlue); color: var(--veryDarkGrayishBlue);
font-size: 18px; font-size: 16px;
line-height: 1.3em; line-height: 24px;
font-weight: 700;
letter-spacing: 0.2px;
} }
.articleSell { .articleSell {
margin-top: 0.5rem; margin-top: 0.5rem;
color: var(--desaturatedDarkBlue); color: var(--desaturatedDarkBlue);
font-size: 16px; font-size: 13px;
line-height: 1.3em; font-weight: 500;
letter-spacing: 0.12px;
line-height: 20px;
} }
.articleAuthor { .articleAuthor {
margin-top: 1.5rem; margin-top: 1.5rem;
display: flex; display: flex;
@ -87,23 +97,25 @@ body {
.authorImage { .authorImage {
border-radius: 50%; border-radius: 50%;
width: 2.5rem; width: 2rem;
height: 2.5rem; height: 2rem;
} }
.nameAndDate { .nameAndDate {
margin-left: 0.5rem; margin-left: 0.8rem;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
} }
.authorName { .authorName {
color: var(--veryDarkGrayishBlue) color: var(--veryDarkGrayishBlue);
font-weight: 700;
} }
.articleDate { .articleDate {
margin-top: 0.3rem; margin-top: 0.3rem;
color: var(--desaturatedDarkBlue); color: var(--desaturatedDarkBlue);
font-weight: 500;
} }
.articleShareIcon { .articleShareIcon {
@ -146,4 +158,25 @@ body {
object-position: left; object-position: left;
/* margin-bottom: 10%; */ /* 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> </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="emailto:work@tarasis.net">Robert McGovern</a>. Coded by <a href="emailto:work@tarasis.net">Robert McGovern</a>.
</div> </div> -->
</body> </body>
</html> </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) ![mobile rough version](mobile-rough.png)
![desktop rough version](desktop-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)