aboutsummaryrefslogtreecommitdiffstats
path: root/en/charter.html
diff options
context:
space:
mode:
authorThomas Backlund <tmb@mageia.org>2014-10-12 12:27:45 +0300
committerThomas Backlund <tmb@mageia.org>2014-10-12 12:27:45 +0300
commit9ce6d646ff718cd62f6434c9a4c94e450436612a (patch)
tree3ee82e5db7c0aee44a5573d9d17035c6ecac697d /en/charter.html
parenta0b2d09125d7911656fe4cb286f20643c4432281 (diff)
downloadwww-9ce6d646ff718cd62f6434c9a4c94e450436612a.tar
www-9ce6d646ff718cd62f6434c9a4c94e450436612a.tar.gz
www-9ce6d646ff718cd62f6434c9a4c94e450436612a.tar.bz2
www-9ce6d646ff718cd62f6434c9a4c94e450436612a.tar.xz
www-9ce6d646ff718cd62f6434c9a4c94e450436612a.zip
Revert "Updated Estonian translation"
This reverts commit a0b2d09125d7911656fe4cb286f20643c4432281.
Diffstat (limited to 'en/charter.html')
-rw-r--r--en/charter.html165
1 files changed, 165 insertions, 0 deletions
diff --git a/en/charter.html b/en/charter.html
new file mode 100644
index 000000000..e1b0fa5b6
--- /dev/null
+++ b/en/charter.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Mageia style charter</title>
+ <meta name="description" content="Charter for Mageia">
+ <meta name="keywords" content="mageia, charter, graphic, style, design, layout, font, colours, logo, favicon, identity, web">
+ <meta name="robots" content="noindex,nosnippet,nofollow,noarchive">
+ <link rel="stylesheet" type="text/css" href="/g/style/all.css">
+ <link href="http://fonts.googleapis.com/css?family=Rock Salt&amp;subset=latin" rel="stylesheet" type="text/css">
+ <link rel="icon" type="image/png" href="/g/favicon.png">
+ <style>
+ #abtlg {
+ display: block;
+ margin: 0 auto;
+ width: 500px;
+ }
+ </style>
+
+</head>
+<body class="release about">
+ <script src="/_nav/js/"></script>
+ <h1 id="mgnavtitle"><span style="font-family: Rock Salt;">Style charter</span></h1>
+ <div id="doc" class="yui-t7">
+ <div id="bd" role="main">
+ <div class="yui-g">
+ <div class="para">
+ <p>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 <a href="//www.mageia.org/">www.mageia.org</a> and takes into account
+ several other options that are available to this day.</p>
+
+ <ul>
+ <li><a href="#mlogo">Logo</a></li>
+ <li><a href="#mcolours">Colours</a></li>
+ <li><a href="#mwww">Web sites</a></li>
+ <li><a href="#next">What's next?</a></li>
+ </ul>
+
+ <hr>
+ <div id="by-role">
+
+ <h2 id="mlogo">Logo</h2>
+ <p>Mageia official logo is <img src="/g/media/logo/mageia-2013.png" id="abtlg" alt="Mageia logo">.</p>
+ <p>Our logo still does not have a specific font - it would need to be forged.</p>
+ <p>No other logo must be used for official Mageia.org communication.</p>
+ <p>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).</p>
+
+ <p>Logo colours/gradients:</p>
+ <ul>
+ <li>white/transparent background</li>
+ <li>from <span style="background: #252D42; color: #fff; padding: 0.3em 0.6em;">&nbsp; #252D42</span> to <span style="background: #485E82; color: #fff; padding: 0.3em 0.6em;">&nbsp; #485E82</span> (letters)</li>
+ <li>from <span style="background: #2397D4; color: #fff; padding: 0.3em 0.6em;">&nbsp; #2397D4</span> to <span style="background: #65E7FF; color: #000; padding: 0.3em 0.6em;">&nbsp; #65E7FF</span> (bubbles)</li>
+ </ul>
+ <p>See <a href="/g/media/logo/">/g/media/logo/</a> for higher resolution PNG and SVG.</p>
+ </ul>
+ <hr>
+ <h2 id="mcolours">Colours</h2>
+ <p>Current colours scheme is a cold one, consisting of basically three major: white, black, blue.</p>
+ <table class="dlt2">
+ <thead><tr><th>Colour</th><th>Hex code</th><th>Usage</th></tr></thead>
+ <tbody>
+ <tr><td style="background: #ffffff"></td><td>#ffffff</td><td>background</td>
+ <tr><td style="background: #000000;"></td><td>#000000</td><td>body text, h3</td></tr>
+ <tr><td style="background: #3494d3"></td><td>#3494d3</td><td>titles: h1, h2, h3</td><td rowspan="2">Those two should be reconciled</td></tr>
+ <tr><td style="background: #2383c2"></td><td>#2383c2</td><td>links: a</td><tr>
+ <tr><td style="background: orange;"></td><td>orange</td><td>sub-title of h1</td></tr>
+ <tr><td style="background: #555555;"></td><td>#555555</td><td>preamble text, footer text</td></tr>
+ <tr><td style="background: #aaaaaa;"></td><td>#aaaaaa</td><td>table header/footer</td></tr>
+ </tbody>
+ </table>
+ <hr>
+ <h2 id="mwww">Web sites</h2>
+ <ul class="contrib-list charter">
+ <li id="favicon">
+ <h3>Favicon</h3>
+ <p>Our favicon is <img src="//www.mageia.org/g/favicon.png" alt="Mageia favicon">. You may reference it through:
+ <code>https://www.mageia.org/g/favicon.png</code>.</p>
+ </li>
+
+ <li id="fonts">
+ <h3>Fonts</h3>
+ <p>Page body fonts rule is:</p>
+ <code class="term">font-family: Verdana, "Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Tahoma, Arial, sans-serif;</code>
+ <br>
+ <p>Titles (h1, h2, etc.) fonts rule is:</p>
+ <code class="term">font-family: "Century Gothic", "Trebuchet MS", Arial, sans-serif;</code>
+ </li>
+
+ <li id="width">
+ <h3>Page width and layout</h3>
+ <p>Current:</p>
+ <ul>
+ <li><a href="//www.mageia.org/">www</a>: fixed 749px, centered</li>
+ <li><a href="//blog.mageia.org/">blog</a>: fixed 980px, centered</li>
+ <li><a href="https://forums.mageia.org/">forum</a>: fluid 100%</li>
+ <li><a href="//bugs.mageia.org/">bugs</a>: fluid 100%</li>
+ <li><a href="http://hugs.mageia.org/">hugs</a>: fixed ~700px, left-aligned</li>
+ </ul>
+
+ <p>Preferred:</p>
+ <ul>
+ <li>Preferred: fixed 980px, centered</li>
+ <li>Even better, using media queries:
+ <ul>
+ <li>desktop, large screen > 1240,1400</li>
+ <li>tablet</li>
+ <li>phone</li>
+ </ul>
+ (tools to test: http://quirktools.com/screenfly/)
+ </li>
+ </ul>
+ </li>
+
+ <li id="bg">
+ <h3>Page background</h3>
+ <p>Current background is built in three layers:</p>
+ <ul>
+ <li>plain white background: <code class="term">html { background: #fff; }</code></li>
+ <li>blue to white gradient with stripes: <code class="term">html { background: url(<a href="https://www.mageia.org/g/images/bg_ln_4.png">https://www.mageia.org/g/images/bg_ln_4.png</a>) repeat-x; }</code>
+ </li>
+ <li>white cauldron mask placed: <code class="term">body { background: url(<a href="https://www.mageia.org/g/images/cauldron_alpha_ln_1.png">https://www.mageia.org/g/images/cauldron_alpha_ln_1.png</a>) no-repeat -20px 200px; }</code>
+ </li>
+ </ul>
+ </li>
+
+ <li>
+ <h3>www header</h3>
+ <div id="hd" role="banner"><h1><a id="logo" href="/en/"><span>Mageia</span></a> <span class="lsep">|</span> <span class="subh">Title <em class="tag">Tag</em></span></h1></div>
+ <br>
+ <pre class="term">background: linear-gradient(top, #ffffff 50%, #f0f0f0);
+border-radius: 10px 10px 0 0;
+border-bottom: 1px solid #9db1ca;
+box-shadow: 0 1px 3px #9db1ca;</pre>
+ <br>
+ <p>The whole header may be redesigned along with the global nav bar: below:</p>
+ </li>
+
+ <li>
+ <h3><a href="/_nav/">Global navigation bar</a></h3>
+ <p><a href="/_nav/">See documentation</a>.</p>
+ </li>
+
+ <li id="css">
+ <h3>Reference CSS</h3>
+ <p>Our current reference CSS is based on:</p>
+ <ul>
+ <li>YUI reset-fonts-grids CSS</li>
+ <li>YUI base CSS</li>
+ <li>our own: <a href="//www.mageia.org/g/style/screen.css">screen.css</a></li>
+ </ul>
+ <p>This can be dramatically improved, splitting into several CSSes for reuse through mageia.org.</p>
+ </li>
+ </ul>
+ <hr>
+ <h2 id="next">What to do next?</h2>
+ <ul>
+ <li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
generated by cgit v1.2.1 (git 2.21.0) at 2024-11-23 10:09:27 +0000