florent/pages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
e8f224c1be
pages/_pages/blog.md
CheariX 0aa3821300
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
2024-04-22 21:39:22 -03:00

5.9 KiB
Raw Blame History

layout permalink title nav nav_order pagination
default /blog/ blog true 1
enabled collection permalink per_page sort_field sort_reverse trail
true posts /page/:num/ 5 date true
before after
1 3

{% assign blog_name_size = site.blog_name | size %} {% assign blog_description_size = site.blog_description | size %}

{% if blog_name_size > 0 or blog_description_size > 0 %}

{{ site.blog_name }}

{{ site.blog_description }}

{% endif %}

{% if site.display_tags or site.display_categories %}

    {% for tag in site.display_tags %}
  • {{ tag }}
    • {% unless forloop.last %}

    •

    {% endunless %} {% endfor %} {% if site.display_categories.size > 0 and site.display_tags.size > 0 %}

    •

    {% endif %} {% for category in site.display_categories %}
  • {{ category }}
    • {% unless forloop.last %}

    •

    {% endunless %} {% endfor %}
{% endif %}

{% assign featured_posts = site.posts | where: "featured", "true" %} {% if featured_posts.size > 0 %}

{% assign is_even = featured_posts.size | modulo: 2 %}
{% for post in featured_posts %}

{{ post.title }}

{{ post.description }}

                {% if post.external_source == blank %}
                  {% assign read_time = post.content | number_of_words | divided_by: 180 | plus: 1 %}
                {% else %}
                  {% assign read_time = post.feed_content | strip_html | number_of_words | divided_by: 180 | plus: 1 %}
                {% endif %}
                {% assign year = post.date | date: "%Y" %}

                <p class="post-meta">
                  {{ read_time }} min read &nbsp; &middot; &nbsp;
                  <a href="{{ year | prepend: '/blog/' | prepend: site.baseurl}}">
                    <i class="fa-solid fa-calendar fa-sm"></i> {{ year }} </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
  {% endfor %}
  </div>
</div>
<hr>

{% endif %}

    {% if page.pagination.enabled %}
  {% assign postlist = paginator.posts %}
{% else %}
  {% assign postlist = site.posts %}
{% endif %}

{% for post in postlist %}

{% if post.external_source == blank %}
  {% assign read_time = post.content | number_of_words | divided_by: 180 | plus: 1 %}
{% else %}
  {% assign read_time = post.feed_content | strip_html | number_of_words | divided_by: 180 | plus: 1 %}
{% endif %}
{% assign year = post.date | date: "%Y" %}
{% assign tags = post.tags | join: "" %}
{% assign categories = post.categories | join: "" %}

<li>

    {% if post.thumbnail %}

    {% endif %}

    {% if post.redirect == blank %} {{ post.title }} {% elsif post.redirect contains '://' %} {{ post.title }} {% else %} {{ post.title }} {% endif %}

    {{ post.description }}

    {{ read_time }} min read   ·   {{ post.date | date: '%B %d, %Y' }} {% if post.external_source %}   ·   {{ post.external_source }} {% endif %}

    {{ year }} 

          {% if tags != "" %}
      &nbsp; &middot; &nbsp;
        {% for tag in post.tags %}
        <a href="{{ tag | slugify | prepend: '/blog/tag/' | prepend: site.baseurl}}">
          <i class="fa-solid fa-hashtag fa-sm"></i> {{ tag }}</a> &nbsp;
          {% endfor %}
      {% endif %}

      {% if categories != "" %}
      &nbsp; &middot; &nbsp;
        {% for category in post.categories %}
        <a href="{{ category | slugify | prepend: '/blog/category/' | prepend: site.baseurl}}">
          <i class="fa-solid fa-tag fa-sm"></i> {{ category }}</a> &nbsp;
          {% endfor %}
      {% endif %}
</p>

    {% if post.thumbnail %}

    image
    {% endif %} 
    {% endfor %}

{% if page.pagination.enabled %} {% include pagination.liquid %} {% endif %}