Refactor Layout

[mxklb]

The layout should be always maximum possible rectangle in landscape and portrait mode. Distance from header font to logo and fotter font shall always be constant.

[smnwndrr]

Did a refactor according to specs on my repo: http://smnwndrr.github.io/masimapage/

Refactor comes with a gulpfile, scss and browser-sync!

Please review, if good i will make a pull request!

[mxklb]

Please make sure to write down build instructions and to list all dependencies for a successful build on a plain OS within the readme. Make sure that anybody how is not confirm with gulp, scss and browser-sync (i've never heard of it) is able to build the page as suspected. This should at least be described for Linux and OSX build machines. Without this info it's impossible for me to review your changes.

The missing information shall contain something like (build dependencies):

sudo apt-get install xyz abc ght

and build instructions:

gulp build ..

[smnwndrr]

I'll update the readme soon!

But I don't think i will include specific OS instructions. I'll write a list of required packages e.g. npm and refer to their installation instructions.

[mxklb]

nice

[mxklb]

Thanks for the instructions!

First of all: Every thing went flawlessly. So I can confirm that the instructions in the readme will succeed at least on ubuntu 14.04. So I was able to run gulp successfully without any issues!

Nevertheless this was a major change addressing our dev workflow and tooling but just slightly addressing this issue. So finally in my minimal reworked layout (dbe4449) it does still not behave as expected. We should talk about this and work it out these days together ..

[smnwndrr]

I don't know what you did, but somehow my changes don't reflect in your commit.

If you compare: http://smnwndrr.github.io/masimapage/ to http://mxklb.github.io/masimapage/ you'll notice the differences!

Small aside: Removal of padding-top caused logo to overlay headline, we should also avoid useage of negative margins. Please inspect sizes of all elements before changing. The gap between footer and logo was caused by padding inside the svg. Removed it, and changed bottom border.

[mxklb]

What's the problem with the diff of my pull request Build Instructions, SI-Font Change? You should clearly see all changes and further commits I did. I think this is more clear now according to our meeting today.

Finally to sum up the desired behaviour:

• Header, Logo and Footer shall always have same proportions/scale to each other.
• Header, Logo, Footer combo shall always be scaled to the maximum rectangle of the viewport (*)
• The maximum rectangle shall always be aligned in the middle (portrait: vertical, landscape: horizontal)

(*) Maybe using the full max rectangle may be to much - ugly: just blowing the visitor out of its chair. So finally it will be some percentage, for example always 80% of the rectangle, of it (this is design decision tbd).

[smnwndrr]

Sorry forgot to incorporate this issue in the commit, 207a77fdb6202860b973d7f6ca9dc1f5bed1602e should solve this issue. Be aware some commits before I changed the gulp deployment system.

[mxklb]

The sizes and distances of the logo and fonts on your actual gh-page HEAD commit (dff35fc) are still different than desired. Please have a look at my actual HEAD gh-page. There you'll c that the logo needs to be smaller, font sizes look correct but distances to the logo may be slightly different. It would be nice if you could scale the logo to nearly look like my actual gh-page (d575ef2), thank you!

Also is looks like the whole header-footer-logo combo is aligned not exactly in the middle while being closer to the bottom than to the top. This should be centred or at least be the opposite, a little more closer to the top. Nevertheless maybe we should do this final layout steps together within a small pair programming session .. tbd

[mxklb]

Please have a look at my latest commit (5ceb092) I think this is a good solution for the vertical layout alignment. Actually the header font is also changed within (c3e70c5).

What do you think about the header font? Shall we use the fancy-strange /\/#\sI/\/#\ signs or the plain 'Ruslan Display' font as actually on my gh-pages?

[smnwndrr]

Yes you did it!