fix(media.css): highlight text helper class for grids and heros

This commit is contained in:
Cory Dransfeldt 2025-03-31 11:19:47 -07:00
parent dc2a909b6f
commit 5290dfb73b
No known key found for this signature in database
6 changed files with 19 additions and 16 deletions

10
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "1.1.7", "version": "1.1.8",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "1.1.7", "version": "1.1.8",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"minisearch": "^7.1.2", "minisearch": "^7.1.2",
@ -2948,9 +2948,9 @@
"license": "ISC" "license": "ISC"
}, },
"node_modules/luxon": { "node_modules/luxon": {
"version": "3.6.0", "version": "3.6.1",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-3.6.0.tgz", "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.6.1.tgz",
"integrity": "sha512-WE7p0p7W1xji9qxkLYsvcIxZyfP48GuFrWIBQZIsbjCyf65dG1rv4n83HcOyEyhvzxJCrUoObCRNFgRNIQ5KNA==", "integrity": "sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {

View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "1.1.7", "version": "1.1.8",
"description": "The source for my personal site. Built using 11ty (and other tools).", "description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module", "type": "module",
"engines": { "engines": {

View file

@ -35,14 +35,6 @@
left: var(--spacing-sm); left: var(--spacing-sm);
bottom: var(--spacing-sm); bottom: var(--spacing-sm);
max-width: calc(var(--sizing-full) - calc(var(--spacing-sm) * 2)); max-width: calc(var(--sizing-full) - calc(var(--spacing-sm) * 2));
color: var(--text-color-inverted);
background-color: var(--section-color, var(--accent-color));
padding: var(--spacing-xs);
border-radius: var(--border-radius-slight);
& > * {
color: var(--text-color-inverted);
}
.header, .header,
.subheader { .subheader {

View file

@ -32,3 +32,14 @@
.concerts { .concerts {
margin-top: var(--spacing-base); margin-top: var(--spacing-base);
} }
.media-highlight {
color: var(--text-color-inverted);
background-color: var(--section-color, var(--accent-color));
padding: var(--spacing-xs);
border-radius: var(--border-radius-slight);
& > * {
color: var(--text-color-inverted);
}
}

View file

@ -6,7 +6,7 @@
<a href="{{ item.grid.url }}" title="{{ alt }}"> <a href="{{ item.grid.url }}" title="{{ alt }}">
<div class="media-grid-item"> <div class="media-grid-item">
{%- if item.grid.title or item.grid.subtext -%} {%- if item.grid.title or item.grid.subtext -%}
<div class="meta-text {{ item.type }}"> <div class="meta-text media-highlight {{ item.type }}">
{% if item.grid.title %} {% if item.grid.title %}
<div class="header">{{ item.grid.title }}</div> <div class="header">{{ item.grid.title }}</div>
{% endif %} {% endif %}

View file

@ -1,6 +1,6 @@
<a href="{{ movie.url }}"> <a href="{{ movie.url }}">
<div class="watching hero"> <div class="watching hero">
<div class="meta-text highlight-text"> <div class="meta-text media-highlight">
<div class="header">{{ movie.title }}</div> <div class="header">{{ movie.title }}</div>
<div class="subheader"> <div class="subheader">
{%- if movie.rating -%} {%- if movie.rating -%}