diff options
Diffstat (limited to 'www/wiki/docs/kss/styleguide-template')
| -rw-r--r-- | www/wiki/docs/kss/styleguide-template/index.html | 87 | ||||
| -rw-r--r-- | www/wiki/docs/kss/styleguide-template/public/kss.less | 193 |
2 files changed, 280 insertions, 0 deletions
diff --git a/www/wiki/docs/kss/styleguide-template/index.html b/www/wiki/docs/kss/styleguide-template/index.html new file mode 100644 index 00000000..d1ae26af --- /dev/null +++ b/www/wiki/docs/kss/styleguide-template/index.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html class="no-js" lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="generator" content="kss-node" /> + + <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"> + <div class="container"> + <hgroup><h1>Mediawiki.UI</h1></hgroup> + </div> + </header> + + <div class="container"> + <nav> + <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> + <ul> + {{#eachSection reference}} + {{#whenDepth 2}} + <li> + <a href="section-{{../../reference}}.html#section-{{ reference }}"> + <span>{{ reference }}</span> + {{ header }} + </a> + </li> + {{/whenDepth}} + {{/eachSection}} + </ul> + </li> + {{/eachRoot}} + </ul> + </nav> + + <div class="content"> + {{#if overview}} + {{html overview}} + {{else}} + {{#eachSection rootNumber}} + <div> + {{#whenDepth 1}} + <h1>{{ reference }}.0 {{ header }}</h1> + {{else}} + {{#whenDepth 2}} + <a name="section-{{ reference }}"></a> + <h2><a href="#section-{{ reference }}">{{ reference }} {{ header }}</a></h2> + {{/whenDepth}} + {{#whenDepth 3}} + <a name="section-{{ reference }}"></a> + <h3><a href="#section-{{ reference }}">{{ reference }} {{ header }}</a></h3> + {{/whenDepth}} + {{/whenDepth}} + {{#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}} + </div> + {{/eachSection}} + {{/if}} + </div> + </div> +</div></body> +</html> diff --git a/www/wiki/docs/kss/styleguide-template/public/kss.less b/www/wiki/docs/kss/styleguide-template/public/kss.less new file mode 100644 index 00000000..3727694d --- /dev/null +++ b/www/wiki/docs/kss/styleguide-template/public/kss.less @@ -0,0 +1,193 @@ +.container { + width: 100%; +} + +nav { + display: none; +} + +.content { + .example { + blockquote { + margin-top: 20px; + } + } +} + +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; +} + +.kss-no-margin { + // FIXME: Is this being used anywhere? Remove if not. + margin: 0; +} + +.container { + margin: 0 auto; + display: -webkit-flex; + display: flex; + +} + +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; + } + } + + ul { + li { + margin: 0; + } + + li a { + text-transform: none; + font-weight: normal; + } + } + } + } +} + +.content { + -webkit-flex: 1; + flex: 1; + + h1, h2, h3, h4, h5, h6, p { + margin-left: 20px; + + a { + text-decoration: none; + color: #000; + } + } + + 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; + word-wrap: break-word; + // word-wrap in pre not affecting Firefox, so add white-space. + white-space: pre-wrap; + float: left; + margin: 0; + margin-right: 22px; + } + + blockquote { + -webkit-flex: 1; + flex: 1; + display: block; + margin: 0; + margin-left: 20px; + + div { + margin-bottom: 5px; + } + } + } +} + +@media (min-width: 768px) { + nav { + display: block; + width: 100px; + } + + @columnWidth: (768px - 100px ) / 2; + .example { + pre, + blockquote { + width: @columnWidth; + } + } +} + +@media (min-width: 980px) { + nav { + width: auto; + } + + .content { + margin-left: 30px; + } + + .container { + width: 980px; + } + + .example { + pre { + width: 338px; + } + blockquote { + width: auto; + } + } +} |