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