+
+
+

This draft guide is to help build consistent style for Mageia.org on the Web and in the printed world. + It starts from the current charter of www.mageia.org and takes into account + several other options that are available to this day.

+ + + +
+
+ + +

Mageia official logo is Mageia logo.

+

Our logo still does not have a specific font - it would need to be forged.

+

No other logo must be used for official Mageia.org communication.

+

This logo must not be altered. We need a more comprehensive guide for it (use of cauldron alone, of "mageia" alone, availability of derivative logos and buttons for other uses).

+ +

Logo colours/gradients:

+
    +
  • white/transparent background
    • +
  • from   #252D42 to   #485E82 (letters)
    • +
  • from   #2397D4 to   #65E7FF (bubbles)
    • +
+

See /g/media/logo/ for higher resolution PNG and SVG.

+ +
+

Colours

+

Current colours scheme is a cold one, consisting of basically three major: white, black, blue.

+ + + + + + + + + + + +
ColourHex codeUsage
#ffffffbackground
#000000body text, h3
#3494d3titles: h1, h2, h3Those two should be reconciled
#2383c2links: a
orangesub-title of h1
#555555preamble text, footer text
#aaaaaatable header/footer
+
+

Web sites

+
    +
  • +

    Favicon

    +

    Our favicon is Mageia favicon. You may reference it through: + https://www.mageia.org/g/favicon.png.

    +
    • + +
  • +

    Fonts

    +

    Page body fonts rule is:

    + font-family: Verdana, "Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Tahoma, Arial, sans-serif; +
    +

    Titles (h1, h2, etc.) fonts rule is:

    + font-family: "Century Gothic", "Trebuchet MS", Arial, sans-serif; +
    • + +
  • +

    Page width and layout

    +

    Current:

    +
      +
    • www: fixed 749px, centered
      • +
    • blog: fixed 980px, centered
      • +
    • forum: fluid 100%
      • +
    • bugs: fluid 100%
      • +
    • hugs: fixed ~700px, left-aligned
      • +
    + +

    Preferred:

    +
      +
    • Preferred: fixed 980px, centered
      • +
    • Even better, using media queries: +
        +
      • desktop, large screen > 1240,1400
        • +
      • tablet
        • +
      • phone
        • +
      + (tools to test: http://quirktools.com/screenfly/) +
      • +
    +
    • + +
  • +

    Page background

    +

    Current background is built in three layers:

    + +
    • + +
  • +

    www header

    + +
    + 
    background: linear-gradient(top, #ffffff 50%, #f0f0f0);
+border-radius: 10px 10px 0 0;
+border-bottom: 1px solid #9db1ca;
+box-shadow: 0 1px 3px #9db1ca;
    +
    +

    The whole header may be redesigned along with the global nav bar: below:

    +
    • + +
  • +

    Global navigation bar

    +

    See documentation.

    +
    • + +
  • +

    Reference CSS

    +

    Our current reference CSS is based on:

    +
      +
    • YUI reset-fonts-grids CSS
      • +
    • YUI base CSS
      • +
    • our own: screen.css
      • +
    +

    This can be dramatically improved, splitting into several CSSes for reuse through mageia.org.

    +
    • +
+
+

What to do next?

+
    +
  • +
+
+
+
+