From: danix Date: Sat, 11 Feb 2023 19:12:27 +0000 (+0100) Subject: splitted up stylesheet and added lots of scaffolding to it. Style needs working. X-Git-Url: https://git.danix.xyz/?p=theme-danix.xyz.git;a=commitdiff_plain;h=748286b530a4b000cac6b88bbcebb258056a9e77 splitted up stylesheet and added lots of scaffolding to it. Style needs working. --- diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss new file mode 100644 index 0000000..bb2827a --- /dev/null +++ b/assets/sass/base/_page.scss @@ -0,0 +1,47 @@ +/// +/// Forty 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. + &.is-preload { + *, *:before, *:after { + @include vendor('animation', 'none !important'); + @include vendor('transition', 'none !important'); + } + } + + } \ No newline at end of file diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss new file mode 100644 index 0000000..6b1a382 --- /dev/null +++ b/assets/sass/base/_reset.scss @@ -0,0 +1,76 @@ +/// +/// Forty 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/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss new file mode 100644 index 0000000..b615f44 --- /dev/null +++ b/assets/sass/base/_typography.scss @@ -0,0 +1,178 @@ +/// +/// Forty 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: 17pt; + font-weight: _font(weight); + letter-spacing: _font(letter-spacing); + line-height: 1.65; + + @include breakpoint('<=xlarge') { + font-size: 14pt; + } + + @include breakpoint('<=large') { + font-size: 12pt; + } + + @include breakpoint('<=xxsmall') { + font-size: 11pt; + } + } + + a { + @include vendor('transition', ( + 'color #{_duration(transition)} ease-in-out', + 'border-bottom-color #{_duration(transition)} ease-in-out' + )); + border-bottom: dotted 1px; + color: inherit; + text-decoration: none; + + &:hover { + border-bottom-color: transparent; + color: _palette(highlight) !important; + } + + &:active { + color: desaturate(darken(_palette(highlight), 15), 5) !important; + } + } + + 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-weight: _font(weight-bold); + line-height: 1.65; + margin: 0 0 (_size(element-margin) * 0.5) 0; + + a { + color: inherit; + border-bottom: 0; + } + } + + h1 { + font-size: 2.5em; + } + + h2 { + font-size: 1.75em; + } + + h3 { + font-size: 1.35em; + } + + h4 { + font-size: 1.1em; + } + + h5 { + font-size: 0.9em; + } + + h6 { + font-size: 0.7em; + } + + @include breakpoint('<=small') { + h1 { + font-size: 2em; + } + + h2 { + font-size: 1.5em; + } + + h3 { + font-size: 1.25em; + } + } + + sub { + font-size: 0.8em; + position: relative; + top: 0.5em; + } + + sup { + font-size: 0.8em; + position: relative; + top: -0.5em; + } + + blockquote { + border-left: solid 4px _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); + 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; + } + + .screen-reader-text, + .hidden { + @include hide-visually; + } 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..32e99f9 --- /dev/null +++ b/assets/sass/components/_icons.scss @@ -0,0 +1,58 @@ +/// +/// 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; + } + } + } + + ul.social-sites { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 1em 0 0; + + &:last-child { + padding-right: 0; + } + a { + text-decoration: none; + span.inline-svg { + svg { + width: 4rem; + height: 4rem; + } + } + } + } + + @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 diff --git a/assets/sass/layout/_banner.scss b/assets/sass/layout/_banner.scss new file mode 100644 index 0000000..65e52d1 --- /dev/null +++ b/assets/sass/layout/_banner.scss @@ -0,0 +1,177 @@ +/// +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Banner */ + + #banner { + @include vendor('align-items', 'center'); + @include vendor('background-image', 'url("../../images/banner.jpg")'); + @include vendor('display', 'flex'); + @include padding(4em, 0, (2em, 0, 0, 0)); + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + border-bottom: 0 !important; + cursor: default; + height: 60vh; + margin-bottom: -3.25em; + max-height: 32em; + min-height: 22em; + position: relative; + top: -3.25em; + + &:after { + @include vendor('transition', 'opacity #{_duration(banner)} ease'); + @include vendor('transition-delay', '0.75s'); + @include vendor('pointer-events', 'none'); + background-color: _palette(bg); + content: ''; + display: block; + height: 100%; + left: 0; + opacity: 0.85; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + } + + h1 { + font-size: 3.25em; + } + + > .inner { + @include vendor('transition', ( + 'opacity 1.5s ease', + 'transform 0.5s ease-out', + 'filter 0.5s ease', + '-webkit-filter 0.5s ease' + )); + padding: 0 !important; + position: relative; + z-index: 2; + + .image { + display: none; + } + + header { + width: auto; + + > :first-child { + width: auto; + + &:after { + max-width: 100%; + } + } + } + + .content { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + margin: 0 0 _size(element-margin) 0; + + > * { + margin-right: 1.5em; + margin-bottom: 0; + } + + > :last-child { + margin-right: 0; + } + + p { + font-size: 0.7em; + font-weight: _font(weight-bold); + letter-spacing: _font(letter-spacing-alt); + text-transform: uppercase; + } + } + } + + &.major { + height: 75vh; + min-height: 30em; + max-height: 50em; + + &.alt { + opacity: 0.75; + } + } + + &.style1 { &:after { background-color: _palette(accent1); } } + &.style2 { &:after { background-color: _palette(accent2); } } + &.style3 { &:after { background-color: _palette(accent3); } } + &.style4 { &:after { background-color: _palette(accent4); } } + &.style5 { &:after { background-color: _palette(accent5); } } + &.style6 { &:after { background-color: _palette(accent6); } } + + body.is-preload & { + &:after { + opacity: 1.0; + } + + > .inner { + @include vendor('filter', 'blur(0.125em)'); + @include vendor('transform', 'translateX(-0.5em)'); + opacity: 0; + } + } + + @include breakpoint('<=large') { + background-attachment: scroll; + } + + @include breakpoint('<=small') { + @include padding(3em, 0, (2em, 0, 0, 0)); + height: auto; + margin-bottom: -2.75em; + max-height: none; + min-height: 0; + top: -2.75em; + + h1 { + font-size: 2em; + } + + > .inner { + .content { + display: block; + + > * { + margin-right: 0; + margin-bottom: _size(element-margin); + } + } + } + + &.major { + height: auto; + min-height: 0; + max-height: none; + } + } + + @include breakpoint('<=xsmall') { + @include padding(4em, 0, (2em, 0, 0, 0)); + + > .inner { + .content { + p { + br { + display: none; + } + } + } + } + + &.major { + @include padding(6em, 0, (2em, 0, 0, 0)); + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_contact.scss b/assets/sass/layout/_contact.scss new file mode 100644 index 0000000..e9364bb --- /dev/null +++ b/assets/sass/layout/_contact.scss @@ -0,0 +1,93 @@ +/// +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Contact */ + + #contact { + border-bottom: solid 1px _palette(border); + overflow-x: hidden; + + > .inner { + @include vendor('display', 'flex'); + padding: 0 !important; + + > :nth-child(2n - 1) { + @include padding(4em, 0, (0, 3em, 0, 0)); + border-right: solid 1px _palette(border); + width: 60%; + } + + > :nth-child(2n) { + padding-left: 3em; + width: 40%; + } + + > .split { + padding: 0; + + > * { + @include padding(3em, 0, (0, 0, 0, 3em)); + position: relative; + + &:before { + border-top: solid 1px _palette(border); + content: ''; + display: block; + margin-left: -3em; + position: absolute; + top: 0; + width: calc(100vw + 3em); + } + } + + > :first-child { + &:before { + display: none; + } + } + } + } + + @include breakpoint('<=medium') { + > .inner { + display: block; + + > :nth-child(2n - 1) { + @include padding(4em, 0, (0, 0, 0, 0)); + border-right: 0; + width: 100%; + } + + > :nth-child(2n) { + padding-left: 0; + width: 100%; + } + + > .split { + > * { + @include padding(3em, 0, (0, 0, 0, 0)); + + &:before { + } + } + + > :first-child { + &:before { + display: block; + } + } + } + } + } + + @include breakpoint('<=small') { + > .inner { + > :nth-child(2n - 1) { + @include padding(3em, 0, (0, 0, 0, 0)); + } + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss new file mode 100644 index 0000000..e5ace19 --- /dev/null +++ b/assets/sass/layout/_footer.scss @@ -0,0 +1,42 @@ +/// +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Footer */ + + #footer { + .copyright { + font-size: 0.8em; + list-style: none; + padding-left: 0; + + li { + border-left: solid 1px _palette(border); + color: _palette(fg-light); + display: inline-block; + line-height: 1; + margin-left: 1em; + padding-left: 1em; + + &:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + } + } + + @include breakpoint('<=xsmall') { + .copyright { + li { + display: block; + border-left: 0; + margin-left: 0; + padding-left: 0; + line-height: inherit; + } + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss new file mode 100644 index 0000000..303bdb2 --- /dev/null +++ b/assets/sass/layout/_header.scss @@ -0,0 +1,249 @@ +/// +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Header */ + + @include keyframes('reveal-header') { + 0% { top: -4em; opacity: 0; } + 100% { top: 0; opacity: 1; } + } + + #header { + @include vendor('display', 'flex'); + background: _palette(bg-alt) url("../bg/rose2.jpg") no-repeat fixed center center; + // background-color:; + box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15); + cursor: default; + font-weight: _font(weight-bold); + height: 3.25em; + left: 0; + letter-spacing: _font(letter-spacing-alt); + line-height: 3.25em; + margin: 0; + position: fixed; + text-transform: uppercase; + top: 0; + width: 100%; + z-index: _misc(z-index-base); + + .logo { + border: 0; + display: inline-block; + font-size: 0.8em; + height: inherit; + line-height: inherit; + padding: 0 1.5em; + + strong { + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + background-color: _palette(fg-bold); + color: _palette(bg); + display: inline-block; + line-height: 1.65em; + margin-right: 0.325em; + padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em); + } + + &:hover { + strong { + background-color: _palette(highlight); + } + } + + &:active { + strong { + background-color: desaturate(darken(_palette(highlight), 15), 5); + } + } + } + + nav { + @include vendor('display', 'flex'); + @include vendor('justify-content', 'flex-end'); + @include vendor('flex-grow', '1'); + height: inherit; + line-height: inherit; + + a { + border: 0; + display: block; + font-size: 0.8em; + height: inherit; + line-height: inherit; + padding: 0 0.75em; + position: relative; + vertical-align: middle; + + &:last-child { + padding-right: 1.5em; + } + + &[href="#menu"] { + padding-right: 3.325em !important; + + &:before, &:after { + background-image: svg-url(''); + background-position: center; + background-repeat: no-repeat; + background-size: 24px 32px; + content: ''; + display: block; + height: 100%; + position: absolute; + right: 1.5em; + top: 0; + vertical-align: middle; + width: 24px; + } + + &:after { + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + background-image: svg-url(''); + opacity: 0; + z-index: 1; + } + + &:hover, &:active { + &:after { + opacity: 1; + } + } + + &:last-child { + padding-right: 3.875em !important; + + &:before, &:after { + right: 2em; + } + } + } + } + } + + &.reveal { + @include vendor('animation', 'reveal-header 0.35s ease'); + } + + &.alt { + @include vendor('transition', 'opacity #{_duration(banner)} ease'); + @include vendor('transition-delay', '0.75s'); + @include vendor('animation', 'none'); + background-color: transparent; + box-shadow: none; + position: absolute; + + &.style1 { .logo { strong { color: _palette(accent1); } } } + &.style2 { .logo { strong { color: _palette(accent2); } } } + &.style3 { .logo { strong { color: _palette(accent3); } } } + &.style4 { .logo { strong { color: _palette(accent4); } } } + &.style5 { .logo { strong { color: _palette(accent5); } } } + &.style6 { .logo { strong { color: _palette(accent6); } } } + } + + body.is-preload & { + &.alt { + opacity: 0; + } + } + + @include breakpoint('<=xlarge') { + nav { + a { + &[href="#menu"] { + padding-right: 3.75em !important; + + &:last-child { + padding-right: 4.25em !important; + } + } + } + } + } + + @include breakpoint('<=large') { + nav { + a { + &[href="#menu"] { + padding-right: 4em !important; + + &:last-child { + padding-right: 4.5em !important; + } + } + } + } + } + + @include breakpoint('<=small') { + height: 2.75em; + line-height: 2.75em; + + .logo { + padding: 0 1em; + } + + nav { + a { + padding: 0 0.5em; + + &:last-child { + padding-right: 1em; + } + + &[href="#menu"] { + padding-right: 3.25em !important; + + &:before, &:after { + right: 0.75em; + } + + &:last-child { + padding-right: 4em !important; + + &:before, &:after { + right: 1.5em; + } + } + } + } + } + } + + @include breakpoint('<=xsmall') { + .logo { + span { + display: none; + } + } + + nav { + a { + &[href="#menu"] { + overflow: hidden; + padding-right: 0 !important; + text-indent: 5em; + white-space: nowrap; + width: 5em; + + &:before, &:after { + right: 0; + width: inherit; + } + + &:last-child { + &:before, &:after { + width: 4em; + right: 0; + } + } + } + } + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss new file mode 100644 index 0000000..f1d7239 --- /dev/null +++ b/assets/sass/layout/_main.scss @@ -0,0 +1,26 @@ +/// +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Main */ + + #main { + background-color: _palette(bg-alt); + + > * { + border-top: solid 1px _palette(border); + + &:first-child { + border-top: 0; + } + + @include inner; + } + + &.alt { + background-color: transparent; + border-bottom: solid 1px _palette(border); + } + } \ No newline at end of file diff --git a/assets/sass/layout/_menu.scss b/assets/sass/layout/_menu.scss new file mode 100644 index 0000000..e53f21f --- /dev/null +++ b/assets/sass/layout/_menu.scss @@ -0,0 +1,164 @@ +/// +/// Forty by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Menu */ + + #menu { + @include vendor('transition', ( + 'transform #{_duration(menu)} ease', + 'opacity #{_duration(menu)} ease', + 'visibility #{_duration(menu)}' + )); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('justify-content', 'center'); + @include vendor('pointer-events', 'none'); + background: transparentize(_palette(bg), 0.1); + box-shadow: none; + height: 100%; + left: 0; + opacity: 0; + overflow: hidden; + padding: 3em 2em; + position: fixed; + top: 0; + visibility: hidden; + width: 100%; + z-index: _misc(z-index-base) + 2; + + .inner { + @include vendor('transition', ( + 'transform #{_duration(menu)} ease-out', + 'opacity #{_duration(menu)} ease', + 'visibility #{_duration(menu)}' + )); + @include vendor('transform', 'rotateX(20deg)'); + -webkit-overflow-scrolling: touch; + max-width: 100%; + max-height: 100vh; + opacity: 0; + overflow: auto; + text-align: center; + visibility: hidden; + width: 18em; + + > :first-child { + margin-top: _size(element-margin); + } + + > :last-child { + margin-bottom: (_size(element-margin) * 1.5); + } + } + + ul { + margin: 0 0 (_size(element-margin) * 0.5) 0; + + &.links { + list-style: none; + padding: 0; + + > li { + padding: 0; + + > a:not(.button) { + border: 0; + border-top: solid 1px _palette(border); + display: block; + font-size: 0.8em; + font-weight: _font(weight-bold); + letter-spacing: _font(letter-spacing-alt); + line-height: 4em; + text-decoration: none; + text-transform: uppercase; + } + + > .button { + display: block; + margin: 0.5em 0 0 0; + } + + &:first-child { + > a:not(.button) { + border-top: 0 !important; + } + } + } + } + } + + .close { + @include vendor('transition', 'color #{_duration(transition)} ease-in-out'); + -webkit-tap-highlight-color: rgba(0,0,0,0); + border: 0; + cursor: pointer; + display: block; + height: 4em; + line-height: 4em; + overflow: hidden; + padding-right: 1.25em; + position: absolute; + right: 0; + text-align: right; + text-indent: 8em; + top: 0; + vertical-align: middle; + white-space: nowrap; + width: 8em; + + &:before, &:after { + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + background-position: center; + background-repeat: no-repeat; + content: ''; + display: block; + height: 4em; + position: absolute; + right: 0; + top: 0; + width: 4em; + } + + &:before { + background-image: svg-url(''); + } + + &:after { + background-image: svg-url(''); + opacity: 0; + } + + &:hover, &:active { + &:after { + opacity: 1; + } + } + } + } + + body.is-ie { + #menu { + background: transparentize(_palette(bg-alt), 0.025); + } + } + + body.is-menu-visible { + #wrapper { + @include vendor('filter', 'blur(0.5em)'); + } + + #menu { + @include vendor('pointer-events', 'auto'); + opacity: 1; + visibility: visible; + + .inner { + @include vendor('transform', 'none'); + opacity: 1; + visibility: visible; + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_wrapper.scss b/assets/sass/layout/_wrapper.scss new file mode 100644 index 0000000..93d774a --- /dev/null +++ b/assets/sass/layout/_wrapper.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) +/// + +/* Wrapper */ + + #wrapper { + @include vendor('transition', ( + 'filter #{_duration(menu)} ease', + '-webkit-filter #{_duration(menu)} ease', + 'opacity 0.375s ease-out' + )); + padding-top: 3.25em; + + &.is-transitioning { + opacity: 0; + } + + > * { + @include inner; + } + + @include breakpoint('<=small') { + padding-top: 2.75em; + } + } \ No newline at end of file diff --git a/assets/sass/libs/_breakpoints.scss b/assets/sass/libs/_breakpoints.scss new file mode 100644 index 0000000..c5301d8 --- /dev/null +++ b/assets/sass/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/assets/sass/libs/_functions.scss b/assets/sass/libs/_functions.scss new file mode 100644 index 0000000..f563aab --- /dev/null +++ b/assets/sass/libs/_functions.scss @@ -0,0 +1,90 @@ +/// 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. +@function _duration($keys...) { + @return val($duration, $keys...); +} + +/// Gets a font value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _font($keys...) { + @return val($font, $keys...); +} + +/// Gets a misc value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _misc($keys...) { + @return val($misc, $keys...); +} + +/// Gets a palette value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _palette($keys...) { + @return val($palette, $keys...); +} + +/// Gets a size value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _size($keys...) { + @return val($size, $keys...); +} \ No newline at end of file diff --git a/assets/sass/libs/_html-grid.scss b/assets/sass/libs/_html-grid.scss new file mode 100644 index 0000000..7438a8c --- /dev/null +++ b/assets/sass/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/assets/sass/libs/_mixins.scss b/assets/sass/libs/_mixins.scss new file mode 100644 index 0000000..a331483 --- /dev/null +++ b/assets/sass/libs/_mixins.scss @@ -0,0 +1,78 @@ +/// 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, $category: regular, $where: before) { + + text-decoration: none; + + &:#{$where} { + + @if $content { + content: $content; + } + + -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; + + @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; + } + + } + +} + +/// Applies padding to an element, taking the current element-margin value into account. +/// @param {mixed} $tb Top/bottom padding. +/// @param {mixed} $lr Left/right padding. +/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) +/// @param {bool} $important If true, adds !important. +@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { + + @if $important { + $important: '!important'; + } + + $x: 0.1em; + + @if unit(_size(element-margin)) == 'rem' { + $x: 0.1rem; + } + + padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; + +} + +/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). +/// @param {string} $svg SVG data URL. +/// @return {string} Encoded SVG data URL. +@function svg-url($svg) { + + $svg: str-replace($svg, '"', '\''); + $svg: str-replace($svg, '%', '%25'); + $svg: str-replace($svg, '<', '%3C'); + $svg: str-replace($svg, '>', '%3E'); + $svg: str-replace($svg, '&', '%26'); + $svg: str-replace($svg, '#', '%23'); + $svg: str-replace($svg, '{', '%7B'); + $svg: str-replace($svg, '}', '%7D'); + $svg: str-replace($svg, ';', '%3B'); + + @return url("data:image/svg+xml;charset=utf8,#{$svg}"); + +} \ No newline at end of file diff --git a/assets/sass/libs/_my-mixins.scss b/assets/sass/libs/_my-mixins.scss new file mode 100644 index 0000000..5e078e4 --- /dev/null +++ b/assets/sass/libs/_my-mixins.scss @@ -0,0 +1,70 @@ +/// hide-visually mixin from Bourbon < https://bourbon.io > +/// +/// Hides an element visually while still allowing the content to be accessible +/// to assistive technology, e.g. screen readers. Passing `unhide` will reverse +/// the affects of the hiding, which is handy for showing the element on focus, +/// for example. +/// +/// @link https://goo.gl/Vf1TGn +/// +/// @argument {string} $toggle [hide] +/// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`. +/// +/// @example scss +/// .element { +/// @include hide-visually; +/// +/// &:active, +/// &:focus { +/// @include hide-visually("unhide"); +/// } +/// } +/// +/// // CSS Output +/// .element { +/// border: 0; +/// clip: rect(1px, 1px, 1px, 1px); +/// clip-path: inset(100%); +/// height: 1px; +/// overflow: hidden; +/// padding: 0; +/// position: absolute; +/// width: 1px; +/// } +/// +/// .hide-visually:active, +/// .hide-visually:focus { +/// clip: auto; +/// clip-path: none; +/// height: auto; +/// overflow: visible; +/// position: static; +/// width: auto; +/// } +/// +/// @since 5.0.0 + +@mixin hide-visually($toggle: "hide") { + @if not index("hide" "unhide", $toggle) { + @error "`#{$toggle}` is not a valid value for the `$toggle` argument in " + + "the `hide-visually` mixin. Must be either `hide` or `unhide`."; + } @else if $toggle == "hide" { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(100%); + height: 1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } @else if $toggle == "unhide" { + clip: auto; + clip-path: none; + height: auto; + overflow: visible; + position: static; + white-space: inherit; + width: auto; + } +} diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss new file mode 100644 index 0000000..da67b83 --- /dev/null +++ b/assets/sass/libs/_vars.scss @@ -0,0 +1,47 @@ +// Misc. + $misc: ( + z-index-base: 10000 + ); + +// Duration. + $duration: ( + menu: 0.35s, + transition: 0.2s, + banner: 2.5s + ); + +// Size. + $size: ( + border-radius: 4px, + element-height: 2.75em, + element-margin: 2em, + inner: 65em + ); + +// Font. + $font: ( + family: ('Montserrat', Helvetica, sans-serif), + family-fixed: ('Red Hat Mono', monospace), + weight: 300, + weight-bold: 600, + letter-spacing: 0.025em, + letter-spacing-alt: 0.25em + ); + +// Palette. + $palette: ( + bg: #D8D9CF, + bg-alt: #F0EEED, + fg: #393E46, + fg-bold: #222831, + fg-light: rgba(216,217,207,0.2), + border: rgba(57,62,70,0.1), + border-bg: rgba(34,40,49,0.035), + highlight: #FD7014, + accent1: #FF8B13, + accent2: #CF4DCE, + accent3: #F273E6, + accent4: #e7b788, + accent5: #8ea9e8, + accent6: #609EA2 + ); \ No newline at end of file diff --git a/assets/sass/libs/_vendor.scss b/assets/sass/libs/_vendor.scss new file mode 100644 index 0000000..6599a3f --- /dev/null +++ b/assets/sass/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/assets/sass/main.scss b/assets/sass/main.scss index 19cf9a2..7567f9a 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,129 +1,73 @@ -// various imports for our styling - -// BOURBON -@import "bourbon/bourbon"; - +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/my-mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; +@import 'libs/html-grid'; // MY COLOR DEFINITIONS @import "colors"; - // GOOGLE FONTS @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,400;1,600&family=Red+Hat+Mono&display=swap'); -html { - margin: 0; - padding: 0; - font-family: 'Montserrat', sans-serif; - color: $dark-grey; - a { - color: $dark-accent; - text-decoration: none; - &:visited { - color: $light-accent; - } - &:hover { - color: $dark-orange; - } - } +// Breakpoints. - body { - background-color: $base-bg; - margin: 0; - padding: 0; + @include breakpoints(( + xlarge: (1281px, 1680px ), + large: (981px, 1280px ), + medium: (737px, 980px ), + small: (481px, 736px ), + xsmall: (361px, 480px ), + xxsmall: (null, 360px ) + )); - div#page { - header#masthead, - footer#colophon { - color: $base-bg; - background-color: $dark-grey; - margin: 0; - padding: 1em; - } - header#masthead { - h1.site-title { - font-size: 5em; - font-weight: 200; - margin: 0; - padding: 0; - a { - color: $dark-orange; - } - } - } - footer#colophon { - div#social-menu { - ul.social-links { - margin: 0; - padding: 0; - li { - display: inline-block; - } - } - } - } - div#content { - line-height: 1.5; - font-weight: 400; - padding: 1em 3em; - div#secondary { - div#home-social-links { - ul.social-links-list { - list-style: none; - li { - display: inline-block; - float: none; - text-align: center; - a { - color: $dark-orange; - &:hover { - color: shade($dark-orange, 40%); - } - } - } - } - } - } + +// Mixins. + + @mixin inner { + > .inner { + @include padding(4em, 0); + margin: 0 auto; + max-width: _size(inner); + width: calc(100% - 6em); + + @include breakpoint('<=small') { + @include padding(3em, 0); + width: calc(100% - 3em); } } } -} -ul { - list-style: none; -} -.screen-reader-text, -.hidden { - @include hide-visually; -} -pre { - margin: 1em; - padding: 0.7em; - max-width: 90vw; - background-color: $light-grey; - color: $light-orange; - font-size: 1.4em; - font-family: 'Red Hat Mono', monospace; -} -div#backtotop { - color: $light-orange !important; - & a { - position: fixed; - right: 2em; - bottom: 2em; - border-radius: 100%; - background-color: $dark-orange; - padding: 0.5rem; - border: none; - cursor: pointer; - display: block; - width: 3em; - height: 3em; - color: $dark-grey; - } -} -.inline-svg { - display: inline-block; - height: 3em; - width: 3em; - margin-right: 1em; - top: 0.15em; - position: relative; -} + +// 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/pagination'; + @import 'components/table'; + @import 'components/button'; + @import 'components/tiles'; + @import 'components/contact-method'; + @import 'components/spotlights'; + +// Layout. + + @import 'layout/header'; + @import 'layout/banner'; + @import 'layout/main'; + @import 'layout/contact'; + @import 'layout/footer'; + @import 'layout/wrapper'; + @import 'layout/menu'; diff --git a/assets/sass/main.scss.old b/assets/sass/main.scss.old new file mode 100644 index 0000000..19cf9a2 --- /dev/null +++ b/assets/sass/main.scss.old @@ -0,0 +1,129 @@ +// various imports for our styling + +// BOURBON +@import "bourbon/bourbon"; + +// MY COLOR DEFINITIONS +@import "colors"; + +// GOOGLE FONTS +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,400;1,600&family=Red+Hat+Mono&display=swap'); + +html { + margin: 0; + padding: 0; + font-family: 'Montserrat', sans-serif; + color: $dark-grey; + a { + color: $dark-accent; + text-decoration: none; + &:visited { + color: $light-accent; + } + &:hover { + color: $dark-orange; + } + } + + body { + background-color: $base-bg; + margin: 0; + padding: 0; + + div#page { + header#masthead, + footer#colophon { + color: $base-bg; + background-color: $dark-grey; + margin: 0; + padding: 1em; + } + header#masthead { + h1.site-title { + font-size: 5em; + font-weight: 200; + margin: 0; + padding: 0; + a { + color: $dark-orange; + } + } + } + footer#colophon { + div#social-menu { + ul.social-links { + margin: 0; + padding: 0; + li { + display: inline-block; + } + } + } + } + div#content { + line-height: 1.5; + font-weight: 400; + padding: 1em 3em; + div#secondary { + div#home-social-links { + ul.social-links-list { + list-style: none; + li { + display: inline-block; + float: none; + text-align: center; + a { + color: $dark-orange; + &:hover { + color: shade($dark-orange, 40%); + } + } + } + } + } + } + } + } + } +} +ul { + list-style: none; +} +.screen-reader-text, +.hidden { + @include hide-visually; +} +pre { + margin: 1em; + padding: 0.7em; + max-width: 90vw; + background-color: $light-grey; + color: $light-orange; + font-size: 1.4em; + font-family: 'Red Hat Mono', monospace; +} +div#backtotop { + color: $light-orange !important; + & a { + position: fixed; + right: 2em; + bottom: 2em; + border-radius: 100%; + background-color: $dark-orange; + padding: 0.5rem; + border: none; + cursor: pointer; + display: block; + width: 3em; + height: 3em; + color: $dark-grey; + } +} +.inline-svg { + display: inline-block; + height: 3em; + width: 3em; + margin-right: 1em; + top: 0.15em; + position: relative; +} diff --git a/assets/sass/noscript.scss b/assets/sass/noscript.scss new file mode 100644 index 0000000..fddbf7e --- /dev/null +++ b/assets/sass/noscript.scss @@ -0,0 +1,28 @@ +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; +@import 'libs/html-grid'; + +/* + Forty by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Banner */ + + #banner { + body.is-preload & { + &:after { + opacity: 0.85; + } + + > .inner { + @include vendor('filter', 'none'); + @include vendor('transform', 'none'); + opacity: 1; + } + } + } \ No newline at end of file diff --git a/layouts/home-baseof.html b/layouts/home-baseof.html index 6889e6f..62fc743 100644 --- a/layouts/home-baseof.html +++ b/layouts/home-baseof.html @@ -1,21 +1,33 @@ {{- partial "head.html" . -}} - -
- + + +
{{- partial "header.html" . -}} -
-
-
- {{- block "home-main" . }}{{- end }} -
+ +
+
+ {{- block "home-main" . }}{{- end }} +
+
{{ partial "home-social-links.html" . }} -
+
{{- partial "footer.html" . -}}
+ {{- partial "footer-addition.html" . -}} diff --git a/layouts/home.html b/layouts/home.html index 3ea6fd5..48fb5fd 100644 --- a/layouts/home.html +++ b/layouts/home.html @@ -1,7 +1,7 @@ {{ define "home-main" }} -
-
- {{ .Content }} +
+
+

{{ .Content }}

{{ end }} diff --git a/layouts/page/list-baseof.html b/layouts/page/list-baseof.html index c4b423d..f3beae8 100644 --- a/layouts/page/list-baseof.html +++ b/layouts/page/list-baseof.html @@ -1,18 +1,28 @@ {{- partial "head.html" . -}} - -
- + + +
{{- partial "header.html" . -}} -
-
-
- {{- block "page-main" . }}{{- end }} -
+ +
+ {{- block "list-main" . }}{{- end }}
{{- partial "footer.html" . -}}
+ {{- partial "footer-addition.html" . -}} diff --git a/layouts/page/list.html b/layouts/page/list.html index e475272..23d4372 100644 --- a/layouts/page/list.html +++ b/layouts/page/list.html @@ -1,7 +1,7 @@ -{{ define "page-main" }} -
-
- {{ .Content }} +{{ define "list-main" }} +
+
+

{{ .Content }}

{{ end }} diff --git a/layouts/page/single-baseof.html b/layouts/page/single-baseof.html index c4b423d..8fbe887 100644 --- a/layouts/page/single-baseof.html +++ b/layouts/page/single-baseof.html @@ -1,18 +1,15 @@ {{- partial "head.html" . -}} - -
- + + +
{{- partial "header.html" . -}} -
-
-
- {{- block "page-main" . }}{{- end }} -
-
+
+ {{- block "page-main" . }}{{- end }}
{{- partial "footer.html" . -}}
+ {{- partial "footer-addition.html" . -}} diff --git a/layouts/page/single.html b/layouts/page/single.html index e475272..7873618 100644 --- a/layouts/page/single.html +++ b/layouts/page/single.html @@ -1,7 +1,7 @@ {{ define "page-main" }} -
-
- {{ .Content }} +
+
+

{{ .Content }}

{{ end }} diff --git a/layouts/partials/footer-addition.html b/layouts/partials/footer-addition.html index 5f8396c..3bba698 100644 --- a/layouts/partials/footer-addition.html +++ b/layouts/partials/footer-addition.html @@ -1,5 +1,15 @@ + + + + + + + + + + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 5738379..0be512e 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -8,6 +8,5 @@
  • Privacy Policy
    • - {{- partial "footer-addition.html" . -}} {{- partial "funcs/social-menu.html" . -}} diff --git a/layouts/partials/funcs/social-menu.html b/layouts/partials/funcs/social-menu.html index 16b1a4e..b59ad34 100644 --- a/layouts/partials/funcs/social-menu.html +++ b/layouts/partials/funcs/social-menu.html @@ -1,6 +1,6 @@ {{ with .Site.Social }}
    -