<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
- <title>MediaWiki Living Styleguide</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="generator" content="kss-node" />
- <meta name="viewport" content="width=device-width">
+
+ <title>MediaWiki Living Styleguide</title>
+
<link rel="stylesheet" href="public/kss.css">
<link rel="stylesheet" href="public/style.css">
</head>
<body><div id="kss-wrapper">
<header id="kss-header">
- <hgroup><h1>MediaWiki Living Styleguide</h1></hgroup>
+ <div class="container">
+ <hgroup><h1>Mediawiki.UI</h1></hgroup>
+ </div>
</header>
- <nav class="content">
- <ul>
- <li><a href="index.html">0.0: Overview</a></li>
- {{#eachRoot}}
- <li>
- <a href="section-{{reference}}.html">{{reference}}.0: {{header}}</a>
- </li>
- {{/eachRoot}}
- </ul>
- </nav>
- <article>
- {{#if overview}}
- {{html overview}}
- {{else}}
- {{#eachSection rootNumber}}
- <section>
- {{#whenDepth 1}}
- <h1>{{ reference }}.0 - {{ header }}</h1>
- {{else}}
- {{#whenDepth 2}}
- <h2>{{ reference }} - {{ header }}</h2>
- {{/whenDepth}}
- {{#whenDepth 3}}
- <h3>{{ reference }} - {{ header }}</h3>
+
+ <div class="container">
+ <nav class="content">
+ <ul>
+ <li><a href="index.html"><span>0.0</span> Overview</a></li>
+ {{#eachRoot}}
+ <li><a href="section-{{reference}}.html"><span>{{reference}}.0</span> {{header}}</a></li>
+ {{/eachRoot}}
+ </ul>
+ </nav>
+
+ <article>
+ {{#if overview}}
+ {{html overview}}
+ {{else}}
+ {{#eachSection rootNumber}}
+ <section>
+ {{#whenDepth 1}}
+ <h1>{{ reference }}.0 {{ header }}</h1>
+ {{else}}
+ {{#whenDepth 2}}
+ <h2>{{ reference }} {{ header }}</h2>
+ {{/whenDepth}}
+ {{#whenDepth 3}}
+ <h3>{{ reference }} {{ header }}</h3>
+ {{/whenDepth}}
{{/whenDepth}}
- {{/whenDepth}}
- {{#ifAny markup modifiers}}
- <div>{{html description}}</div>
- <h4>Default styling</h4>
- <blockquote>{{modifierMarkup}}</blockquote>
- {{#eachModifier}}
- <h4>{{name}}</h4>
- {{html description}}
- <blockquote>{{modifierMarkup}}</blockquote>
- {{/eachModifier}}
- <pre class="prettyprint lang-html">{{markup}}</pre>
- {{else}}
- {{#if description}}
- {{html description}}
- {{/if}}
- {{/ifAny}}
- </section>
- {{/eachSection}}
- {{/if}}
- </article>
+ {{#ifAny markup modifiers}}
+ <div>{{html description}}</div>
+ <div class="example">
+ <pre class="prettyprint lang-html">{{markup}}</pre>
+ <blockquote>{{modifierMarkup}}</blockquote>
+ </div>
+ {{#eachModifier}}
+ <h4>{{name}}</h4>
+ {{html description}}
+ <blockquote>{{modifierMarkup}}</blockquote>
+ {{/eachModifier}}
+ {{else}}
+ {{#if description}}
+ {{html description}}
+ {{/if}}
+ {{/ifAny}}
+ </section>
+ {{/eachSection}}
+ {{/if}}
+ </article>
+ </div>
</div></body>
</html>
-header {
- padding: .8em 16px 0;
+body {
+ margin: 0;
+ padding: 0;
+ padding-top: 3px;
+ padding-bottom: 40px;
+
+ // FIXME: Remove when typography module in mediawiki-ui
+ font-family: "Nimbus Sans L", "Liberation Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
-nav {
- float: left;
- width: 200px;
+.content.kss-no-margin {
+ margin: 0;
}
-article {
- margin-left: 250px;
+.container {
+ width: 960px;
+ margin: 0 auto;
+ display: -webkit-flex;
+ display: flex;
+
}
-.content.kss-no-margin {
+header {
+ padding: 0;
margin: 0;
+ border-bottom: 1px solid #eee;
+
+ hgroup {
+ min-width: 149px;
+
+ h1 {
+ padding: 16px 28px;
+ font-size: 15px;
+ text-transform: uppercase;
+ margin: 0;
+ width: 92px;
+ border-right: 1px solid #eee;
+ }
+ }
}
-// FIXME: Remove when typography module in mediawiki-ui
-body {
- font-family: "Nimbus Sans L", "Liberation Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+nav {
+ -webkit-flex: initial;
+ flex: initial;
+ min-width: 139px;
+ margin-top: 25px;
+
+ ul {
+ list-style: none;
+ padding: 0;
+
+ li {
+ margin-left: 10px;
+ margin-bottom: 20px;
+
+ a {
+ text-transform: uppercase;
+ color: #aaa;
+ font-size: 12px;
+ font-weight: bold;
+ text-decoration: none;
+
+ &:hover {
+ color: #538DF8;
+ }
+
+ span {
+ display: inline-block;
+ width: 35px;
+ }
+ }
+ }
+ }
}
-h1,h2,h3,h4,h5 {
- font-family: "DejaVu Serif", Georgia, serif;
+
+article {
+ -webkit-flex: 1;
+ flex: 1;
+ margin-left: 30px;
+
+ h1, h2, h3, h4, h5, h6, p {
+ margin-left: 20px;
+ }
+
+ p {
+ width: 338px;
+ }
+
+ h1 {
+ margin-bottom: 0;
+ }
+
+ .example {
+ display: -webkit-flex;
+ display: flex;
+ flex-wrap: wrap;
+
+ pre {
+ -webkit-flex: initial;
+ flex: initial;
+ background: #f8f8f8;
+ padding: 20px;
+ color: #999;
+ width: 338px;
+ word-wrap: break-word;
+ float: left;
+ margin: 0;
+ margin-right: 22px;
+ }
+
+ blockquote {
+ -webkit-flex: 1;
+ flex: 1;
+ display: block;
+ margin: 0;
+ margin-left: 20px;
+ min-width: 360px;
+ }
+ }
}
+
+@media (max-width: 960px) {
+ .container {
+ width: 100%;
+ }
+
+ nav {
+ display: none;
+ }
+
+ article {
+ .example {
+ blockquote {
+ margin-top: 20px;
+ }
+ }
+ }
+}
\ No newline at end of file
dépôts / lhc / web / wiklou.git / commitdiff