Skip to content

Commit

Permalink
Feat reworked project layout (closing alshedivat#2246) (alshedivat#2357)
Browse files Browse the repository at this point in the history
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 alshedivat#2246
  • Loading branch information
CheariX authored and Karapost committed Jul 4, 2024
1 parent 370dc83 commit 85b0090
Show file tree
Hide file tree
Showing 6 changed files with 20 additions and 39 deletions.
8 changes: 4 additions & 4 deletions _includes/projects.liquid
Original file line number Diff line number Diff line change
@@ -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 %}
Expand Down
12 changes: 6 additions & 6 deletions _includes/projects_horizontal.liquid
Original file line number Diff line number Diff line change
@@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion _pages/blog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 4 additions & 4 deletions _pages/projects.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion _projects/3_project.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
27 changes: 4 additions & 23 deletions _sass/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 85b0090

Please sign in to comment.