_ Git - blog/blob - public/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: 38rem) {
  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
 179 /* Pygments via Jekyll */
 180 .highlight {
 181   margin-bottom: 1rem;
 182   border-radius: 4px;
 183 }
 184 .highlight pre {
 185   margin-bottom: 0;
 186 }
 187
 188 /* Gist via GitHub Pages */
 189 .gist .gist-file {
 190   font-family: Menlo, Monaco, "Courier New", monospace !important;
 191 }
 192 .gist .markdown-body {
 193   padding: 15px;
 194 }
 195 .gist pre {
 196   padding: 0;
 197   background-color: transparent;
 198 }
 199 .gist .gist-file .gist-data {
 200   font-size: .8rem !important;
 201   line-height: 1.4;
 202 }
 203 .gist code {
 204   padding: 0;
 205   color: inherit;
 206   background-color: transparent;
 207   border-radius: 0;
 208 }
 209
 210 /* Quotes */
 211 blockquote {
 212   padding: .5rem 1rem;
 213   margin: .8rem 0;
 214   color: #7a7a7a;
 215   border-left: .25rem solid #e5e5e5;
 216 }
 217 blockquote p:last-child {
 218   margin-bottom: 0;
 219 }
 220 @media (min-width: 30rem) {
 221   blockquote {
 222     padding-right: 5rem;
 223     padding-left: 1.25rem;
 224   }
 225 }
 226
 227 img {
 228   display: block;
 229   max-width: 100%;
 230   margin: 0 0 1rem;
 231   border-radius: 5px;
 232 }
 233
 234 /* Tables */
 235 table {
 236   margin-bottom: 1rem;
 237   width: 100%;
 238   border: 1px solid #e5e5e5;
 239   border-collapse: collapse;
 240 }
 241 td,
 242 th {
 243   padding: .25rem .5rem;
 244   border: 1px solid #e5e5e5;
 245 }
 246 tbody tr:nth-child(odd) td,
 247 tbody tr:nth-child(odd) th {
 248   background-color: #f9f9f9;
 249 }
 250
 251
 252 /*
 253  * Custom type
 254  *
 255  * Extend paragraphs with `.lead` for larger introductory text.
 256  */
 257
 258 .lead {
 259   font-size: 1.25rem;
 260   font-weight: 300;
 261 }
 262
 263
 264 /*
 265  * Messages
 266  *
 267  * Show alert messages to users. You may add it to single elements like a `<p>`,
 268  * or to a parent if there are multiple elements to show.
 269  */
 270
 271 .message {
 272   margin-bottom: 1rem;
 273   padding: 1rem;
 274   color: #717171;
 275   background-color: #f9f9f9;
 276 }
 277
 278
 279 /*
 280  * Container
 281  *
 282  * Center the page content.
 283  */
 284
 285 .container {
 286   max-width: 38rem;
 287   padding-left:  1rem;
 288   padding-right: 1rem;
 289   margin-left:  auto;
 290   margin-right: auto;
 291 }
 292
 293
 294 /*
 295  * Masthead
 296  *
 297  * Super small header above the content for site name and short description.
 298  */
 299
 300 .masthead {
 301   padding-top:    1rem;
 302   padding-bottom: 1rem;
 303   margin-bottom: 3rem;
 304 }
 305 .masthead-title {
 306   margin-top: 0;
 307   margin-bottom: 0;
 308   color: #505050;
 309 }
 310 .masthead-title a {
 311   color: #505050;
 312 }
 313 .masthead-title small {
 314   font-size: 75%;
 315   font-weight: 400;
 316   color: #c0c0c0;
 317   letter-spacing: 0;
 318 }
 319
 320
 321 /*
 322  * Posts and pages
 323  *
 324  * Each post is wrapped in `.post` and is used on default and post layouts. Each
 325  * page is wrapped in `.page` and is only used on the page layout.
 326  */
 327
 328 .page,
 329 .post {
 330   margin-bottom: 4em;
 331 }
 332
 333 /* Blog post or page title */
 334 .page-title,
 335 .post-title,
 336 .post-title a {
 337   color: #303030;
 338 }
 339 .page-title,
 340 .post-title {
 341   margin-top: 0;
 342 }
 343
 344 /* Meta data line below post title */
 345 .post-date {
 346   display: block;
 347   margin-top: -.5rem;
 348   margin-bottom: 1rem;
 349   color: #9a9a9a;
 350 }
 351
 352 /* Related posts */
 353 .related {
 354   padding-top: 2rem;
 355   padding-bottom: 2rem;
 356   border-top: 1px solid #eee;
 357 }
 358 .related-posts {
 359   padding-left: 0;
 360   list-style: none;
 361 }
 362 .related-posts h3 {
 363   margin-top: 0;
 364 }
 365 .related-posts li small {
 366   font-size: 75%;
 367   color: #999;
 368 }
 369 .related-posts li a:hover {
 370   color: #268bd2;
 371   text-decoration: none;
 372 }
 373 .related-posts li a:hover small {
 374   color: inherit;
 375 }
 376
 377
 378 /*
 379  * Pagination
 380  *
 381  * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
 382  * there are no more previous or next posts to show.
 383  */
 384
 385 .pagination {
 386   overflow: hidden; /* clearfix */
 387   margin-left: -1rem;
 388   margin-right: -1rem;
 389   font-family: "PT Sans", Helvetica, Arial, sans-serif;
 390   color: #ccc;
 391   text-align: center;
 392 }
 393
 394 /* Pagination items can be `span`s or `a`s */
 395 .pagination-item {
 396   display: block;
 397   padding: 1rem;
 398   border: 1px solid #eee;
 399 }
 400 .pagination-item:first-child {
 401   margin-bottom: -1px;
 402 }
 403
 404 /* Only provide a hover state for linked pagination items */
 405 a.pagination-item:hover {
 406   background-color: #f5f5f5;
 407 }
 408
 409 @media (min-width: 30rem) {
 410   .pagination {
 411     margin: 3rem 0;
 412   }
 413   .pagination-item {
 414     float: left;
 415     width: 50%;
 416   }
 417   .pagination-item:first-child {
 418     margin-bottom: 0;
 419     border-top-left-radius:    4px;
 420     border-bottom-left-radius: 4px;
 421   }
 422   .pagination-item:last-child {
 423     margin-left: -1px;
 424     border-top-right-radius:    4px;
 425     border-bottom-right-radius: 4px;
 426   }
 427 }