User:Rayanth/FrontpageNotes

Project: Replace front page with Agency-like interface, CSS card system

First steps:

• Determine sizes (and zoom) levels of Agency cards in-game both before and after mouse-hover
• Determine expand (& zoom) timings from in-game
  • Initial mouse-over to Begin border expansion: 75ms
  • Begin border expansion to end border expansion: 100ms
  • End border expansion to end image zooming: ~ 2820s
• replicate expand (& zoom) behavior in CSS on-wiki
  • Animations on ::hover, with keyframes for timing?

Decide which size cards to use on the wiki

Templatize the cards so they can be used more easily

• Template variables:
  • Image
  • Title
  • Detail Text
  • Page-link

Notes

Timings of hover & zoom, initial findings: ~ 75ms after mousehover before border expansion begins
~ 100ms to accomplish border expansion
~ 2825s to finish zooming background image in after border expansion
Total: about 3 seconds (2825+100+75 = 3000ms) to accomplish the full sequence.
Keyframes triggered on ::hover
0 = resting state, lasts 75ms
1 = border fully expanded, background image also expanded same amount, lasts 100ms
2 = background image fully expanded, lasts 2825ms
Mouse-out resets state to 0.

For Mobile:
JS to switch target link, so first tap on card triggers the expansion & zoom, second tap goes to page? Is that intuitive enough, or would user expect second tap to shrink the card again?