Slider Plugin needs fixing.

[programnoir]

Okay, so let's see if I can properly put this into words...

So, the nice-looking special effect where we have four images sliding to the left every now and then is going to be referred to, as a whole (contained in a wrapper) as the Slider Plugin. I'll just refer to its width:height ratio as its ratio, typically being 2:1.

First issue (easy, and I think it was implemented before), the Slider Plugin seems to have no background color of its own. That is what was making me think it stretches, vertically.

Second issue is that it is only partially handling resizing right. Currently it maintains the aspect ratio, but this causes some cosmetic issues when the browser is at certain sizes.

Case 1: If the browser window is resized appropriately, it's possible for the Slider Plugin to fit perfectly within the site so that there is no space between the bottom of the Slider Plugin and the bottom of the browser window (the footer is underneath, and you'd have to scroll to reach it). This is what the site should look like at all times, even when resizing, except for the other case.

Case 2: If the browser window is resized in portrait-like dimensions, y'know, so that the width being smaller than the example above would need to work, it causes the height of the Slider Plugin to decrease, creating space between it and the bottom of the site. Text and the footer would go in that space, so it's entirely okay here.

Case 3: If the browser window is too large, the Slider Plugin starts "clipping" through the bottom of the browser window. We can fix this by limiting the max width of the Slider Plugin (calculated according to the user's browser window height dimension). This would allow case 1 to be fulfilled except that it creates horizontal space to the right of the Slider Plugin. How do we fix this?

We fix this by introducing the Sidebar (for navigation). When the size gets large, we start including the Sidebar and adjust its width to make up the remaining space. That's why it's good for the logo and some text to go in that area. We'll see how it works, it should look good for most sensibly-oriented monitors and at least function correctly for all monitors.

so, to represent it with text

Perfect size:
+-----------------------+
|[][]|
|[][]|
+-----------------------+

Large size:
+---------------------------+
|[][]|
|[][]|
+---------------------------+

Small size:
+------------+
|[______][]|
|texttextte[]|
|texttextte[]|
|footerfoo[]|
+------------+

I hope that comes out right...

[programnoir]

So, basically, on the left, conditionally resizable content, scrollable. On the right, navigation, conditionally resizable and non-scrolling.