silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
CheariX 2024-04-23 00:39:22 +00:00 committed by GitHub
parent c4c066501e
commit 0aa3821300
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 21 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_includes/projects.liquid
View File

@ -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 %}

12
_includes/projects_horizontal.liquid
View File

@ -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 %}

2
_pages/blog.md
View File

@ -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">

8
_pages/projects.md
View File

@ -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 %}

2
_projects/1_project.md
View File

@ -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

2
_projects/3_project.md
View File

@ -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

27
_sass/_base.scss
View File

@ -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;