From: Prateek Saxena Date: Wed, 23 Jul 2014 10:08:39 +0000 (+0530) Subject: Add styling for the styleguide X-Git-Tag: 1.31.0-rc.0~14767^2 X-Git-Url: https://git.cyclocoop.org/%28%28?a=commitdiff_plain;h=622d80890a4c93d158d5978fae7bdd6c747c71de;p=lhc%2Fweb%2Fwiklou.git Add styling for the styleguide Change-Id: Idf741c9242d28a8823049507f7193b8f5578b7a9 --- diff --git a/docs/kss/styleguide-template/index.html b/docs/kss/styleguide-template/index.html index cb95197f78..b6036b2d94 100644 --- a/docs/kss/styleguide-template/index.html +++ b/docs/kss/styleguide-template/index.html @@ -2,61 +2,68 @@ - MediaWiki Living Styleguide + - + + MediaWiki Living Styleguide +
-

MediaWiki Living Styleguide

+
+

Mediawiki.UI

+
- -
- {{#if overview}} - {{html overview}} - {{else}} - {{#eachSection rootNumber}} -
- {{#whenDepth 1}} -

{{ reference }}.0 - {{ header }}

- {{else}} - {{#whenDepth 2}} -

{{ reference }} - {{ header }}

- {{/whenDepth}} - {{#whenDepth 3}} -

{{ reference }} - {{ header }}

+ +
+ + +
+ {{#if overview}} + {{html overview}} + {{else}} + {{#eachSection rootNumber}} +
+ {{#whenDepth 1}} +

{{ reference }}.0 {{ header }}

+ {{else}} + {{#whenDepth 2}} +

{{ reference }} {{ header }}

+ {{/whenDepth}} + {{#whenDepth 3}} +

{{ reference }} {{ header }}

+ {{/whenDepth}} {{/whenDepth}} - {{/whenDepth}} - {{#ifAny markup modifiers}} -
{{html description}}
-

Default styling

-
{{modifierMarkup}}
- {{#eachModifier}} -

{{name}}

- {{html description}} -
{{modifierMarkup}}
- {{/eachModifier}} - 
{{markup}}
- {{else}} - {{#if description}} - {{html description}} - {{/if}} - {{/ifAny}} -
- {{/eachSection}} - {{/if}} -
+ {{#ifAny markup modifiers}} +
{{html description}}
+
+ 
{{markup}}
+
{{modifierMarkup}}
+
+ {{#eachModifier}} +

{{name}}

+ {{html description}} +
{{modifierMarkup}}
+ {{/eachModifier}} + {{else}} + {{#if description}} + {{html description}} + {{/if}} + {{/ifAny}} +
+ {{/eachSection}} + {{/if}} +
+
diff --git a/docs/kss/styleguide-template/public/kss.less b/docs/kss/styleguide-template/public/kss.less index 431303d95f..49411fba08 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; + + // 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