# Edelweiss website feedbacks

<div style="margin-top:100px"></div>

## Layout
Overall layout looks good.
The videos are well integrated.

Some important details are still missing:

### <SplitPage/>, spacing values & breakpoints:

The spacing values have been specified in the website document [(Edelweiss website - Final.pdf)](http://josephm.fr/hk/edelweiss/Edelweiss-website-Final.pdf).
"Text" pages and "Image" pages do not have the same spacing values (this is intended to avoid too strong symmetry between right and left pages)
<p style="padding:32px 128px; background:#ddd; text-align:center; font-size:.75em">
<img src="https://i.imgur.com/okapdJ7.jpg">
<span style="display:inline-block; padding:8px 0 32px 0;">
Spacing values <a href="http://josephm.fr/hk/edelweiss/Edelweiss-website-Final.pdf">(Edelweiss website - Final.pdf)</a>
</span>
</p>

Four different values were mentionned in the document, and also implemented in the prototype [josephm.fr/hk/edelweiss/split-page/](https://josephm.fr/hk/edelweiss/split-page/).

Final implementation may differ, but here only two values (one breakpoint) seems not enough to handle viewport resolutions.

On "not-so-unusual" resolutions, texts may overflow, here is 1320 x 800 px:
<p style="padding:32px 128px; background:#ddd; text-align:center; font-size:.75em">
<img src="https://i.imgur.com/3enz5WW.jpg">
<span style="display:inline-block; padding:16px 0 0 0;">
Text overflow @ 1320 x 800 px <br>(screenshot>(screenshot from https://acc-www.edelweissbeer.com/global/en/about-us)
</span>
</p>

### <SplitPage/> + Quote
In quote, texts should appear bigger than normal texts, and also centered.
<p style="padding:32px 128px; background:#ddd; text-align:center; font-size:.75em">
<img src="https://i.imgur.com/bH1GvuY.jpg">
</p>

## Animation:
Wrapped contents should be animated, not wrappers.
To avoid tiny white spaces and overlaps to be rendered, separators, blocks should not be animated:
<p style="padding:32px 128px; background:#ddd; text-align:center; font-size:.75em">
<img src="https://i.imgur.com/9XLU5fH.jpg">
<span style="display:inline-block; padding:8px 0 32px 0;">
White spaces
</span>
<img src="https://i.imgur.com/2RLoSRw.jpg">
<span style="display:inline-block; padding:8px 0 32px 0;">
White spaces & overlaps
</span>
</p>

For a given block with a background image, is it possible not to move the block, but the image inside the block (the background only)?

---
###### tags: `HK Edelweiss`