Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Photo credit badges disappear into the black of invert spotlights

オープン 初心者向け
  • 何か問題がありますか？
#186 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
75/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
css, html, sass
領域
design, frontend

調査の方向性

coffee.html と index.html 内の反転スポットライト内の写真クレジットバッジを確認してください。バッジは現在インラインスタイルです。assets/sass/ 内のクラスに移動してください。2つのバリエーションを作成します：ボーダー付きの黒いピルと反転した白いピルです。デスクトップと375pxでコーヒーページ上で両方をテストし、どのセクションにどちらが適しているかを決定します。この変更により、明るい背景と暗い背景の両方でバッジが意図的に表示されるようになります。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
HTML
スター
0
フォーク
0
平均マージ
10時間 2分
マージ済み PR（30日）
41

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートなし
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

laywill/laywill.github.io のほかの issue

laywill/laywill.github.io の issue をすべて見る

似ている issue

Design の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。