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://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL2Fsc2hlZGl2YXQvYWwtZm9saW8vY29tbWl0LzxhIGhyZWY9"https://github.com/alshedivat/al-folio/assets/1998723/55ba0968-bfd9-443f-b58a-eb6723deccfc">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://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL2Fsc2hlZGl2YXQvYWwtZm9saW8vY29tbWl0LzxhIGhyZWY9"https://github.com/alshedivat/al-folio/assets/1998723/9b06b9b8-9228-4dfd-ab10-ca16ce028b1d">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://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL2Fsc2hlZGl2YXQvYWwtZm9saW8vY29tbWl0LzxhIGhyZWY9"https://github.com/alshedivat/al-folio/assets/1998723/97aaf5b4-1d3e-4a1c-8175-3a97391739b3">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://rs.http3.lol/index.php?q=aHR0cHM6Ly9naXRodWIuY29tL2Fsc2hlZGl2YXQvYWwtZm9saW8vY29tbWl0LzxhIGhyZWY9"https://github.com/alshedivat/al-folio/assets/1998723/a357fa62-8551-4e92-91d3-3d5d01dbc605">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
alshedivat · Apr 23, 2024 · 0aa3821 · 0aa3821
1 parent c4c0665
commit 0aa3821
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 40 deletions.
diff --git a/_includes/projects.liquid b/_includes/projects.liquid
@@ -1,18 +1,18 @@
-<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
           loading="eager"
           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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;