Space Groteskのセルフホスト、カードのフリップスタイル追加

[git-hub-tomosan]

@osgsm
@akiya64

以下の対応が含まれます

• importの並び替え
• Space Groteskフォントのセルフホスト
• カードのhoverスタイルを追加
• カード裏のスタイルにShikiを適用

ご確認をよろしくお願いします

[cloudflare-workers-and-pages]

Deploying hyacker with    Cloudflare Pages

Latest commit:	f776750
Status:	✅  Deploy successful!
Preview URL:	https://299b4674.hyacker.pages.dev
Branch Preview URL:	https://tomo-dev.hyacker.pages.dev

View logs

[osgsm]

@git-hub-tomosan

追加でプッシュいただいた df7ead0 分以外の箇所のレビューです。

カードについて

• キーボードフォーカス時にカードにフォーカスリングを表示できるとうれしい
• スクロール可能を示唆する上方向のマスクがない
• フリップの動き → アニメーション周りを調整予定なのでそのときに解決
  • フリップ中にホバーの動きが走ることがあるので、JS を使ってフリップのタイミングを制御したりが必要かも
  • 回転中にカードの角がほかの要素に隠れることがあるので、回転中は z-index を上げるとかで対応できないか
• Copy ボタンは <button> を使う → 話し合いの結果 div でいくことに
  • カード自体が <a> でラップされているためマークアップも要変更

「回答」の抽出について

• 表記揺れが起きてもいいように、回答という文字にマッチした見出しではなく、最初の見出しの内容を取得などがよさそう

[akiya64]

いいと思います。
一点だけ、不具合ありましたので確認願います。

[git-hub-tomosan]

@osgsm
@akiya64

• カードの回転アニメーションを、hoverで拡大→回転→元のサイズに戻る、に調整しました

ご確認をよろしくお願いします

[osgsm]

@git-hub-tomosan cc. @akiya64
回転アニメーションいいですね！
次のことが実現できると、よりよくなりそうだと感じました。

• アニメーションが「拡大」→「回転」→「縮小」で分離されている感じがあるのを調整
  • 拡大終了を待って回転するのではなく、拡大しながら回転する
  • 縮小のアニメーションも回転が完全に終わる前に発火できるとより自然になりそう
  • 現状の動きだと機械っぽく見えてしまうかなと思いました

[git-hub-tomosan]

@osgsm
確認ありがとうございます！

「拡大終了を待って回転するのではなく、拡大しながら回転する」
こちらですが、「拡大と回転を同時に発火」という状態は想定していますか？
最初の実装は「拡大と回転を同時に発火」だったのですが、少し微妙に感じてしまい今の実装にしました。

拡大終了の手前あたりで回転を発火させる、という理解で良いでしょうか？

[osgsm]

@git-hub-tomosan
仰る通り、同時スタートではなく、タイミングをずらすイメージです！
「実際に手でカードを持ち上げて裏返して置く」動きに近づけられると自然になるかなと思ってます。