-
-
-

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?

-
    -
  • -
-
-
-
-