_ Git - blog/blob - public/css/lanyon.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/lanyon.
  16  */
  17
  18
  19 /*
  20  * Contents
  21  *
  22  * Global resets
  23  * Masthead
  24  * Sidebar
  25  * Slide effect
  26  * Posts and pages
  27  * Pagination
  28  * Reverse layout
  29  * Themes
  30  */
  31
  32
  33 /*
  34  * Global resets
  35  *
  36  * Update the foundational and global aspects of the page.
  37  */
  38
  39 /* Prevent scroll on narrow devices */
  40 html,
  41 body {
  42   overflow-x: hidden;
  43 }
  44
  45 html {
  46   font-family: "PT Serif", Georgia, "Times New Roman", serif;
  47 }
  48
  49 h1, h2, h3, h4, h5, h6 {
  50   font-family: "PT Sans", Helvetica, Arial, sans-serif;
  51   font-weight: 400;
  52   color: #313131;
  53   letter-spacing: -.025rem;
  54 }
  55
  56
  57 /*
  58  * Wrapper
  59  *
  60  * The wrapper is used to position site content when the sidebar is toggled. We
  61  * use an outter wrap to position the sidebar without interferring with the
  62  * regular page content.
  63  */
  64
  65 .wrap {
  66   position: relative;
  67   width: 100%;
  68 }
  69
  70
  71 /*
  72  * Container
  73  *
  74  * Center the page content.
  75  */
  76
  77 .container {
  78   max-width: 28rem;
  79 }
  80 @media (min-width: 38em) {
  81   .container {
  82     max-width: 32rem;
  83   }
  84 }
  85 @media (min-width: 56em) {
  86   .container {
  87     max-width: 38rem;
  88   }
  89 }
  90
  91
  92 /*
  93  * Masthead
  94  *
  95  * Super small header above the content for site name and short description.
  96  */
  97
  98 .masthead {
  99   padding-top:    1rem;
 100   padding-bottom: 1rem;
 101   margin-bottom: 3rem;
 102   border-bottom: 1px solid #eee;
 103 }
 104 .masthead-title {
 105   margin-top: 0;
 106   margin-bottom: 0;
 107   color: #505050;
 108 }
 109 .masthead-title a {
 110   color: #505050;
 111 }
 112 .masthead-title small {
 113   font-size: 75%;
 114   font-weight: 400;
 115   color: #c0c0c0;
 116   letter-spacing: 0;
 117 }
 118
 119 @media (max-width: 48em) {
 120   .masthead-title {
 121     text-align: center;
 122   }
 123   .masthead-title small {
 124     display: none;
 125   }
 126 }
 127
 128
 129 /*
 130  * Sidebar
 131  *
 132  * The sidebar is the drawer, the item we are toggling with our handy hamburger
 133  * button in the corner of the page.
 134  *
 135  * This particular sidebar implementation was inspired by Chris Coyier's
 136  * "Offcanvas Menu with CSS Target" article, and the checkbox variation from the
 137  * comments by a reader. It modifies both implementations to continue using the
 138  * checkbox (no change in URL means no polluted browser history), but this uses
 139  * `position` for the menu to avoid some potential content reflow issues.
 140  *
 141  * Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504
 142  */
 143
 144 /* Style and "hide" the sidebar */
 145 .sidebar {
 146   position: fixed;
 147   top: 0;
 148   bottom: 0;
 149   left: -14rem;
 150   width: 14rem;
 151   visibility: hidden;
 152   overflow-y: auto;
 153   font-family: "PT Sans", Helvetica, Arial, sans-serif;
 154   font-size: .875rem; /* 15px */
 155   color: rgba(255,255,255,.6);
 156   background-color: #202020;
 157   -webkit-transition: all .3s ease-in-out;
 158           transition: all .3s ease-in-out;
 159 }
 160 @media (min-width: 30em) {
 161   .sidebar {
 162     font-size: .75rem; /* 14px */
 163   }
 164 }
 165
 166 /* Sidebar content */
 167 .sidebar a {
 168   font-weight: normal;
 169   color: #fff;
 170 }
 171 .sidebar-item {
 172   padding: 1rem;
 173 }
 174 .sidebar-item p:last-child {
 175   margin-bottom: 0;
 176 }
 177
 178 /* Sidebar nav */
 179 .sidebar-nav {
 180   border-bottom: 1px solid rgba(255,255,255,.1);
 181 }
 182 .sidebar-nav-item {
 183   display: block;
 184   padding: .5rem 1rem;
 185   border-top: 1px solid rgba(255,255,255,.1);
 186 }
 187 .sidebar-nav-item.active,
 188 a.sidebar-nav-item:hover,
 189 a.sidebar-nav-item:focus {
 190   text-decoration: none;
 191   background-color: rgba(255,255,255,.1);
 192   border-color: transparent;
 193 }
 194
 195 @media (min-width: 48em) {
 196   .sidebar-item {
 197     padding: 1.5rem;
 198   }
 199   .sidebar-nav-item {
 200     padding-left:  1.5rem;
 201     padding-right: 1.5rem;
 202   }
 203 }
 204
 205 /* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
 206 .sidebar-checkbox {
 207   position: absolute;
 208   opacity: 0;
 209   -webkit-user-select: none;
 210      -moz-user-select: none;
 211           user-select: none;
 212 }
 213
 214 /* Style the `label` that we use to target the `.sidebar-checkbox` */
 215 .sidebar-toggle {
 216   position: absolute;
 217   top:  .8rem;
 218   left: 1rem;
 219   display: block;
 220   padding: .25rem .75rem;
 221   color: #505050;
 222   background-color: #fff;
 223   border-radius: .25rem;
 224   cursor: pointer;
 225 }
 226
 227 .sidebar-toggle:before {
 228   display: inline-block;
 229   width: 1rem;
 230   height: .75rem;
 231   content: "";
 232   background-image: -webkit-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
 233   background-image:    -moz-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
 234   background-image:     -ms-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
 235   background-image:         linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
 236 }
 237
 238 .sidebar-toggle:active,
 239 #sidebar-checkbox:focus ~ .sidebar-toggle,
 240 #sidebar-checkbox:checked ~ .sidebar-toggle {
 241   color: #fff;
 242   background-color: #555;
 243 }
 244
 245 .sidebar-toggle:active:before,
 246 #sidebar-checkbox:focus ~ .sidebar-toggle:before,
 247 #sidebar-checkbox:checked ~ .sidebar-toggle:before {
 248   background-image: -webkit-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
 249   background-image:    -moz-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
 250   background-image:     -ms-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
 251   background-image:         linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
 252 }
 253
 254 @media (min-width: 30.1em) {
 255   .sidebar-toggle {
 256     position: fixed;
 257   }
 258 }
 259
 260 @media print {
 261   .sidebar-toggle {
 262     display: none;
 263   }
 264 }
 265
 266 /* Slide effect
 267  *
 268  * Handle the sliding effects of the sidebar and content in one spot, seperate
 269  * from the default styles.
 270  *
 271  * As an a heads up, we don't use `transform: translate3d()` here because when
 272  * mixed with `position: fixed;` for the sidebar toggle, it creates a new
 273  * containing block. Put simply, the fixed sidebar toggle behaves like
 274  * `position: absolute;` when transformed.
 275  *
 276  * Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/.
 277  */
 278
 279 .wrap,
 280 .sidebar,
 281 .sidebar-toggle {
 282   -webkit-backface-visibility: hidden;
 283       -ms-backface-visibility: hidden;
 284           backface-visibility: hidden;
 285 }
 286 .wrap,
 287 .sidebar-toggle {
 288   -webkit-transition: -webkit-transform .3s ease-in-out;
 289           transition: transform .3s ease-in-out;
 290 }
 291
 292 #sidebar-checkbox:checked + .sidebar {
 293   z-index: 10;
 294   visibility: visible;
 295 }
 296 #sidebar-checkbox:checked ~ .sidebar,
 297 #sidebar-checkbox:checked ~ .wrap,
 298 #sidebar-checkbox:checked ~ .sidebar-toggle {
 299   -webkit-transform: translateX(14rem);
 300       -ms-transform: translateX(14rem);
 301           transform: translateX(14rem);
 302 }
 303
 304
 305 /*
 306  * Posts and pages
 307  *
 308  * Each post is wrapped in `.post` and is used on default and post layouts. Each
 309  * page is wrapped in `.page` and is only used on the page layout.
 310  */
 311
 312 .page,
 313 .post {
 314   margin-bottom: 4em;
 315 }
 316
 317 /* Blog post or page title */
 318 .page-title,
 319 .post-title,
 320 .post-title a {
 321   color: #303030;
 322 }
 323 .page-title,
 324 .post-title {
 325   margin-top: 0;
 326 }
 327
 328 /* Meta data line below post title */
 329 .post-date {
 330   display: block;
 331   margin-top: -.5rem;
 332   margin-bottom: 1rem;
 333   color: #9a9a9a;
 334 }
 335
 336 /* Related posts */
 337 .related {
 338   padding-top: 2rem;
 339   padding-bottom: 2rem;
 340   border-top: 1px solid #eee;
 341 }
 342 .related-posts {
 343   padding-left: 0;
 344   list-style: none;
 345 }
 346 .related-posts h3 {
 347   margin-top: 0;
 348 }
 349 .related-posts li small {
 350   font-size: 75%;
 351   color: #999;
 352 }
 353 .related-posts li a:hover {
 354   color: #268bd2;
 355   text-decoration: none;
 356 }
 357 .related-posts li a:hover small {
 358   color: inherit;
 359 }
 360
 361
 362 /*
 363  * Pagination
 364  *
 365  * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
 366  * there are no more previous or next posts to show.
 367  */
 368
 369 .pagination {
 370   overflow: hidden; /* clearfix */
 371   margin-left: -1rem;
 372   margin-right: -1rem;
 373   font-family: "PT Sans", Helvetica, Arial, sans-serif;
 374   color: #ccc;
 375   text-align: center;
 376 }
 377
 378 /* Pagination items can be `span`s or `a`s */
 379 .pagination-item {
 380   display: block;
 381   padding: 1rem;
 382   border: 1px solid #eee;
 383 }
 384 .pagination-item:first-child {
 385   margin-bottom: -1px;
 386 }
 387
 388 /* Only provide a hover state for linked pagination items */
 389 a.pagination-item:hover {
 390   background-color: #f5f5f5;
 391 }
 392
 393 @media (min-width: 30em) {
 394   .pagination {
 395     margin: 3rem 0;
 396   }
 397   .pagination-item {
 398     float: left;
 399     width: 50%;
 400   }
 401   .pagination-item:first-child {
 402     margin-bottom: 0;
 403     border-top-left-radius:    4px;
 404     border-bottom-left-radius: 4px;
 405   }
 406   .pagination-item:last-child {
 407     margin-left: -1px;
 408     border-top-right-radius:    4px;
 409     border-bottom-right-radius: 4px;
 410   }
 411 }
 412
 413
 414 /*
 415  * Reverse layout
 416  *
 417  * Flip the orientation of the page by placing the `.sidebar` and sidebar toggle
 418  * on the right side.
 419  */
 420
 421 .layout-reverse .sidebar {
 422   left: auto;
 423   right: -14rem;
 424 }
 425 .layout-reverse .sidebar-toggle {
 426   left: auto;
 427   right: 1rem;
 428 }
 429
 430 .layout-reverse #sidebar-checkbox:checked ~ .sidebar,
 431 .layout-reverse #sidebar-checkbox:checked ~ .wrap,
 432 .layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle {
 433   -webkit-transform: translateX(-14rem);
 434       -ms-transform: translateX(-14rem);
 435           transform: translateX(-14rem);
 436 }
 437
 438
 439 /*
 440  * Themes
 441  *
 442  * Apply custom color schemes by adding the appropriate class to the `body`.
 443  * Based on colors from Base16: http://chriskempson.github.io/base16/#default.
 444  */
 445
 446 /* Red */
 447 .theme-base-08 .sidebar,
 448 .theme-base-08 .sidebar-toggle:active,
 449 .theme-base-08 #sidebar-checkbox:checked ~ .sidebar-toggle {
 450   background-color: #ac4142;
 451 }
 452 .theme-base-08 .container a,
 453 .theme-base-08 .sidebar-toggle,
 454 .theme-base-08 .related-posts li a:hover {
 455   color: #ac4142;
 456 }
 457
 458 /* Orange */
 459 .theme-base-09 .sidebar,
 460 .theme-base-09 .sidebar-toggle:active,
 461 .theme-base-09 #sidebar-checkbox:checked ~ .sidebar-toggle {
 462   background-color: #d28445;
 463 }
 464 .theme-base-09 .container a,
 465 .theme-base-09 .sidebar-toggle,
 466 .theme-base-09 .related-posts li a:hover {
 467   color: #d28445;
 468 }
 469
 470 /* Yellow */
 471 .theme-base-0a .sidebar,
 472 .theme-base-0a .sidebar-toggle:active,
 473 .theme-base-0a #sidebar-checkbox:checked ~ .sidebar-toggle {
 474   background-color: #f4bf75;
 475 }
 476 .theme-base-0a .container a,
 477 .theme-base-0a .sidebar-toggle,
 478 .theme-base-0a .related-posts li a:hover {
 479   color: #f4bf75;
 480 }
 481
 482 /* Green */
 483 .theme-base-0b .sidebar,
 484 .theme-base-0b .sidebar-toggle:active,
 485 .theme-base-0b #sidebar-checkbox:checked ~ .sidebar-toggle {
 486   background-color: #90a959;
 487 }
 488 .theme-base-0b .container a,
 489 .theme-base-0b .sidebar-toggle,
 490 .theme-base-0b .related-posts li a:hover {
 491   color: #90a959;
 492 }
 493
 494 /* Cyan */
 495 .theme-base-0c .sidebar,
 496 .theme-base-0c .sidebar-toggle:active,
 497 .theme-base-0c #sidebar-checkbox:checked ~ .sidebar-toggle {
 498   background-color: #75b5aa;
 499 }
 500 .theme-base-0c .container a,
 501 .theme-base-0c .sidebar-toggle,
 502 .theme-base-0c .related-posts li a:hover {
 503   color: #75b5aa;
 504 }
 505
 506 /* Blue */
 507 .theme-base-0d .sidebar,
 508 .theme-base-0d .sidebar-toggle:active,
 509 .theme-base-0d #sidebar-checkbox:checked ~ .sidebar-toggle {
 510   background-color: #6a9fb5;
 511 }
 512 .theme-base-0d .container a,
 513 .theme-base-0d .sidebar-toggle,
 514 .theme-base-0d .related-posts li a:hover {
 515   color: #6a9fb5;
 516 }
 517
 518 /* Magenta */
 519 .theme-base-0e .sidebar,
 520 .theme-base-0e .sidebar-toggle:active,
 521 .theme-base-0e #sidebar-checkbox:checked ~ .sidebar-toggle {
 522   background-color: #aa759f;
 523 }
 524 .theme-base-0e .container a,
 525 .theme-base-0e .sidebar-toggle,
 526 .theme-base-0e .related-posts li a:hover {
 527   color: #aa759f;
 528 }
 529
 530 /* Brown */
 531 .theme-base-0f .sidebar,
 532 .theme-base-0f .sidebar-toggle:active,
 533 .theme-base-0f #sidebar-checkbox:checked ~ .sidebar-toggle {
 534   background-color: #8f5536;
 535 }
 536 .theme-base-0f .container a,
 537 .theme-base-0f .sidebar-toggle,
 538 .theme-base-0f .related-posts li a:hover {
 539   color: #8f5536;
 540 }
 541
 542
 543 /*
 544  * Overlay sidebar
 545  *
 546  * Make the sidebar content overlay the viewport content instead of pushing it
 547  * aside when toggled.
 548  */
 549
 550 .sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
 551   -webkit-transform: translateX(0);
 552       -ms-transform: translateX(0);
 553           transform: translateX(0);
 554 }
 555 .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
 556   box-shadow: 0 0 0 .25rem #fff;
 557 }
 558 .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
 559   box-shadow: .25rem 0 .5rem rgba(0,0,0,.1);
 560 }
 561
 562 /* Only one tweak for a reverse layout */
 563 .layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
 564   box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1);
 565 }