blog preview card challenge fixes
This commit is contained in:
parent
b4d6c6bb3e
commit
dbe6e0ee65
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"extends": [
|
||||||
|
"development"
|
||||||
|
],
|
||||||
|
"hints": {
|
||||||
|
"compat-api/css": [
|
||||||
|
"default",
|
||||||
|
{
|
||||||
|
"ignore": [
|
||||||
|
"@layer",
|
||||||
|
"@layer"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -6,3 +6,13 @@ body {
|
||||||
|
|
||||||
background-color: var(--clr-yellow);
|
background-color: var(--clr-yellow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.visually-hidden {
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
clip-path: inset(50%);
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,15 @@ article {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 200px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
/* Size between: 327px → 384px */
|
/* Size between: 327px → 384px */
|
||||||
width: var(--sizing-article-width);
|
width: var(--sizing-article-width);
|
||||||
|
|
||||||
|
|
@ -27,6 +36,7 @@ article {
|
||||||
}
|
}
|
||||||
|
|
||||||
.category {
|
.category {
|
||||||
|
margin-top: 1.5rem;
|
||||||
padding: 0.25rem 0.75rem;
|
padding: 0.25rem 0.75rem;
|
||||||
width: -moz-fit-content;
|
width: -moz-fit-content;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,11 @@ article {
|
||||||
border: black 1px solid;
|
border: black 1px solid;
|
||||||
/* shadow scales from 8px at 375, to 16 at 1440 */
|
/* shadow scales from 8px at 375, to 16 at 1440 */
|
||||||
box-shadow: var(--sizing-box-shadow) var(--sizing-box-shadow) black;
|
box-shadow: var(--sizing-box-shadow) var(--sizing-box-shadow) black;
|
||||||
|
/*! design shows desktop active with 16px, but desktop inactive with 8px */
|
||||||
|
/* box-shadow: 8px 8px black; */
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 20px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -27,3 +29,7 @@ article {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
article:hover {
|
||||||
|
--sizing-box-shadow: 16px;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,8 @@
|
||||||
/** Sizing */
|
/** Sizing */
|
||||||
|
|
||||||
/* shadow scales from 8px at 375, to 16 at 1440 */
|
/* shadow scales from 8px at 375, to 16 at 1440 */
|
||||||
--sizing-box-shadow: clamp(0.5rem, 0.3239rem + 0.7512vi, 1rem);
|
/* --sizing-box-shadow: clamp(0.5rem, 0.3239rem + 0.7512vi, 1rem); */
|
||||||
|
--sizing-box-shadow: 8px;
|
||||||
/* Size between: 327px → 384px */
|
/* Size between: 327px → 384px */
|
||||||
--sizing-article-width: clamp(20.4375rem, 19.1831rem + 5.3521vi, 24rem);
|
--sizing-article-width: clamp(20.4375rem, 19.1831rem + 5.3521vi, 24rem);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -26,20 +26,23 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<article>
|
<h1 class="visually-hidden">Blog Preview Card Frontend Mentor Challenge Solution</h1>
|
||||||
<img src="assets/images/illustration-article.svg" alt="Image of something">
|
<main>
|
||||||
<div class="category">Learning</div>
|
<article>
|
||||||
<p class="date">Published 21 Dec 2023</p>
|
<figure><img src="assets/images/illustration-article.svg" alt="Image of something"></figure>
|
||||||
<a href="#">
|
<div class="category">Learning</div>
|
||||||
<h2>HTML & CSS foundations</h2>
|
<p class="date">Published 21 Dec 2023</p>
|
||||||
</a>
|
<a href="#">
|
||||||
<p class="excerpt">These languages are the backbone of every website, defining structure, content, and
|
<h2>HTML & CSS foundations</h2>
|
||||||
presentation.</p>
|
</a>
|
||||||
<div class="author-section">
|
<p class="excerpt">These languages are the backbone of every website, defining structure, content, and
|
||||||
<img src="assets/images/image-avatar.webp" alt="Professional looking picture of Greg Hooper">
|
presentation.</p>
|
||||||
<p class="author-name">Greg Hooper</p>
|
<div class="author-section">
|
||||||
</div>
|
<img src="assets/images/image-avatar.webp" alt="Professional looking picture of Greg Hooper">
|
||||||
</article>
|
<p class="author-name">Greg Hooper</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
<!-- <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>.
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 170 KiB After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 118 KiB |
Loading…
Reference in New Issue