tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Final tweaks EXCEPT attribution.

This commit is contained in:
Robert McGovern 2020-10-04 00:57:50 +01:00
parent 4eab3313a1
commit 39d7d415f6
2 changed files with 8 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
FrontendMentor/article-preview-component/css/style.css
View File

@ -16,7 +16,6 @@
--lightGrayishBlue: hsl(210, 46%, 95%); --lightGrayishBlue: hsl(210, 46%, 95%);
/* corner radius */ /* corner radius */
--cornerRadius: 10px; --cornerRadius: 10px;
} }
/* Base styling */ /* Base styling */
@ -31,9 +30,6 @@ body {
height: 100vh; height: 100vh;
} }
.container {
}
.articlePreview { .articlePreview {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -48,7 +44,7 @@ body {
} }
.previewImage { .previewImage {
flex: 1 45%; flex: 1 40%;
overflow: hidden; overflow: hidden;
} }
@ -59,7 +55,7 @@ body {
*/ */
.previewImage > img { .previewImage > img {
width: 100%; width: 100%;
margin:-4% 0 -15% 0%; margin:-4.5% 0 -14.5% 0%;
} }
.previewBody { .previewBody {
@ -89,7 +85,6 @@ body {
} }
.articleFooter { .articleFooter {
/* margin-top: 1.5rem; */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
@ -136,13 +131,7 @@ body {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
transition: 250ms ease-in-out; transition: 250ms ease-in-out;
}
.articleShareButton > .articleShareIcon {
} }
.buttonDark { .buttonDark {
@ -202,11 +191,10 @@ body {
color: var(--grayishBlue); color: var(--grayishBlue);
font-weight: 500; font-weight: 500;
font-size: 13px; font-size: 13px;
} }
.attribution { .attribution { font-size: 11px; text-align: center; }
} .attribution a { color: hsl(228, 45%, 44%); }
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
body { body {
@ -217,11 +205,11 @@ body {
.articlePreview { .articlePreview {
flex-direction: row; flex-direction: row;
width: 50%; width: 50%;
min-width: 600px;
} }
.previewImage { .previewImage {
width: 100%; width: 100%;
/* border-radius: var(--cornerRadius) 0 0 var(--cornerRadius); */
} }
/* /*
@ -230,10 +218,10 @@ body {
* 201x290 using it as a background image * 201x290 using it as a background image
*/ */
.previewImage > img { .previewImage > img {
margin:0;
height: 105%; height: 105%;
object-fit: cover; object-fit: cover;
object-position: left; object-position: left;
/* margin-bottom: 10%; */
} }
.previewBody { .previewBody {
@ -258,5 +246,4 @@ body {
.articleFooter { .articleFooter {
padding: 0rem 1.5rem 1.5rem 1.5rem; padding: 0rem 1.5rem 1.5rem 1.5rem;
} }
} }

9
FrontendMentor/article-preview-component/index.html
View File

@ -11,11 +11,6 @@
<title>Frontend Mentor | Article preview component</title> <title>Frontend Mentor | Article preview component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head> </head>
<body> <body>
@ -64,9 +59,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>