4 * \//\ \ __ ___ __ __ ___ ___
5 * \ \ \ /'__`\ /' _ `\/\ \/\ \ / __`\ /' _ `\
6 * \_\ \_/\ \_\.\_/\ \/\ \ \ \_\ \/\ \_\ \/\ \/\ \
7 * /\____\ \__/.\_\ \_\ \_\/`____ \ \____/\ \_\ \_\
8 * \/____/\/__/\/_/\/_/\/_/`/___/> \/___/ \/_/\/_/
12 * Designed, built, and released under MIT license by @mdo. Learn more at
13 * https://github.com/poole/lanyon.
34 * Update the foundational and global aspects of the page.
37 /* Prevent scroll on narrow devices */
44 font-family: "PT Serif", Georgia, "Times New Roman", serif;
47 h1, h2, h3, h4, h5, h6 {
48 font-family: "PT Sans", Helvetica, Arial, sans-serif;
51 letter-spacing: -.025rem;
58 * The wrapper is used to position site content when the sidebar is toggled. We
59 * use an outter wrap to position the sidebar without interferring with the
60 * regular page content.
72 * Center the page content.
78 @media (min-width: 38em) {
83 @media (min-width: 56em) {
93 * Super small header above the content for site name and short description.
100 border-bottom: 1px solid #eee;
110 .masthead-title small {
117 @media (max-width: 48em) {
121 .masthead-title small {
130 * The sidebar is the drawer, the item we are toggling with our handy hamburger
131 * button in the corner of the page.
133 * This particular sidebar implementation was inspired by Chris Coyier's
134 * "Offcanvas Menu with CSS Target" article, and the checkbox variation from the
135 * comments by a reader. It modifies both implementations to continue using the
136 * checkbox (no change in URL means no polluted browser history), but this uses
137 * `position` for the menu to avoid some potential content reflow issues.
139 * Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504
142 /* Style and "hide" the sidebar */
151 font-family: "PT Sans", Helvetica, Arial, sans-serif;
152 font-size: .875rem; /* 15px */
153 color: rgba(255,255,255,.6);
154 background-color: #202020;
155 -webkit-transition: all .3s ease-in-out;
156 transition: all .3s ease-in-out;
158 @media (min-width: 30em) {
160 font-size: .75rem; /* 14px */
164 /* Sidebar content */
172 .sidebar-item p:last-child {
178 border-bottom: 1px solid rgba(255,255,255,.1);
183 border-top: 1px solid rgba(255,255,255,.1);
185 .sidebar-nav-item.active,
186 a.sidebar-nav-item:hover,
187 a.sidebar-nav-item:focus {
188 text-decoration: none;
189 background-color: rgba(255,255,255,.1);
190 border-color: transparent;
193 @media (min-width: 48em) {
198 padding-left: 1.5rem;
199 padding-right: 1.5rem;
203 /* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
207 -webkit-user-select: none;
208 -moz-user-select: none;
212 /* Style the `label` that we use to target the `.sidebar-checkbox` */
218 padding: .25rem .75rem;
220 background-color: #fff;
221 border-radius: .25rem;
225 .sidebar-toggle:before {
226 display: inline-block;
230 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%);
231 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%);
232 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%);
233 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 .sidebar-toggle:active,
237 #sidebar-checkbox:focus ~ .sidebar-toggle,
238 #sidebar-checkbox:checked ~ .sidebar-toggle {
240 background-color: #555;
243 .sidebar-toggle:active:before,
244 #sidebar-checkbox:focus ~ .sidebar-toggle:before,
245 #sidebar-checkbox:checked ~ .sidebar-toggle:before {
246 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%);
247 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%);
248 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%);
249 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 @media (min-width: 30.1em) {
266 * Handle the sliding effects of the sidebar and content in one spot, seperate
267 * from the default styles.
269 * As an a heads up, we don't use `transform: translate3d()` here because when
270 * mixed with `position: fixed;` for the sidebar toggle, it creates a new
271 * containing block. Put simply, the fixed sidebar toggle behaves like
272 * `position: absolute;` when transformed.
274 * Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/.
280 -webkit-backface-visibility: hidden;
281 -ms-backface-visibility: hidden;
282 backface-visibility: hidden;
286 -webkit-transition: -webkit-transform .3s ease-in-out;
287 transition: transform .3s ease-in-out;
290 #sidebar-checkbox:checked + .sidebar {
294 #sidebar-checkbox:checked ~ .sidebar,
295 #sidebar-checkbox:checked ~ .wrap,
296 #sidebar-checkbox:checked ~ .sidebar-toggle {
297 -webkit-transform: translateX(14rem);
298 -ms-transform: translateX(14rem);
299 transform: translateX(14rem);
306 * Each post is wrapped in `.post` and is used on default and post layouts. Each
307 * page is wrapped in `.page` and is only used on the page layout.
315 /* Blog post or page title */
326 /* Meta data line below post title */
337 padding-bottom: 2rem;
338 border-top: 1px solid #eee;
347 .related-posts li small {
351 .related-posts li a:hover {
353 text-decoration: none;
355 .related-posts li a:hover small {
363 * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
364 * there are no more previous or next posts to show.
368 overflow: hidden; /* clearfix */
371 font-family: "PT Sans", Helvetica, Arial, sans-serif;
376 /* Pagination items can be `span`s or `a`s */
380 border: 1px solid #eee;
382 .pagination-item:first-child {
386 /* Only provide a hover state for linked pagination items */
387 a.pagination-item:hover {
388 background-color: #f5f5f5;
391 @media (min-width: 30em) {
399 .pagination-item:first-child {
401 border-top-left-radius: 4px;
402 border-bottom-left-radius: 4px;
404 .pagination-item:last-child {
406 border-top-right-radius: 4px;
407 border-bottom-right-radius: 4px;
415 * Flip the orientation of the page by placing the `.sidebar` and sidebar toggle
419 .layout-reverse .sidebar {
423 .layout-reverse .sidebar-toggle {
428 .layout-reverse #sidebar-checkbox:checked ~ .sidebar,
429 .layout-reverse #sidebar-checkbox:checked ~ .wrap,
430 .layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle {
431 -webkit-transform: translateX(-14rem);
432 -ms-transform: translateX(-14rem);
433 transform: translateX(-14rem);
440 * Apply custom color schemes by adding the appropriate class to the `body`.
441 * Based on colors from Base16: http://chriskempson.github.io/base16/#default.
445 .theme-base-08 .sidebar,
446 .theme-base-08 .sidebar-toggle:active,
447 .theme-base-08 #sidebar-checkbox:checked ~ .sidebar-toggle {
448 background-color: #ac4142;
450 .theme-base-08 .container a,
451 .theme-base-08 .sidebar-toggle,
452 .theme-base-08 .related-posts li a:hover {
457 .theme-base-09 .sidebar,
458 .theme-base-09 .sidebar-toggle:active,
459 .theme-base-09 #sidebar-checkbox:checked ~ .sidebar-toggle {
460 background-color: #d28445;
462 .theme-base-09 .container a,
463 .theme-base-09 .sidebar-toggle,
464 .theme-base-09 .related-posts li a:hover {
469 .theme-base-0a .sidebar,
470 .theme-base-0a .sidebar-toggle:active,
471 .theme-base-0a #sidebar-checkbox:checked ~ .sidebar-toggle {
472 background-color: #f4bf75;
474 .theme-base-0a .container a,
475 .theme-base-0a .sidebar-toggle,
476 .theme-base-0a .related-posts li a:hover {
481 .theme-base-0b .sidebar,
482 .theme-base-0b .sidebar-toggle:active,
483 .theme-base-0b #sidebar-checkbox:checked ~ .sidebar-toggle {
484 background-color: #90a959;
486 .theme-base-0b .container a,
487 .theme-base-0b .sidebar-toggle,
488 .theme-base-0b .related-posts li a:hover {
493 .theme-base-0c .sidebar,
494 .theme-base-0c .sidebar-toggle:active,
495 .theme-base-0c #sidebar-checkbox:checked ~ .sidebar-toggle {
496 background-color: #75b5aa;
498 .theme-base-0c .container a,
499 .theme-base-0c .sidebar-toggle,
500 .theme-base-0c .related-posts li a:hover {
505 .theme-base-0d .sidebar,
506 .theme-base-0d .sidebar-toggle:active,
507 .theme-base-0d #sidebar-checkbox:checked ~ .sidebar-toggle {
508 background-color: #6a9fb5;
510 .theme-base-0d .container a,
511 .theme-base-0d .sidebar-toggle,
512 .theme-base-0d .related-posts li a:hover {
517 .theme-base-0e .sidebar,
518 .theme-base-0e .sidebar-toggle:active,
519 .theme-base-0e #sidebar-checkbox:checked ~ .sidebar-toggle {
520 background-color: #aa759f;
522 .theme-base-0e .container a,
523 .theme-base-0e .sidebar-toggle,
524 .theme-base-0e .related-posts li a:hover {
529 .theme-base-0f .sidebar,
530 .theme-base-0f .sidebar-toggle:active,
531 .theme-base-0f #sidebar-checkbox:checked ~ .sidebar-toggle {
532 background-color: #8f5536;
534 .theme-base-0f .container a,
535 .theme-base-0f .sidebar-toggle,
536 .theme-base-0f .related-posts li a:hover {
544 * Make the sidebar content overlay the viewport content instead of pushing it
545 * aside when toggled.
548 .sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
549 -webkit-transform: translateX(0);
550 -ms-transform: translateX(0);
551 transform: translateX(0);
553 .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
554 box-shadow: 0 0 0 .25rem #fff;
556 .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
557 box-shadow: .25rem 0 .5rem rgba(0,0,0,.1);
560 /* Only one tweak for a reverse layout */
561 .layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
562 box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1);