Feat/open props

[toshick]

What

• add css and open-props
  • https://open-props.style/
• add postcss-custom-media to do @media (--tablet)

sample card

desktop	mobile

上書き戦略

1. まずDesktop用のものを定義する
2. タブレット以下（--tablet）で上書き（必要な分のみ）
   タブレットのみ、ではなくタブレット以下で上書きをするので、変更しなければわざわざモバイル用の指定をしなくてもよい
3. 必要であればスマホ以下（--mobile）で上書き

マージンなど

--unitを利用して8の倍数で設定していく

• calc(var(--unit) * 2) = 16px
• calc(var(--unit) * 0.5) = 4px

Issue

https://github.com/orgs/vuejs-jp/projects/4/views/5?pane=issue&itemId=53182527
https://github.com/vuejs-jp/vuefes-2024-backside/issues/49

[netlify]

✅ Deploy Preview for rad-froyo-c5cd05 ready!

Name	Link
🔨 Latest commit	736523d
🔍 Latest deploy log	https://app.netlify.com/sites/rad-froyo-c5cd05/deploys/65e9a3df3dcd230008941ed8
😎 Deploy Preview	https://deploy-preview-21--rad-froyo-c5cd05.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jiyuujin]

LGTM