dustin
/
dustin.web
1
0
Fork 0
Code Pull Requests Releases Activity

projects: Improve project card style 

Possibly the main reason I haven't published the _Projects_ section of
my website, despite having worked on it for several years, is I never
felt good about how the cards on the index page looked.  I think this
new style looks _much_ better, to the point where I'm thinking about
publishing it finally!
master
Dustin 2025-08-25 22:21:38 -05:00
parent 62c4477478
commit 84aee99b4e
2 changed files with 39 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
sass/style.scss
View File

@ -353,7 +353,6 @@ article.post .post-date {
width: 100%;
background-color: $panel-color-dark;
margin: 0.75em;
padding: 0 0.75em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@ -376,14 +375,24 @@ article.post .post-date {
.project-card a {
text-decoration: none;
display: flex;
flex-direction: column;
}
.project-card h2 {
text-align: center;
margin: 0.75em;
font-size: 1.1em;
}
.project-card img {
max-width: 100%;
width: 100%;
aspect-ratio: 640 / 480;
object-fit: cover;
}
.project-card p {
margin: 0.75em;
}
/* CV */

52
templates/projects.html
View File

@ -1,37 +1,41 @@
{% extends "base.html" %}
{% macro project_card(path, permalink, title, description, image_path) %}
<div class="project-card">
<a href="{{ permalink }}">
{% if image_path is defined %}
{% set image = resize_image(path=image_path, width=640, height=480, op="fit") %}
<img src="{{ image.url }}" />
{% else %}
<img src="//picsum.photos/seed/{{ path | slugify }}/320/240" />
{% endif %}
<h2>{{ title }}</h2>
<p>{{ description }}</p>
</a>
</div>
{% endmacro %}
{% block content %}
<article class="post panel">
<h1 class="post-title">{{ section.title }}</h1>
{{ section.content | safe }}
<div class="project-cards">
{% for path in section.subsections %}
<div class="project-card">
{% set sect = get_section(path=path) %}
<a href="{{ sect.permalink }}">
<h2>{{ sect.title }}</h2>
{% if sect.extra.image is defined %}
{% set image = resize_image(path=sect.extra.image, width=640, height=480, op="fit") %}
<img src="{{ image.url }}" />
{% else %}
<img src="//picsum.photos/seed/{{ path | slugify }}/320/240" />
{% endif %}
<p>{{ sect.description }}</p>
</a>
</div>
{{ self::project_card(
path=path,
permalink=sect.permalink,
title=sect.title,
description=sect.description,
image_path=sect.extra.image,
) }}
{% endfor %}
{% for page in section.pages %}
<div class="project-card">
<a href="{{ page.permalink }}">
<h2>{{ page.title }}</h2>
{% if page.extra.image is defined %}
{% set image = resize_image(path=page.extra.image, width=640, height=480, op="fit") %}
<img src="{{ image.url }}" />
{% else %}
<img src="//picsum.photos/seed/{{ page.path | slugify }}/320/240" />
{% endif %}
<p>{{ page.description }}</p>
</a>
</div>
{{ self::project_card(
path=page.path,
permalink=page.permalink,
title=page.title,
description=page.description,
image_path=page.extra.image,
) }}
{% endfor %}
</div>
</article>