_ Git - blog/blob - public/css/poole.css

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