jenkins-bot has submitted this change and it was merged.
Change subject: Add styling for the styleguide
......................................................................
Add styling for the styleguide
Change-Id: Idf741c9242d28a8823049507f7193b8f5578b7a9
---
M docs/kss/styleguide-template/index.html
M docs/kss/styleguide-template/public/kss.less
2 files changed, 183 insertions(+), 62 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/docs/kss/styleguide-template/index.html
b/docs/kss/styleguide-template/index.html
index cb95197..b6036b2 100644
--- a/docs/kss/styleguide-template/index.html
+++ b/docs/kss/styleguide-template/index.html
@@ -2,61 +2,68 @@
<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>
+
+ <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 3}}
- <h3>{{ reference }} - {{ header }}</h3>
- {{/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>
diff --git a/docs/kss/styleguide-template/public/kss.less
b/docs/kss/styleguide-template/public/kss.less
index 431303d..49411fb 100644
--- a/docs/kss/styleguide-template/public/kss.less
+++ b/docs/kss/styleguide-template/public/kss.less
@@ -1,24 +1,138 @@
-header {
- padding: .8em 16px 0;
-}
+body {
+ margin: 0;
+ padding: 0;
+ padding-top: 3px;
+ padding-bottom: 40px;
-nav {
- float: left;
- width: 200px;
-}
-
-article {
- margin-left: 250px;
+ // FIXME: Remove when typography module in mediawiki-ui
+ font-family: "Nimbus Sans L", "Liberation Sans", "Helvetica Neue",
"Helvetica", "Arial", sans-serif;
}
.content.kss-no-margin {
margin: 0;
}
-// FIXME: Remove when typography module in mediawiki-ui
-body {
- font-family: "Nimbus Sans L", "Liberation Sans", "Helvetica Neue",
"Helvetica", "Arial", sans-serif;
+.container {
+ width: 960px;
+ margin: 0 auto;
+ display: -webkit-flex;
+ display: flex;
+
}
-h1,h2,h3,h4,h5 {
- font-family: "DejaVu Serif", Georgia, serif;
+
+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;
+ }
+ }
}
+
+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;
+ }
+ }
+ }
+ }
+}
+
+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
--
To view, visit https://gerrit.wikimedia.org/r/148626
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Idf741c9242d28a8823049507f7193b8f5578b7a9
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: Violetto <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
