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