diff --git a/css/base/_page.scss b/css/base/_page.scss new file mode 100644 index 0000000..78e8f88 --- /dev/null +++ b/css/base/_page.scss @@ -0,0 +1,48 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Basic */ + + // MSIE: Required for IEMobile. + @-ms-viewport { + width: device-width; + } + + // MSIE: Prevents scrollbar from overlapping content. + body { + -ms-overflow-style: scrollbar; + } + + // Ensures page width is always >=320px. + @include breakpoint('<=xsmall') { + html, body { + min-width: 320px; + } + } + + // Set box model to border-box. + // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice + html { + box-sizing: border-box; + } + + *, *:before, *:after { + box-sizing: inherit; + } + + body { + background: _palette(bg); + + // Stops initial animations until page loads or stops resizing. + &.is-preload, + &.is-resizing { + *, *:before, *:after { + @include vendor('animation', 'none !important'); + @include vendor('transition', 'none !important'); + } + } + + } \ No newline at end of file diff --git a/css/base/_reset.scss b/css/base/_reset.scss new file mode 100644 index 0000000..3dde769 --- /dev/null +++ b/css/base/_reset.scss @@ -0,0 +1,76 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +// Reset. +// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain) + + html, body, div, span, applet, object, + iframe, h1, h2, h3, h4, h5, h6, p, blockquote, + pre, a, abbr, acronym, address, big, cite, + code, del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, b, + u, i, center, dl, dt, dd, ol, ul, li, fieldset, + form, label, legend, table, caption, tbody, + tfoot, thead, tr, th, td, article, aside, + canvas, details, embed, figure, figcaption, + footer, header, hgroup, menu, nav, output, ruby, + section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + + body { + line-height: 1; + } + + ol, ul { + list-style:none; + } + + blockquote, q { + quotes: none; + + &:before, + &:after { + content: ''; + content: none; + } + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + body { + -webkit-text-size-adjust: none; + } + + mark { + background-color: transparent; + color: inherit; + } + + input::-moz-focus-inner { + border: 0; + padding: 0; + } + + input, select, textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + } \ No newline at end of file diff --git a/css/base/_typography.scss b/css/base/_typography.scss new file mode 100644 index 0000000..1731af4 --- /dev/null +++ b/css/base/_typography.scss @@ -0,0 +1,187 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Type */ + + body, input, select, textarea { + color: _palette(fg); + font-family: _font(family); + font-size: 13pt; + font-weight: _font(weight); + line-height: 1.65; + + @include breakpoint('<=xlarge') { + font-size: 11pt; + } + + @include breakpoint('<=large') { + font-size: 10pt; + } + + @include breakpoint('<=xxsmall') { + font-size: 9pt; + } + } + + a { + @include vendor('transition', ( + 'color #{_duration(transition)} ease-in-out', + 'border-bottom-color #{_duration(transition)} ease-in-out' + )); + border-bottom: dotted 1px; + color: _palette(accent); + text-decoration: none; + + &:hover { + border-bottom-color: _palette(accent); + color: _palette(accent) !important; + + strong { + color: inherit; + } + } + } + + strong, b { + color: _palette(fg-bold); + font-weight: _font(weight-bold); + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 _size(element-margin) 0; + } + + h1, h2, h3, h4, h5, h6 { + color: _palette(fg-bold); + font-family: _font(family-heading); + font-weight: _font(weight-heading); + line-height: 1.5; + margin: 0 0 (_size(element-margin) * 0.5) 0; + + a { + color: inherit; + text-decoration: none; + border-bottom: 0; + } + } + + h1 { + font-size: 4em; + margin: 0 0 (_size(element-margin) * 0.25) 0; + line-height: 1.3; + } + + h2 { + font-size: 1.75em; + } + + h3 { + font-size: 1.25em; + } + + h4 { + font-size: 1.1em; + } + + h5 { + font-size: 0.9em; + } + + h6 { + font-size: 0.7em; + } + + @include breakpoint('<=xlarge') { + h1 { + font-size: 3.5em; + } + } + + @include breakpoint('<=medium') { + h1 { + font-size: 3.25em; + } + } + + @include breakpoint('<=small') { + h1 { + font-size: 2em; + line-height: 1.4; + } + + h2 { + font-size: 1.5em; + } + } + + sub { + font-size: 0.8em; + position: relative; + top: 0.5em; + } + + sup { + font-size: 0.8em; + position: relative; + top: -0.5em; + } + + blockquote { + border-left: solid 3px _palette(border); + font-style: italic; + margin: 0 0 _size(element-margin) 0; + padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); + } + + code { + background: _palette(border-bg); + border-radius: _size(border-radius); + border: solid 1px _palette(border); + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0 _size(element-margin) 0; + + code { + display: block; + line-height: 1.75; + padding: 1em 1.5em; + overflow-x: auto; + } + } + + hr { + border: 0; + border-bottom: solid 1px _palette(border); + margin: _size(element-margin) 0; + + &.major { + margin: (_size(element-margin) * 1.5) 0; + } + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } \ No newline at end of file diff --git a/css/components/_actions.scss b/css/components/_actions.scss new file mode 100644 index 0000000..3d4db48 --- /dev/null +++ b/css/components/_actions.scss @@ -0,0 +1,63 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Actions */ + + ul.actions { + @include vendor('display', 'flex'); + cursor: default; + list-style: none; + margin-left: (_size(element-margin) * -0.5); + padding-left: 0; + + li { + padding: 0 0 0 (_size(element-margin) * 0.5); + vertical-align: middle; + } + + &.special { + @include vendor('justify-content', 'center'); + width: 100%; + margin-left: 0; + + li { + &:first-child { + padding-left: 0; + } + } + } + + &.stacked { + @include vendor('flex-direction', 'column'); + margin-left: 0; + + li { + padding: (_size(element-margin) * 0.65) 0 0 0; + + &:first-child { + padding-top: 0; + } + } + } + + &.fit { + width: calc(100% + #{_size(element-margin) * 0.5}); + + li { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + width: 100%; + + > * { + width: 100%; + } + } + + &.stacked { + width: 100%; + } + } + } \ No newline at end of file diff --git a/css/components/_box.scss b/css/components/_box.scss new file mode 100644 index 0000000..9c6840e --- /dev/null +++ b/css/components/_box.scss @@ -0,0 +1,26 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Box */ + + .box { + border-radius: _size(border-radius); + border: solid 1px _palette(border); + margin-bottom: _size(element-margin); + padding: 1.5em; + + > :last-child, + > :last-child > :last-child, + > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + &.alt { + border: 0; + border-radius: 0; + padding: 0; + } + } \ No newline at end of file diff --git a/css/components/_button.scss b/css/components/_button.scss new file mode 100644 index 0000000..7e08533 --- /dev/null +++ b/css/components/_button.scss @@ -0,0 +1,85 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + @include vendor('appearance', 'none'); + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + background-color: transparent; + border-radius: _size(border-radius); + border: 0; + box-shadow: inset 0 0 0 2px _palette(accent); + color: _palette(accent) !important; + cursor: pointer; + display: inline-block; + font-family: _font(family-heading); + font-size: 0.8em; + font-weight: _font(weight-heading); + height: 3.5em; + letter-spacing: _font(kerning-heading); + line-height: 3.5em; + padding: 0 2.25em; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + + &:hover { + background-color: transparentize(_palette(accent), 0.95); + } + + &:active { + background-color: transparentize(_palette(accent), 0.85); + } + + &.icon { + &:before { + margin-right: 0.5em; + } + } + + &.fit { + width: 100%; + } + + &.small { + font-size: 0.6em; + } + + &.large { + font-size: 1em; + height: 3.65em; + line-height: 3.65em; + } + + &.primary { + background-color: _palette(accent); + box-shadow: none; + color: _palette(bg) !important; + + &:hover { + background-color: lighten(_palette(accent), 3); + } + + &:active { + background-color: darken(_palette(accent), 3); + } + } + + &.disabled, + &:disabled { + @include vendor('pointer-events', 'none'); + opacity: 0.25; + } + } \ No newline at end of file diff --git a/css/components/_contact.scss b/css/components/_contact.scss new file mode 100644 index 0000000..45e6934 --- /dev/null +++ b/css/components/_contact.scss @@ -0,0 +1,47 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Contact */ + + ul.contact { + list-style: none; + padding: 0; + + li { + @include icon; + border-top: solid 1px _palette(border); + margin: 1.5em 0 0 0; + padding: 1.5em 0 0 3em; + position: relative; + + &:before { + color: _palette(accent); + display: inline-block; + font-size: 1.5em; + height: 1.125em; + left: 0; + line-height: 1.125em; + position: absolute; + text-align: center; + top: (1.5em / 1.5); + width: 1.5em; + } + + &:first-child { + border-top: 0; + margin-top: 0; + padding-top: 0; + + &:before { + top: 0; + } + } + + a { + color: inherit; + } + } + } \ No newline at end of file diff --git a/css/components/_features.scss b/css/components/_features.scss new file mode 100644 index 0000000..820a947 --- /dev/null +++ b/css/components/_features.scss @@ -0,0 +1,156 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Features */ + + .features { + $gutter: _size(gutter); + + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + margin: 0 0 _size(element-margin) ($gutter * -1); + width: calc(100% + #{$gutter}); + + article { + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + margin: 0 0 $gutter $gutter; + position: relative; + width: calc(50% - #{$gutter}); + + &:nth-child(2n - 1) { + margin-right: ($gutter * 0.5); + } + + &:nth-child(2n) { + margin-left: ($gutter * 0.5); + } + + &:nth-last-child(1), + &:nth-last-child(2) { + margin-bottom: 0; + } + + .icon { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + display: block; + height: 10em; + line-height: 10em; + margin: 0 _size(element-margin) 0 0; + text-align: center; + width: 10em; + + &:before { + color: _palette(accent); + font-size: 2.75rem; + position: relative; + top: 0.05em; + } + + &:after { + @include vendor('transform', 'rotate(45deg)'); + border-radius: 0.25rem; + border: solid 2px _palette(border); + content: ''; + display: block; + height: 7em; + left: 50%; + margin: -3.5em 0 0 -3.5em; + position: absolute; + top: 50%; + width: 7em; + } + } + + .content { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + width: 100%; + + > :last-child { + margin-bottom: 0; + } + } + } + + @include breakpoint('<=medium') { + margin: 0 0 _size(element-margin) 0; + width: 100%; + + article { + margin: 0 0 $gutter 0; + width: 100%; + + &:nth-child(2n - 1) { + margin-right: 0; + } + + &:nth-child(2n) { + margin-left: 0; + } + + &:nth-last-child(1), + &:nth-last-child(2) { + margin-bottom: $gutter; + } + + &:last-child { + margin-bottom: 0; + } + + .icon { + height: 8em; + line-height: 8em; + width: 8em; + + &:before { + font-size: 2.25rem; + } + + &:after { + height: 6em; + margin: -3em 0 0 -3em; + width: 6em; + } + } + } + } + + @include breakpoint('<=xsmall') { + article { + @include vendor('flex-direction', 'column'); + @include vendor('align-items', 'flex-start'); + + .icon { + height: 6em; + line-height: 6em; + margin: 0 0 (_size(element-margin) * 0.75) 0; + width: 6em; + + &:before { + font-size: 1.5rem; + } + + &:after { + height: 4em; + margin: -2em 0 0 -2em; + width: 4em; + } + } + } + } + + @include breakpoint('<=xsmall') { + article { + .icon { + &:before { + font-size: 1.25rem; + } + } + } + } + } \ No newline at end of file diff --git a/css/components/_form.scss b/css/components/_form.scss new file mode 100644 index 0000000..cf8b907 --- /dev/null +++ b/css/components/_form.scss @@ -0,0 +1,179 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Form */ + + form { + margin: 0 0 _size(element-margin) 0; + } + + label { + color: _palette(fg-bold); + display: block; + font-size: 0.9em; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + input[type="search"], + input[type="url"], + select, + textarea { + @include vendor('appearance', 'none'); + background: _palette(bg); + border-radius: _size(border-radius); + border: none; + border: solid 1px _palette(border); + color: inherit; + display: block; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; + + &:invalid { + box-shadow: none; + } + + &:focus { + border-color: _palette(accent); + box-shadow: 0 0 0 1px _palette(accent); + } + } + + select { + background-image: svg-url(""); + background-size: 1.25em; + background-repeat: no-repeat; + background-position: calc(100% - 1em) center; + height: _size(element-height); + padding-right: _size(element-height); + text-overflow: ellipsis; + + option { + color: _palette(fg-bold); + background: _palette(bg); + } + + &:focus { + &::-ms-value { + background-color: transparent; + } + } + + &::-ms-expand { + display: none; + } + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + input[type="search"], + input[type="url"], + select { + height: _size(element-height); + } + + textarea { + padding: 0.75em 1em; + } + + input[type="checkbox"], + input[type="radio"], { + @include vendor('appearance', 'none'); + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; + + & + label { + @include icon(false, solid); + color: _palette(fg); + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: _font(weight); + padding-left: (_size(element-height) * 0.6) + 0.75em; + padding-right: 0.75em; + position: relative; + + &:before { + background: _palette(bg); + border-radius: _size(border-radius); + border: solid 1px _palette(border); + content: ''; + display: inline-block; + font-size: 0.8em; + height: (_size(element-height) * 0.75); + left: 0; + line-height: (_size(element-height) * 0.75); + position: absolute; + text-align: center; + top: 0; + width: (_size(element-height) * 0.75); + } + } + + &:checked + label { + &:before { + background: _palette(fg-bold); + border-color: _palette(fg-bold); + color: _palette(bg); + content: '\f00c'; + } + } + + &:focus + label { + &:before { + border-color: _palette(accent); + box-shadow: 0 0 0 1px _palette(accent); + } + } + } + + input[type="checkbox"] { + & + label { + &:before { + border-radius: _size(border-radius); + } + } + } + + input[type="radio"] { + & + label { + &:before { + border-radius: 100%; + } + } + } + + ::-webkit-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + ::-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-ms-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } \ No newline at end of file diff --git a/css/components/_icon.scss b/css/components/_icon.scss new file mode 100644 index 0000000..b71cd31 --- /dev/null +++ b/css/components/_icon.scss @@ -0,0 +1,33 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Icon */ + + .icon { + @include icon; + border-bottom: none; + position: relative; + + > .label { + display: none; + } + + &:before { + line-height: inherit; + } + + &.solid { + &:before { + font-weight: 900; + } + } + + &.brands { + &:before { + font-family: 'Font Awesome 5 Brands'; + } + } + } \ No newline at end of file diff --git a/css/components/_icons.scss b/css/components/_icons.scss new file mode 100644 index 0000000..df7e2da --- /dev/null +++ b/css/components/_icons.scss @@ -0,0 +1,30 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Icons */ + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 1em 0 0; + + &:last-child { + padding-right: 0; + } + + .icon { + color: inherit; + + &:before { + font-size: 1.25em; + } + } + } + } \ No newline at end of file diff --git a/css/components/_image.scss b/css/components/_image.scss new file mode 100644 index 0000000..82f8266 --- /dev/null +++ b/css/components/_image.scss @@ -0,0 +1,74 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Image */ + + .image { + border-radius: _size(border-radius); + border: 0; + display: inline-block; + position: relative; + + img { + border-radius: _size(border-radius); + display: block; + } + + &.left, + &.right { + max-width: 40%; + + img { + width: 100%; + } + } + + &.left { + float: left; + padding: 0 1.5em 1em 0; + top: 0.25em; + } + + &.right { + float: right; + padding: 0 0 1em 1.5em; + top: 0.25em; + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + + &.main { + display: block; + margin: 0 0 (_size(element-margin) * 1.5) 0; + width: 100%; + + img { + width: 100%; + } + } + } + + a.image { + overflow: hidden; + + img { + @include vendor('transition', 'transform #{_duration(transition)} ease'); + } + + &:hover { + img { + @include vendor('transform', 'scale(1.075)'); + } + } + } \ No newline at end of file diff --git a/css/components/_list.scss b/css/components/_list.scss new file mode 100644 index 0000000..9c5677b --- /dev/null +++ b/css/components/_list.scss @@ -0,0 +1,56 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 _size(element-margin) 0; + padding-left: 1.25em; + + li { + padding-left: 0.25em; + } + } + + ul { + list-style: disc; + margin: 0 0 _size(element-margin) 0; + padding-left: 1em; + + li { + padding-left: 0.5em; + } + + &.alt { + list-style: none; + padding-left: 0; + + li { + border-top: solid 1px _palette(border); + padding: 0.5em 0; + + &:first-child { + border-top: 0; + padding-top: 0; + } + } + } + } + + dl { + margin: 0 0 _size(element-margin) 0; + + dt { + display: block; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + dd { + margin-left: _size(element-margin); + } + } \ No newline at end of file diff --git a/css/components/_mini-posts.scss b/css/components/_mini-posts.scss new file mode 100644 index 0000000..cf8e74b --- /dev/null +++ b/css/components/_mini-posts.scss @@ -0,0 +1,31 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Mini Posts */ + + .mini-posts { + article { + border-top: solid 1px _palette(border); + margin-top: _size(element-margin); + padding-top: _size(element-margin); + + .image { + display: block; + margin: 0 0 (_size(element-margin) * 0.75) 0; + + img { + display: block; + width: 100%; + } + } + + &:first-child { + border-top: 0; + margin-top: 0; + padding-top: 0; + } + } + } \ No newline at end of file diff --git a/css/components/_pagination.scss b/css/components/_pagination.scss new file mode 100644 index 0000000..3f1b83d --- /dev/null +++ b/css/components/_pagination.scss @@ -0,0 +1,70 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Pagination */ + + ul.pagination { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding-left: 0; + vertical-align: middle; + + > .page { + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + border-bottom: 0; + border-radius: _size(border-radius); + display: inline-block; + font-size: 0.8em; + font-weight: _font(weight-bold); + height: 2em; + line-height: 2em; + margin: 0 0.125em; + min-width: 2em; + padding: 0 0.5em; + text-align: center; + + &.active { + background-color: _palette(accent); + color: _palette(bg) !important; + + &:hover { + background-color: lighten(_palette(accent), 3); + } + + &:active { + background-color: darken(_palette(accent), 3); + } + } + } + + &:first-child { + padding-right: 0.75em; + } + + &:last-child { + padding-left: 0.75em; + } + } + + @include breakpoint('<=xsmall') { + li { + &:nth-child(n+2):nth-last-child(n+2) { + display: none; + } + + &:first-child { + padding-right: 0; + } + } + } + } \ No newline at end of file diff --git a/css/components/_posts.scss b/css/components/_posts.scss new file mode 100644 index 0000000..4350a92 --- /dev/null +++ b/css/components/_posts.scss @@ -0,0 +1,179 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Posts */ + + .posts { + $gutter: (_size(gutter) * 2); + + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + margin: 0 0 _size(element-margin) ($gutter * -1); + width: calc(100% + #{$gutter}); + + article { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '1'); + margin: 0 0 $gutter $gutter; + position: relative; + width: calc(#{(100% / 3)} - #{$gutter}); + + &:before { + background: _palette(border); + content: ''; + display: block; + height: calc(100% + #{$gutter}); + left: ($gutter * -0.5); + position: absolute; + top: 0; + width: 1px; + } + + &:after { + background: _palette(border); + bottom: ($gutter * -0.5); + content: ''; + display: block; + height: 1px; + position: absolute; + right: 0; + width: calc(100% + #{$gutter}); + } + + > :last-child { + margin-bottom: 0; + } + + .image { + display: block; + margin: 0 0 _size(element-margin) 0; + + img { + display: block; + width: 100%; + } + } + } + + @include breakpoint('xlarge-to-max') { + article { + &:nth-child(3n + 1) { + &:before { + display: none; + } + + &:after { + width: 100%; + } + } + + &:nth-last-child(1), + &:nth-last-child(2), + &:nth-last-child(3) { + margin-bottom: 0; + + &:before { + height: 100%; + } + + &:after { + display: none; + } + } + } + } + + @include breakpoint('<=xlarge') { + article { + width: calc(50% - #{$gutter}); + + &:nth-last-child(3) { + margin-bottom: $gutter; + } + } + } + + @include breakpoint('small-to-xlarge') { + article { + &:nth-child(2n + 1) { + &:before { + display: none; + } + + &:after { + width: 100%; + } + } + + &:nth-last-child(1), + &:nth-last-child(2) { + margin-bottom: 0; + + &:before { + height: 100%; + } + + &:after { + display: none; + } + } + } + } + + @include breakpoint('<=small') { + $gutter: _size(gutter) * 1.5; + + margin: 0 0 _size(element-margin) ($gutter * -1); + width: calc(100% + #{$gutter}); + + article { + margin: 0 0 $gutter $gutter; + width: calc(50% - #{$gutter}); + + &:before { + height: calc(100% + #{$gutter}); + left: ($gutter * -0.5); + } + + &:after { + bottom: ($gutter * -0.5); + width: calc(100% + #{$gutter}); + } + + &:nth-last-child(3) { + margin-bottom: $gutter; + } + } + } + + @include breakpoint('<=xsmall') { + $gutter: _size(gutter) * 1.5; + + margin: 0 0 _size(element-margin) 0; + width: 100%; + + article { + margin: 0 0 $gutter 0; + width: 100%; + + &:before { + display: none; + } + + &:after { + width: 100%; + } + + &:last-child { + margin-bottom: 0; + + &:after { + display: none; + } + } + } + } + } \ No newline at end of file diff --git a/css/components/_row.scss b/css/components/_row.scss new file mode 100644 index 0000000..c62fa35 --- /dev/null +++ b/css/components/_row.scss @@ -0,0 +1,31 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Row */ + + .row { + @include html-grid(1.5em); + + @include breakpoint('<=xlarge') { + @include html-grid(1.5em, 'xlarge'); + } + + @include breakpoint('<=large') { + @include html-grid(1.5em, 'large'); + } + + @include breakpoint('<=medium') { + @include html-grid(1.5em, 'medium'); + } + + @include breakpoint('<=small') { + @include html-grid(1.5em, 'small'); + } + + @include breakpoint('<=xsmall') { + @include html-grid(1.5em, 'xsmall'); + } + } \ No newline at end of file diff --git a/css/components/_section.scss b/css/components/_section.scss new file mode 100644 index 0000000..5f26593 --- /dev/null +++ b/css/components/_section.scss @@ -0,0 +1,39 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Section/Article */ + + section, article { + &.special { + text-align: center; + } + } + + header { + p { + font-family: _font(family-heading); + font-size: 1em; + font-weight: _font(weight-heading-alt); + letter-spacing: _font(kerning-heading); + margin-top: -0.5em; + text-transform: uppercase; + } + + &.major { + > :last-child { + border-bottom: solid 3px _palette(accent); + display: inline-block; + margin: 0 0 _size(element-margin) 0; + padding: 0 0.75em 0.5em 0; + } + } + + &.main { + > :last-child { + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + } + } \ No newline at end of file diff --git a/css/components/_table.scss b/css/components/_table.scss new file mode 100644 index 0000000..9b76d49 --- /dev/null +++ b/css/components/_table.scss @@ -0,0 +1,81 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 _size(element-margin) 0; + width: 100%; + + tbody { + tr { + border: solid 1px _palette(border); + border-left: 0; + border-right: 0; + + &:nth-child(2n + 1) { + background-color: _palette(border-bg); + } + } + } + + td { + padding: 0.75em 0.75em; + } + + th { + color: _palette(fg-bold); + font-size: 0.9em; + font-weight: _font(weight-bold); + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } + + thead { + border-bottom: solid 2px _palette(border); + } + + tfoot { + border-top: solid 2px _palette(border); + } + + &.alt { + border-collapse: separate; + + tbody { + tr { + td { + border: solid 1px _palette(border); + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: 1px; + } + } + + &:first-child { + td { + border-top-width: 1px; + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + } \ No newline at end of file diff --git a/css/layout/_banner.scss b/css/layout/_banner.scss new file mode 100644 index 0000000..eadaf5d --- /dev/null +++ b/css/layout/_banner.scss @@ -0,0 +1,75 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Banner */ + + #banner { + @include padding(6em, 0); + @include vendor('display', 'flex'); + + h1 { + margin-top: -0.125em; + } + + .content { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + width: 50%; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + display: block; + margin: 0 0 _size(element-margin) (_size(element-margin) * 2); + width: 50%; + + img { + height: 100%; + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + width: 100%; + } + } + + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + + h1 { + br { + display: none; + } + } + + .content { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + width: 100%; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + margin: 0 0 (_size(element-margin) * 2) 0; + height: 25em; + max-height: 50vh; + min-height: 18em; + width: 100%; + } + + @include breakpoint('<=xsmall') { + .image { + max-height: 35vh; + } + } + } + } \ No newline at end of file diff --git a/css/layout/_footer.scss b/css/layout/_footer.scss new file mode 100644 index 0000000..e60483f --- /dev/null +++ b/css/layout/_footer.scss @@ -0,0 +1,18 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Footer */ + + #footer { + .copyright { + color: _palette(fg-light); + font-size: 0.9em; + + a { + color: inherit; + } + } + } \ No newline at end of file diff --git a/css/layout/_header.scss b/css/layout/_header.scss new file mode 100644 index 0000000..3e7a05c --- /dev/null +++ b/css/layout/_header.scss @@ -0,0 +1,51 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Header */ + + #header { + @include vendor('display', 'flex'); + border-bottom: solid 5px _palette(accent); + padding: 6em 0 1em 0; + position: relative; + + > * { + @include vendor('flex', '1'); + margin-bottom: 0; + } + + .logo { + border-bottom: 0; + color: inherit; + font-family: _font(family-heading); + font-size: 1.125em; + } + + .icons { + text-align: right; + } + + @include breakpoint('<=xlarge') { + padding-top: 5em; + } + + @include breakpoint('<=small') { + padding-top: 6.5em; + + .logo { + font-size: 1.25em; + margin: 0; + } + + .icons { + height: (6.25em / 1.25); + line-height: (6.25em / 1.25); + position: absolute; + right: (-0.625em / 1.25); + top: 0; + } + } + } \ No newline at end of file diff --git a/css/layout/_main.scss b/css/layout/_main.scss new file mode 100644 index 0000000..498e5bd --- /dev/null +++ b/css/layout/_main.scss @@ -0,0 +1,58 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Main */ + + #main { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + width: 100%; + + > .inner { + @include padding(0, 6em); + margin: 0 auto; + max-width: 110em; + + > section { + @include padding(6em, 0); + border-top: solid 2px _palette(border); + + &:first-of-type { + border-top: 0 !important; + } + } + } + + @include breakpoint('<=xlarge') { + > .inner { + @include padding(0, 5em); + + > section { + @include padding(5em, 0); + } + } + } + + @include breakpoint('<=large') { + > .inner { + @include padding(0, 4em); + + > section { + @include padding(4em, 0); + } + } + } + + @include breakpoint('<=small') { + > .inner { + @include padding(0, 2em); + + > section { + @include padding(3em, 0); + } + } + } + } \ No newline at end of file diff --git a/css/layout/_menu.scss b/css/layout/_menu.scss new file mode 100644 index 0000000..c51a157 --- /dev/null +++ b/css/layout/_menu.scss @@ -0,0 +1,98 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Menu */ + + #menu { + ul { + @include vendor('user-select', 'none'); + color: _palette(fg-bold); + font-family: _font(family-heading); + font-weight: _font(weight-heading-alt); + letter-spacing: _font(kerning-heading); + list-style: none; + margin-bottom: 0; + padding: 0; + text-transform: uppercase; + + a, span { + border-bottom: 0; + color: inherit; + cursor: pointer; + display: block; + font-size: 0.9em; + padding: 0.625em 0; + + &:hover { + color: _palette(accent); + } + + &.opener { + @include vendor('transition', 'color #{_duration(transition)} ease-in-out'); + @include icon(false, solid); + -webkit-tap-highlight-color: rgba(255,255,255,0); + position: relative; + + &:before { + @include vendor('transition', ( + 'color #{_duration(transition)} ease-in-out', + 'transform #{_duration(transition)} ease-in-out' + )); + color: _palette(fg-light); + content: '\f078'; + position: absolute; + right: 0; + } + + &:hover { + &:before { + color: _palette(accent); + } + } + + &.active { + & + ul { + display: block; + } + + &:before { + @include vendor('transform', 'rotate(-180deg)'); + } + } + } + } + } + + > ul { + > li { + border-top: solid 1px _palette(border); + margin: 0.5em 0 0 0; + padding: 0.5em 0 0 0; + + > ul { + color: _palette(fg-light); + display: none; + margin: 0.5em 0 1.5em 0; + padding-left: 1em; + + a, span { + font-size: 0.8em; + } + + > li { + margin: 0.125em 0 0 0; + padding: 0.125em 0 0 0; + } + } + + &:first-child { + border-top: 0; + margin-top: 0; + padding-top: 0; + } + } + } + } \ No newline at end of file diff --git a/css/layout/_sidebar.scss b/css/layout/_sidebar.scss new file mode 100644 index 0000000..091bc52 --- /dev/null +++ b/css/layout/_sidebar.scss @@ -0,0 +1,223 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Sidebar */ + + #search { + form { + @include icon(false, solid); + position: relative; + + &:before { + @include vendor('transform', 'scaleX(-1)'); + color: _palette(fg); + content: '\f002'; + cursor: default; + display: block; + font-size: 1.5em; + height: _size(element-height) / 1.375; + line-height: _size(element-height) / 1.375; + opacity: 0.325; + position: absolute; + right: 0; + text-align: center; + top: 0; + width: _size(element-height) / 1.375; + } + + input[type="text"] { + padding-right: _size(element-height); + } + } + } + + #sidebar { + $pad: 2em / 0.9; + + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + @include vendor('transition', ( + 'margin-left 0.5s ease', + 'box-shadow 0.5s ease' + )); + background-color: _palette(bg-alt); + font-size: 0.9em; + position: relative; + width: _size(sidebar-width); + + h2 { + font-size: (1.25em / 0.9); + } + + > .inner { + @include padding($pad, $pad, (0, 0, $pad, 0)); + position: relative; + width: _size(sidebar-width); + + > * { + border-bottom: solid 2px _palette(border); + margin: 0 0 (_size(element-margin) * 1.75) 0; + padding: 0 0 (_size(element-margin) * 1.75) 0; + + > :last-child { + margin-bottom: 0; + } + + &:last-child { + border-bottom: 0; + margin-bottom: 0; + padding-bottom: 0; + } + } + + > .alt { + background-color: darken(_palette(bg-alt), 2); + border-bottom: 0; + margin: ($pad * -1) 0 ($pad * 2) ($pad * -1); + padding: $pad; + width: calc(100% + #{$pad * 2}); + } + } + + .toggle { + @include icon(false, solid); + @include vendor('transition', 'left 0.5s ease'); + -webkit-tap-highlight-color: rgba(255,255,255,0); + border: 0; + display: block; + height: 7.5em; + left: _size(sidebar-width); + line-height: 7.5em; + outline: 0; + overflow: hidden; + position: absolute; + text-align: center; + text-indent: -15em; + white-space: nowrap; + top: 0; + width: 6em; + z-index: _misc(z-index-base); + + &:before { + content: '\f0c9'; + font-size: 2rem; + height: inherit; + left: 0; + line-height: inherit; + position: absolute; + text-indent: 0; + top: 0; + width: inherit; + } + } + + &.inactive { + margin-left: (_size(sidebar-width) * -1); + } + + @include breakpoint('<=xlarge') { + $pad: 1.5em / 0.9; + + width: _size(sidebar-width-alt); + + > .inner { + @include padding($pad, $pad, (0, 0, $pad, 0)); + width: _size(sidebar-width-alt); + + > .alt { + margin: ($pad * -1) 0 ($pad * 2) ($pad * -1); + padding: $pad; + width: calc(100% + #{$pad * 2}); + } + } + + .toggle { + height: 6.25em; + left: _size(sidebar-width-alt); + line-height: 6.25em; + text-indent: 5em; + width: 5em; + + &:before { + font-size: 1.5rem; + } + } + + &.inactive { + margin-left: (_size(sidebar-width-alt) * -1); + } + } + + @include breakpoint('<=large') { + box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175); + height: 100%; + left: 0; + position: fixed; + top: 0; + z-index: _misc(z-index-base); + + &.inactive { + box-shadow: none; + } + + > .inner { + -webkit-overflow-scrolling: touch; + height: 100%; + left: 0; + overflow-x: hidden; + overflow-y: auto; + position: absolute; + top: 0; + + &:after { + content: ''; + display: block; + height: 4em; + width: 100%; + } + } + + .toggle { + text-indent: 6em; + width: 6em; + + &:before { + font-size: 1.5rem; + margin-left: (-0.875em / 2); + } + } + + body.is-preload & { + display: none; + } + } + + @include breakpoint('<=small') { + .toggle { + text-indent: 7.25em; + width: 7.25em; + + &:before { + color: _palette(fg); + margin-left: (-0.125em / 2); + margin-top: (-0.5em / 2); + font-size: 1.1rem; + z-index: 1; + } + + &:after { + background: transparentize(lighten(_palette(fg), 35), 0.25); + border-radius: _size(border-radius); + content: ''; + height: 3.5em; + left: 1em; + position: absolute; + top: 1em; + width: 5em; + } + } + } + } \ No newline at end of file diff --git a/css/layout/_wrapper.scss b/css/layout/_wrapper.scss new file mode 100644 index 0000000..db29b95 --- /dev/null +++ b/css/layout/_wrapper.scss @@ -0,0 +1,13 @@ +/// +/// Editorial by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Wrapper */ + + #wrapper { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row-reverse'); + min-height: 100vh; + } \ No newline at end of file diff --git a/css/libs/_breakpoints.scss b/css/libs/_breakpoints.scss new file mode 100644 index 0000000..c5301d8 --- /dev/null +++ b/css/libs/_breakpoints.scss @@ -0,0 +1,223 @@ +// breakpoints.scss v1.0 | @ajlkn | MIT licensed */ + +// Vars. + + /// Breakpoints. + /// @var {list} + $breakpoints: () !global; + +// Mixins. + + /// Sets breakpoints. + /// @param {map} $x Breakpoints. + @mixin breakpoints($x: ()) { + $breakpoints: $x !global; + } + + /// Wraps @content in a @media block targeting a specific orientation. + /// @param {string} $orientation Orientation. + @mixin orientation($orientation) { + @media screen and (orientation: #{$orientation}) { + @content; + } + } + + /// Wraps @content in a @media block using a given query. + /// @param {string} $query Query. + @mixin breakpoint($query: null) { + + $breakpoint: null; + $op: null; + $media: null; + + // Determine operator, breakpoint. + + // Greater than or equal. + @if (str-slice($query, 0, 2) == '>=') { + + $op: 'gte'; + $breakpoint: str-slice($query, 3); + + } + + // Less than or equal. + @elseif (str-slice($query, 0, 2) == '<=') { + + $op: 'lte'; + $breakpoint: str-slice($query, 3); + + } + + // Greater than. + @elseif (str-slice($query, 0, 1) == '>') { + + $op: 'gt'; + $breakpoint: str-slice($query, 2); + + } + + // Less than. + @elseif (str-slice($query, 0, 1) == '<') { + + $op: 'lt'; + $breakpoint: str-slice($query, 2); + + } + + // Not. + @elseif (str-slice($query, 0, 1) == '!') { + + $op: 'not'; + $breakpoint: str-slice($query, 2); + + } + + // Equal. + @else { + + $op: 'eq'; + $breakpoint: $query; + + } + + // Build media. + @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) { + + $a: map-get($breakpoints, $breakpoint); + + // Range. + @if (type-of($a) == 'list') { + + $x: nth($a, 1); + $y: nth($a, 2); + + // Max only. + @if ($x == null) { + + // Greater than or equal (>= 0 / anything) + @if ($op == 'gte') { + $media: 'screen'; + } + + // Less than or equal (<= y) + @elseif ($op == 'lte') { + $media: 'screen and (max-width: ' + $y + ')'; + } + + // Greater than (> y) + @elseif ($op == 'gt') { + $media: 'screen and (min-width: ' + ($y + 1) + ')'; + } + + // Less than (< 0 / invalid) + @elseif ($op == 'lt') { + $media: 'screen and (max-width: -1px)'; + } + + // Not (> y) + @elseif ($op == 'not') { + $media: 'screen and (min-width: ' + ($y + 1) + ')'; + } + + // Equal (<= y) + @else { + $media: 'screen and (max-width: ' + $y + ')'; + } + + } + + // Min only. + @else if ($y == null) { + + // Greater than or equal (>= x) + @if ($op == 'gte') { + $media: 'screen and (min-width: ' + $x + ')'; + } + + // Less than or equal (<= inf / anything) + @elseif ($op == 'lte') { + $media: 'screen'; + } + + // Greater than (> inf / invalid) + @elseif ($op == 'gt') { + $media: 'screen and (max-width: -1px)'; + } + + // Less than (< x) + @elseif ($op == 'lt') { + $media: 'screen and (max-width: ' + ($x - 1) + ')'; + } + + // Not (< x) + @elseif ($op == 'not') { + $media: 'screen and (max-width: ' + ($x - 1) + ')'; + } + + // Equal (>= x) + @else { + $media: 'screen and (min-width: ' + $x + ')'; + } + + } + + // Min and max. + @else { + + // Greater than or equal (>= x) + @if ($op == 'gte') { + $media: 'screen and (min-width: ' + $x + ')'; + } + + // Less than or equal (<= y) + @elseif ($op == 'lte') { + $media: 'screen and (max-width: ' + $y + ')'; + } + + // Greater than (> y) + @elseif ($op == 'gt') { + $media: 'screen and (min-width: ' + ($y + 1) + ')'; + } + + // Less than (< x) + @elseif ($op == 'lt') { + $media: 'screen and (max-width: ' + ($x - 1) + ')'; + } + + // Not (< x and > y) + @elseif ($op == 'not') { + $media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')'; + } + + // Equal (>= x and <= y) + @else { + $media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')'; + } + + } + + } + + // String. + @else { + + // Missing a media type? Prefix with "screen". + @if (str-slice($a, 0, 1) == '(') { + $media: 'screen and ' + $a; + } + + // Otherwise, use as-is. + @else { + $media: $a; + } + + } + + } + + // Output. + @media #{$media} { + @content; + } + + } \ No newline at end of file diff --git a/css/libs/_functions.scss b/css/libs/_functions.scss index 0e08c1a..f563aab 100644 --- a/css/libs/_functions.scss +++ b/css/libs/_functions.scss @@ -1,3 +1,59 @@ +/// Removes a specific item from a list. +/// @author Hugo Giraudel +/// @param {list} $list List. +/// @param {integer} $index Index. +/// @return {list} Updated list. +@function remove-nth($list, $index) { + + $result: null; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `remove-nth`."; + } + @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `remove-nth`."; + } + @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; + } + @else { + + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + + @if $i != $index { + $result: append($result, nth($list, $i)); + } + + } + + } + + @return $result; + +} + +/// Gets a value from a map. +/// @author Hugo Giraudel +/// @param {map} $map Map. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function val($map, $keys...) { + + @if nth($keys, 1) == null { + $keys: remove-nth($keys, 1); + } + + @each $key in $keys { + $map: map-get($map, $key); + } + + @return $map; + +} + /// Gets a duration value. /// @param {string} $keys Key(s). /// @return {string} Value. diff --git a/css/libs/_html-grid.scss b/css/libs/_html-grid.scss new file mode 100644 index 0000000..3c08069 --- /dev/null +++ b/css/libs/_html-grid.scss @@ -0,0 +1,149 @@ +// html-grid.scss v1.0 | @ajlkn | MIT licensed */ + +// Mixins. + + /// Initializes the current element as an HTML grid. + /// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually). + /// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list). + @mixin html-grid($gutters: 1.5em, $suffix: '') { + + // Initialize. + $cols: 12; + $multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00; + $unit: 100% / $cols; + + // Suffixes. + $suffixes: null; + + @if (type-of($suffix) == 'list') { + $suffixes: $suffix; + } + @else { + $suffixes: ($suffix); + } + + // Gutters. + $guttersCols: null; + $guttersRows: null; + + @if (type-of($gutters) == 'list') { + + $guttersCols: nth($gutters, 1); + $guttersRows: nth($gutters, 2); + + } + @else { + + $guttersCols: $gutters; + $guttersRows: 0; + + } + + // Row. + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + + // Columns. + > * { + box-sizing: border-box; + } + + // Gutters. + &.gtr-uniform { + > * { + > :last-child { + margin-bottom: 0; + } + } + } + + // Alignment. + &.aln-left { + justify-content: flex-start; + } + + &.aln-center { + justify-content: center; + } + + &.aln-right { + justify-content: flex-end; + } + + &.aln-top { + align-items: flex-start; + } + + &.aln-middle { + align-items: center; + } + + &.aln-bottom { + align-items: flex-end; + } + + // Step through suffixes. + @each $suffix in $suffixes { + + // Suffix. + @if ($suffix != '') { + $suffix: '-' + $suffix; + } + @else { + $suffix: ''; + } + + // Row. + + // Important. + > .imp#{$suffix} { + order: -1; + } + + // Columns, offsets. + @for $i from 1 through $cols { + > .col-#{$i}#{$suffix} { + width: $unit * $i; + } + + > .off-#{$i}#{$suffix} { + margin-left: $unit * $i; + } + } + + // Step through multipliers. + @each $multiplier in $multipliers { + + // Gutters. + $class: null; + + @if ($multiplier != 1) { + $class: '.gtr-' + ($multiplier * 100); + } + + &#{$class} { + margin-top: ($guttersRows * $multiplier * -1); + margin-left: ($guttersCols * $multiplier * -1); + + > * { + padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier); + } + + // Uniform. + &.gtr-uniform { + margin-top: $guttersCols * $multiplier * -1; + + > * { + padding-top: $guttersCols * $multiplier; + } + } + + } + + } + + } + + } \ No newline at end of file diff --git a/css/libs/_mixins.scss b/css/libs/_mixins.scss index f11f469..a331483 100644 --- a/css/libs/_mixins.scss +++ b/css/libs/_mixins.scss @@ -1,7 +1,8 @@ /// Makes an element's :before pseudoelement a FontAwesome icon. /// @param {string} $content Optional content value to use. +/// @param {string} $category Optional category to use. /// @param {string} $where Optional pseudoelement to target (before or after). -@mixin icon($content: false, $where: before) { +@mixin icon($content: false, $category: regular, $where: before) { text-decoration: none; @@ -13,11 +14,25 @@ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; - font-family: FontAwesome; + display: inline-block; font-style: normal; - font-weight: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; text-transform: none !important; + @if ($category == brands) { + font-family: 'Font Awesome 5 Brands'; + } + @elseif ($category == solid) { + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + @else { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; + } + } } @@ -60,339 +75,4 @@ @return url("data:image/svg+xml;charset=utf8,#{$svg}"); -} - -/// Initializes base flexgrid classes. -/// @param {string} $vertical-align Vertical alignment of cells. -/// @param {string} $horizontal-align Horizontal alignment of cells. -@mixin flexgrid-base($vertical-align: null, $horizontal-align: null) { - - // Grid. - @include vendor('display', 'flex'); - @include vendor('flex-wrap', 'wrap'); - - // Vertical alignment. - @if ($vertical-align == top) { - @include vendor('align-items', 'flex-start'); - } - @else if ($vertical-align == bottom) { - @include vendor('align-items', 'flex-end'); - } - @else if ($vertical-align == center) { - @include vendor('align-items', 'center'); - } - @else { - @include vendor('align-items', 'stretch'); - } - - // Horizontal alignment. - @if ($horizontal-align != null) { - text-align: $horizontal-align; - } - - // Cells. - > * { - @include vendor('flex-shrink', '1'); - @include vendor('flex-grow', '0'); - } - -} - -/// Sets up flexgrid columns. -/// @param {integer} $columns Columns. -@mixin flexgrid-columns($columns) { - - > * { - $cell-width: 100% / $columns; - width: #{$cell-width}; - } - -} - -/// Sets up flexgrid gutters. -/// @param {integer} $columns Columns. -/// @param {number} $gutters Gutters. -@mixin flexgrid-gutters($columns, $gutters) { - - // Apply padding. - > * { - $cell-width: 100% / $columns; - - padding: ($gutters * 0.5); - width: $cell-width; - } - -} - -/// Sets up flexgrid gutters (flush). -/// @param {integer} $columns Columns. -/// @param {number} $gutters Gutters. -@mixin flexgrid-gutters-flush($columns, $gutters) { - - // Apply padding. - > * { - $cell-width: 100% / $columns; - $cell-width-pad: $gutters / $columns; - - padding: ($gutters * 0.5); - width: calc(#{$cell-width} + #{$cell-width-pad}); - } - - // Clear top/bottom gutters. - > :nth-child(-n + #{$columns}) { - padding-top: 0; - } - - > :nth-last-child(-n + #{$columns}) { - padding-bottom: 0; - } - - // Clear left/right gutters. - > :nth-child(#{$columns}n + 1) { - padding-left: 0; - } - - > :nth-child(#{$columns}n) { - padding-right: 0; - } - - // Adjust widths of leftmost and rightmost cells. - > :nth-child(#{$columns}n + 1), - > :nth-child(#{$columns}n) { - $cell-width: 100% / $columns; - $cell-width-pad: ($gutters / $columns) - ($gutters / 2); - - width: calc(#{$cell-width} + #{$cell-width-pad}); - } - -} - -/// Reset flexgrid gutters (flush only). -/// Used to override a previous set of flexgrid gutter classes. -/// @param {integer} $columns Columns. -/// @param {number} $gutters Gutters. -/// @param {integer} $prev-columns Previous columns. -@mixin flexgrid-gutters-flush-reset($columns, $gutters, $prev-columns) { - - // Apply padding. - > * { - $cell-width: 100% / $prev-columns; - $cell-width-pad: $gutters / $prev-columns; - - padding: ($gutters * 0.5); - width: calc(#{$cell-width} + #{$cell-width-pad}); - } - - // Clear top/bottom gutters. - > :nth-child(-n + #{$prev-columns}) { - padding-top: ($gutters * 0.5); - } - - > :nth-last-child(-n + #{$prev-columns}) { - padding-bottom: ($gutters * 0.5); - } - - // Clear left/right gutters. - > :nth-child(#{$prev-columns}n + 1) { - padding-left: ($gutters * 0.5); - } - - > :nth-child(#{$prev-columns}n) { - padding-right: ($gutters * 0.5); - } - - // Adjust widths of leftmost and rightmost cells. - > :nth-child(#{$prev-columns}n + 1), - > :nth-child(#{$prev-columns}n) { - $cell-width: 100% / $columns; - $cell-width-pad: $gutters / $columns; - - padding: ($gutters * 0.5); - width: calc(#{$cell-width} + #{$cell-width-pad}); - } - -} - -/// Adds debug styles to current flexgrid element. -@mixin flexgrid-debug() { - - box-shadow: 0 0 0 1px red; - - > * { - box-shadow: inset 0 0 0 1px blue; - position: relative; - - > * { - position: relative; - box-shadow: inset 0 0 0 1px green; - } - } - -} - -/// Initializes the current element as a flexgrid. -/// @param {integer} $columns Columns (optional). -/// @param {number} $gutters Gutters (optional). -/// @param {bool} $flush If true, clears padding around the very edge of the grid. -@mixin flexgrid($settings: ()) { - - // Settings. - - // Debug. - $debug: false; - - @if (map-has-key($settings, 'debug')) { - $debug: map-get($settings, 'debug'); - } - - // Vertical align. - $vertical-align: null; - - @if (map-has-key($settings, 'vertical-align')) { - $vertical-align: map-get($settings, 'vertical-align'); - } - - // Horizontal align. - $horizontal-align: null; - - @if (map-has-key($settings, 'horizontal-align')) { - $horizontal-align: map-get($settings, 'horizontal-align'); - } - - // Columns. - $columns: null; - - @if (map-has-key($settings, 'columns')) { - $columns: map-get($settings, 'columns'); - } - - // Gutters. - $gutters: 0; - - @if (map-has-key($settings, 'gutters')) { - $gutters: map-get($settings, 'gutters'); - } - - // Flush. - $flush: true; - - @if (map-has-key($settings, 'flush')) { - $flush: map-get($settings, 'flush'); - } - - // Initialize base grid. - @include flexgrid-base($vertical-align, $horizontal-align); - - // Debug? - @if ($debug) { - @include flexgrid-debug; - } - - // Columns specified? - @if ($columns != null) { - - // Initialize columns. - @include flexgrid-columns($columns); - - // Gutters specified? - @if ($gutters > 0) { - - // Flush gutters? - @if ($flush) { - - // Initialize gutters (flush). - @include flexgrid-gutters-flush($columns, $gutters); - - } - - // Otherwise ... - @else { - - // Initialize gutters. - @include flexgrid-gutters($columns, $gutters); - - } - - } - - } - -} - -/// Resizes a previously-initialized grid. -/// @param {integer} $columns Columns. -/// @param {number} $gutters Gutters (optional). -/// @param {list} $reset A list of previously-initialized grid columns (only if $flush is true). -/// @param {bool} $flush If true, clears padding around the very edge of the grid. -@mixin flexgrid-resize($settings: ()) { - - // Settings. - - // Columns. - $columns: 1; - - @if (map-has-key($settings, 'columns')) { - $columns: map-get($settings, 'columns'); - } - - // Gutters. - $gutters: 0; - - @if (map-has-key($settings, 'gutters')) { - $gutters: map-get($settings, 'gutters'); - } - - // Previous columns. - $prev-columns: false; - - @if (map-has-key($settings, 'prev-columns')) { - $prev-columns: map-get($settings, 'prev-columns'); - } - - // Flush. - $flush: true; - - @if (map-has-key($settings, 'flush')) { - $flush: map-get($settings, 'flush'); - } - - // Resize columns. - @include flexgrid-columns($columns); - - // Gutters specified? - @if ($gutters > 0) { - - // Flush gutters? - @if ($flush) { - - // Previous columns specified? - @if ($prev-columns) { - - // Convert to list if it isn't one already. - @if (type-of($prev-columns) != list) { - $prev-columns: ($prev-columns); - } - - // Step through list of previous columns and reset them. - @each $x in $prev-columns { - @include flexgrid-gutters-flush-reset($columns, $gutters, $x); - } - - } - - // Resize gutters (flush). - @include flexgrid-gutters-flush($columns, $gutters); - - } - - // Otherwise ... - @else { - - // Resize gutters. - @include flexgrid-gutters($columns, $gutters); - - } - - } - -} +} \ No newline at end of file diff --git a/css/libs/_vars.scss b/css/libs/_vars.scss index 570fb7d..31edf9c 100644 --- a/css/libs/_vars.scss +++ b/css/libs/_vars.scss @@ -16,15 +16,15 @@ element-margin: 2em, sidebar-width: 26em, sidebar-width-alt: 24em, - gutter: 3em + gutter: 3em ); // Font. $font: ( - family: ('Open Sans', sans-serif), + family: ('Open Sans', sans-serif), family-heading: ('Roboto Slab', serif), family-fixed: ('Courier New', monospace), - weight: 400, + weight: 400, weight-bold: 600, weight-heading: 700, weight-heading-alt: 400, @@ -33,9 +33,9 @@ // Palette. $palette: ( - bg: #ffffff, + bg: #ffffff, bg-alt: #f5f6f7, - fg: #7f888f, + fg: #7f888f, fg-bold: #3d4449, fg-light: #9fa3a6, border: rgba(210,215,217,0.75), diff --git a/css/libs/_vendor.scss b/css/libs/_vendor.scss new file mode 100644 index 0000000..6599a3f --- /dev/null +++ b/css/libs/_vendor.scss @@ -0,0 +1,376 @@ +// vendor.scss v1.0 | @ajlkn | MIT licensed */ + +// Vars. + + /// Vendor prefixes. + /// @var {list} + $vendor-prefixes: ( + '-moz-', + '-webkit-', + '-ms-', + '' + ); + + /// Properties that should be vendorized. + /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org + /// @var {list} + $vendor-properties: ( + + // Animation. + 'animation', + 'animation-delay', + 'animation-direction', + 'animation-duration', + 'animation-fill-mode', + 'animation-iteration-count', + 'animation-name', + 'animation-play-state', + 'animation-timing-function', + + // Appearance. + 'appearance', + + // Backdrop filter. + 'backdrop-filter', + + // Background image options. + 'background-clip', + 'background-origin', + 'background-size', + + // Box sizing. + 'box-sizing', + + // Clip path. + 'clip-path', + + // Filter effects. + 'filter', + + // Flexbox. + 'align-content', + 'align-items', + 'align-self', + 'flex', + 'flex-basis', + 'flex-direction', + 'flex-flow', + 'flex-grow', + 'flex-shrink', + 'flex-wrap', + 'justify-content', + 'order', + + // Font feature. + 'font-feature-settings', + 'font-language-override', + 'font-variant-ligatures', + + // Font kerning. + 'font-kerning', + + // Fragmented borders and backgrounds. + 'box-decoration-break', + + // Grid layout. + 'grid-column', + 'grid-column-align', + 'grid-column-end', + 'grid-column-start', + 'grid-row', + 'grid-row-align', + 'grid-row-end', + 'grid-row-start', + 'grid-template-columns', + 'grid-template-rows', + + // Hyphens. + 'hyphens', + 'word-break', + + // Masks. + 'mask', + 'mask-border', + 'mask-border-outset', + 'mask-border-repeat', + 'mask-border-slice', + 'mask-border-source', + 'mask-border-width', + 'mask-clip', + 'mask-composite', + 'mask-image', + 'mask-origin', + 'mask-position', + 'mask-repeat', + 'mask-size', + + // Multicolumn. + 'break-after', + 'break-before', + 'break-inside', + 'column-count', + 'column-fill', + 'column-gap', + 'column-rule', + 'column-rule-color', + 'column-rule-style', + 'column-rule-width', + 'column-span', + 'column-width', + 'columns', + + // Object fit. + 'object-fit', + 'object-position', + + // Regions. + 'flow-from', + 'flow-into', + 'region-fragment', + + // Scroll snap points. + 'scroll-snap-coordinate', + 'scroll-snap-destination', + 'scroll-snap-points-x', + 'scroll-snap-points-y', + 'scroll-snap-type', + + // Shapes. + 'shape-image-threshold', + 'shape-margin', + 'shape-outside', + + // Tab size. + 'tab-size', + + // Text align last. + 'text-align-last', + + // Text decoration. + 'text-decoration-color', + 'text-decoration-line', + 'text-decoration-skip', + 'text-decoration-style', + + // Text emphasis. + 'text-emphasis', + 'text-emphasis-color', + 'text-emphasis-position', + 'text-emphasis-style', + + // Text size adjust. + 'text-size-adjust', + + // Text spacing. + 'text-spacing', + + // Transform. + 'transform', + 'transform-origin', + + // Transform 3D. + 'backface-visibility', + 'perspective', + 'perspective-origin', + 'transform-style', + + // Transition. + 'transition', + 'transition-delay', + 'transition-duration', + 'transition-property', + 'transition-timing-function', + + // Unicode bidi. + 'unicode-bidi', + + // User select. + 'user-select', + + // Writing mode. + 'writing-mode', + + ); + + /// Values that should be vendorized. + /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org + /// @var {list} + $vendor-values: ( + + // Cross fade. + 'cross-fade', + + // Element function. + 'element', + + // Filter function. + 'filter', + + // Flexbox. + 'flex', + 'inline-flex', + + // Grab cursors. + 'grab', + 'grabbing', + + // Gradients. + 'linear-gradient', + 'repeating-linear-gradient', + 'radial-gradient', + 'repeating-radial-gradient', + + // Grid layout. + 'grid', + 'inline-grid', + + // Image set. + 'image-set', + + // Intrinsic width. + 'max-content', + 'min-content', + 'fit-content', + 'fill', + 'fill-available', + 'stretch', + + // Sticky position. + 'sticky', + + // Transform. + 'transform', + + // Zoom cursors. + 'zoom-in', + 'zoom-out', + + ); + +// Functions. + + /// Removes a specific item from a list. + /// @author Hugo Giraudel + /// @param {list} $list List. + /// @param {integer} $index Index. + /// @return {list} Updated list. + @function remove-nth($list, $index) { + + $result: null; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `remove-nth`."; + } + @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `remove-nth`."; + } + @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; + } + @else { + + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + + @if $i != $index { + $result: append($result, nth($list, $i)); + } + + } + + } + + @return $result; + + } + + /// Replaces a substring within another string. + /// @author Hugo Giraudel + /// @param {string} $string String. + /// @param {string} $search Substring. + /// @param {string} $replace Replacement. + /// @return {string} Updated string. + @function str-replace($string, $search, $replace: '') { + + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; + + } + + /// Replaces a substring within each string in a list. + /// @param {list} $strings List of strings. + /// @param {string} $search Substring. + /// @param {string} $replace Replacement. + /// @return {list} Updated list of strings. + @function str-replace-all($strings, $search, $replace: '') { + + @each $string in $strings { + $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); + } + + @return $strings; + + } + +// Mixins. + + /// Wraps @content in vendorized keyframe blocks. + /// @param {string} $name Name. + @mixin keyframes($name) { + + @-moz-keyframes #{$name} { @content; } + @-webkit-keyframes #{$name} { @content; } + @-ms-keyframes #{$name} { @content; } + @keyframes #{$name} { @content; } + + } + + /// Vendorizes a declaration's property and/or value(s). + /// @param {string} $property Property. + /// @param {mixed} $value String/list of value(s). + @mixin vendor($property, $value) { + + // Determine if property should expand. + $expandProperty: index($vendor-properties, $property); + + // Determine if value should expand (and if so, add '-prefix-' placeholder). + $expandValue: false; + + @each $x in $value { + @each $y in $vendor-values { + @if $y == str-slice($x, 1, str-length($y)) { + + $value: set-nth($value, index($value, $x), '-prefix-' + $x); + $expandValue: true; + + } + } + } + + // Expand property? + @if $expandProperty { + @each $vendor in $vendor-prefixes { + #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; + } + } + + // Expand just the value? + @elseif $expandValue { + @each $vendor in $vendor-prefixes { + #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; + } + } + + // Neither? Treat them as a normal declaration. + @else { + #{$property}: #{$value}; + } + + } \ No newline at end of file diff --git a/css/main.css b/css/main.css deleted file mode 100644 index 5dab3b5..0000000 --- a/css/main.css +++ /dev/null @@ -1,2275 +0,0 @@ -@import url(fontawesome-all.min.css); -/* @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700"); */ - - -/* - Editorial by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ -html, body, div, span, applet, object, -iframe, h1, h2, h3, h4, h5, h6, p, blockquote, -pre, a, abbr, acronym, address, big, cite, -code, del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, b, -u, i, center, dl, dt, dd, ol, ul, li, fieldset, -form, label, legend, table, caption, tbody, -tfoot, thead, tr, th, td, article, aside, -canvas, details, embed, figure, figcaption, -footer, header, hgroup, menu, nav, output, ruby, -section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; } - -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; } - -body { - line-height: 1; } - -ol, ul { - list-style: none; } - -blockquote, q { - quotes: none; } - blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -body { - -webkit-text-size-adjust: none; } - -mark { - background-color: transparent; - color: inherit; } - -input::-moz-focus-inner { - border: 0; - padding: 0; } - -input, select, textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; } - -/* Basic */ -@-ms-viewport { - width: device-width; } - -body { - -ms-overflow-style: scrollbar; } - -@media screen and (max-width: 480px) { - html, body { - min-width: 320px; } } - -html { - box-sizing: border-box; } - -*, *:before, *:after { - box-sizing: inherit; } - -body { - background: #ffffff; } - body.is-preload *, body.is-preload *:before, body.is-preload *:after, body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after { - -moz-animation: none !important; - -webkit-animation: none !important; - -ms-animation: none !important; - animation: none !important; - -moz-transition: none !important; - -webkit-transition: none !important; - -ms-transition: none !important; - transition: none !important; } - -/* Type */ -body, input, select, textarea { - color: #7f888f; - font-family: "Open Sans", sans-serif; - font-size: 13pt; - font-weight: 400; - line-height: 1.65; } - @media screen and (max-width: 1680px) { - body, input, select, textarea { - font-size: 11pt; } } - @media screen and (max-width: 1280px) { - body, input, select, textarea { - font-size: 10pt; } } - @media screen and (max-width: 360px) { - body, input, select, textarea { - font-size: 9pt; } } - -a { - -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; - border-bottom: dotted 1px; - color: #f56a6a; - text-decoration: none; } - a:hover { - border-bottom-color: #f56a6a; - color: #f56a6a !important; } - a:hover strong { - color: inherit; } - -strong, b { - color: #3d4449; - font-weight: 600; } - -em, i { - font-style: italic; } - -p { - margin: 0 0 2em 0; } - -h1, h2, h3, h4, h5, h6 { - color: #3d4449; - font-family: "Roboto Slab", serif; - font-weight: 700; - line-height: 1.5; - margin: 0 0 1em 0; } - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - color: inherit; - text-decoration: none; - border-bottom: 0; } - -h1 { - font-size: 4em; - margin: 0 0 0.5em 0; - line-height: 1.3; } - -h2 { - font-size: 1.75em; } - -h3 { - font-size: 1.25em; } - -h4 { - font-size: 1.1em; } - -h5 { - font-size: 0.9em; } - -h6 { - font-size: 0.7em; } - -@media screen and (max-width: 1680px) { - h1 { - font-size: 3.5em; } } - -@media screen and (max-width: 980px) { - h1 { - font-size: 3.25em; } } - -@media screen and (max-width: 736px) { - h1 { - font-size: 2em; - line-height: 1.4; } - h2 { - font-size: 1.5em; } } - -sub { - font-size: 0.8em; - position: relative; - top: 0.5em; } - -sup { - font-size: 0.8em; - position: relative; - top: -0.5em; } - -blockquote { - border-left: solid 3px rgba(210, 215, 217, 0.75); - font-style: italic; - margin: 0 0 2em 0; - padding: 0.5em 0 0.5em 2em; } - -code { - background: rgba(230, 235, 237, 0.25); - border-radius: 0.375em; - border: solid 1px rgba(210, 215, 217, 0.75); - font-family: "Courier New", monospace; - font-size: 0.9em; - margin: 0 0.25em; - padding: 0.25em 0.65em; } - -pre { - -webkit-overflow-scrolling: touch; - font-family: "Courier New", monospace; - font-size: 0.9em; - margin: 0 0 2em 0; } - pre code { - display: block; - line-height: 1.75; - padding: 1em 1.5em; - overflow-x: auto; } - -hr { - border: 0; - border-bottom: solid 1px rgba(210, 215, 217, 0.75); - margin: 2em 0; } - hr.major { - margin: 3em 0; } - -.align-left { - text-align: left; } - -.align-center { - text-align: center; } - -.align-right { - text-align: right; } - -/* Row */ -.row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; } - .row > * { - box-sizing: border-box; } - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; } - .row.aln-left { - justify-content: flex-start; } - .row.aln-center { - justify-content: center; } - .row.aln-right { - justify-content: flex-end; } - .row.aln-top { - align-items: flex-start; } - .row.aln-middle { - align-items: center; } - .row.aln-bottom { - align-items: flex-end; } - .row > .imp { - order: -1; } - .row > .col-1 { - width: 8.33333%; } - .row > .off-1 { - margin-left: 8.33333%; } - .row > .col-2 { - width: 16.66667%; } - .row > .off-2 { - margin-left: 16.66667%; } - .row > .col-3 { - width: 25%; } - .row > .off-3 { - margin-left: 25%; } - .row > .col-4 { - width: 33.33333%; } - .row > .off-4 { - margin-left: 33.33333%; } - .row > .col-5 { - width: 41.66667%; } - .row > .off-5 { - margin-left: 41.66667%; } - .row > .col-6 { - width: 50%; } - .row > .off-6 { - margin-left: 50%; } - .row > .col-7 { - width: 58.33333%; } - .row > .off-7 { - margin-left: 58.33333%; } - .row > .col-8 { - width: 66.66667%; } - .row > .off-8 { - margin-left: 66.66667%; } - .row > .col-9 { - width: 75%; } - .row > .off-9 { - margin-left: 75%; } - .row > .col-10 { - width: 83.33333%; } - .row > .off-10 { - margin-left: 83.33333%; } - .row > .col-11 { - width: 91.66667%; } - .row > .off-11 { - margin-left: 91.66667%; } - .row > .col-12 { - width: 100%; } - .row > .off-12 { - margin-left: 100%; } - .row.gtr-0 { - margin-top: 0; - margin-left: 0em; } - .row.gtr-0 > * { - padding: 0 0 0 0em; } - .row.gtr-0.gtr-uniform { - margin-top: 0em; } - .row.gtr-0.gtr-uniform > * { - padding-top: 0em; } - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; } - .row.gtr-25 > * { - padding: 0 0 0 0.375em; } - .row.gtr-25.gtr-uniform { - margin-top: -0.375em; } - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; } - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; } - .row.gtr-50 > * { - padding: 0 0 0 0.75em; } - .row.gtr-50.gtr-uniform { - margin-top: -0.75em; } - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; } - .row { - margin-top: 0; - margin-left: -1.5em; } - .row > * { - padding: 0 0 0 1.5em; } - .row.gtr-uniform { - margin-top: -1.5em; } - .row.gtr-uniform > * { - padding-top: 1.5em; } - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; } - .row.gtr-150 > * { - padding: 0 0 0 2.25em; } - .row.gtr-150.gtr-uniform { - margin-top: -2.25em; } - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; } - .row.gtr-200 { - margin-top: 0; - margin-left: -3em; } - .row.gtr-200 > * { - padding: 0 0 0 3em; } - .row.gtr-200.gtr-uniform { - margin-top: -3em; } - .row.gtr-200.gtr-uniform > * { - padding-top: 3em; } - @media screen and (max-width: 1680px) { - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; } - .row > * { - box-sizing: border-box; } - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; } - .row.aln-left { - justify-content: flex-start; } - .row.aln-center { - justify-content: center; } - .row.aln-right { - justify-content: flex-end; } - .row.aln-top { - align-items: flex-start; } - .row.aln-middle { - align-items: center; } - .row.aln-bottom { - align-items: flex-end; } - .row > .imp-xlarge { - order: -1; } - .row > .col-1-xlarge { - width: 8.33333%; } - .row > .off-1-xlarge { - margin-left: 8.33333%; } - .row > .col-2-xlarge { - width: 16.66667%; } - .row > .off-2-xlarge { - margin-left: 16.66667%; } - .row > .col-3-xlarge { - width: 25%; } - .row > .off-3-xlarge { - margin-left: 25%; } - .row > .col-4-xlarge { - width: 33.33333%; } - .row > .off-4-xlarge { - margin-left: 33.33333%; } - .row > .col-5-xlarge { - width: 41.66667%; } - .row > .off-5-xlarge { - margin-left: 41.66667%; } - .row > .col-6-xlarge { - width: 50%; } - .row > .off-6-xlarge { - margin-left: 50%; } - .row > .col-7-xlarge { - width: 58.33333%; } - .row > .off-7-xlarge { - margin-left: 58.33333%; } - .row > .col-8-xlarge { - width: 66.66667%; } - .row > .off-8-xlarge { - margin-left: 66.66667%; } - .row > .col-9-xlarge { - width: 75%; } - .row > .off-9-xlarge { - margin-left: 75%; } - .row > .col-10-xlarge { - width: 83.33333%; } - .row > .off-10-xlarge { - margin-left: 83.33333%; } - .row > .col-11-xlarge { - width: 91.66667%; } - .row > .off-11-xlarge { - margin-left: 91.66667%; } - .row > .col-12-xlarge { - width: 100%; } - .row > .off-12-xlarge { - margin-left: 100%; } - .row.gtr-0 { - margin-top: 0; - margin-left: 0em; } - .row.gtr-0 > * { - padding: 0 0 0 0em; } - .row.gtr-0.gtr-uniform { - margin-top: 0em; } - .row.gtr-0.gtr-uniform > * { - padding-top: 0em; } - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; } - .row.gtr-25 > * { - padding: 0 0 0 0.375em; } - .row.gtr-25.gtr-uniform { - margin-top: -0.375em; } - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; } - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; } - .row.gtr-50 > * { - padding: 0 0 0 0.75em; } - .row.gtr-50.gtr-uniform { - margin-top: -0.75em; } - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; } - .row { - margin-top: 0; - margin-left: -1.5em; } - .row > * { - padding: 0 0 0 1.5em; } - .row.gtr-uniform { - margin-top: -1.5em; } - .row.gtr-uniform > * { - padding-top: 1.5em; } - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; } - .row.gtr-150 > * { - padding: 0 0 0 2.25em; } - .row.gtr-150.gtr-uniform { - margin-top: -2.25em; } - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; } - .row.gtr-200 { - margin-top: 0; - margin-left: -3em; } - .row.gtr-200 > * { - padding: 0 0 0 3em; } - .row.gtr-200.gtr-uniform { - margin-top: -3em; } - .row.gtr-200.gtr-uniform > * { - padding-top: 3em; } } - @media screen and (max-width: 1280px) { - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; } - .row > * { - box-sizing: border-box; } - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; } - .row.aln-left { - justify-content: flex-start; } - .row.aln-center { - justify-content: center; } - .row.aln-right { - justify-content: flex-end; } - .row.aln-top { - align-items: flex-start; } - .row.aln-middle { - align-items: center; } - .row.aln-bottom { - align-items: flex-end; } - .row > .imp-large { - order: -1; } - .row > .col-1-large { - width: 8.33333%; } - .row > .off-1-large { - margin-left: 8.33333%; } - .row > .col-2-large { - width: 16.66667%; } - .row > .off-2-large { - margin-left: 16.66667%; } - .row > .col-3-large { - width: 25%; } - .row > .off-3-large { - margin-left: 25%; } - .row > .col-4-large { - width: 33.33333%; } - .row > .off-4-large { - margin-left: 33.33333%; } - .row > .col-5-large { - width: 41.66667%; } - .row > .off-5-large { - margin-left: 41.66667%; } - .row > .col-6-large { - width: 50%; } - .row > .off-6-large { - margin-left: 50%; } - .row > .col-7-large { - width: 58.33333%; } - .row > .off-7-large { - margin-left: 58.33333%; } - .row > .col-8-large { - width: 66.66667%; } - .row > .off-8-large { - margin-left: 66.66667%; } - .row > .col-9-large { - width: 75%; } - .row > .off-9-large { - margin-left: 75%; } - .row > .col-10-large { - width: 83.33333%; } - .row > .off-10-large { - margin-left: 83.33333%; } - .row > .col-11-large { - width: 91.66667%; } - .row > .off-11-large { - margin-left: 91.66667%; } - .row > .col-12-large { - width: 100%; } - .row > .off-12-large { - margin-left: 100%; } - .row.gtr-0 { - margin-top: 0; - margin-left: 0em; } - .row.gtr-0 > * { - padding: 0 0 0 0em; } - .row.gtr-0.gtr-uniform { - margin-top: 0em; } - .row.gtr-0.gtr-uniform > * { - padding-top: 0em; } - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; } - .row.gtr-25 > * { - padding: 0 0 0 0.375em; } - .row.gtr-25.gtr-uniform { - margin-top: -0.375em; } - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; } - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; } - .row.gtr-50 > * { - padding: 0 0 0 0.75em; } - .row.gtr-50.gtr-uniform { - margin-top: -0.75em; } - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; } - .row { - margin-top: 0; - margin-left: -1.5em; } - .row > * { - padding: 0 0 0 1.5em; } - .row.gtr-uniform { - margin-top: -1.5em; } - .row.gtr-uniform > * { - padding-top: 1.5em; } - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; } - .row.gtr-150 > * { - padding: 0 0 0 2.25em; } - .row.gtr-150.gtr-uniform { - margin-top: -2.25em; } - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; } - .row.gtr-200 { - margin-top: 0; - margin-left: -3em; } - .row.gtr-200 > * { - padding: 0 0 0 3em; } - .row.gtr-200.gtr-uniform { - margin-top: -3em; } - .row.gtr-200.gtr-uniform > * { - padding-top: 3em; } } - @media screen and (max-width: 980px) { - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; } - .row > * { - box-sizing: border-box; } - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; } - .row.aln-left { - justify-content: flex-start; } - .row.aln-center { - justify-content: center; } - .row.aln-right { - justify-content: flex-end; } - .row.aln-top { - align-items: flex-start; } - .row.aln-middle { - align-items: center; } - .row.aln-bottom { - align-items: flex-end; } - .row > .imp-medium { - order: -1; } - .row > .col-1-medium { - width: 8.33333%; } - .row > .off-1-medium { - margin-left: 8.33333%; } - .row > .col-2-medium { - width: 16.66667%; } - .row > .off-2-medium { - margin-left: 16.66667%; } - .row > .col-3-medium { - width: 25%; } - .row > .off-3-medium { - margin-left: 25%; } - .row > .col-4-medium { - width: 33.33333%; } - .row > .off-4-medium { - margin-left: 33.33333%; } - .row > .col-5-medium { - width: 41.66667%; } - .row > .off-5-medium { - margin-left: 41.66667%; } - .row > .col-6-medium { - width: 50%; } - .row > .off-6-medium { - margin-left: 50%; } - .row > .col-7-medium { - width: 58.33333%; } - .row > .off-7-medium { - margin-left: 58.33333%; } - .row > .col-8-medium { - width: 66.66667%; } - .row > .off-8-medium { - margin-left: 66.66667%; } - .row > .col-9-medium { - width: 75%; } - .row > .off-9-medium { - margin-left: 75%; } - .row > .col-10-medium { - width: 83.33333%; } - .row > .off-10-medium { - margin-left: 83.33333%; } - .row > .col-11-medium { - width: 91.66667%; } - .row > .off-11-medium { - margin-left: 91.66667%; } - .row > .col-12-medium { - width: 100%; } - .row > .off-12-medium { - margin-left: 100%; } - .row.gtr-0 { - margin-top: 0; - margin-left: 0em; } - .row.gtr-0 > * { - padding: 0 0 0 0em; } - .row.gtr-0.gtr-uniform { - margin-top: 0em; } - .row.gtr-0.gtr-uniform > * { - padding-top: 0em; } - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; } - .row.gtr-25 > * { - padding: 0 0 0 0.375em; } - .row.gtr-25.gtr-uniform { - margin-top: -0.375em; } - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; } - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; } - .row.gtr-50 > * { - padding: 0 0 0 0.75em; } - .row.gtr-50.gtr-uniform { - margin-top: -0.75em; } - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; } - .row { - margin-top: 0; - margin-left: -1.5em; } - .row > * { - padding: 0 0 0 1.5em; } - .row.gtr-uniform { - margin-top: -1.5em; } - .row.gtr-uniform > * { - padding-top: 1.5em; } - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; } - .row.gtr-150 > * { - padding: 0 0 0 2.25em; } - .row.gtr-150.gtr-uniform { - margin-top: -2.25em; } - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; } - .row.gtr-200 { - margin-top: 0; - margin-left: -3em; } - .row.gtr-200 > * { - padding: 0 0 0 3em; } - .row.gtr-200.gtr-uniform { - margin-top: -3em; } - .row.gtr-200.gtr-uniform > * { - padding-top: 3em; } } - @media screen and (max-width: 736px) { - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; } - .row > * { - box-sizing: border-box; } - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; } - .row.aln-left { - justify-content: flex-start; } - .row.aln-center { - justify-content: center; } - .row.aln-right { - justify-content: flex-end; } - .row.aln-top { - align-items: flex-start; } - .row.aln-middle { - align-items: center; } - .row.aln-bottom { - align-items: flex-end; } - .row > .imp-small { - order: -1; } - .row > .col-1-small { - width: 8.33333%; } - .row > .off-1-small { - margin-left: 8.33333%; } - .row > .col-2-small { - width: 16.66667%; } - .row > .off-2-small { - margin-left: 16.66667%; } - .row > .col-3-small { - width: 25%; } - .row > .off-3-small { - margin-left: 25%; } - .row > .col-4-small { - width: 33.33333%; } - .row > .off-4-small { - margin-left: 33.33333%; } - .row > .col-5-small { - width: 41.66667%; } - .row > .off-5-small { - margin-left: 41.66667%; } - .row > .col-6-small { - width: 50%; } - .row > .off-6-small { - margin-left: 50%; } - .row > .col-7-small { - width: 58.33333%; } - .row > .off-7-small { - margin-left: 58.33333%; } - .row > .col-8-small { - width: 66.66667%; } - .row > .off-8-small { - margin-left: 66.66667%; } - .row > .col-9-small { - width: 75%; } - .row > .off-9-small { - margin-left: 75%; } - .row > .col-10-small { - width: 83.33333%; } - .row > .off-10-small { - margin-left: 83.33333%; } - .row > .col-11-small { - width: 91.66667%; } - .row > .off-11-small { - margin-left: 91.66667%; } - .row > .col-12-small { - width: 100%; } - .row > .off-12-small { - margin-left: 100%; } - .row.gtr-0 { - margin-top: 0; - margin-left: 0em; } - .row.gtr-0 > * { - padding: 0 0 0 0em; } - .row.gtr-0.gtr-uniform { - margin-top: 0em; } - .row.gtr-0.gtr-uniform > * { - padding-top: 0em; } - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; } - .row.gtr-25 > * { - padding: 0 0 0 0.375em; } - .row.gtr-25.gtr-uniform { - margin-top: -0.375em; } - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; } - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; } - .row.gtr-50 > * { - padding: 0 0 0 0.75em; } - .row.gtr-50.gtr-uniform { - margin-top: -0.75em; } - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; } - .row { - margin-top: 0; - margin-left: -1.5em; } - .row > * { - padding: 0 0 0 1.5em; } - .row.gtr-uniform { - margin-top: -1.5em; } - .row.gtr-uniform > * { - padding-top: 1.5em; } - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; } - .row.gtr-150 > * { - padding: 0 0 0 2.25em; } - .row.gtr-150.gtr-uniform { - margin-top: -2.25em; } - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; } - .row.gtr-200 { - margin-top: 0; - margin-left: -3em; } - .row.gtr-200 > * { - padding: 0 0 0 3em; } - .row.gtr-200.gtr-uniform { - margin-top: -3em; } - .row.gtr-200.gtr-uniform > * { - padding-top: 3em; } } - @media screen and (max-width: 480px) { - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; } - .row > * { - box-sizing: border-box; } - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; } - .row.aln-left { - justify-content: flex-start; } - .row.aln-center { - justify-content: center; } - .row.aln-right { - justify-content: flex-end; } - .row.aln-top { - align-items: flex-start; } - .row.aln-middle { - align-items: center; } - .row.aln-bottom { - align-items: flex-end; } - .row > .imp-xsmall { - order: -1; } - .row > .col-1-xsmall { - width: 8.33333%; } - .row > .off-1-xsmall { - margin-left: 8.33333%; } - .row > .col-2-xsmall { - width: 16.66667%; } - .row > .off-2-xsmall { - margin-left: 16.66667%; } - .row > .col-3-xsmall { - width: 25%; } - .row > .off-3-xsmall { - margin-left: 25%; } - .row > .col-4-xsmall { - width: 33.33333%; } - .row > .off-4-xsmall { - margin-left: 33.33333%; } - .row > .col-5-xsmall { - width: 41.66667%; } - .row > .off-5-xsmall { - margin-left: 41.66667%; } - .row > .col-6-xsmall { - width: 50%; } - .row > .off-6-xsmall { - margin-left: 50%; } - .row > .col-7-xsmall { - width: 58.33333%; } - .row > .off-7-xsmall { - margin-left: 58.33333%; } - .row > .col-8-xsmall { - width: 66.66667%; } - .row > .off-8-xsmall { - margin-left: 66.66667%; } - .row > .col-9-xsmall { - width: 75%; } - .row > .off-9-xsmall { - margin-left: 75%; } - .row > .col-10-xsmall { - width: 83.33333%; } - .row > .off-10-xsmall { - margin-left: 83.33333%; } - .row > .col-11-xsmall { - width: 91.66667%; } - .row > .off-11-xsmall { - margin-left: 91.66667%; } - .row > .col-12-xsmall { - width: 100%; } - .row > .off-12-xsmall { - margin-left: 100%; } - .row.gtr-0 { - margin-top: 0; - margin-left: 0em; } - .row.gtr-0 > * { - padding: 0 0 0 0em; } - .row.gtr-0.gtr-uniform { - margin-top: 0em; } - .row.gtr-0.gtr-uniform > * { - padding-top: 0em; } - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375em; } - .row.gtr-25 > * { - padding: 0 0 0 0.375em; } - .row.gtr-25.gtr-uniform { - margin-top: -0.375em; } - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375em; } - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75em; } - .row.gtr-50 > * { - padding: 0 0 0 0.75em; } - .row.gtr-50.gtr-uniform { - margin-top: -0.75em; } - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75em; } - .row { - margin-top: 0; - margin-left: -1.5em; } - .row > * { - padding: 0 0 0 1.5em; } - .row.gtr-uniform { - margin-top: -1.5em; } - .row.gtr-uniform > * { - padding-top: 1.5em; } - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25em; } - .row.gtr-150 > * { - padding: 0 0 0 2.25em; } - .row.gtr-150.gtr-uniform { - margin-top: -2.25em; } - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25em; } - .row.gtr-200 { - margin-top: 0; - margin-left: -3em; } - .row.gtr-200 > * { - padding: 0 0 0 3em; } - .row.gtr-200.gtr-uniform { - margin-top: -3em; } - .row.gtr-200.gtr-uniform > * { - padding-top: 3em; } } - -/* Section/Article */ -section.special, article.special { - text-align: center; } - -header p { - font-family: "Roboto Slab", serif; - font-size: 1em; - font-weight: 400; - letter-spacing: 0.075em; - margin-top: -0.5em; - text-transform: uppercase; } - -header.major > :last-child { - border-bottom: solid 3px #f56a6a; - display: inline-block; - margin: 0 0 2em 0; - padding: 0 0.75em 0.5em 0; } - -header.main > :last-child { - margin: 0 0 1em 0; } - -/* Form */ -form { - margin: 0 0 2em 0; } - -label { - color: #3d4449; - display: block; - font-size: 0.9em; - font-weight: 600; - margin: 0 0 1em 0; } - -input[type="text"], -input[type="password"], -input[type="email"], -input[type="tel"], -input[type="search"], -input[type="url"], -select, -textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - background: #ffffff; - border-radius: 0.375em; - border: none; - border: solid 1px rgba(210, 215, 217, 0.75); - color: inherit; - display: block; - outline: 0; - padding: 0 1em; - text-decoration: none; - width: 100%; } - input[type="text"]:invalid, - input[type="password"]:invalid, - input[type="email"]:invalid, - input[type="tel"]:invalid, - input[type="search"]:invalid, - input[type="url"]:invalid, - select:invalid, - textarea:invalid { - box-shadow: none; } - input[type="text"]:focus, - input[type="password"]:focus, - input[type="email"]:focus, - input[type="tel"]:focus, - input[type="search"]:focus, - input[type="url"]:focus, - select:focus, - textarea:focus { - border-color: #f56a6a; - box-shadow: 0 0 0 1px #f56a6a; } - -select { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(210, 215, 217, 0.75)' /%3E%3C/svg%3E"); - background-size: 1.25em; - background-repeat: no-repeat; - background-position: calc(100% - 1em) center; - height: 2.75em; - padding-right: 2.75em; - text-overflow: ellipsis; } - select option { - color: #3d4449; - background: #ffffff; } - select:focus::-ms-value { - background-color: transparent; } - select::-ms-expand { - display: none; } - -input[type="text"], -input[type="password"], -input[type="email"], -input[type="tel"], -input[type="search"], -input[type="url"], -select { - height: 2.75em; } - -textarea { - padding: 0.75em 1em; } - -input[type="checkbox"], -input[type="radio"] { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - display: block; - float: left; - margin-right: -2em; - opacity: 0; - width: 1em; - z-index: -1; } - input[type="checkbox"] + label, - input[type="radio"] + label { - text-decoration: none; - color: #7f888f; - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: 400; - padding-left: 2.4em; - padding-right: 0.75em; - position: relative; } - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; } - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - background: #ffffff; - border-radius: 0.375em; - border: solid 1px rgba(210, 215, 217, 0.75); - content: ''; - display: inline-block; - font-size: 0.8em; - height: 2.0625em; - left: 0; - line-height: 2.0625em; - position: absolute; - text-align: center; - top: 0; - width: 2.0625em; } - input[type="checkbox"]:checked + label:before, - input[type="radio"]:checked + label:before { - background: #3d4449; - border-color: #3d4449; - color: #ffffff; - content: '\f00c'; } - input[type="checkbox"]:focus + label:before, - input[type="radio"]:focus + label:before { - border-color: #f56a6a; - box-shadow: 0 0 0 1px #f56a6a; } - -input[type="checkbox"] + label:before { - border-radius: 0.375em; } - -input[type="radio"] + label:before { - border-radius: 100%; } - -::-webkit-input-placeholder { - color: #9fa3a6 !important; - opacity: 1.0; } - -:-moz-placeholder { - color: #9fa3a6 !important; - opacity: 1.0; } - -::-moz-placeholder { - color: #9fa3a6 !important; - opacity: 1.0; } - -:-ms-input-placeholder { - color: #9fa3a6 !important; - opacity: 1.0; } - -/* Box */ -.box { - border-radius: 0.375em; - border: solid 1px rgba(210, 215, 217, 0.75); - margin-bottom: 2em; - padding: 1.5em; } - .box > :last-child, - .box > :last-child > :last-child, - .box > :last-child > :last-child > :last-child { - margin-bottom: 0; } - .box.alt { - border: 0; - border-radius: 0; - padding: 0; } - -/* Icon */ -.icon { - text-decoration: none; - border-bottom: none; - position: relative; } - .icon:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 400; } - .icon > .label { - display: none; } - .icon:before { - line-height: inherit; } - .icon.solid:before { - font-weight: 900; } - .icon.brands:before { - font-family: 'Font Awesome 5 Brands'; } - -/* Image */ -.image { - border-radius: 0.375em; - border: 0; - display: inline-block; - position: relative; } - .image img { - border-radius: 0.375em; - display: block; } - .image.left, .image.right { - max-width: 40%; } - .image.left img, .image.right img { - width: 100%; } - .image.left { - float: left; - padding: 0 1.5em 1em 0; - top: 0.25em; } - .image.right { - float: right; - padding: 0 0 1em 1.5em; - top: 0.25em; } - .image.fit { - display: block; - margin: 0 0 2em 0; - width: 100%; } - .image.fit img { - width: 100%; } - .image.main { - display: block; - margin: 0 0 3em 0; - width: 100%; } - .image.main img { - width: 100%; } - -a.image { - overflow: hidden; } - a.image img { - -moz-transition: -moz-transform 0.2s ease; - -webkit-transition: -webkit-transform 0.2s ease; - -ms-transition: -ms-transform 0.2s ease; - transition: transform 0.2s ease; } - a.image:hover img { - -moz-transform: scale(1.075); - -webkit-transform: scale(1.075); - -ms-transform: scale(1.075); - transform: scale(1.075); } - -/* List */ -ol { - list-style: decimal; - margin: 0 0 2em 0; - padding-left: 1.25em; } - ol li { - padding-left: 0.25em; } - -ul { - list-style: disc; - margin: 0 0 2em 0; - padding-left: 1em; } - ul li { - padding-left: 0.5em; } - ul.alt { - list-style: none; - padding-left: 0; } - ul.alt li { - border-top: solid 1px rgba(210, 215, 217, 0.75); - padding: 0.5em 0; } - ul.alt li:first-child { - border-top: 0; - padding-top: 0; } - -dl { - margin: 0 0 2em 0; } - dl dt { - display: block; - font-weight: 600; - margin: 0 0 1em 0; } - dl dd { - margin-left: 2em; } - -/* Actions */ -ul.actions { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - cursor: default; - list-style: none; - margin-left: -1em; - padding-left: 0; } - ul.actions li { - padding: 0 0 0 1em; - vertical-align: middle; } - ul.actions.special { - -moz-justify-content: center; - -webkit-justify-content: center; - -ms-justify-content: center; - justify-content: center; - width: 100%; - margin-left: 0; } - ul.actions.special li:first-child { - padding-left: 0; } - ul.actions.stacked { - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - margin-left: 0; } - ul.actions.stacked li { - padding: 1.3em 0 0 0; } - ul.actions.stacked li:first-child { - padding-top: 0; } - ul.actions.fit { - width: calc(100% + 1em); } - ul.actions.fit li { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - width: 100%; } - ul.actions.fit li > * { - width: 100%; } - ul.actions.fit.stacked { - width: 100%; } - -/* Icons */ -ul.icons { - cursor: default; - list-style: none; - padding-left: 0; } - ul.icons li { - display: inline-block; - padding: 0 1em 0 0; } - ul.icons li:last-child { - padding-right: 0; } - ul.icons li .icon { - color: inherit; } - ul.icons li .icon:before { - font-size: 1.25em; } - -/* Contact */ -ul.contact { - list-style: none; - padding: 0; } - ul.contact li { - text-decoration: none; - border-top: solid 1px rgba(210, 215, 217, 0.75); - margin: 1.5em 0 0 0; - padding: 1.5em 0 0 3em; - position: relative; } - ul.contact li:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 400; } - ul.contact li:before { - color: #f56a6a; - display: inline-block; - font-size: 1.5em; - height: 1.125em; - left: 0; - line-height: 1.125em; - position: absolute; - text-align: center; - top: 1em; - width: 1.5em; } - ul.contact li:first-child { - border-top: 0; - margin-top: 0; - padding-top: 0; } - ul.contact li:first-child:before { - top: 0; } - ul.contact li a { - color: inherit; } - -/* Pagination */ -ul.pagination { - cursor: default; - list-style: none; - padding-left: 0; } - ul.pagination li { - display: inline-block; - padding-left: 0; - vertical-align: middle; } - ul.pagination li > .page { - -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - border-bottom: 0; - border-radius: 0.375em; - display: inline-block; - font-size: 0.8em; - font-weight: 600; - height: 2em; - line-height: 2em; - margin: 0 0.125em; - min-width: 2em; - padding: 0 0.5em; - text-align: center; } - ul.pagination li > .page.active { - background-color: #f56a6a; - color: #ffffff !important; } - ul.pagination li > .page.active:hover { - background-color: #f67878; } - ul.pagination li > .page.active:active { - background-color: #f45c5c; } - ul.pagination li:first-child { - padding-right: 0.75em; } - ul.pagination li:last-child { - padding-left: 0.75em; } - @media screen and (max-width: 480px) { - ul.pagination li:nth-child(n+2):nth-last-child(n+2) { - display: none; } - ul.pagination li:first-child { - padding-right: 0; } } - -/* Table */ -.table-wrapper { - -webkit-overflow-scrolling: touch; - overflow-x: auto; } - -table { - margin: 0 0 2em 0; - width: 100%; } - table tbody tr { - border: solid 1px rgba(210, 215, 217, 0.75); - border-left: 0; - border-right: 0; } - table tbody tr:nth-child(2n + 1) { - background-color: rgba(230, 235, 237, 0.25); } - table td { - padding: 0.75em 0.75em; } - table th { - color: #3d4449; - font-size: 0.9em; - font-weight: 600; - padding: 0 0.75em 0.75em 0.75em; - text-align: left; } - table thead { - border-bottom: solid 2px rgba(210, 215, 217, 0.75); } - table tfoot { - border-top: solid 2px rgba(210, 215, 217, 0.75); } - table.alt { - border-collapse: separate; } - table.alt tbody tr td { - border: solid 1px rgba(210, 215, 217, 0.75); - border-left-width: 0; - border-top-width: 0; } - table.alt tbody tr td:first-child { - border-left-width: 1px; } - table.alt tbody tr:first-child td { - border-top-width: 1px; } - table.alt thead { - border-bottom: 0; } - table.alt tfoot { - border-top: 0; } - -/* Button */ -input[type="submit"], -input[type="reset"], -input[type="button"], -button, -.button { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - background-color: transparent; - border-radius: 0.375em; - border: 0; - box-shadow: inset 0 0 0 2px #f56a6a; - color: #f56a6a !important; - cursor: pointer; - display: inline-block; - font-family: "Roboto Slab", serif; - font-size: 0.8em; - font-weight: 700; - height: 3.5em; - letter-spacing: 0.075em; - line-height: 3.5em; - padding: 0 2.25em; - text-align: center; - text-decoration: none; - text-transform: uppercase; - white-space: nowrap; } - input[type="submit"]:hover, - input[type="reset"]:hover, - input[type="button"]:hover, - button:hover, - .button:hover { - background-color: rgba(245, 106, 106, 0.05); } - input[type="submit"]:active, - input[type="reset"]:active, - input[type="button"]:active, - button:active, - .button:active { - background-color: rgba(245, 106, 106, 0.15); } - input[type="submit"].icon:before, - input[type="reset"].icon:before, - input[type="button"].icon:before, - button.icon:before, - .button.icon:before { - margin-right: 0.5em; } - input[type="submit"].fit, - input[type="reset"].fit, - input[type="button"].fit, - button.fit, - .button.fit { - width: 100%; } - input[type="submit"].small, - input[type="reset"].small, - input[type="button"].small, - button.small, - .button.small { - font-size: 0.6em; } - input[type="submit"].large, - input[type="reset"].large, - input[type="button"].large, - button.large, - .button.large { - font-size: 1em; - height: 3.65em; - line-height: 3.65em; } - input[type="submit"].primary, - input[type="reset"].primary, - input[type="button"].primary, - button.primary, - .button.primary { - background-color: #f56a6a; - box-shadow: none; - color: #ffffff !important; } - input[type="submit"].primary:hover, - input[type="reset"].primary:hover, - input[type="button"].primary:hover, - button.primary:hover, - .button.primary:hover { - background-color: #f67878; } - input[type="submit"].primary:active, - input[type="reset"].primary:active, - input[type="button"].primary:active, - button.primary:active, - .button.primary:active { - background-color: #f45c5c; } - input[type="submit"].disabled, input[type="submit"]:disabled, - input[type="reset"].disabled, - input[type="reset"]:disabled, - input[type="button"].disabled, - input[type="button"]:disabled, - button.disabled, - button:disabled, - .button.disabled, - .button:disabled { - pointer-events: none; - opacity: 0.25; } - -/* Mini Posts */ -.mini-posts article { - border-top: solid 1px rgba(210, 215, 217, 0.75); - margin-top: 2em; - padding-top: 2em; } - .mini-posts article .image { - display: block; - margin: 0 0 1.5em 0; } - .mini-posts article .image img { - display: block; - width: 100%; } - .mini-posts article:first-child { - border-top: 0; - margin-top: 0; - padding-top: 0; } - -/* Features */ -.features { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin: 0 0 2em -3em; - width: calc(100% + 3em); } - .features article { - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - margin: 0 0 3em 3em; - position: relative; - width: calc(50% - 3em); } - .features article:nth-child(2n - 1) { - margin-right: 1.5em; } - .features article:nth-child(2n) { - margin-left: 1.5em; } - .features article:nth-last-child(1), .features article:nth-last-child(2) { - margin-bottom: 0; } - .features article .icon { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - display: block; - height: 10em; - line-height: 10em; - margin: 0 2em 0 0; - text-align: center; - width: 10em; } - .features article .icon:before { - color: #f56a6a; - font-size: 2.75rem; - position: relative; - top: 0.05em; } - .features article .icon:after { - -moz-transform: rotate(45deg); - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - border-radius: 0.25rem; - border: solid 2px rgba(210, 215, 217, 0.75); - content: ''; - display: block; - height: 7em; - left: 50%; - margin: -3.5em 0 0 -3.5em; - position: absolute; - top: 50%; - width: 7em; } - .features article .content { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - width: 100%; } - .features article .content > :last-child { - margin-bottom: 0; } - @media screen and (max-width: 980px) { - .features { - margin: 0 0 2em 0; - width: 100%; } - .features article { - margin: 0 0 3em 0; - width: 100%; } - .features article:nth-child(2n - 1) { - margin-right: 0; } - .features article:nth-child(2n) { - margin-left: 0; } - .features article:nth-last-child(1), .features article:nth-last-child(2) { - margin-bottom: 3em; } - .features article:last-child { - margin-bottom: 0; } - .features article .icon { - height: 8em; - line-height: 8em; - width: 8em; } - .features article .icon:before { - font-size: 2.25rem; } - .features article .icon:after { - height: 6em; - margin: -3em 0 0 -3em; - width: 6em; } } - @media screen and (max-width: 480px) { - .features article { - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -moz-align-items: -moz-flex-start; - -webkit-align-items: -webkit-flex-start; - -ms-align-items: -ms-flex-start; - align-items: flex-start; } - .features article .icon { - height: 6em; - line-height: 6em; - margin: 0 0 1.5em 0; - width: 6em; } - .features article .icon:before { - font-size: 1.5rem; } - .features article .icon:after { - height: 4em; - margin: -2em 0 0 -2em; - width: 4em; } } - @media screen and (max-width: 480px) { - .features article .icon:before { - font-size: 1.25rem; } } - -/* Posts */ -.posts { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin: 0 0 2em -6em; - width: calc(100% + 6em); } - .posts article { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - margin: 0 0 6em 6em; - position: relative; - width: calc(33.33333% - 6em); } - .posts article:before { - background: rgba(210, 215, 217, 0.75); - content: ''; - display: block; - height: calc(100% + 6em); - left: -3em; - position: absolute; - top: 0; - width: 1px; } - .posts article:after { - background: rgba(210, 215, 217, 0.75); - bottom: -3em; - content: ''; - display: block; - height: 1px; - position: absolute; - right: 0; - width: calc(100% + 6em); } - .posts article > :last-child { - margin-bottom: 0; } - .posts article .image { - display: block; - margin: 0 0 2em 0; } - .posts article .image img { - display: block; - width: 100%; } - @media screen and (min-width: 1681px) { - .posts article:nth-child(3n + 1):before { - display: none; } - .posts article:nth-child(3n + 1):after { - width: 100%; } - .posts article:nth-last-child(1), .posts article:nth-last-child(2), .posts article:nth-last-child(3) { - margin-bottom: 0; } - .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before, .posts article:nth-last-child(3):before { - height: 100%; } - .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after, .posts article:nth-last-child(3):after { - display: none; } } - @media screen and (max-width: 1680px) { - .posts article { - width: calc(50% - 6em); } - .posts article:nth-last-child(3) { - margin-bottom: 6em; } } - @media screen and (min-width: 481px) and (max-width: 1680px) { - .posts article:nth-child(2n + 1):before { - display: none; } - .posts article:nth-child(2n + 1):after { - width: 100%; } - .posts article:nth-last-child(1), .posts article:nth-last-child(2) { - margin-bottom: 0; } - .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before { - height: 100%; } - .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after { - display: none; } } - @media screen and (max-width: 736px) { - .posts { - margin: 0 0 2em -4.5em; - width: calc(100% + 4.5em); } - .posts article { - margin: 0 0 4.5em 4.5em; - width: calc(50% - 4.5em); } - .posts article:before { - height: calc(100% + 4.5em); - left: -2.25em; } - .posts article:after { - bottom: -2.25em; - width: calc(100% + 4.5em); } - .posts article:nth-last-child(3) { - margin-bottom: 4.5em; } } - @media screen and (max-width: 480px) { - .posts { - margin: 0 0 2em 0; - width: 100%; } - .posts article { - margin: 0 0 4.5em 0; - width: 100%; } - .posts article:before { - display: none; } - .posts article:after { - width: 100%; } - .posts article:last-child { - margin-bottom: 0; } - .posts article:last-child:after { - display: none; } } - -/* Wrapper */ -#wrapper { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-direction: row-reverse; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; - min-height: 100vh; } - -/* Main */ -#main { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - width: 100%; } - #main > .inner { - padding: 0 6em 0.1em 6em ; - margin: 0 auto; - max-width: 110em; } - #main > .inner > section { - padding: 6em 0 4em 0 ; - border-top: solid 2px rgba(210, 215, 217, 0.75); } - #main > .inner > section:first-of-type { - border-top: 0 !important; } - @media screen and (max-width: 1680px) { - #main > .inner { - padding: 0 5em 0.1em 5em ; } - #main > .inner > section { - padding: 5em 0 3em 0 ; } } - @media screen and (max-width: 1280px) { - #main > .inner { - padding: 0 4em 0.1em 4em ; } - #main > .inner > section { - padding: 4em 0 2em 0 ; } } - @media screen and (max-width: 736px) { - #main > .inner { - padding: 0 2em 0.1em 2em ; } - #main > .inner > section { - padding: 3em 0 1em 0 ; } } - -/* Sidebar */ -#search form { - text-decoration: none; - position: relative; } - #search form:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; } - #search form:before { - -moz-transform: scaleX(-1); - -webkit-transform: scaleX(-1); - -ms-transform: scaleX(-1); - transform: scaleX(-1); - color: #7f888f; - content: '\f002'; - cursor: default; - display: block; - font-size: 1.5em; - height: 2em; - line-height: 2em; - opacity: 0.325; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 2em; } - #search form input[type="text"] { - padding-right: 2.75em; } - -#sidebar { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - -moz-transition: margin-left 0.5s ease, box-shadow 0.5s ease; - -webkit-transition: margin-left 0.5s ease, box-shadow 0.5s ease; - -ms-transition: margin-left 0.5s ease, box-shadow 0.5s ease; - transition: margin-left 0.5s ease, box-shadow 0.5s ease; - background-color: #f5f6f7; - font-size: 0.9em; - position: relative; - width: 26em; } - #sidebar h2 { - font-size: 1.38889em; } - #sidebar > .inner { - padding: 2.22222em 2.22222em 2.44444em 2.22222em ; - position: relative; - width: 26em; } - #sidebar > .inner > * { - border-bottom: solid 2px rgba(210, 215, 217, 0.75); - margin: 0 0 3.5em 0; - padding: 0 0 3.5em 0; } - #sidebar > .inner > * > :last-child { - margin-bottom: 0; } - #sidebar > .inner > *:last-child { - border-bottom: 0; - margin-bottom: 0; - padding-bottom: 0; } - #sidebar > .inner > .alt { - background-color: #eff1f2; - border-bottom: 0; - margin: -2.22222em 0 4.44444em -2.22222em; - padding: 2.22222em; - width: calc(100% + 4.44444em); } - #sidebar .toggle { - text-decoration: none; - -moz-transition: left 0.5s ease; - -webkit-transition: left 0.5s ease; - -ms-transition: left 0.5s ease; - transition: left 0.5s ease; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - border: 0; - display: block; - height: 7.5em; - left: 26em; - line-height: 7.5em; - outline: 0; - overflow: hidden; - position: absolute; - text-align: center; - text-indent: -15em; - white-space: nowrap; - top: 0; - width: 6em; - z-index: 10000; } - #sidebar .toggle:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; } - #sidebar .toggle:before { - content: '\f0c9'; - font-size: 2rem; - height: inherit; - left: 0; - line-height: inherit; - position: absolute; - text-indent: 0; - top: 0; - width: inherit; } - #sidebar.inactive { - margin-left: -26em; } - @media screen and (max-width: 1680px) { - #sidebar { - width: 24em; } - #sidebar > .inner { - padding: 1.66667em 1.66667em 1.33333em 1.66667em ; - width: 24em; } - #sidebar > .inner > .alt { - margin: -1.66667em 0 3.33333em -1.66667em; - padding: 1.66667em; - width: calc(100% + 3.33333em); } - #sidebar .toggle { - height: 6.25em; - left: 24em; - line-height: 6.25em; - text-indent: 5em; - width: 5em; } - #sidebar .toggle:before { - font-size: 1.5rem; } - #sidebar.inactive { - margin-left: -24em; } } - @media screen and (max-width: 1280px) { - #sidebar { - box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175); - height: 100%; - left: 0; - position: fixed; - top: 0; - z-index: 10000; } - #sidebar.inactive { - box-shadow: none; } - #sidebar > .inner { - -webkit-overflow-scrolling: touch; - height: 100%; - left: 0; - overflow-x: hidden; - overflow-y: auto; - position: absolute; - top: 0; } - #sidebar > .inner:after { - content: ''; - display: block; - height: 4em; - width: 100%; } - #sidebar .toggle { - text-indent: 6em; - width: 6em; } - #sidebar .toggle:before { - font-size: 1.5rem; - margin-left: -0.4375em; } - body.is-preload #sidebar { - display: none; } } - @media screen and (max-width: 736px) { - #sidebar .toggle { - text-indent: 7.25em; - width: 7.25em; } - #sidebar .toggle:before { - color: #7f888f; - margin-left: -0.0625em; - margin-top: -0.25em; - font-size: 1.1rem; - z-index: 1; } - #sidebar .toggle:after { - background: rgba(222, 225, 226, 0.75); - border-radius: 0.375em; - content: ''; - height: 3.5em; - left: 1em; - position: absolute; - top: 1em; - width: 5em; } } - -/* Header */ -#header { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - border-bottom: solid 5px #f56a6a; - padding: 6em 0 1em 0; - position: relative; } - #header > * { - -moz-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - margin-bottom: 0; } - #header .logo { - border-bottom: 0; - color: inherit; - font-family: "Roboto Slab", serif; - font-size: 1.125em; } - #header .icons { - text-align: right; } - @media screen and (max-width: 1680px) { - #header { - padding-top: 5em; } } - @media screen and (max-width: 736px) { - #header { - padding-top: 6.5em; } - #header .logo { - font-size: 1.25em; - margin: 0; } - #header .icons { - height: 5em; - line-height: 5em; - position: absolute; - right: -0.5em; - top: 0; } } - -/* Banner */ -#banner { - padding: 6em 0 4em 0 ; - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; } - #banner h1 { - margin-top: -0.125em; } - #banner .content { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - width: 50%; } - #banner .image { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - display: block; - margin: 0 0 2em 4em; - width: 50%; } - #banner .image img { - height: 100%; - -moz-object-fit: cover; - -webkit-object-fit: cover; - -ms-object-fit: cover; - object-fit: cover; - -moz-object-position: center; - -webkit-object-position: center; - -ms-object-position: center; - object-position: center; - width: 100%; } - @media screen and (orientation: portrait) { - #banner { - -moz-flex-direction: column-reverse; - -webkit-flex-direction: column-reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; } - #banner h1 br { - display: none; } - #banner .content { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - width: 100%; } - #banner .image { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - margin: 0 0 4em 0; - height: 25em; - max-height: 50vh; - min-height: 18em; - width: 100%; } } - @media screen and (orientation: portrait) and (max-width: 480px) { - #banner .image { - max-height: 35vh; } } - -/* Footer */ -#footer .copyright { - color: #9fa3a6; - font-size: 0.9em; } - #footer .copyright a { - color: inherit; } - -/* Menu */ -#menu ul { - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - color: #3d4449; - font-family: "Roboto Slab", serif; - font-weight: 400; - letter-spacing: 0.075em; - list-style: none; - margin-bottom: 0; - padding: 0; - text-transform: uppercase; } - #menu ul a, #menu ul span { - border-bottom: 0; - color: inherit; - cursor: pointer; - display: block; - font-size: 0.9em; - padding: 0.625em 0; } - #menu ul a:hover, #menu ul span:hover { - color: #f56a6a; } - #menu ul a.opener, #menu ul span.opener { - -moz-transition: color 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out; - transition: color 0.2s ease-in-out; - text-decoration: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - position: relative; } - #menu ul a.opener:before, #menu ul span.opener:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; } - #menu ul a.opener:before, #menu ul span.opener:before { - -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out; - transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; - color: #9fa3a6; - content: '\f078'; - position: absolute; - right: 0; } - #menu ul a.opener:hover:before, #menu ul span.opener:hover:before { - color: #f56a6a; } - #menu ul a.opener.active + ul, #menu ul span.opener.active + ul { - display: block; } - #menu ul a.opener.active:before, #menu ul span.opener.active:before { - -moz-transform: rotate(-180deg); - -webkit-transform: rotate(-180deg); - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); } - -#menu > ul > li { - border-top: solid 1px rgba(210, 215, 217, 0.75); - margin: 0.5em 0 0 0; - padding: 0.5em 0 0 0; } - #menu > ul > li > ul { - color: #9fa3a6; - display: none; - margin: 0.5em 0 1.5em 0; - padding-left: 1em; } - #menu > ul > li > ul a, #menu > ul > li > ul span { - font-size: 0.8em; } - #menu > ul > li > ul > li { - margin: 0.125em 0 0 0; - padding: 0.125em 0 0 0; } - #menu > ul > li:first-child { - border-top: 0; - margin-top: 0; - padding-top: 0; } diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..2c37295 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,62 @@ +@import 'libs/vars'; +@import 'css/vars_spip'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; +@import 'libs/html-grid'; +@import url(fontawesome-all.min.css); + +/* + Editorial by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +// Breakpoints. + + @include breakpoints(( + xlarge: ( 1281px, 1680px ), + large: ( 981px, 1280px ), + medium: ( 737px, 980px ), + small: ( 481px, 736px ), + xsmall: ( 361px, 480px ), + xxsmall: ( null, 360px ), + xlarge-to-max: '(min-width: 1681px)', + small-to-xlarge: '(min-width: 481px) and (max-width: 1680px)' + )); + +// Base. + + @import 'base/reset'; + @import 'base/page'; + @import 'base/typography'; + +// Component. + + @import 'components/row'; + @import 'components/section'; + @import 'components/form'; + @import 'components/box'; + @import 'components/icon'; + @import 'components/image'; + @import 'components/list'; + @import 'components/actions'; + @import 'components/icons'; + @import 'components/contact'; + @import 'components/pagination'; + @import 'components/table'; + @import 'components/button'; + @import 'components/mini-posts'; + @import 'components/features'; + @import 'components/posts'; + +// Layout. + + @import 'layout/wrapper'; + @import 'layout/main'; + @import 'layout/sidebar'; + @import 'layout/header'; + @import 'layout/banner'; + @import 'layout/footer'; + @import 'layout/menu'; \ No newline at end of file diff --git a/css/spip.scss b/css/spip.scss index 43810cc..41208a4 100644 --- a/css/spip.scss +++ b/css/spip.scss @@ -1,16 +1,18 @@ @import 'css/libs/vars'; @import 'css/vars_spip'; @import 'css/libs/functions'; +@import 'libs/breakpoints'; @import 'css/libs/mixins'; -@import 'css/libs/skel'; - -@include skel-breakpoints(( - xlarge: '(max-width: 1680px)', - large: '(max-width: 1280px)', - medium: '(max-width: 980px)', - small: '(max-width: 736px)', - xsmall: '(max-width: 640px)', - xxsmall: '(max-width: 360px)' + +@include breakpoints(( + xlarge: ( 1281px, 1680px ), + large: ( 981px, 1280px ), + medium: ( 737px, 980px ), + small: ( 481px, 736px ), + xsmall: ( 361px, 480px ), + xxsmall: ( null, 360px ), + xlarge-to-max: '(min-width: 1681px)', + small-to-xlarge: '(min-width: 481px) and (max-width: 1680px)' )); /* -------------------------------------------------------------- diff --git a/paquet.xml b/paquet.xml index 9f631cd..49ee674 100644 --- a/paquet.xml +++ b/paquet.xml @@ -1,7 +1,7 @@