[Summary view] [Print] [Text view]

   1  .container {
   2      width: 100%;
   3  }
   4  
   5  nav {
   6      display: none;
   7  }
   8  
   9  .content {
  10      .example {
  11          blockquote {
  12              margin-top: 20px;
  13          }
  14      }
  15  }
  16  
  17  body {
  18      margin: 0;
  19      padding: 0;
  20      padding-top: 3px;
  21      padding-bottom: 40px;
  22  
  23      // FIXME: Remove when typography module in mediawiki-ui
  24      font-family: "Nimbus Sans L", "Liberation Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  25  }
  26  
  27  .kss-no-margin {
  28      // FIXME: Is this being used anywhere? Remove if not.
  29      margin: 0;
  30  }
  31  
  32  .container {
  33      margin: 0 auto;
  34      display: -webkit-flex;
  35      display: flex;
  36  
  37  }
  38  
  39  header {
  40      padding: 0;
  41      margin: 0;
  42      border-bottom: 1px solid #eee;
  43  
  44      hgroup {
  45          min-width: 149px;
  46  
  47          h1 {
  48              padding: 16px 28px;
  49              font-size: 15px;
  50              text-transform: uppercase;
  51              margin: 0;
  52              width: 92px;
  53              border-right: 1px solid #eee;
  54          }
  55      }
  56  }
  57  
  58  nav {
  59      -webkit-flex: initial;
  60      flex: initial;
  61      min-width: 139px;
  62      margin-top: 25px;
  63  
  64      ul {
  65          list-style: none;
  66          padding: 0;
  67  
  68          li {
  69              margin-left: 10px;
  70              margin-bottom: 20px;
  71  
  72              a {
  73                  text-transform: uppercase;
  74                  color: #aaa;
  75                  font-size: 12px;
  76                  font-weight: bold;
  77                  text-decoration: none;
  78  
  79                  &:hover {
  80                      color: #538DF8;
  81                  }
  82  
  83                  span {
  84                      display: inline-block;
  85                      width: 35px;
  86                  }
  87              }
  88  
  89              ul {
  90                  li {
  91                      margin: 0;
  92                  }
  93  
  94                  li a {
  95                      text-transform: none;
  96                      font-weight: normal;
  97                  }
  98              }
  99          }
 100      }
 101  }
 102  
 103  .content {
 104      -webkit-flex: 1;
 105      flex: 1;
 106  
 107      h1, h2, h3, h4, h5, h6, p {
 108          margin-left: 20px;
 109      }
 110  
 111      p {
 112          width: 338px;
 113      }
 114  
 115      h1 {
 116          margin-bottom: 0;
 117      }
 118  
 119      .example {
 120          display: -webkit-flex;
 121          display: flex;
 122          flex-wrap: wrap;
 123  
 124          pre {
 125              -webkit-flex: initial;
 126              flex: initial;
 127              background: #f8f8f8;
 128              padding: 20px;
 129              color: #999;
 130              word-wrap: break-word;
 131              // word-wrap in pre not affecting Firefox, so add white-space.
 132              white-space: pre-wrap;
 133              float: left;
 134              margin: 0;
 135              margin-right: 22px;
 136          }
 137  
 138          blockquote {
 139              -webkit-flex: 1;
 140              flex: 1;
 141              display: block;
 142              margin: 0;
 143              margin-left: 20px;
 144  
 145              div {
 146                  margin-bottom: 5px;
 147              }
 148          }
 149      }
 150  }
 151  
 152  @media (min-width: 768px) {
 153      nav {
 154          display: block;
 155          width: 100px;
 156      }
 157  
 158      @columnWidth: (768px - 100px ) / 2;
 159      .example {
 160          pre,
 161          blockquote {
 162              width: @columnWidth;
 163          }
 164      }
 165  }
 166  
 167  @media (min-width: 980px) {
 168      nav {
 169          width: auto;
 170      }
 171  
 172      .content {
 173          margin-left: 30px;
 174      }
 175  
 176      .container {
 177          width: 980px;
 178      }
 179  
 180      .example {
 181          pre {
 182              width: 338px;
 183          }
 184          blockquote {
 185              width: auto;
 186          }
 187      }
 188  }