From 72ae001fd378026c7084ef33fb8920ff2445aff1 Mon Sep 17 00:00:00 2001
From: CheariX <CheariX@users.noreply.github.com>
Date: Tue, 23 Apr 2024 00:39:22 +0000
Subject: [PATCH] Feat reworked project layout (closing #2246) (#2357)

The current state of project looks a bit unharmonized.

# Vertical layout before:

<img width="834" alt="Bildschirmfoto 2024-04-20 um 18 09 16"
src="https://github.com/alshedivat/al-folio/assets/1998723/55ba0968-bfd9-443f-b58a-eb6723deccfc">

# Vertical layout after:

<img width="834" alt="Bildschirmfoto 2024-04-20 um 18 10 28"
src="https://github.com/alshedivat/al-folio/assets/1998723/9b06b9b8-9228-4dfd-ab10-ca16ce028b1d">

# Horizontal layout before:

<img width="834" alt="Bildschirmfoto 2024-04-20 um 18 08 54"
src="https://github.com/alshedivat/al-folio/assets/1998723/97aaf5b4-1d3e-4a1c-8175-3a97391739b3">

# Horizontal layout after:

<img width="834" alt="Bildschirmfoto 2024-04-20 um 18 07 46"
src="https://github.com/alshedivat/al-folio/assets/1998723/a357fa62-8551-4e92-91d3-3d5d01dbc605">

***

These improvements are not perfect, but to be honest, I have no deep
experiences with bootstrap. Actually, I just read the
[docs](https://getbootstrap.com/docs/4.4/components/card/) and tried my
best.
But I think it looks way better than before.

I'm pretty happy with the vertical layout, but the horizontal could be
improved.
I tried various things to get a better alignment of the image, without
any success.
In theroy, there is e.g. `card-img-top`, but I could not make it work.

I changed the project descriptions to make some of these edge-cases
visible.

Feedback and improvements (especially code) are more than welcome

Closes #2246
---
 _includes/projects.liquid            |  8 ++++----
 _includes/projects_horizontal.liquid | 12 ++++++------
 _pages/blog.md                       |  2 +-
 _pages/projects.md                   |  8 ++++----
 _projects/1_project.md               |  2 +-
 _projects/3_project.md               |  2 +-
 _sass/_base.scss                     | 27 ++++-----------------------
 7 files changed, 21 insertions(+), 40 deletions(-)

diff --git a/_includes/projects.liquid b/_includes/projects.liquid
index 926ad1e7da39..0ada935d291a 100644
--- a/_includes/projects.liquid
+++ b/_includes/projects.liquid
@@ -1,7 +1,6 @@
-<div class="grid-sizer"></div>
-<div class="grid-item">
+<div class="col">
   <a href="{% if project.redirect %}{{ project.redirect }}{% else %}{{ project.url | relative_url }}{% endif %}">
-    <div class="card hoverable">
+    <div class="card h-100 hoverable">
       {% if project.img %}
         {%
           include figure.liquid
@@ -9,10 +8,11 @@
           path=project.img
           sizes = "250px"
           alt="project thumbnail"
+          class="card-img-top"
         %}
       {% endif %}
       <div class="card-body">
-        <h2 class="card-title text-lowercase">{{ project.title }}</h2>
+        <h2 class="card-title">{{ project.title }}</h2>
         <p class="card-text">{{ project.description }}</p>
         <div class="row ml-1 mr-1 p-0">
           {% if project.github %}
diff --git a/_includes/projects_horizontal.liquid b/_includes/projects_horizontal.liquid
index b0f12b4c8907..8630e69e1d72 100644
--- a/_includes/projects_horizontal.liquid
+++ b/_includes/projects_horizontal.liquid
@@ -1,15 +1,15 @@
-<div class="card-item col">
+<div class="col mb-4">
   <a href="{% if project.redirect %}{{ project.redirect }}{% else %}{{ project.url | relative_url }}{% endif %}">
-    <div class="card hoverable">
-      <div class="row g-0">
+    <div class="card h-100 hoverable">
+      <div class="row no-gutters">
         {% if project.img %}
-          <div class="card-img col-md-6">
-            {% include figure.liquid loading="eager" path=project.img sizes="(min-width: 768px) 156px, 50vw" alt="project thumbnail" %}
+          <div class="col-md-6">
+            {% include figure.liquid loading="eager" path=project.img sizes="(min-width: 768px) 156px, 50vw" alt="project thumbnail" class="card-img" %}
           </div>
         {% endif %}
         <div class="{% if project.img %}col-md-6{% else %}col-md-12{% endif %}">
           <div class="card-body">
-            <h3 class="card-title text-lowercase">{{ project.title }}</h3>
+            <h3 class="card-title">{{ project.title }}</h3>
             <p class="card-text">{{ project.description }}</p>
             <div class="row ml-1 mr-1 p-0">
               {% if project.github %}
diff --git a/_pages/blog.md b/_pages/blog.md
index a4ae82162620..62ce6dabf9ab 100644
--- a/_pages/blog.md
+++ b/_pages/blog.md
@@ -64,7 +64,7 @@ pagination:
 {% assign is_even = featured_posts.size | modulo: 2 %}
 <div class="row row-cols-{% if featured_posts.size <= 2 or is_even == 0 %}2{% else %}3{% endif %}">
 {% for post in featured_posts %}
-<div class="card-item col">
+<div class="col mb-4">
 <a href="{{ post.url | relative_url }}">
 <div class="card hoverable">
 <div class="row g-0">
diff --git a/_pages/projects.md b/_pages/projects.md
index 183c62847a74..e19d6555648f 100644
--- a/_pages/projects.md
+++ b/_pages/projects.md
@@ -22,14 +22,14 @@ horizontal: false
   <!-- Generate cards for each project -->
   {% if page.horizontal %}
   <div class="container">
-    <div class="row row-cols-2">
+    <div class="row row-cols-1 row-cols-md-2">
     {% for project in sorted_projects %}
       {% include projects_horizontal.liquid %}
     {% endfor %}
     </div>
   </div>
   {% else %}
-  <div class="grid">
+  <div class="row row-cols-1 row-cols-md-3">
     {% for project in sorted_projects %}
       {% include projects.liquid %}
     {% endfor %}
@@ -48,14 +48,14 @@ horizontal: false
 {% if page.horizontal %}
 
   <div class="container">
-    <div class="row row-cols-2">
+    <div class="row row-cols-1 row-cols-md-2">
     {% for project in sorted_projects %}
       {% include projects_horizontal.liquid %}
     {% endfor %}
     </div>
   </div>
   {% else %}
-  <div class="grid">
+  <div class="row row-cols-1 row-cols-md-3">
     {% for project in sorted_projects %}
       {% include projects.liquid %}
     {% endfor %}
diff --git a/_projects/1_project.md b/_projects/1_project.md
index 11c41af664fd..ac87b64b2fef 100644
--- a/_projects/1_project.md
+++ b/_projects/1_project.md
@@ -1,7 +1,7 @@
 ---
 layout: page
 title: project 1
-description: a project with a background image
+description: with background image
 img: assets/img/12.jpg
 importance: 1
 category: work
diff --git a/_projects/3_project.md b/_projects/3_project.md
index ae4eecf4ea02..4f981b4d8b5c 100644
--- a/_projects/3_project.md
+++ b/_projects/3_project.md
@@ -1,6 +1,6 @@
 ---
 layout: page
-title: project 3
+title: project 3 with very long name
 description: a project that redirects to another website
 img: assets/img/7.jpg
 redirect: https://unsplash.com
diff --git a/_sass/_base.scss b/_sass/_base.scss
index c6651c94f904..de3037d7b5d5 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -164,22 +164,17 @@ ul.task-list input[type="checkbox"] {
 .card {
   background-color: var(--global-card-bg-color);
 
-  img {
+  .card-img {
     width: 100%;
+    padding-top: 1.25rem;
   }
 
   .card-title {
     color: var(--global-text-color);
   }
 
-  .card-item {
-    width: auto;
-    margin-bottom: 10px;
-
-    .row {
-      display: flex;
-      align-items: center;
-    }
+  .card-body {
+    padding: 1.25rem 1.25rem 0 1.25rem;
   }
 }
 
@@ -628,16 +623,6 @@ footer.sticky-bottom {
     }
   }
 
-  .card-item {
-    width: auto;
-    margin-bottom: 10px;
-
-    .row {
-      display: flex;
-      align-items: center;
-    }
-  }
-
   .grid-sizer,
   .grid-item {
     width: 250px;
@@ -1087,10 +1072,6 @@ nav[data-toggle="toc"] {
     }
   }
 
-  .card-item {
-    margin-bottom: 10px;
-  }
-
   .post-meta {
     color: var(--global-text-color-light);
     font-size: 0.875rem;