Stephan Heunis
4780157f76
All checks were successful
Deploy on webserver / Build site and deploy on success (push) Successful in 1m27s
The goal of this change is to deduplicate all custom templates that are in use for taxonomy pages.
This commit defines the entrypoint for any taxonomy list page to be the 'layouts/taxonomy.html' template,
and removes all taxonomy-specific templates (e.g. 'layouts/publications/taxonomy.html'). Per-taxonomy
page customization are now handled via new partials and with front matter configuration via 'params'.
Any given taxonomy list page can now be customized to do the following:
- show all terms vs only terms that have a metadata-generated '_index.md' page (via '.Params.title')
- list items in a grid vs list items vertically
- include vs exclude filtering functionality (inclusion assumes the vertical list layout)
- specify which filter fields to use (e.g. 'kind', 'topic', 'year'), if filtering functionality is active
- specify which fields to include in the text search functionality, if filtering functionality is active
Customization happens in the '_index.md' page of any given taxonomy content directory.
For example 'content/publications/_index.md':
---
title: Publications
params:
list_variant: vertical # grid (default) | vertical (if filter == true, list_variant is set to vertical)
items: generated # generated (default) | all
filter: true # false (default) | true
filter_fields: # no default
- kind
- topic
- year
search_fields: # default: kind, topic, year, author, title
- kind
- topic
- year
- author
- title
---
And partials are then rendered based on this configuration.
Main configuration introduced with this commit:
- persons: grid view (default)
- objectives: grid view (default)
- projects: grid view (default)
- publications: filter view
- datasets: filter view
- instruments: filter view
The main repo README is updated with a description of this configuration and template pattern
TODO:
- add some partials for the parts that are displayed on a list item (e.g. the list of authors, the topics,
the icon-links, etc); and perhaps also configuration variables for their inclusion/exclusion
- Improved logic for selecting depictions; the current depiction registration workflow registers files
with names derived from the depiction kind, e.g. 'logo.png' or 'portrait.webp'. These are generally for
different purposes, and the logic might want to prefer a specific kind for a specific taxonomy, e.g.
'portrait' for 'persons', or 'logo' for 'instrument'.
- Update filtering-related code to make better use of hugo templating functionality; some aspects are still
hardcoded, e.g. 'data-*' for setting the list-item data values.
- Apply similar improvements to the 'term.html' template as done above for 'taxonomy.html'
86 lines
No EOL
1.7 KiB
CSS
86 lines
No EOL
1.7 KiB
CSS
/* Grid */
|
|
.items-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Card */
|
|
.item-card {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(0,0,0,0.07);
|
|
background: #fff;
|
|
transition: box-shadow 0.2s, transform 0.2s;
|
|
}
|
|
.item-card:hover {
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
html.dark .item-card {
|
|
background: #242424;
|
|
border-color: rgba(255,255,255,0.07);
|
|
}
|
|
html.dark .item-card:hover {
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.item-depiction {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
overflow: hidden;
|
|
background: #e8e8e8;
|
|
}
|
|
html.dark .item-depiction { background: #333; }
|
|
.item-depiction img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
.item-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #aaa;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
#ddd,
|
|
#ddd 10px,
|
|
#e8e8e8 10px,
|
|
#e8e8e8 20px
|
|
);
|
|
}
|
|
html.dark .item-placeholder {
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
#2a2a2a,
|
|
#2a2a2a 10px,
|
|
#333 10px,
|
|
#333 20px
|
|
);
|
|
color: #555;
|
|
}
|
|
|
|
.item-title {
|
|
padding: 0.6rem 0.75rem;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.items-grid { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.items-grid { grid-template-columns: repeat(2, 1fr); }
|
|
} |