diff options
Diffstat (limited to 'themes/new_theme/assets')
-rw-r--r-- | themes/new_theme/assets/css/style.css | 1306 |
1 files changed, 1306 insertions, 0 deletions
diff --git a/themes/new_theme/assets/css/style.css b/themes/new_theme/assets/css/style.css new file mode 100644 index 0000000..545df0d --- /dev/null +++ b/themes/new_theme/assets/css/style.css @@ -0,0 +1,1306 @@ +{{- $highlightColor := .Site.Params.highlightColor | default "#e22d30" -}} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +article, +aside, +dialog, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { + display: block; +} + +:focus::-webkit-input-placeholder { + color: transparent; +} + +:focus::-moz-placeholder { + color: transparent; +} + +:focus:-moz-placeholder { + color: transparent; +} + +:focus:-ms-input-placeholder { + color: transparent; +} + +/* Structure */ +html { + font-size: 100%; + -ms-text-size-adjust: none; + -webkit-text-size-adjust: none; +} + +body { + margin: 0; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-size: 14px; + font-size: .875rem; + line-height: 1.6; + word-wrap: break-word; + background: #f7f7f7; + -webkit-font-smoothing: antialiased; +} + +.container { + position: relative; + width: 100%; + max-width: 1080px; + margin: 0 auto; +} + +.container--outer { + margin: 25px auto; + box-shadow: 0 0 10px rgba(50, 50, 50, .17); +} + +.wrapper { + padding: 25px; + background: #fff; +} + +.flex { + display: -webkit-flex; + display: flex; +} + +.primary { + -webkit-flex: 1 0 65.83%; + flex: 1 0 65.83%; + -webkit-order: 1; + order: 1; + min-width: 0; +} + +.sidebar { + -webkit-flex: 1 0 31.66%; + flex: 1 0 31.66%; + -webkit-order: 2; + order: 2; + min-width: 0; + margin: 0 0 0 2.5%; +} + +.sidebar--left { + -webkit-order: 0; + order: 0; + margin: 0 2.5% 0 0; +} + +.clearfix { + display: block; +} + +.clearfix::after { + display: block; + height: 0; + padding: 0; + margin: 0; + clear: both; + line-height: 0; + visibility: hidden; + content: ""; +} + +input, +button, +select, +optgroup, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +/* Button */ +.btn { + padding: 5px 10px; + font-weight: 700; + color: #fff; + white-space: pre-line; + background: #2a2a2a; +} + +.btn:hover { + color: #fff; + background: {{ $highlightColor }}; +} + +/* Animation */ +.menu__item, +.btn { + transition: background-color .25s ease-out; +} + +/* Typography */ +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0 0 20px; + margin: 0 0 1.25rem; + font-weight: 700; + line-height: 1.3; + color: #000; +} + +h1 { + font-size: 32px; + font-size: 2rem; +} + +h2 { + font-size: 24px; + font-size: 1.5rem; +} + +h3 { + font-size: 20px; + font-size: 1.25rem; +} + +h4 { + font-size: 18px; + font-size: 1.125rem; +} + +h5 { + font-size: 16px; + font-size: 1rem; +} + +h6 { + font-size: 16px; + font-size: 1rem; +} + +a { + color: #000; + text-decoration: none; +} + +a:hover { + color: {{ $highlightColor }}; +} + +hr { + margin: 0 0 20px; + border: 0; + border-top: 1px solid #dadada; +} + +p { + margin: 0 0 20px; + margin: 0 0 1.25rem; +} + +b, +strong { + font: inherit; + font-weight: 700; +} + +i, +em { + font: inherit; + font-style: italic; +} + +ol, +ul { + padding: 0; + margin: 0; +} + +small { + font-size: 12px; + font-size: .75rem; +} + +mark { + background-color: #fd5; +} + +figure { + margin: 0 0 20px; + margin: 0 0 1.25rem; +} + +figcaption { + margin-top: 4px; + margin-top: .25rem; + color: #666; +} + +figcaption h4 { + margin: 0; + color: inherit; +} + +pre, +code, +kbd, +samp { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: inherit; +} + +pre, +code { + background-color: #f5f5f5; + border: 1px solid #ebebeb; +} + +code { + padding: 0 5px; + color: #c33; +} + +pre { + display: block; + padding: 0; + padding: 1.25rem; + margin-bottom: 20px; + margin-bottom: 1.25rem; + overflow: auto; + color: #000; +} + +pre code { + padding: 0; + color: inherit; + white-space: inherit; + background: inherit; + border: 0; +} + +kbd { + padding: 2px 3px; + color: #fff; + background-color: #2a2a2a; +} + +blockquote { + display: block; + padding: 5px 0 5px 15px; + margin: 0 0 20px; + margin: 0 0 1.25rem; + line-height: 1.6; + border-left: 5px solid {{ $highlightColor }}; +} + +blockquote p:last-child { + margin: 0; +} + +blockquote footer { + text-align: right; +} + +sup, +sub { + font-size: 10px; + font-size: .625rem; + font-style: normal; +} + +sup { + vertical-align: super; +} + +sub { + vertical-align: sub; +} + +abbr[title] { + text-decoration: none; + cursor: help; + border-bottom: 1px dotted #000; +} + +q { + font-style: italic; +} + +address { + margin-bottom: 20px; + margin-bottom: 1.25rem; + font-family: "Consolas", Courier New, Courier, monospace; + line-height: 1.5; +} + +dl { + margin: 0 0 10px 20px; +} + +dt, +dd { + display: list-item; +} + +dt { + font-weight: bold; + list-style-type: square; +} + +dd { + margin-left: 20px; + list-style-type: circle; +} + +select { + max-width: 100%; +} + +.warning { + padding: 20px 10px; + text-align: center; + border: 1px solid #ddd; +} + +.warning__icon { + margin-bottom: 20px; + fill: #ddd; +} + +/* Header */ +.header { + background: #fff; +} + +.logo { + padding: 25px; +} + +.logo__link { + display: inline-block; +} + +.logo__item { + display: inline-block; + vertical-align: middle; +} + +.logo__img { + max-height: 256px; +} + +.logo__text { + text-transform: uppercase; +} + +.logo--mixed .logo__item { + margin: .5rem auto; +} + +.logo--mixed .logo__img { + max-width: 128px; + max-height: 128px; +} + +.logo--mixed .logo__text { + padding: 0 1rem; +} + +.logo__title { + font-size: 32px; + font-size: 2rem; + font-weight: 700; + line-height: 1; + color: #000; +} + +.logo__tagline { + display: inline-block; + padding-top: 10px; + margin-top: 10px; + font-size: 14px; + font-size: .875rem; + font-weight: 700; + line-height: 1; + color: {{ $highlightColor }}; + border-top: 1px solid #ebebeb; +} + +.divider { + height: 5px; + margin: 0; + background: {{ $highlightColor }}; + border: 0; +} + +/* Main menu */ +.no-js .menu__btn { + display: none; +} + +.menu__btn { + display: block; + width: 100%; + padding: 0; + font: inherit; + color: #fff; + background: #2a2a2a; + border: 0; + outline: 0; +} + +.menu__btn-title { + position: relative; + display: block; + padding: 10px 15px; + padding: .625rem .9375rem; + font-weight: 700; + text-align: right; + text-transform: uppercase; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +:focus > .menu__btn-title { + box-shadow: inset 0 0 1px 3px {{ $highlightColor }}; +} + +button:not(:-moz-focusring):focus > .menu__btn-title { + box-shadow: none; +} + +.menu__btn:focus, +.menu__btn-title:focus { + outline: 0; +} + +.js .menu__btn--active { + color: {{ $highlightColor }}; +} + +.menu__list { + list-style: none; + background: #2a2a2a; +} + +.menu__item:hover { + background: {{ $highlightColor }}; +} + +.menu__item:first-child { + border: 0; +} + +.menu__item--active { + background: {{ $highlightColor }}; +} + +.menu__link { + display: block; + padding: 10px 15px; + padding: .625rem .9375rem; + font-weight: 700; + color: #fff; + text-transform: uppercase; +} + +.menu__link:hover { + color: #fff; +} + +.js .menu__list { + position: absolute; + z-index: 1; + width: 100%; + visibility: hidden; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: top left; + transform-origin: top left; +} + +.js .menu__list--active { + visibility: visible; + border-top: 1px solid rgba(255, 255, 255, .1); + border-bottom: 1px solid rgba(255, 255, 255, .1); + -webkit-transform: scaleY(1); + transform: scaleY(1); +} + +.menu__list--transition { + transition: visibility .15s ease, transform .15s ease, -webkit-transform .15s ease; +} + +@media screen and (min-width: 767px) { + .menu { + border-bottom: 5px solid {{ $highlightColor }}; + } + + .menu__btn { + display: none; + } + + .menu__list, + .js .menu__list { + position: relative; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + visibility: visible; + border: 0; + -webkit-transform: none; + transform: none; + } + + .menu__item { + border-left: 1px solid rgba(255, 255, 255, .1); + } +} + +/* Posts/Pages */ +.post__header, +.main__header { + margin-bottom: 20px; + margin-bottom: 1.25rem; +} + +.main__title { + font-size: 28px; + font-size: 1.75rem; +} + +.main__content { + margin-bottom: 20px; + margin-bottom: 1.25rem; +} + +.meta { + font-size: 13px; + font-size: .8125rem; + vertical-align: baseline; +} + +.meta, +.meta a { + color: #666; +} + +.meta a:hover { + color: {{ $highlightColor }}; +} + +.meta__item { + display: inline; + margin-left: 15px; +} + +.meta__item:first-child { + margin-left: 0; +} + +.meta__icon { + margin-right: 5px; + vertical-align: middle; + fill: #c4c4c4; +} + +.meta__text { + vertical-align: middle; +} + +.post__title { + margin: 0; +} + +.post__meta { + padding: 5px 0; + margin-top: 10px; + margin-top: .625rem; + border-top: 1px dotted #ebebeb; + border-bottom: 1px dotted #ebebeb; +} + +.post__lead { + margin-top: 4px; + margin-top: .25rem; + margin-bottom: 0; + font-size: 16px; + font-size: 1rem; + font-style: italic; +} + +.post__thumbnail { + max-width: 1030px; + margin: 0 0 20px; + margin-bottom: 0 0 1.25rem; +} + +.post__thumbnail img { + width: 100%; +} + +.content a, +.warning a, +.authorbox__description a { + font-weight: 700; + color: {{ $highlightColor }}; +} + +.content a:hover, +.warning a:hover, +.authorbox__description a:hover { + color: {{ $highlightColor }}; + text-decoration: underline; +} + +.content .alignnone { + display: block; + margin: 20px 0; + margin: 1.25rem 0; +} + +.content .aligncenter { + display: block; + margin: 20px auto; + margin: 1.25rem auto; +} + +.content .alignleft { + display: inline; + float: left; + margin: 5px 20px 20px 0; + margin: .3125rem 1.25rem 1.25rem 0; +} + +.content .alignright { + display: inline; + float: right; + margin: 5px 0 20px 20px; + margin: .3125rem 0 1.25rem 1.25rem; +} + +.content ul { + list-style: square; +} + +.content ol { + list-style: decimal; +} + +.content ul, +.content ol { + margin: 0 0 20px 40px; +} + +.content ul ul, +.content ol ol, +.content ol ul, +.content ul ol { + margin: 0 0 0 40px; +} + +.content li { + margin-bottom: 5px; +} + +.post__footer { + margin-top: 20px; + margin-top: 1.25rem; +} + +/* Post tags */ +.tags { + margin-bottom: 20px; + margin-bottom: 1.25rem; + font-size: 12px; + font-size: .75rem; + line-height: 1; + color: #fff; +} + +.tags__list { + list-style: none; +} + +.tags__item { + float: left; + margin: 0 6px 6px 0; + margin: 0 .375rem .375rem 0; + text-transform: uppercase; + background: #2a2a2a; +} + +.tags__item:hover { + background: {{ $highlightColor }}; +} + +.tags__link, +.tags__link:hover { + display: block; + padding: 10px 15px; +} + +.tags__badge { + float: left; + width: 32px; + height: 32px; + padding: 8px; + margin-right: 6px; + background: {{ $highlightColor }}; + fill: #fff; +} + +/* Table of Contents */ +.toc { + margin-bottom: 20px; + font-weight: 700; + color: #7a8288; + background: #fff; + border-color: #ebebeb; + border-style: solid; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 0; + border-left-width: 1px; +} + +.toc__title { + padding: 5px 10px; + color: #fff; + text-transform: uppercase; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + background: #2a2a2a; +} + +.toc__menu ul { + margin: 0; + list-style: none; +} + +.toc__menu ul ul ul a { + padding-left: 25px; +} + +.toc__menu ul ul ul ul a { + padding-left: 45px; +} + +.toc__menu ul ul ul ul ul a { + padding-left: 65px; +} + +.toc__menu ul ul ul ul ul ul a { + padding-left: 85px; +} + +.toc__menu li { + margin: 0; +} + +.toc__menu a { + display: block; + padding: 5px 10px; + color: {{ $highlightColor }}; + border-bottom: 1px solid #ebebeb; +} + +.toc__menu a:hover { + text-decoration: underline; +} + +/* Author Box */ +.authorbox { + padding: 25px 0; + margin-bottom: 25px; + line-height: 1.5; + border-top: 1px solid #ebebeb; + border-bottom: 1px solid #ebebeb; +} + +.authorbox__avatar { + float: left; + padding: 3px; + margin: 0 25px 0 0; + border: 1px solid #ebebeb; +} + +.authorbox__header { + margin-bottom: 10px; +} + +.authorbox__name { + font-size: 16px; + font-size: 1rem; + font-weight: 700; +} + +/* List content */ +.list__item { + padding-bottom: 20px; + padding-bottom: 1.25rem; + margin-bottom: 20px; + margin-bottom: 1.25rem; + border-bottom: 1px solid #ebebeb; +} + +.list__header { + margin-bottom: 10px; + margin-bottom: .625rem; +} + +.list__meta { + margin-top: 5px; +} + +.list__thumbnail { + float: left; + margin: 0 20px 0 0; +} + +.list__thumbnail img { + width: 100%; + max-width: 235px; +} + +.list__footer-readmore { + float: right; + margin-top: 10px; +} + +/* Pagination */ +.pagination { + margin-top: 20px; +} + +.pagination__item { + display: inline-block; + padding: 10px 15px; + font-weight: 700; + color: #000; + background: #f5f5f5; +} + +.pagination__item:hover, +.pagination__item--current { + color: #fff; + background: {{ $highlightColor }}; +} + +/* Pager (prev/next links) navigation */ +.pager { + -webkit-justify-content: space-between; + justify-content: space-between; + padding-top: 25px; + padding-bottom: 25px; + margin-bottom: 25px; + border-bottom: 1px solid #ebebeb; +} + +.pager__subtitle { + display: block; + margin-bottom: 5px; + font-weight: 700; + line-height: 1; + text-transform: uppercase; +} + +.pager__title { + margin-bottom: 0; + overflow: hidden; + font-size: 13px; + font-size: .8125rem; +} + +.pager__item { + -webkit-flex: 1 1 50%; + flex: 1 1 50%; + max-width: 48%; +} + +.pager__item--next { + margin-left: auto; + text-align: right; +} + +.pager__link { + display: block; +} + +/* Images / Video */ +img { + width: auto\9; /* ie8 */ + max-width: 100%; + height: auto; + vertical-align: bottom; +} + +iframe, +embed, +object, +video { + max-width: 100%; +} + +/* Table */ +table { + width: 100%; + margin-bottom: 20px; + margin-bottom: 1.25rem; + border-spacing: 0; + border-collapse: collapse; + border-top: 1px solid #ebebeb; + border-left: 1px solid #ebebeb; +} + +td, +th { + padding: 5px 10px; + border-right: 1px solid #ebebeb; + border-bottom: 1px solid #ebebeb; +} + +th { + font-weight: 700; +} + +/* Forms */ +input { + padding: 5px; + font-size: 12px; + vertical-align: middle; + background: #f5f5f5; + border: 1px solid #ebebeb; + transition: all .25s ease-in-out; +} + +input[type=text], +input[type=email], +input[type=tel], +input[type=url] { + width: 60%; +} + +input[type=text]:hover, +input[type=email]:hover, +input[type=tel]:hover, +input[type=url]:hover, +textarea:hover { + border: 1px solid #aaa; +} + +input[type=submit], +input[type=reset] { + display: inline-block; + min-width: 150px; + padding: 10px 15px; + font-weight: 700; + color: #fff; + text-transform: uppercase; + cursor: pointer; + background: #2a2a2a; + border: 0; + transition: all .1s linear; + -webkit-appearance: none; +} + +input[type=submit]:hover, +input[type=reset]:hover { + background: {{ $highlightColor }}; +} + +textarea { + width: 96%; + padding: 5px; + overflow: auto; + line-height: 1.5; + resize: vertical; + background: #f5f5f5; + border: 1px solid rgba(0, 0, 0, .1); +} + +/* Widgets */ +.widget { + margin-bottom: 25px; + overflow: hidden; +} + +.widget:last-child { + margin-bottom: 0; +} + +.widget__title { + position: relative; + padding-bottom: 5px; + font-size: 16px; + font-size: 1rem; + text-transform: uppercase; + border-bottom: 3px solid {{ $highlightColor }}; +} + +.widget__item { + display: block; + padding: 5px 0; + border-bottom: 1px dotted #ebebeb; +} + +.widget__item:first-child { + padding-top: 0; +} + +/* Search widget */ +.widget-search__form { + display: block; + padding: 5%; + margin: 0 auto; + background: #f5f5f5; +} + +.widget-search__form .widget-search__submit { + display: none; +} + +.widget-search__field { + position: relative; + display: block; + width: 90%; + padding: 8px; + margin: 0 auto; + font-size: 11px; + cursor: pointer; + background: #fff; + border: 1px solid #ebebeb; + border-radius: 0; + outline-offset: -2px; + transition: none; + -webkit-appearance: none; +} + +.widget-search__field:active, +.widget-search__field:focus { + cursor: text; +} + +/* Social widget */ +.widget-social__item { + padding: 0; + border: 0; +} + +.widget-social__link { + display: block; + margin: 0 0 8px; + white-space: normal; +} + +.widget-social__link-icon { + margin: 0 5px 0 0; + vertical-align: middle; + fill: #fff; +} + +/* Tags Widget */ +.widget-taglist__link { + display: inline-block; + margin: 0 4px 8px 0; + font-size: 12px; + text-transform: uppercase; +} + +/* Languages Widget */ +.widget-languages__link { + display: block; +} + +.widget-languages__link:hover .widget-languages__link-btn { + color: #fff; + background: {{ $highlightColor }}; +} + +.widget-languages__link-btn { + display: inline-block; +} + +/* Footer */ +.footer { + padding: 10px 25px; + font-size: 12px; + font-size: .75rem; + color: #999; + background: #2a2a2a; + border-top: 3px solid #999; +} + +.footer__container { + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-justify-content: space-between; + justify-content: space-between; +} + +.footer__links { + -webkit-order: 1; + order: 1; +} + +.footer a { + color: #fff; +} + +.footer a:hover { + text-decoration: underline; +} + +/* Media Queries */ +@media screen and (max-width: 1475px) { + .container--outer { + width: 95%; + } +} + +@media screen and (max-width: 900px) { + .container--outer { + width: 100%; + margin: 0 auto; + } + + .wrapper, + .logo { + padding: 20px; + } + + .widget { + margin-bottom: 20px; + } + + .footer__container { + display: block; + } + + .footer__links { + padding-bottom: 8px; + padding-bottom: 0.5rem; + text-align: center; + } + + .footer__copyright { + text-align: center; + } +} + +@media screen and (max-width: 767px) { + .wrapper { + display: block; + } + + .sidebar { + float: none; + width: 100%; + margin: 0; + } + + .logo { + text-align: center; + } + + .logo__link { + margin: 0 auto; + } + + .logo__title { + font-size: 24px; + font-size: 1.5rem; + } + + .sidebar { + margin-top: 20px; + } +} + +@media screen and (max-width: 620px) { + input[type=text], + input[type=email], + input[type=tel], + input[type=url] { + width: 88%; + } + + .meta__item { + display: block; + margin-left: 0; + } + + .authorbox { + text-align: center; + } + + .authorbox__avatar { + display: inline-block; + float: none; + margin: 0 0 20px; + } + + .pager { + display: block; + } + + .pager__item { + min-width: 100%; + text-align: center; + } + + .pager__item--prev { + padding-bottom: 25px; + } + + .content ul, + .content ol { + margin: 0 0 20px 20px; + } + + .content ul ul, + .content ol ol, + .content ol ul, + .content ul ol { + margin: 0 0 0 20px; + } + + .list__thumbnail { + max-width: 80px; + } + + .list__title { + font-size: 16px; + font-size: 1rem; + } + + .list__lead { + font-size: 14px; + font-size: .875rem; + } + + .list__meta { + display: block; + font-size: 11px; + font-size: .6875rem; + } +} |