/* Article欄のカード：クエストボード風 css/theme.css の .card01 / .card02 / .card03 を上書きする。 theme.css はカード定義が6つのメディアクエリブロックに重複しているため、 本ファイルを最後に読み込ませ、同じ詳細度で後勝ちさせる方式にしている。 （index.html の で theme.css より後に読み込むこと） 角丸・ぼかし影・パステル配色をやめ、暗色パネル＋白の硬い枠に統一する。 カテゴリは「クエスト種別タグ」、日付は「発令日プレート」として扱う。 */ :root { --quest-dark: #212529; --quest-panel: rgba(33, 37, 41, 0.92); --quest-line: #fff; --quest-green: #92cc41; --quest-yellow: #f7d51d; --quest-blue: #209cee; --quest-red: #e76e55; } /* ===== カード本体（クエストの掲示） ===== */ .card01, .card02, .card03 { border-radius: 0; border: 4px solid var(--quest-line); background-color: var(--quest-dark); /* ぼかしなしの硬い影 */ box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45); } /* 選択中のクエストのように枠が光る */ .card01:hover, .card02:hover, .card03:hover { border-color: var(--quest-yellow); } /* ===== 画像領域 ===== */ .card01 .photo, .card02 .photo, .card03 .photo { border-radius: 0; background-color: var(--quest-dark); } /* なめらかな拡大をやめ、レトロな即時切り替えにする */ .card01 .photo img, .card02 .photo img, .card03 .photo img { transition: none; } .card01:hover .photo img, .card02:hover .photo img, .card03:hover .photo img { transform: none; opacity: 0.45; } /* ===== 発令日プレート（日付バッジ） ===== */ .card01 .photo .details, .card02 .photo .details, .card03 .photo .details { border-radius: 0; border: 3px solid var(--quest-line); background-color: var(--quest-dark); color: var(--quest-line); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); } /* ===== 説明パネル ===== */ .card01 .description, .card02 .description, .card03 .description { background-color: var(--quest-panel); border-top: 3px solid var(--quest-line); color: var(--quest-line); } /* ===== タイトル（クエスト名） ===== */ /* 文字数に関わらず必ず1行に収める。 収まらない分は末尾を「…」で自動的に省略するため、 タイトルの長さを手動で調整する必要はない */ .card01 .description h1, .card02 .description h1, .card03 .description h1 { color: var(--quest-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* theme.css の指定（広い画面 1.4em／狭い画面 2.4em）だと省略が多発するため、 収まるサイズまで下げる。上の text-overflow は長いタイトル用の保険として残る */ @media screen and (min-width: 1051px) { .card01 .description h1, .card02 .description h1, .card03 .description h1 { font-size: 1.3em; } } /* 狭い画面ではカードが記事欄の全幅になり、使える幅が画面幅に比例して変わる。 固定サイズだとスマートフォンで省略が多発するため、画面幅に追従させる （最小1.1em／最大1.6em の範囲で 4vw に連動） */ @media screen and (max-width: 1050px) { .card01 .description h1, .card02 .description h1, .card03 .description h1 { font-size: clamp(1.1em, 4vw, 1.6em); } } .card01 .description h1 a, .card02 .description h1 a, .card03 .description h1 a { color: var(--quest-line); } /* 選択カーソル風のマーカー */ .card01 .description h1 a::before, .card02 .description h1 a::before, .card03 .description h1 a::before { content: "\25B6"; color: var(--quest-yellow); /* マーカーとタイトルの間隔 */ margin-right: 0.45em; } .card01:hover .description h1 a, .card02:hover .description h1 a, .card03:hover .description h1 a { color: var(--quest-yellow); } /* ===== 本文・メタ情報（暗色背景で読めるよう明色にする） ===== */ /* 本文は

のため theme.css の `#theme p { color: dimgrey }`（ID詳細度）に負ける。 #theme を付けて詳細度を上げている */ #theme .card01 .description .text, #theme .card02 .description .text, #theme .card03 .description .text { color: #d7dde0; } .card01 .description .meta, .card02 .description .meta, .card03 .description .meta { color: #9fb0b5; } .card01 .description .meta a, .card02 .description .meta a, .card03 .description .meta a { color: #9fb0b5; } /* アイコンは Font Awesome、文字は Press Start 2P と別フォントのため、 同じ文字サイズでもベースラインがずれてアイコンが2px下がって見える。 その分だけ持ち上げて文字と揃える */ .card01 .description .meta i, .card02 .description .meta i, .card03 .description .meta i { position: relative; top: -2px; } /* ===== クエスト種別タグ（カテゴリ） ===== */ .card01 .description .category, .card02 .description .category, .card03 .description .category, .card01 .description .category2, .card02 .description .category2, .card03 .description .category2, .card01 .description .category3, .card02 .description .category3, .card03 .description .category3, .card01 .description .category4, .card02 .description .category4, .card03 .description .category4 { top: -28px; border-radius: 0; border: 3px solid var(--quest-line); border-bottom: none; padding: 5px 9px; font-family: "Press Start 2P", cursive; font-size: 10px; line-height: 1.2; } /* 種別ごとに色を変える */ .card01 .description .category, .card02 .description .category, .card03 .description .category { background-color: var(--quest-green); color: var(--quest-dark); } .card01 .description .category2, .card02 .description .category2, .card03 .description .category2 { background-color: var(--quest-yellow); color: var(--quest-dark); } .card01 .description .category3, .card02 .description .category3, .card03 .description .category3 { background-color: var(--quest-blue); color: var(--quest-line); } .card01 .description .category4, .card02 .description .category4, .card03 .description .category4 { background-color: var(--quest-red); color: var(--quest-line); }