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

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