-
{ -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; box-sizing: border-box;
}
html, body {
overflow-x: hidden; margin: 0; padding: 0;
}
html {
height: 100%; font-family: "PT Serif", Georgia, "Times New Roman", serif; font-size-adjust: 100%;
}
body {
color: #333; font-size: 20px; position: relative; margin: 0; padding-bottom: 6rem; min-height: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-family: "PT Sans", Helvetica, Arial, sans-serif; color: #313131; line-height: 1.25; margin-top: 1em; margin-bottom: 16px;
} h1 {
font-size: 2em;
} h2 {
font-size: 1.7em;
} h3 {
font-size: 1.45em;
} h4 {
font-size: 1.2em;
} h5 {
font-size: 1em;
} h6 {
font-size: .8em;
}
.wrap {
position: relative; width: 100%;
}
.container {
max-width: 55rem; padding-left: 1rem; padding-right: 1rem; margin-left: auto; margin-right: auto;
}
/*
* Masthead * * Super small header above the content for site name and short description. */
.masthead {
padding: .7rem 0; margin-bottom: 2rem; border-bottom: 1px solid rgba(0,0,0,0.07); box-shadow: 0 3px 5px 0 rgba(0,0,0,0.05);
} .masthead-title {
margin-top: 0; margin-bottom: 0; color: #505050; font-size: 30px; a { font-weight: 400; color: #505050; }
}
@media (max-width: 48em) {
.masthead-title { text-align: center; } .masthead-title small { display: none; }
}
/* Slide effect
* * Handle the sliding effects of the sidebar and content in one spot, seperate * from the default styles. * * As an a heads up, we don't use `transform: translate3d()` here because when * mixed with `position: fixed;` for the sidebar toggle, it creates a new * containing block. Put simply, the fixed sidebar toggle behaves like * `position: absolute;` when transformed. * * Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/. */
.wrap, .sidebar, .sidebar-toggle, .footer {
-webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;
} .wrap, .sidebar-toggle, .footer {
-webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
}
sidebar-checkbox:checked + .sidebar {
z-index: 10; visibility: visible;
} sidebar-checkbox:checked ~ .sidebar, sidebar-checkbox:checked ~ .wrap, sidebar-checkbox:checked ~ .sidebar-toggle, sidebar-checkbox:checked ~ .footer {
-webkit-transform: translateX(14rem); -ms-transform: translateX(14rem); transform: translateX(14rem);
}
table {
margin-bottom: 1rem; width: 100%; border: 1px solid #e5e5e5; border-collapse: collapse;
} td, th {
padding: .25rem .5rem; border: 1px solid #e5e5e5;
} tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
/*
* Posts and pages * * Each post is wrapped in `.post` and is used on default and post layouts. Each * page is wrapped in `.page` and is only used on the page layout. */
.post {
font-size: 18px;
}
.page, .post {
margin-bottom: 4em;
}
/* Blog post or page title */ .page-title, .post-title, .post-title a {
color: #303030;
} .page-title, .post-title {
margin-top: 0;
}
/* Meta data line below post title */ .post-date {
display: block; margin-top: -0.5rem; margin-bottom: 1rem; color: #9a9a9a;
}
/* Related posts */ .related {
padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid #eee;
} .related-posts {
padding-left: 0; list-style: none; h3 { margin-top: 0; } li { small { font-size: 75%; color: #999; } a { &:hover { color: #268bd2; small { color: inherit; } } } }
}
.pagination {
overflow: hidden; /* clearfix */ margin-left: -1rem; margin-right: -1rem; font-family: "PT Sans", Helvetica, Arial, sans-serif; color: #ccc; text-align: center;
}
/* Pagination items can be `span`s or `a`s */ .pagination-item {
display: block; padding: 1rem; border: 1px solid #eee;
} .pagination-item:first-child {
margin-bottom: -1px;
}
/* Only provide a hover state for linked pagination items */ a.pagination-item:hover {
background-color: #f5f5f5;
}
@media (min-width: 30em) {
.pagination { margin: 3rem 0; } .pagination-item { float: left; width: 50%; } .pagination-item:first-child { margin-bottom: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .pagination-item:last-child { margin-left: -1px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
}
/*
* Reverse layout * * Flip the orientation of the page by placing the `.sidebar` and sidebar toggle * on the right side. */
.layout-reverse .sidebar {
left: auto; right: -14rem;
} .layout-reverse .sidebar-toggle {
left: auto; right: 1rem;
}
.layout-reverse sidebar-checkbox:checked ~ .sidebar, .layout-reverse sidebar-checkbox:checked ~ .wrap, .layout-reverse sidebar-checkbox:checked ~ .sidebar-toggle {
-webkit-transform: translateX(-14rem); -ms-transform: translateX(-14rem); transform: translateX(-14rem);
}
/*
* Overlay sidebar * * Make the sidebar content overlay the viewport content instead of pushing it * aside when toggled. */
.sidebar-overlay sidebar-checkbox:checked ~ .wrap {
-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
} .sidebar-overlay sidebar-checkbox:checked ~ .sidebar-toggle {
box-shadow: 0 0 0 0.25rem #fff;
} .sidebar-overlay sidebar-checkbox:checked ~ .sidebar {
box-shadow: 0.25rem 0 0.5rem rgba(0, 0, 0, 0.1);
}
/* Only one tweak for a reverse layout */ .layout-reverse.sidebar-overlay sidebar-checkbox:checked ~ .sidebar {
box-shadow: -0.25rem 0 0.5rem rgba(0, 0, 0, 0.1);
}