CLARIN style

The original SCSS file and a brief description is at: https://trac.clarin.eu/changeset/5528

Improvements to be made

Presentation

1. Font sizes. Currently based on ​http://typecast.com/blog/a-more-modern-scale-for-web-typography . Seems a bit smallish, although the font size scales very well.
2. onhover effects in menu.
3. Fine-tune default number of dynamic table rows displayed (Based on screen size?).
4. Remember user-selected number of dynamic table rows displayed.
5. More sleek alignment of header cell vertical borders and the connected body cell vertical borders below them.
6. Cover more elements used in web applications, such as messages, highlights, forms.
7. Quick scan of usability for disabled, age groups.

Technical

1. Organize/automate build from SCSS to CSS.
   • Optimize, minify automatically.
   • Publish to ​https://infra.clarin.eu/content/ or some better static content delivery location in accordance with a logical versioning structure.
   • Ideally, try to explicity model the dependency of web applications on this SCSS/CSS.
2. Less use of '!important;' :find smoother ways to work around Bootstrap's defaults.
3. Add more comments.

Dieter's initial feedback

1. host a version of the roboto font on clarin.eu (avoids needless tracking by google servers)
2. * use a larger font for the body and menus
3. remove the shadows from the title, version, login, contact
4. use a darker gray (or black) for version, login, contact
5. align version and contact in the middle of the footer (vertically)
6. * compare footer text font style: Capitalized instead of UPPER CASE
7. * put the information icon left to the version number
8. slightly smaller title font (e.g. 2em instead of 3em)
9. see if we can increase the size of the CLARIN logo in the footer (similar to image used for trac.clarin.eu)
10. use a double-sized version of the logo and display it at 50%, to support high-res screens (retina + smart phones)
11. * Use the dark blue from the logo for the default link color
12. * look at using another color (same?) for links that have been clicked

*: to be discussed over physical meeting between Dieter, Sander and perhaps others.