body { max-width: 1200px; margin: 0 auto; text-align: left; word-wrap: break-word; overflow-wrap: break-word; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 480px) { ol, ul, dl { padding-left: 2.5rem; } } blockquote { padding: 0 1rem; border-left: 5px solid #f8ae00; } blockquote footer { text-align: right; } pre { padding: 1.25rem; background-color: #111; } code { padding: 1px 3px; background-color: #111; border-radius: 2px; } pre code { padding: 0; background-color: inherit; border-radius: 0; } kbd { font-weight: 700; } figure { display: inline-block; } figcaption { padding: .5rem; background-color: #111; } img { max-width: 100%; } table { width: 100%; margin-bottom: 1rem; border-spacing: 0; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } td, th { padding: .3125rem .625rem; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } th { font-weight: 700; } .mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; } .mla { margin-left: auto; } .tal { text-align: left; } .tar { text-align: right; } .btn { background-color: #111; border-radius: 3px; } .btn:hover { color: #fff; background-color: #000; } /* Header */ .header { margin: 0 0 .3125rem; overflow: auto; background-color: #2a2a2a; border-color: #333; border-style: solid; border-width: 0 0 1px; } .block { padding: .875rem; margin: .1875rem 0; color: #eee; background-color: #2a2a2a; border-color: #333; border-style: solid; border-width: 1px 0; } @media screen and (min-width: 480px) { .header { margin: 0 .3125rem .3125rem; border-width: 0 1px 1px; } .block { margin: .625rem .3125rem; border-width: 1px; } } .logo { display: inline-block; padding: .625rem .875rem; font-size: 16px; font-weight: 700; } .logo:hover { color: #f8ae00; text-decoration: none; } .js .logo { float: left; } /* Menu */ .main-menu { display: block; font-size: 0; font-weight: 700; } .no-js .main-nav__btn { display: none; } .main-nav__btn { display: block; float: right; padding: 0; font-size: 1em; cursor: pointer; background-color: #2a2a2a; border: 0; border-left: 1px solid #333; outline: 0; fill: #f8ae00; } .main-nav__btn:focus, .main-nav__btn:hover { color: #000; } .main-nav__btn-box { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; } :focus > .main-nav__btn-box { box-shadow: inset 0 0 1px 3px #4285f4; } button:not(:-moz-focusring):focus > .main-nav__btn-box { box-shadow: none; } .main-nav__btn:focus, .main-nav__btn-box:focus { outline: none; } .main-nav__btn .icon-menu__burger { display: inline; } .main-nav__btn .icon-menu__x { display: none; } .main-nav__btn--active .icon-menu__burger { display: none; } .main-nav__btn--active .icon-menu__x { display: inline; } .main-nav__list { font-size: 0; } .main-nav__item { font-size: 1rem; font-weight: 700; border-top: 1px solid #333; } .main-nav__item:hover { background-color: #444; } .main-nav__item--active { padding: .625rem .875rem .625rem .625rem; border-left: 4px solid #888; } .main-nav__item--active:hover { background-color: transparent; } .main-nav__link { display: block; padding: .625rem .875rem; } .main-nav__list { padding: 0; margin: 0; list-style: none; } .js .main-nav__list { display: none; } .js .main-nav__btn { display: block; } .main-nav__list.main-nav__list--active { display: block; width: 100%; clear: both; background-color: #2a2a2a; } @media (min-width: 920px) { .header { display: flex; } .logo { display: inline-block; } .js .main-nav__list { display: block; } .js .main-nav__btn { display: none; } .main-nav__btn { display: none; } .main-nav { display: flex; } .main-nav__item { display: inline-block; border: 0; } .main-nav__item--active { padding: .625rem .625rem .5rem; border-bottom: 2px solid #888; } .main-nav__link { padding: .625rem .625rem .5rem; border-bottom: 2px solid transparent; } .main-nav__link:hover { text-decoration: none; border-color: #666; } .main-nav--right { margin-left: auto; } .main-nav__list.main-nav__list--active { position: initial; border: 0; } } /* Taxonomies */ .page { margin-bottom: .3125rem; } .page__title { margin-bottom: 0; } .page__content { margin-top: 1rem; } .page__content--notitle { margin: 0; } .page__content p:last-child { margin-bottom: 0; } /* Cards UI */ .cards { display: flex; flex-wrap: wrap; } .card { display: flex; width: 100%; } .card:first-child { border-top: 1px solid #333; } .card__box { display: flex; flex-direction: column; width: 100%; margin: 0; border-width: 0 0 1px; } @media screen and (min-width: 480px) { .card { padding: .3125rem; } .card:first-child { border: 0; } .card__box { border-width: 1px; } } @media screen and (min-width: 720px) { .card--2col { width: 50%; } .card--3col { width: 50%; } } @media screen and (min-width: 860px) { .card--3col { width: 33.333%; } } /* Entry */ .title-excerpt { font-size: 1.25rem; } .entry__featured { width: 100%; min-height: 1px; /* Workaround for IE11 flexbox img height issue https://github.com/philipwalton/flexbugs/issues/75 */ text-align: center; background-color: #1f1f1f; } .featured__figcaption { width: 100%; padding: 1rem; text-align: left; background-color: #111; } .featured__credit::before { content: "© "; } .featured__credit { font-size: .875rem; font-style: normal; color: #888; } .entry__content { flex: 1 0 auto; margin: 0; overflow: auto; color: #c3c3c3; } .entry__content p:last-child { margin-bottom: 0; } .entry__meta { font-size: .875rem; color: #999; } .entry__meta-published, .entry__meta-lastmod { display: block; } .entry__tags { margin-top: 2rem; } .entry__tag { display: inline-block; padding: .25rem .5rem; margin: .25rem; line-height: 1.5; } .toc { padding: .5rem; margin-bottom: 1rem; color: #f8ae00; list-style: none; background-color: #111; } .toc[open] { color: #fff; } .toc__title { padding: .25rem; font-weight: 700; } .toc nav { padding: .5rem 0 .5rem .5rem; } .toc ul { padding: 0; margin: 0; list-style: none; } .toc ul ul ul a { padding-left: 25px; } .toc ul ul ul ul a { padding-left: 45px; } .toc ul ul ul ul ul a { padding-left: 65px; } .toc ul ul ul ul ul ul a { padding-left: 85px; } .entry__footer { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 1.5rem; } .entry__tags { display: flex; flex-basis: 100%; flex-wrap: wrap; margin: 0 -.25rem auto; } .entry__share { display: flex; flex-basis: 100%; flex-wrap: wrap; margin: 0 -.25rem auto; } @media screen and (min-width: 720px) { .entry__tags { flex: 1 0 65%; justify-content: flex-start; } .entry__share { flex: 1 0 35%; justify-content: flex-end; } } .share__link { margin: .25rem; font-size: 0; } .share__link:hover { margin: .25rem; text-decoration: none; } .share__icon { width: 32px; height: 32px; fill: #f8ae00; stroke: #f8ae00; } .share__icon:hover { fill: #fff; stroke: #fff; } .breadcrumb { padding: .875rem; margin: .1875rem 0 -.1875rem; color: #c3c3c3; border-width: 1px 0 0; } .breadcrumb--separated { margin: .1875rem 0 .3125rem; border-width: 1px 0; } @media screen and (min-width: 480px) { .breadcrumb { margin: .625rem .3125rem -.625rem; border-width: 1px 1px 0; } .breadcrumb--separated { margin: .625rem .3125rem .3125rem; border-width: 1px; } } .breadcrumb__list { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; } .breadcrumb__item { display: flex; } .breadcrumb__item::after { display: block; margin: 0 .3125rem; content: "›"; } .alignleft { float: left; margin: 1rem 1rem 1rem 0; } .alignright { float: right; margin: 1rem 0 1rem 1rem; } .center { text-align: center; } /* Authorbox */ .author { display: flex; align-items: flex-start; } .author__avatar { margin-right: .875rem; margin-bottom: 0; } .author__img { border-radius: 50%; } .author__body { flex: 1; } .author__name { margin-bottom: .625rem; font-weight: 700; } /* Comments */ .comments { margin-top: .625rem; margin-bottom: .625rem; } /* Related */ .related { margin-top: .625rem; } /* Pagination */ .pagination { margin: .3125rem 0; text-align: center; background-color: #2a2a2a; } @media screen and (min-width: 480px) { .pagination { margin: .3125rem .3125rem .625rem; } } .pagination__item { display: inline-block; padding: .25rem .625rem; font-weight: 700; border: 1px solid; } .pagination__item--gap { color: #888; cursor: default; border-color: #888; } /* 404 */ .page404__title { font-size: 2.25rem; font-weight: 700; } .page404__lead { margin-bottom: 2rem; font-size: 1.5rem; } .page404__link { font-size: 1.5rem; } /* Empty state */ .empty__icon { margin-bottom: 2rem; font-size: 3.5rem; } .empty__tip { padding: .5rem; margin: 4rem 0 0; background-color: #202020; } /* Footer */ .footer { padding: .625rem 0; margin: .3125rem 0 0; font-size: .8125rem; color: #888; text-align: center; border-top: 2px solid #333; } .footer__social { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: .5rem; } .social__link { margin: .25rem; font-size: 0; background-color: #2a2a2a; border: 1px solid #333; fill: #999; stroke: #999; } .social__link:hover { fill: #c3c3c3; stroke: #c3c3c3; } .social__icon { width: 32px; height: 32px; } .footer__links { margin-bottom: .5rem; } @media screen and (min-width: 480px) { .footer { margin: .3125rem .3125rem 0; } }