diff --git a/projects/FrontendMentor/newbie/blog-preview-card/.hintrc b/projects/FrontendMentor/newbie/blog-preview-card/.hintrc new file mode 100644 index 0000000..5edd663 --- /dev/null +++ b/projects/FrontendMentor/newbie/blog-preview-card/.hintrc @@ -0,0 +1,16 @@ +{ + "extends": [ + "development" + ], + "hints": { + "compat-api/css": [ + "default", + { + "ignore": [ + "@layer", + "@layer" + ] + } + ] + } +} \ No newline at end of file diff --git a/projects/FrontendMentor/newbie/blog-preview-card/assets/css/base.css b/projects/FrontendMentor/newbie/blog-preview-card/assets/css/base.css index 7c1eb8a..fa5863a 100644 --- a/projects/FrontendMentor/newbie/blog-preview-card/assets/css/base.css +++ b/projects/FrontendMentor/newbie/blog-preview-card/assets/css/base.css @@ -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; +} diff --git a/projects/FrontendMentor/newbie/blog-preview-card/assets/css/layout.css b/projects/FrontendMentor/newbie/blog-preview-card/assets/css/layout.css index 88fc8ae..27dc270 100644 --- a/projects/FrontendMentor/newbie/blog-preview-card/assets/css/layout.css +++ b/projects/FrontendMentor/newbie/blog-preview-card/assets/css/layout.css @@ -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; diff --git a/projects/FrontendMentor/newbie/blog-preview-card/assets/css/theme.css b/projects/FrontendMentor/newbie/blog-preview-card/assets/css/theme.css index 5557756..84c2b2f 100644 --- a/projects/FrontendMentor/newbie/blog-preview-card/assets/css/theme.css +++ b/projects/FrontendMentor/newbie/blog-preview-card/assets/css/theme.css @@ -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; +} diff --git a/projects/FrontendMentor/newbie/blog-preview-card/assets/css/variables.css b/projects/FrontendMentor/newbie/blog-preview-card/assets/css/variables.css index aafcb76..3412064 100644 --- a/projects/FrontendMentor/newbie/blog-preview-card/assets/css/variables.css +++ b/projects/FrontendMentor/newbie/blog-preview-card/assets/css/variables.css @@ -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); } diff --git a/projects/FrontendMentor/newbie/blog-preview-card/index.html b/projects/FrontendMentor/newbie/blog-preview-card/index.html index 89efacf..32811b3 100644 --- a/projects/FrontendMentor/newbie/blog-preview-card/index.html +++ b/projects/FrontendMentor/newbie/blog-preview-card/index.html @@ -26,20 +26,23 @@ -
- Image of something -
Learning
-

Published 21 Dec 2023

- -

HTML & CSS foundations

- -

These languages are the backbone of every website, defining structure, content, and - presentation.

-
- Professional looking picture of Greg Hooper -

Greg Hooper

-
-
+

Blog Preview Card Frontend Mentor Challenge Solution

+
+
+
Image of something
+
Learning
+

Published 21 Dec 2023

+ +

HTML & CSS foundations

+ +

These languages are the backbone of every website, defining structure, content, and + presentation.

+
+ Professional looking picture of Greg Hooper +

Greg Hooper

+
+
+