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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Size between: 327px → 384px */
|
||||
width: var(--sizing-article-width);
|
||||
|
||||
|
|
@ -27,6 +36,7 @@ article {
|
|||
}
|
||||
|
||||
.category {
|
||||
margin-top: 1.5rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
|
|
|
|||
|
|
@ -8,9 +8,11 @@ article {
|
|||
border: black 1px solid;
|
||||
/* shadow scales from 8px at 375, to 16 at 1440 */
|
||||
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 {
|
||||
border-radius: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -27,3 +29,7 @@ article {
|
|||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
article:hover {
|
||||
--sizing-box-shadow: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,8 @@
|
|||
/** Sizing */
|
||||
|
||||
/* 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 */
|
||||
--sizing-article-width: clamp(20.4375rem, 19.1831rem + 5.3521vi, 24rem);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,20 +26,23 @@
|
|||
|
||||
<body>
|
||||
|
||||
<article>
|
||||
<img src="assets/images/illustration-article.svg" alt="Image of something">
|
||||
<div class="category">Learning</div>
|
||||
<p class="date">Published 21 Dec 2023</p>
|
||||
<a href="#">
|
||||
<h2>HTML & CSS foundations</h2>
|
||||
</a>
|
||||
<p class="excerpt">These languages are the backbone of every website, defining structure, content, and
|
||||
presentation.</p>
|
||||
<div class="author-section">
|
||||
<img src="assets/images/image-avatar.webp" alt="Professional looking picture of Greg Hooper">
|
||||
<p class="author-name">Greg Hooper</p>
|
||||
</div>
|
||||
</article>
|
||||
<h1 class="visually-hidden">Blog Preview Card Frontend Mentor Challenge Solution</h1>
|
||||
<main>
|
||||
<article>
|
||||
<figure><img src="assets/images/illustration-article.svg" alt="Image of something"></figure>
|
||||
<div class="category">Learning</div>
|
||||
<p class="date">Published 21 Dec 2023</p>
|
||||
<a href="#">
|
||||
<h2>HTML & CSS foundations</h2>
|
||||
</a>
|
||||
<p class="excerpt">These languages are the backbone of every website, defining structure, content, and
|
||||
presentation.</p>
|
||||
<div class="author-section">
|
||||
<img src="assets/images/image-avatar.webp" alt="Professional looking picture of Greg Hooper">
|
||||
<p class="author-name">Greg Hooper</p>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<!-- <div class="attribution">
|
||||
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