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%; width: 100%;
background-color: $panel-color-dark; background-color: $panel-color-dark;
margin: 0.75em; 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); 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); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
} }
@ -376,14 +375,24 @@ article.post .post-date {
.project-card a { .project-card a {
text-decoration: none; text-decoration: none;
display: flex;
flex-direction: column;
} }
.project-card h2 { .project-card h2 {
text-align: center; text-align: center;
margin: 0.75em;
font-size: 1.1em;
} }
.project-card img { .project-card img {
max-width: 100%; width: 100%;
aspect-ratio: 640 / 480;
object-fit: cover;
}
.project-card p {
margin: 0.75em;
} }
/* CV */ /* CV */

52
templates/projects.html
View File

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