From 78860d8477dbba58da6bdcdb968a8f529c5bc013 Mon Sep 17 00:00:00 2001 From: David Eziefule Date: Mon, 20 May 2024 10:40:00 +0100 Subject: [PATCH] Add files via upload --- assets/sass/components/_actions.scss | 63 ++++++ assets/sass/components/_box.scss | 25 +++ assets/sass/components/_button.scss | 130 +++++++++++ assets/sass/components/_contact-method.scss | 23 ++ assets/sass/components/_form.scss | 234 ++++++++++++++++++++ assets/sass/components/_icon.scss | 66 ++++++ assets/sass/components/_icons.scss | 28 +++ assets/sass/components/_image.scss | 62 ++++++ assets/sass/components/_list.scss | 56 +++++ assets/sass/components/_pagination.scss | 70 ++++++ assets/sass/components/_row.scss | 31 +++ assets/sass/components/_section.scss | 69 ++++++ assets/sass/components/_spotlights.scss | 119 ++++++++++ assets/sass/components/_table.scss | 81 +++++++ assets/sass/components/_tiles.scss | 183 +++++++++++++++ 15 files changed, 1240 insertions(+) create mode 100644 assets/sass/components/_actions.scss create mode 100644 assets/sass/components/_box.scss create mode 100644 assets/sass/components/_button.scss create mode 100644 assets/sass/components/_contact-method.scss create mode 100644 assets/sass/components/_form.scss create mode 100644 assets/sass/components/_icon.scss create mode 100644 assets/sass/components/_icons.scss create mode 100644 assets/sass/components/_image.scss create mode 100644 assets/sass/components/_list.scss create mode 100644 assets/sass/components/_pagination.scss create mode 100644 assets/sass/components/_row.scss create mode 100644 assets/sass/components/_section.scss create mode 100644 assets/sass/components/_spotlights.scss create mode 100644 assets/sass/components/_table.scss create mode 100644 assets/sass/components/_tiles.scss diff --git a/assets/sass/components/_actions.scss b/assets/sass/components/_actions.scss new file mode 100644 index 0000000..891fb6d --- /dev/null +++ b/assets/sass/components/_actions.scss @@ -0,0 +1,63 @@ +/// +/// Forty 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/assets/sass/components/_box.scss b/assets/sass/components/_box.scss new file mode 100644 index 0000000..45a37a0 --- /dev/null +++ b/assets/sass/components/_box.scss @@ -0,0 +1,25 @@ +/// +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Box */ + + .box { + 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/assets/sass/components/_button.scss b/assets/sass/components/_button.scss new file mode 100644 index 0000000..fc903c1 --- /dev/null +++ b/assets/sass/components/_button.scss @@ -0,0 +1,130 @@ +/// +/// Forty 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', + 'box-shadow #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + background-color: transparent; + border: 0; + border-radius: 0; + box-shadow: inset 0 0 0 2px _palette(fg-bold); + color: _palette(fg-bold); + cursor: pointer; + display: inline-block; + font-size: 0.8em; + font-weight: _font(weight-bold); + height: 3.5em; + letter-spacing: _font(letter-spacing-alt); + line-height: 3.5em; + padding: 0 1.75em; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + + &:hover, &:active { + box-shadow: inset 0 0 0 2px _palette(highlight); + color: _palette(highlight); + } + + &:active { + background-color: transparentize(_palette(highlight), 0.9); + box-shadow: inset 0 0 0 2px desaturate(darken(_palette(highlight), 15), 5); + color: desaturate(darken(_palette(highlight), 15), 5); + } + + &.icon { + &:before { + margin-right: 0.5em; + } + } + + &.fit { + width: 100%; + } + + &.small { + font-size: 0.6em; + } + + &.large { + font-size: 1.25em; + height: 3em; + line-height: 3em; + } + + &.next { + padding-right: 4.5em; + position: relative; + + &:before, &:after { + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + background-position: center right; + background-repeat: no-repeat; + background-size: 36px 24px; + content: ''; + display: block; + height: 100%; + position: absolute; + right: 1.5em; + top: 0; + vertical-align: middle; + width: 36px; + } + + &:before { + background-image: svg-url(''); + } + + &:after { + background-image: svg-url(''); + opacity: 0; + z-index: 1; + } + + &:hover, &:active { + &:after { + opacity: 1; + } + } + + @include breakpoint('<=large') { + padding-right: 5em; + } + } + + &.primary { + background-color: _palette(fg-bold); + box-shadow: none; + color: _palette(bg); + + &:hover, &:active { + background-color: _palette(highlight); + color: _palette(bg) !important; + } + + &:active { + background-color: desaturate(darken(_palette(highlight), 15), 5); + } + } + + &.disabled, + &:disabled { + @include vendor('pointer-events', 'none'); + cursor: default; + opacity: 0.25; + } + } \ No newline at end of file diff --git a/assets/sass/components/_contact-method.scss b/assets/sass/components/_contact-method.scss new file mode 100644 index 0000000..910d817 --- /dev/null +++ b/assets/sass/components/_contact-method.scss @@ -0,0 +1,23 @@ +/// +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Contact Method */ + + .contact-method { + margin: 0 0 _size(element-margin) 0; + padding-left: 3.25em; + position: relative; + + .icon { + left: 0; + position: absolute; + top: 0; + } + + h3 { + margin: 0 0 (_size(element-margin) * 0.25) 0; + } + } \ No newline at end of file diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss new file mode 100644 index 0000000..fed297d --- /dev/null +++ b/assets/sass/components/_form.scss @@ -0,0 +1,234 @@ +/// +/// Forty 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; + + > :last-child { + margin-bottom: 0; + } + + > .fields { + $gutter: (_size(element-margin) * 0.75); + + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + width: calc(100% + #{$gutter * 2}); + margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); + + > .field { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + padding: $gutter 0 0 $gutter; + width: calc(100% - #{$gutter * 1}); + + &.half { + width: calc(50% - #{$gutter * 0.5}); + } + + &.third { + width: calc(#{100% / 3} - #{$gutter * (1 / 3)}); + } + + &.quarter { + width: calc(25% - #{$gutter * 0.25}); + } + } + } + + @include breakpoint('<=xsmall') { + > .fields { + $gutter: (_size(element-margin) * 0.75); + + width: calc(100% + #{$gutter * 2}); + margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); + + > .field { + padding: $gutter 0 0 $gutter; + width: calc(100% - #{$gutter * 1}); + + &.half { + width: calc(100% - #{$gutter * 1}); + } + + &.third { + width: calc(100% - #{$gutter * 1}); + } + + &.quarter { + width: calc(100% - #{$gutter * 1}); + } + } + } + } + } + + label { + color: _palette(fg-bold); + display: block; + font-size: 0.8em; + font-weight: _font(weight-bold); + letter-spacing: _font(letter-spacing-alt); + margin: 0 0 (_size(element-margin) * 0.5) 0; + text-transform: uppercase; + } + + 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(border-bg); + border: none; + border-radius: 0; + color: inherit; + display: block; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; + + &:invalid { + box-shadow: none; + } + + &:focus { + border-color: _palette(highlight); + box-shadow: 0 0 0 2px _palette(highlight); + } + } + + select { + background-image: svg-url(""); + background-size: 1.25rem; + background-repeat: no-repeat; + background-position: calc(100% - 1rem) 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-weight: _font(weight); + padding-left: (_size(element-height) * 0.6) + 1em; + padding-right: 0.75em; + position: relative; + + &:before { + background: _palette(border-bg); + content: ''; + display: inline-block; + font-size: 0.8em; + height: (_size(element-height) * 0.75); + left: 0; + letter-spacing: 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(highlight); + content: '\f00c'; + color: _palette(bg); + } + } + + &:focus + label { + &:before { + box-shadow: 0 0 0 2px _palette(highlight); + } + } + } + + input[type="checkbox"] { + & + label { + &:before { + } + } + } + + 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/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss new file mode 100644 index 0000000..212f337 --- /dev/null +++ b/assets/sass/components/_icon.scss @@ -0,0 +1,66 @@ +/// +/// Forty 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'; + } + } + + &.alt { + &:before { + background-color: _palette(fg-bold); + border-radius: 100%; + color: _palette(bg); + display: inline-block; + height: 2em; + line-height: 2em; + text-align: center; + width: 2em; + } + } + } + + a.icon { + &.alt { + &:before { + @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); + } + + &:hover { + &:before { + background-color: _palette(accent1); + } + } + + &:active { + &:before { + background-color: desaturate(darken(_palette(accent1), 15), 5); + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_icons.scss b/assets/sass/components/_icons.scss new file mode 100644 index 0000000..cc819b1 --- /dev/null +++ b/assets/sass/components/_icons.scss @@ -0,0 +1,28 @@ +/// +/// Forty 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; + } + } + + @include breakpoint('<=small') { + li { + padding: 0 0.75em 0 0; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss new file mode 100644 index 0000000..1cefb63 --- /dev/null +++ b/assets/sass/components/_image.scss @@ -0,0 +1,62 @@ +/// +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Image */ + + .image { + border: 0; + display: inline-block; + position: relative; + + img { + display: block; + } + + &.left, + &.right { + max-width: 30%; + + img { + width: 100%; + } + } + + &.left { + float: left; + margin: 0 1.5em 1.25em 0; + top: 0.25em; + } + + &.right { + float: right; + margin: 0 0 1.25em 1.5em; + top: 0.25em; + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + + &.main { + display: block; + margin: (_size(element-margin) * 1.25) 0; + width: 100%; + + img { + width: 100%; + } + + @include breakpoint('<=small') { + margin: (_size(element-margin) * 0.75) 0; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss new file mode 100644 index 0000000..56989df --- /dev/null +++ b/assets/sass/components/_list.scss @@ -0,0 +1,56 @@ +/// +/// Forty 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/assets/sass/components/_pagination.scss b/assets/sass/components/_pagination.scss new file mode 100644 index 0000000..0059795 --- /dev/null +++ b/assets/sass/components/_pagination.scss @@ -0,0 +1,70 @@ +/// +/// Forty 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; + display: inline-block; + font-size: 0.8em; + font-weight: _font(weight-bold); + height: 1.5em; + line-height: 1.5em; + margin: 0 0.125em; + min-width: 1.5em; + padding: 0 0.5em; + text-align: center; + + &.active { + background-color: _palette(fg-bold); + color: _palette(bg); + + &:hover { + background-color: _palette(highlight); + color: _palette(bg) !important; + } + + &:active { + background-color: desaturate(darken(_palette(highlight), 15), 5); + } + } + } + + &: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/assets/sass/components/_row.scss b/assets/sass/components/_row.scss new file mode 100644 index 0000000..2a28835 --- /dev/null +++ b/assets/sass/components/_row.scss @@ -0,0 +1,31 @@ +/// +/// Forty 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(2em); + + @include breakpoint('<=xlarge') { + @include html-grid(2em, '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.25em, 'small'); + } + + @include breakpoint('<=xsmall') { + @include html-grid(1.25em, 'xsmall'); + } + } \ No newline at end of file diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss new file mode 100644 index 0000000..2bdad69 --- /dev/null +++ b/assets/sass/components/_section.scss @@ -0,0 +1,69 @@ +/// +/// Forty 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 { + &.major { + width: -moz-max-content; + width: -webkit-max-content; + width: -ms-max-content; + width: max-content; + margin-bottom: _size(element-margin); + + > :first-child { + margin-bottom: 0; + width: calc(100% + 0.5em); + + &:after { + content: ''; + background-color: _palette(fg-bold); + display: block; + height: 2px; + margin: 0.325em 0 0.5em 0; + width: 100%; + } + } + + > p { + font-size: 0.7em; + font-weight: _font(weight-bold); + letter-spacing: _font(letter-spacing-alt); + margin-bottom: 0; + text-transform: uppercase; + } + + body.is-ie & { + > :first-child { + &:after { + max-width: 9em; + } + } + + > h1 { + &:after { + max-width: 100% !important; + } + } + } + } + + @include breakpoint('<=small') { + &.major { + > p { + br { + display: none; + } + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_spotlights.scss b/assets/sass/components/_spotlights.scss new file mode 100644 index 0000000..337bc1a --- /dev/null +++ b/assets/sass/components/_spotlights.scss @@ -0,0 +1,119 @@ +/// +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Spotlights */ + + .spotlights { + border-top: 0 !important; + + & + * { + border-top: 0 !important; + } + + > section { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row'); + background-color: desaturate(lighten(_palette(bg-alt), 2), 1); + + > .image { + background-position: center center; + background-size: cover; + border-radius: 0; + display: block; + position: relative; + width: 30%; + + img { + border-radius: 0; + display: block; + width: 100%; + } + + &:before { + background: transparentize(_palette(bg), 0.1); + content: ''; + display: block; + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + width: 100%; + } + } + + > .content { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('justify-content', 'center'); + @include vendor('align-items', 'center'); + @include padding(2em, 3em); + width: 70%; + + > .inner { + margin: 0 auto; + max-width: 100%; + width: _size(inner); + } + } + + &:nth-child(2n) { + @include vendor('flex-direction', 'row-reverse'); + background-color: desaturate(lighten(_palette(bg-alt), 4), 2); + + > .content { + @include vendor('align-items', 'flex-end'); + } + } + } + + @include breakpoint('<=xlarge') { + > section { + > .image { + width: 40%; + } + + > .content { + width: 60%; + } + } + } + + @include breakpoint('<=large') { + > section { + > .image { + width: 45%; + } + + > .content { + width: 55%; + } + } + } + + @include breakpoint('<=medium') { + > section { + display: block; + + > .image { + width: 100%; + } + + > .content { + @include padding(4em, 3em); + width: 100%; + } + } + } + + @include breakpoint('<=small') { + > section { + > .content { + @include padding(3em, 1.5em); + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss new file mode 100644 index 0000000..e020928 --- /dev/null +++ b/assets/sass/components/_table.scss @@ -0,0 +1,81 @@ +/// +/// Forty 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/assets/sass/components/_tiles.scss b/assets/sass/components/_tiles.scss new file mode 100644 index 0000000..71745cf --- /dev/null +++ b/assets/sass/components/_tiles.scss @@ -0,0 +1,183 @@ +/// +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Tiles */ + + .tiles { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + border-top: 0 !important; + + & + * { + border-top: 0 !important; + } + + article { + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('transition', ( + 'transform 0.25s ease', + 'opacity 0.25s ease', + 'filter 1s ease', + '-webkit-filter 1s ease' + )); + @include padding(4em, 4em); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + cursor: default; + height: 40vh; + max-height: 40em; + min-height: 23em; + overflow: hidden; + position: relative; + width: 40%; + + .image { + display: none; + } + + header { + position: relative; + z-index: 3; + } + + h3 { + font-size: 1.75em; + + a { + &:hover { + color: inherit !important; + } + } + } + + .link.primary { + border: 0; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 4; + } + + &:before { + @include vendor('transition', 'opacity 0.5s ease'); + bottom: 0; + content: ''; + display: block; + height: 100%; + left: 0; + opacity: 0.85; + position: absolute; + width: 100%; + z-index: 2; + } + + &:after { + background-color: transparentize(_palette(bg), 0.75); + content: ''; + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + } + + &:hover { + &:before { + opacity: 0; + } + } + + &.is-transitioning { + @include vendor('transform', 'scale(0.95)'); + @include vendor('filter', 'blur(0.5em)'); + opacity: 0; + } + + &:nth-child(4n - 1), + &:nth-child(4n - 2) { + width: 60%; + } + + &:nth-child(6n - 5) { + &:before { + background-color: _palette(accent1); + } + } + + &:nth-child(6n - 4) { + &:before { + background-color: _palette(accent2); + } + } + + &:nth-child(6n - 3) { + &:before { + background-color: _palette(accent3); + } + } + + &:nth-child(6n - 2) { + &:before { + background-color: _palette(accent4); + } + } + + &:nth-child(6n - 1) { + &:before { + background-color: _palette(accent5); + } + } + + &:nth-child(6n) { + &:before { + background-color: _palette(accent6); + } + } + } + + @include breakpoint('<=large') { + article { + @include padding(4em, 3em); + height: 30vh; + max-height: 30em; + min-height: 20em; + } + } + + @include breakpoint('<=medium') { + article { + width: 50% !important; + } + } + + @include breakpoint('<=small') { + article { + @include padding(3em, 1.5em); + height: 16em; + max-height: none; + min-height: 0; + + h3 { + font-size: 1.5em; + } + } + } + + @include breakpoint('<=xsmall') { + display: block; + + article { + height: 20em; + width: 100% !important; + } + } + } \ No newline at end of file