docs/kss/styleguide-template/public/kss.less

   1 body {
   2         margin: 0;
   3         padding: 0;
   4         padding-top: 3px;
   5         padding-bottom: 40px;
   6
   7         // FIXME: Remove when typography module in mediawiki-ui
   8         font-family: "Nimbus Sans L", "Liberation Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   9 }
  10
  11 .content.kss-no-margin {
  12         margin: 0;
  13 }
  14
  15 .container {
  16         width: 960px;
  17         margin: 0 auto;
  18         display: -webkit-flex;
  19         display: flex;
  20
  21 }
  22
  23 header {
  24         padding: 0;
  25         margin: 0;
  26         border-bottom: 1px solid #eee;
  27
  28         hgroup {
  29                 min-width: 149px;
  30
  31                 h1 {
  32                         padding: 16px 28px;
  33                         font-size: 15px;
  34                         text-transform: uppercase;
  35                         margin: 0;
  36                         width: 92px;
  37                         border-right: 1px solid #eee;
  38                 }
  39         }
  40 }
  41
  42 nav {
  43         -webkit-flex: initial;
  44         flex: initial;
  45         min-width: 139px;
  46         margin-top: 25px;
  47
  48         ul {
  49                 list-style: none;
  50                 padding: 0;
  51
  52                 li {
  53                         margin-left: 10px;
  54                         margin-bottom: 20px;
  55
  56                         a {
  57                                 text-transform: uppercase;
  58                                 color: #aaa;
  59                                 font-size: 12px;
  60                                 font-weight: bold;
  61                                 text-decoration: none;
  62
  63                                 &:hover {
  64                                         color: #538DF8;
  65                                 }
  66
  67                                 span {
  68                                         display: inline-block;
  69                                         width: 35px;
  70                                 }
  71                         }
  72                 }
  73         }
  74 }
  75
  76 article {
  77         -webkit-flex: 1;
  78         flex: 1;
  79         margin-left: 30px;
  80
  81         h1, h2, h3, h4, h5, h6, p {
  82                 margin-left: 20px;
  83         }
  84
  85         p {
  86                 width: 338px;
  87         }
  88
  89         h1 {
  90                 margin-bottom: 0;
  91         }
  92
  93         .example {
  94                 display: -webkit-flex;
  95                 display: flex;
  96                 flex-wrap: wrap;
  97
  98                 pre {
  99                         -webkit-flex: initial;
 100                         flex: initial;
 101                         background: #f8f8f8;
 102                         padding: 20px;
 103                         color: #999;
 104                         width: 338px;
 105                         word-wrap: break-word;
 106                         // word-wrap in pre not affecting Firefox, so add white-space.
 107                         white-space: pre-wrap;
 108                         float: left;
 109                         margin: 0;
 110                         margin-right: 22px;
 111                 }
 112
 113                 blockquote {
 114                         -webkit-flex: 1;
 115                         flex: 1;
 116                         display: block;
 117                         margin: 0;
 118                         margin-left: 20px;
 119                         min-width: 360px;
 120                 }
 121         }
 122 }
 123
 124 @media (max-width: 960px) {
 125         .container {
 126                 width: 100%;
 127         }
 128
 129         nav {
 130                 display: none;
 131         }
 132
 133         article {
 134                 .example {
 135                         blockquote {
 136                                 margin-top: 20px;
 137                         }
 138                 }
 139         }
 140 }