Files & prototypes

Hover states can be check in the prototypes links above

Fluid responsive

As the browser viewport changes size, we want the design to scales with it.

Doc on the concept https://finsweet.com/client-first/docs/fluid-responsive

Example of website on the same system https://baltic-watches.com/

https://www.chateau-palmer.com/en

Demo

<aside> 🖼️

https://supaw-style-guide.webflow.io/

</aside>

If you refer to the link above about fluid responsive here our parameters in the demo

  html { font-size: calc(0.625rem + 0.41666666666666663vw); }
  @media screen and (max-width:1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
  @media screen and (max-width:1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
  @media screen and (max-width:479px) { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } }

Capture d’écran 2024-10-17 à 12.33.02.png

Font sizes