static/css/poole.css

   1 /*
   2  *                        ___
   3  *                       /\_ \
   4  *  _____     ___     ___\//\ \      __
   5  * /\ '__`\  / __`\  / __`\\ \ \   /'__`\
   6  * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\  __/
   7  *  \ \ ,__/\ \____/\ \____//\____\ \____\
   8  *   \ \ \/  \/___/  \/___/ \/____/\/____/
   9  *    \ \_\
  10  *     \/_/
  11  *
  12  * Designed, built, and released under MIT license by @mdo. Learn more at
  13  * https://github.com/poole/poole.
  14  */
  15
  16
  17 /*
  18  * Contents
  19  *
  20  * Body resets
  21  * Custom type
  22  * Messages
  23  * Container
  24  * Masthead
  25  * Posts and pages
  26  * Pagination
  27  * Reverse layout
  28  * Themes
  29  */
  30
  31
  32 /*
  33  * Body resets
  34  *
  35  * Update the foundational and global aspects of the page.
  36  */
  37
  38 * {
  39   -webkit-box-sizing: border-box;
  40      -moz-box-sizing: border-box;
  41           box-sizing: border-box;
  42 }
  43
  44 html,
  45 body {
  46   margin: 0;
  47   padding: 0;
  48 }
  49
  50 html {
  51   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  52   font-size: 16px;
  53   line-height: 1.5;
  54 }
  55 @media (min-width: 38em) {
  56   html {
  57     font-size: 20px;
  58   }
  59 }
  60
  61 body {
  62   color: #515151;
  63   background-color: #fff;
  64   -webkit-text-size-adjust: 100%;
  65       -ms-text-size-adjust: 100%;
  66 }
  67
  68 /* No `:visited` state is required by default (browsers will use `a`) */
  69 a {
  70   color: #268bd2;
  71   text-decoration: none;
  72 }
  73 /* `:focus` is linked to `:hover` for basic accessibility */
  74 a:hover,
  75 a:focus {
  76   text-decoration: underline;
  77 }
  78
  79 /* Headings */
  80 h1, h2, h3, h4, h5, h6 {
  81   margin-bottom: .5rem;
  82   font-weight: bold;
  83   line-height: 1.25;
  84   color: #313131;
  85   text-rendering: optimizeLegibility;
  86 }
  87 h1 {
  88   font-size: 2rem;
  89 }
  90 h2 {
  91   margin-top: 1rem;
  92   font-size: 1.5rem;
  93 }
  94 h3 {
  95   margin-top: 1.5rem;
  96   font-size: 1.25rem;
  97 }
  98 h4, h5, h6 {
  99   margin-top: 1rem;
 100   font-size: 1rem;
 101 }
 102
 103 /* Body text */
 104 p {
 105   margin-top: 0;
 106   margin-bottom: 1rem;
 107 }
 108
 109 strong {
 110   color: #303030;
 111 }
 112
 113
 114 /* Lists */
 115 ul, ol, dl {
 116   margin-top: 0;
 117   margin-bottom: 1rem;
 118 }
 119
 120 dt {
 121   font-weight: bold;
 122 }
 123 dd {
 124   margin-bottom: .5rem;
 125 }
 126
 127 /* Misc */
 128 hr {
 129   position: relative;
 130   margin: 1.5rem 0;
 131   border: 0;
 132   border-top: 1px solid #eee;
 133   border-bottom: 1px solid #fff;
 134 }
 135
 136 abbr {
 137   font-size: 85%;
 138   font-weight: bold;
 139   color: #555;
 140   text-transform: uppercase;
 141 }
 142 abbr[title] {
 143   cursor: help;
 144   border-bottom: 1px dotted #e5e5e5;
 145 }
 146
 147 /* Code */
 148 code,
 149 pre {
 150   font-family: Menlo, Monaco, "Courier New", monospace;
 151 }
 152 code {
 153   padding: .25em .5em;
 154   font-size: 85%;
 155   color: #bf616a;
 156   background-color: #f9f9f9;
 157   border-radius: 3px;
 158 }
 159 pre {
 160   display: block;
 161   margin-top: 0;
 162   margin-bottom: 1rem;
 163   padding: 1rem;
 164   font-size: .8rem;
 165   line-height: 1.4;
 166   white-space: pre;
 167   white-space: pre-wrap;
 168   word-break: break-all;
 169   word-wrap: break-word;
 170   background-color: #f9f9f9;
 171 }
 172 pre code {
 173   padding: 0;
 174   font-size: 100%;
 175   color: inherit;
 176   background-color: transparent;
 177 }
 178 .highlight {
 179   margin-bottom: 1rem;
 180   border-radius: 4px;
 181 }
 182 .highlight pre {
 183   margin-bottom: 0;
 184 }
 185
 186 /* Quotes */
 187 blockquote {
 188   padding: .5rem 1rem;
 189   margin: .8rem 0;
 190   color: #7a7a7a;
 191   border-left: .25rem solid #e5e5e5;
 192 }
 193 blockquote p:last-child {
 194   margin-bottom: 0;
 195 }
 196 @media (min-width: 30em) {
 197   blockquote {
 198     padding-right: 5rem;
 199     padding-left: 1.25rem;
 200   }
 201 }
 202
 203 img {
 204   display: block;
 205   margin: 0 0 1rem;
 206   border-radius: 5px;
 207   max-width: 100%;
 208 }
 209
 210 /* Tables */
 211 table {
 212   margin-bottom: 1rem;
 213   width: 100%;
 214   border: 1px solid #e5e5e5;
 215   border-collapse: collapse;
 216 }
 217 td,
 218 th {
 219   padding: .25rem .5rem;
 220   border: 1px solid #e5e5e5;
 221 }
 222 tbody tr:nth-child(odd) td,
 223 tbody tr:nth-child(odd) th {
 224   background-color: #f9f9f9;
 225 }
 226
 227
 228 /*
 229  * Custom type
 230  *
 231  * Extend paragraphs with `.lead` for larger introductory text.
 232  */
 233
 234 .lead {
 235   font-size: 1.25rem;
 236   font-weight: 300;
 237 }
 238
 239
 240 /*
 241  * Messages
 242  *
 243  * Show alert messages to users. You may add it to single elements like a `<p>`,
 244  * or to a parent if there are multiple elements to show.
 245  */
 246
 247 .message {
 248   margin-bottom: 1rem;
 249   padding: 1rem;
 250   color: #717171;
 251   background-color: #f9f9f9;
 252 }
 253
 254
 255 /*
 256  * Container
 257  *
 258  * Center the page content.
 259  */
 260
 261 .container {
 262   max-width: 38rem;
 263   padding-left:  1rem;
 264   padding-right: 1rem;
 265   margin-left:  auto;
 266   margin-right: auto;
 267 }
 268
 269
 270 /*
 271  * Masthead
 272  *
 273  * Super small header above the content for site name and short description.
 274  */
 275
 276 .masthead {
 277   padding-top:    1rem;
 278   padding-bottom: 1rem;
 279   margin-bottom: 3rem;
 280 }
 281 .masthead-title {
 282   margin-top: 0;
 283   margin-bottom: 0;
 284   color: #505050;
 285 }
 286 .masthead-title a {
 287   color: #505050;
 288 }
 289 .masthead-title small {
 290   font-size: 75%;
 291   font-weight: 400;
 292   color: #c0c0c0;
 293   letter-spacing: 0;
 294 }
 295
 296
 297 /*
 298  * Posts and pages
 299  *
 300  * Each post is wrapped in `.post` and is used on default and post layouts. Each
 301  * page is wrapped in `.page` and is only used on the page layout.
 302  */
 303
 304 .page,
 305 .post {
 306   margin-bottom: 4em;
 307 }
 308
 309 /* Blog post or page title */
 310 .page-title,
 311 .post-title,
 312 .post-title a {
 313   color: #303030;
 314 }
 315 .page-title,
 316 .post-title {
 317   margin-top: 0;
 318 }
 319
 320 /* Meta data line below post title */
 321 .post-date {
 322   display: block;
 323   margin-top: -.5rem;
 324   margin-bottom: 1rem;
 325   color: #9a9a9a;
 326 }
 327
 328 /* Related posts */
 329 .related {
 330   padding-top: 2rem;
 331   padding-bottom: 2rem;
 332   border-top: 1px solid #eee;
 333 }
 334 .related-posts {
 335   padding-left: 0;
 336   list-style: none;
 337 }
 338 .related-posts h3 {
 339   margin-top: 0;
 340 }
 341 .related-posts li small {
 342   font-size: 75%;
 343   color: #999;
 344 }
 345 .related-posts li a:hover {
 346   color: #268bd2;
 347   text-decoration: none;
 348 }
 349 .related-posts li a:hover small {
 350   color: inherit;
 351 }
 352
 353
 354 /*
 355  * Pagination
 356  *
 357  * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
 358  * there are no more previous or next posts to show.
 359  */
 360
 361 .pagination {
 362   overflow: hidden; /* clearfix */
 363   margin-left: -1rem;
 364   margin-right: -1rem;
 365   font-family: "PT Sans", Helvetica, Arial, sans-serif;
 366   color: #ccc;
 367   text-align: center;
 368 }
 369
 370 /* Pagination items can be `span`s or `a`s */
 371 .pagination-item {
 372   display: block;
 373   padding: 1rem;
 374   border: 1px solid #eee;
 375 }
 376 .pagination-item:first-child {
 377   margin-bottom: -1px;
 378 }
 379
 380 /* Only provide a hover state for linked pagination items */
 381 a.pagination-item:hover {
 382   background-color: #f5f5f5;
 383 }
 384
 385 @media (min-width: 30em) {
 386   .pagination {
 387     margin: 3rem 0;
 388   }
 389   .pagination-item {
 390     float: left;
 391     width: 50%;
 392   }
 393   .pagination-item:first-child {
 394     margin-bottom: 0;
 395     border-top-left-radius:    4px;
 396     border-bottom-left-radius: 4px;
 397   }
 398   .pagination-item:last-child {
 399     margin-left: -1px;
 400     border-top-right-radius:    4px;
 401     border-bottom-right-radius: 4px;
 402   }
 403 }