From 9717c2c3329095edca9d2f3875f782d37e95ce6e Mon Sep 17 00:00:00 2001
From: Cameron Cordes <cameronc.dev@gmail.com>
Date: Sun, 30 Aug 2020 20:58:44 -0400
Subject: [PATCH] Use CSS Grid layout for projects

---
 src/app/projects/projects.component.css  | 30 ++++++++++++++++++++----
 src/app/projects/projects.component.html | 12 ++++++----
 src/styles.css                           |  2 +-
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/app/projects/projects.component.css b/src/app/projects/projects.component.css
index a6cbdee..dab4089 100644
--- a/src/app/projects/projects.component.css
+++ b/src/app/projects/projects.component.css
@@ -1,6 +1,28 @@
-@media (max-width: 768px) {
-  img {
-    max-width: 40%;
-    margin: 0 0 1em 0;
+.grid {
+  display: grid;
+  grid-gap: 1em;
+  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr) );
+  align-content: start;
+  margin: 1rem;
+}
+
+:host /deep/ a {
+  color: var(--nord13);
+}
+
+:host /deep/ a:hover {
+  color: var(--nord11);
+  -webkit-transition: color 300ms;
+  -moz-transition: color 300ms;
+  -ms-transition: color 300ms;
+  -o-transition: color 300ms;
+  transition: color 300ms;
+  text-decoration: none;
+}
+
+@media(max-width: 576px) {
+  .grid {
+    grid-template-columns: 1fr;
+    margin: 0.5rem;
   }
 }
diff --git a/src/app/projects/projects.component.html b/src/app/projects/projects.component.html
index f6fad9e..a8866b1 100644
--- a/src/app/projects/projects.component.html
+++ b/src/app/projects/projects.component.html
@@ -1,9 +1,11 @@
-<div class="row">
-  <div class="col col-lg-6 col-md-9 text-center mx-auto mt-5">
-    <div class="mb-5" *ngFor="let project of projects">
+<div class="row dark-bg h-100">
+  <div class="grid">
+    <div *ngFor="let project of projects"
+      class="text-center shadow d-flex flex-column justify-content-around p-3 h-100"
+      style="background-color: var(--nord1)">
+      <img *ngIf="project.imgLocation" src={{project.imgLocation}} class="mx-auto mb-3 w-25" alt="{{project.title}} icon">
       <h4>{{project.title}}</h4>
-      <img *ngIf="project.imgLocation" src={{project.imgLocation}} class="w-25" alt="{{project.title}} icon">
-      <p class="subtitle" style="margin: 0">{{project.applicationType}}</p>
+      <span class="subtitle">{{project.applicationType}}</span>
       <p class="thin-subtitle" [innerHTML]="project.description | projectKeyword"></p>
     </div>
   </div>
diff --git a/src/styles.css b/src/styles.css
index 7a33d0f..3d972eb 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -21,7 +21,7 @@ html, body {
   background-color: var(--nord0);
 }
 
-.dark-bg span, .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg p {
+.dark-bg span, .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg p {
   color: var(--nord4);
 }