Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Photo credit badges disappear into the black of invert spotlights

Abierto Apto para principiantes
  • ¿Algo no está bien?
#186 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
75/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, html, sass
Área
design, frontend

Línea de trabajo

Examina la insignia de crédito de la foto en coffee.html e index.html dentro de los reflectores invertidos. La insignia actualmente es un estilo en línea; muévela a una clase en assets/sass/. Crea dos variantes: una píldora negra con borde y una píldora blanca invertida. Prueba ambas en escritorio y a 375px en la página de café para decidir cuál se adapta a cada sección. El cambio hace que la insignia sea deliberada tanto en fondos claros como oscuros.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

design

The photo credit badge is a black pill with white text and a white camera glyph. Inside an invert spotlight the section background is also black, so the pill disappears and the badge reads as a bare white name floating on the background rather than a credit.

Where it happens today:

  • coffee.html: the French press, AeroPress and Moka pot spotlights, and the book spotlight once #181's change to invert lands.
  • index.html: the one invert spotlight.

It is legible, but it is the absence of a treatment rather than a treatment. The badge should look deliberate on both backgrounds.

Proposal

Build both variants and pick per section by eye, rather than deciding on one up front:

  1. Bordered black. Keep the black pill, add a thin white (or near-white) border so it holds its shape against a black section. The badge stays one object on every background.
  2. Inverted. A white pill with black text and a black glyph, used on invert sections. Reads as the same badge in the section's own colour scheme, and matches the way the rest of the spotlight's text inverts.

Both get built, both get rendered at desktop and at 375px on the coffee page, and the choice is made from the screenshots. They are not exclusive: the bordered black may suit the banner, where the badge sits over a photo rather than a flat colour, while the inverted one suits the flat black sections.

Implementation note

The badge is currently a ~600-character inline style attribute, repeated verbatim for every credit on the site, and most pages carry one. Adding a second variant by hand means a second 600-character blob to keep in step with the first. Worth lifting the badge into a class in assets/sass/ first, with a modifier for the variant, so the markup becomes <span class="credit credit-invert"> and the two variants are defined once. That also makes the remaining decisions in #183 one-line changes instead of a find-and-replace across every page.

Related

Supersedes the "whether the black pill is the right treatment inside invert spotlights" bullet in #183, which covers making the badges consistently clickable. Split out of #181.

Lenguaje dominante
HTML
Estrellas
0
Forks
0
Merge medio
10 h 2 min
PR fusionados (30 d)
41

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Sin plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de laywill/laywill.github.io

Todos los issues de laywill/laywill.github.io

Issues similares

Más issues de Design

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.