| .blog { |
| max-width: var(--static-max-width); |
| margin: var(--static-margin); |
| } |
| |
| .blog.list { |
| display: flex; |
| flex-direction: column-reverse; |
| } |
| |
| .blog.list aside { |
| margin-top: 2.5rem; |
| padding-right: 2rem; |
| line-height: 2rem; |
| } |
| |
| @media screen and (max-width: 1024px) { |
| .blog.list aside { |
| margin-top: 0; |
| } |
| } |
| |
| .blog.list aside ul { |
| list-style: none; |
| padding: 0; |
| margin-top: 1rem; |
| display: inline-block; |
| } |
| |
| article.blog:first-child { |
| margin-top: 3rem; |
| } |
| |
| article.blog { |
| padding-bottom: 1rem; |
| } |
| |
| article.blog p { |
| padding-bottom: 1rem; |
| } |
| |
| .blog a.continue { |
| font-weight: bold; |
| text-decoration: none; |
| background: none; |
| } |
| |
| .blog header { |
| margin-bottom: 0.4rem; |
| border-image: linear-gradient(to right, #303284, #303284 50px, #fff 50px) 1 / 0 0 1px 0; |
| } |
| |
| .blog header h1 { |
| font-size: 2rem; |
| font-weight: bold; |
| padding-bottom: 0.2rem; |
| } |
| |
| .blog header time { |
| color: var(--color-gray-60); |
| font-style: italc; |
| } |
| |
| .blog .post { |
| margin-top: 1rem; |
| display: flex; |
| flex-direction: column; |
| padding-bottom: 2rem; |
| } |
| |
| .blog .post aside .summary { |
| font-size: 1.2rem; |
| font-style: italic; |
| } |
| |
| .blog .post aside time { |
| color: var(--color-gray-60); |
| } |
| |
| .blog .post aside p { |
| padding-top: 1.5rem; |
| color: var(--color-gray-60); |
| } |
| |
| .blog .post aside p span[rel='author'] { |
| display: inline-block; |
| } |
| |
| .blog .post aside { |
| width: 100%; |
| } |
| |
| .blog a.arrow { |
| font-size: 1rem; |
| text-decoration: none; |
| background: none; |
| } |
| |
| .blog a.arrow.prev::after { |
| content: '\00A0previous'; |
| } |
| |
| .blog a.arrow.next::before { |
| content: 'next\00A0'; |
| } |
| |
| .blog .post .post-content { |
| margin-left: 0; |
| width: auto; |
| } |
| |
| .blog .post-content img { |
| width: 100%; |
| max-width: 800px; |
| height: auto; |
| max-height: 600px; |
| margin-left: auto; |
| margin-right: auto; |
| display: block; |
| } |
| |
| .blog .post-content figcaption { |
| font-size: 0.8rem; |
| text-align: center; |
| } |
| |
| .blog .post-content pre { |
| max-width: 800px; |
| } |
| |
| .blog .post .post-content table { |
| width: 100%; |
| text-align: center; |
| margin-bottom: 1rem; |
| } |
| |
| .blog .post .post-content tr:nth-child(even) { |
| background: var(--color-smoke-50); |
| } |
| |
| .blog .post .post-content td { |
| padding: 0.5rem; |
| } |
| |
| .blog .post .post-content th { |
| padding: 0.7rem; |
| background: var(--color-smoke-90); |
| } |
| |
| .blog .post aside figure img { |
| margin-right: 1rem; |
| vertical-align: middle; |
| width: 4rem; |
| height: 4rem; |
| border-radius: 50%; |
| } |
| |
| .blog .post aside figure { |
| margin: 1rem 0; |
| } |
| |
| .blog .post aside figure figcaption { |
| display: inline; |
| } |
| |
| @media screen and (min-width: 1025px) { |
| .blog { |
| max-width: var(--static-max-width--desktop); |
| } |
| |
| .blog .post { |
| flex-direction: row; |
| padding-bottom: 2rem; |
| } |
| |
| .blog .post aside { |
| width: 30rem; |
| min-width: 16rem; |
| } |
| |
| .blog a.arrow { |
| font-size: 3rem; |
| } |
| |
| .blog a.arrow.prev::after { |
| content: ''; |
| } |
| |
| .blog a.arrow.next::before { |
| content: ''; |
| } |
| |
| .blog .post .post-content { |
| margin-left: 2rem; |
| width: 60%; |
| } |
| |
| .blog.list { |
| flex-direction: row; |
| } |
| } |
| |
| .blog ul, |
| .blog ol { |
| padding-bottom: 1rem; |
| } |
| |
| .blog li ul, |
| .blog li ol { |
| padding-bottom: 0; |
| } |
| |
| .blog .pagination { |
| margin: var(--static-margin); |
| list-style: none; |
| padding: 1rem; |
| } |
| |
| @media screen and (min-width: 1025px) { |
| .blog .pagination { |
| max-width: var(--static-max-width--desktop); |
| } |
| } |
| |
| .blog .page-item { |
| display: inline; |
| padding: 0; |
| margin: 0; |
| } |
| |
| .blog .page-item a { |
| color: var(--color-gray-30); |
| font-weight: bold; |
| padding: 0.5rem; |
| } |
| |
| .blog .page-item.disabled a { |
| color: var(--color-gray-30); |
| } |
| |
| .blog .page-item.active { |
| border-radius: 3px; |
| background: var(--color-asf-moderate-blue); |
| } |
| |
| .blog .page-item.active a { |
| color: var(--color-white); |
| } |
| |
| @media screen and (max-width: 1024px) { |
| .blog.list aside { |
| margin-top: 4.5rem; |
| } |
| } |
| |
| .blog .related { |
| display: flex; |
| flex-wrap: wrap; |
| border-top: 1px solid var(--color-camel-orange); |
| margin-top: 3rem; |
| } |
| |
| .blog .related > h3 { |
| min-width: 100%; |
| } |
| |
| .blog .related article { |
| padding-right: 0; |
| width: 50%; |
| margin: 0; |
| } |
| |
| .blog .related article:nth-child(2n) { |
| padding-left: 0; |
| } |
| |
| .blog .related article header h1 { |
| font-size: 1rem; |
| } |
| |
| @media screen and (max-width: 1024px) { |
| .blog .related article { |
| width: 100%; |
| padding-left: 0; |
| } |
| } |