Check in before playing more with flex
This commit is contained in:
parent
be1504139d
commit
26ceffebd0
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -17,3 +17,18 @@ These are the differences at this point. Mobile with slider, and desktop with fa
|
|||
|
||||
|
||||
|
||||
|
||||
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)
|
||||
Reference in New Issue