From 1d248e21b6f1919dffdd92134d7f8aa6aa849141 Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Mon, 3 Jan 2022 03:04:54 +0000
Subject: [PATCH] as per end of video, roughly, with tweaks to some of the
 numbers. More styling required

---
 css/style.css | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    | 36 +++++++++++++----------
 2 files changed, 101 insertions(+), 15 deletions(-)

diff --git a/css/style.css b/css/style.css
index cd862aa..b0c940a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -99,4 +99,84 @@ footer * {
 
 footer > a {
     display: block;
+}
+
+.stacked {
+    display: grid;
+}
+
+.stacked > * {
+    grid-column: 1/2;
+    grid-row: 1/2;
+}
+
+.card__content {
+    z-index: 10;
+    background: white;
+    align-self: end;
+    margin: .5rem; /*.5rem 2rem;*/
+    padding: .5rem;
+
+    box-shadow: 0 .25rem 1rem rgba(0 0 0 / 0.1);
+}
+
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+    gap: .25rem;
+}
+
+.project-card {
+    /* border: 3px solid hotpink; */
+    aspect-ratio: 1 / 1.5;
+}
+
+.card__img {
+    width: 100%;
+    aspect-ratio: 1 / 1.25;
+    object-fit: cover;
+}
+
+.card__techUsed {
+    list-style: none;
+    display: flex;
+    /* align-content: space-evenly; */
+    justify-content: space-evenly;
+
+    font-size: 0.625rem;
+}
+
+/* .card__techUsed > li {
+    margin: 0;
+} */
+
+.card__title {
+    font-size: .75rem;
+    line-height: 1.1;
+    color: firebrick;
+}
+
+.card__description {
+    font-size: 0.625rem;
+    line-height: 1.2;
+}
+
+@media (min-width: 38em) {
+
+    .card__img {
+        aspect-ratio: 1 / 1.;
+      }
+    
+.project-card.featured {
+    grid-row: span 2;
+    grid-column: span 2;
+}
+
+.project-card.featured .card__img {
+    aspect-ratio: 1 / 1.33;
+}
+
+.project-card.featured .card__title {
+    font-size: 1.25rem;
+}
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 0556644..2908976 100644
--- a/index.html
+++ b/index.html
@@ -25,13 +25,17 @@
         </div>
 
         <div class="projectsDiv">
+            <h2>Frontend Mentor</h2>
+            <div class="newbieChallenges">
+                <h3>Newbie Challenges</h3>
+
             <div class="projects-grid">
-                <div class="project-card">
+                <div class="project-card stacked featured">
                     <a href="./FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/">
                         <img class="card__img" src="./screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png" alt="The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section.">
                     </a>
                     <div class="card__content">
-                        <h3 class="card__title">The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section.</h3>
+                        <h3 class="card__title">The Huddle Landing Page</h3>
                         <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                         <ul class="card__techUsed">
                             <li>HTML</li>
@@ -41,12 +45,12 @@
                     </div>
                 </div>
 
-                <div class="project-card">
+                <div class="project-card stacked">
                     <a href="./FrontendMentor/newbie/ping-coming-soon-page-master/">
                         <img class="card__img" src="./screenshots/fem-newbie-ping-coming-soon-page.jpeg" alt="Ping Coming-Soon Challenge from FrontendMentor">
                     </a>
                     <div class="card__content">
-                        <h3 class="card__title">Ping Coming-Soon Challenge</h3>
+                        <h3 class="card__title">Ping Coming-Soon</h3>
                         <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                         <ul class="card__techUsed">
                             <li>HTML</li>
@@ -56,12 +60,12 @@
                     </div>
                 </div>
 
-                <div class="project-card">
+                <div class="project-card stacked">
                     <a href="./FrontendMentor/newbie/single-price-grid-component-master/">
                         <img class="card__img" src="./screenshots/fem-newbie-single-price-grid-component.jpeg" alt="Single Price Grid Component Challenge from FrontendMentor">
                     </a>
                     <div class="card__content">
-                        <h3 class="card__title">Single Price Grid Component Challenge from FrontendMentor</h3>
+                        <h3 class="card__title">Single Price Grid Component</h3>
                         <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                         <ul class="card__techUsed">
                             <li>HTML</li>
@@ -70,12 +74,12 @@
                     </div>
                 </div>
 
-                <div class="project-card">
+                <div class="project-card stacked">
                     <a href="./FrontendMentor/newbie/four-card-feature-section/">
                         <img class="card__img" src="./screenshots/fem-newbie-four-card-feature-section.jpeg" alt="Four Card Feature Section Challenge from FrontendMentor">
                     </a>
                     <div class="card__content">
-                        <h3 class="card__title">Four Card Feature Section Challenge from FrontendMentor</h3>
+                        <h3 class="card__title">Four Card Feature Section</h3>
                         <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                         <ul class="card__techUsed">
                             <li>HTML</li>
@@ -84,12 +88,12 @@
                     </div>
                 </div>
 
-                <div class="project-card">
+                <div class="project-card stacked">
                     <a href="./FrontendMentor/newbie/article-preview-component/">
                         <img class="card__img" src="./screenshots/fem-newbie-article-preview-component.jpeg" alt="Article Preview Component Challenge from FrontendMentor">
                     </a>
                     <div class="card__content">
-                        <h3 class="card__title">Article Preview Component Challenge from FrontendMentor</h3>
+                        <h3 class="card__title">Article Preview Component</h3>
                         <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                         <ul class="card__techUsed">
                             <li>HTML</li>
@@ -98,12 +102,12 @@
                     </div>
                 </div>
 
-                <div class="project-card">
+                <div class="project-card stacked">
                     <a href="./FrontendMentor/newbie/stats-preview-card-component/">
                         <img class="card__img" src="./screenshots/fem-newbie-stats-preview-card-component.jpeg" alt="Stats Preview Card Component Challenge from FrontendMentor">
                     </a>
                     <div class="card__content">
-                        <h3 class="card__title">Stats Preview Card Component Challenge from FrontendMentor</h3>
+                        <h3 class="card__title">Stats Preview Card Component</h3>
                         <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                         <ul class="card__techUsed">
                             <li>HTML</li>
@@ -112,12 +116,12 @@
                     </div>
                 </div>
 
-                <div class="project-card">
+                <div class="project-card stacked">
                     <a href="./FrontendMentor/newbie/profile-card-component/">
                         <img class="card__img" src="./screenshots/fem-newbie-profile-card-component.jpeg" alt="Profile Card Component Challenge from FrontendMentor">
                     </a>
                     <div class="card__content">
-                        <h3 class="card__title">Profile Card Component Challenge from FrontendMentor</h3>
+                        <h3 class="card__title">Profile Card Component</h3>
                         <p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                         <ul class="card__techUsed">
                             <li>HTML</li>
@@ -128,6 +132,7 @@
 
             </div>
         </div>
+        </div>
 
         <div class="projectsDiv">
             <div class="frontEndMentorChallenges">
@@ -177,7 +182,8 @@
     </main>
     <footer>
         <!-- some blurb here -->
-        <p>All projects are the work of Robert McGovern, 2020. <a href="emailto:work@tarasis.net">Email</a>, <a href="https://tarasis.net">Website/Blog</a></p>
+        <p>All projects are the work of Robert McGovern, 2020-2022. <br>
+            <a href="emailto:work@tarasis.net">Email</a>, <a href="https://tarasis.net">Website/Blog</a></p>
         <a href='http://www.heropatterns.com/'>Background SVG provided by Steve Schoger @ Hero Patterns</a>
     </footer>
 </body>