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