fix(media.css): highlight text helper class for grids and heros
This commit is contained in:
parent
dc2a909b6f
commit
5290dfb73b
6 changed files with 19 additions and 16 deletions
10
package-lock.json
generated
10
package-lock.json
generated
|
@ -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": {
|
||||||
|
|
|
@ -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": {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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 -%}
|
||||||
|
|
Loading…
Reference in a new issue