From 3c02dc1c0cd480fc11647ec0f7900d4034a00cc4 Mon Sep 17 00:00:00 2001 From: Jason McCormick Date: Thu, 9 Oct 2025 12:49:05 -0400 Subject: initial add --- assets/sass/base/_page.scss | 42 ++++ assets/sass/base/_reset.scss | 76 +++++++ assets/sass/base/_typography.scss | 183 +++++++++++++++++ assets/sass/components/_actions.scss | 101 ++++++++++ assets/sass/components/_box.scss | 26 +++ assets/sass/components/_button.scss | 84 ++++++++ assets/sass/components/_form.scss | 252 +++++++++++++++++++++++ assets/sass/components/_icon.scss | 33 +++ assets/sass/components/_icons.scss | 40 ++++ assets/sass/components/_image.scss | 87 ++++++++ assets/sass/components/_list.scss | 56 ++++++ assets/sass/components/_table.scss | 81 ++++++++ assets/sass/layout/_bg.scss | 68 +++++++ assets/sass/layout/_footer.scss | 37 ++++ assets/sass/layout/_header.scss | 261 ++++++++++++++++++++++++ assets/sass/layout/_main.scss | 102 ++++++++++ assets/sass/layout/_wrapper.scss | 36 ++++ assets/sass/libs/_breakpoints.scss | 223 +++++++++++++++++++++ assets/sass/libs/_functions.scss | 90 +++++++++ assets/sass/libs/_mixins.scss | 78 ++++++++ assets/sass/libs/_vars.scss | 43 ++++ assets/sass/libs/_vendor.scss | 376 +++++++++++++++++++++++++++++++++++ assets/sass/main.scss | 50 +++++ assets/sass/noscript.scss | 50 +++++ 24 files changed, 2475 insertions(+) create mode 100644 assets/sass/base/_page.scss create mode 100644 assets/sass/base/_reset.scss create mode 100644 assets/sass/base/_typography.scss 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/_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/_table.scss create mode 100644 assets/sass/layout/_bg.scss create mode 100644 assets/sass/layout/_footer.scss create mode 100644 assets/sass/layout/_header.scss create mode 100644 assets/sass/layout/_main.scss create mode 100644 assets/sass/layout/_wrapper.scss create mode 100644 assets/sass/libs/_breakpoints.scss create mode 100644 assets/sass/libs/_functions.scss create mode 100644 assets/sass/libs/_mixins.scss create mode 100644 assets/sass/libs/_vars.scss create mode 100644 assets/sass/libs/_vendor.scss create mode 100644 assets/sass/main.scss create mode 100644 assets/sass/noscript.scss (limited to 'assets/sass') diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss new file mode 100644 index 0000000..2c33426 --- /dev/null +++ b/assets/sass/base/_page.scss @@ -0,0 +1,42 @@ +/// +/// Dimension 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; + } + + // 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..ddcf73e --- /dev/null +++ b/assets/sass/base/_reset.scss @@ -0,0 +1,76 @@ +/// +/// Dimension 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..bc9b7cc --- /dev/null +++ b/assets/sass/base/_typography.scss @@ -0,0 +1,183 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Type */ + + html { + font-size: 16pt; + + @include breakpoint('<=xlarge') { + font-size: 12pt; + } + + @include breakpoint('<=small') { + font-size: 11pt; + } + + @include breakpoint('<=xxsmall') { + font-size: 10pt; + } + } + + body, input, select, textarea { + color: _palette(fg); + font-family: _font(family); + font-weight: _font(weight); + font-size: 1rem; + line-height: 1.65; + } + + a { + @include vendor('transition', ( + 'color #{_duration(transition)} ease-in-out', + 'background-color #{_duration(transition)} ease-in-out', + 'border-bottom-color #{_duration(transition)} ease-in-out' + )); + border-bottom: dotted 1px _palette(fg-light); + text-decoration: none; + color: inherit; + + &:hover { + border-bottom-color: transparent; + } + } + + 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.5; + margin: 0 0 (_size(element-margin) * 0.5) 0; + text-transform: uppercase; + letter-spacing: _font(letter-spacing); + + a { + color: inherit; + text-decoration: none; + } + + &.major { + border-bottom: solid _size(border-width) _palette(border); + width: -moz-max-content; + width: -webkit-max-content; + width: -ms-max-content; + width: max-content; + padding-bottom: 0.5rem; + margin: 0 0 (_size(element-margin) * 1) 0; + } + } + + h1 { + font-size: 2.25rem; + line-height: 1.3; + letter-spacing: _font(letter-spacing-heading); + } + + h2 { + font-size: 1.5rem; + line-height: 1.4; + letter-spacing: _font(letter-spacing-heading); + } + + h3 { + font-size: 1rem; + } + + h4 { + font-size: 0.8rem; + } + + h5 { + font-size: 0.7rem; + } + + h6 { + font-size: 0.6rem; + } + + @include breakpoint('<=small') { + h1 { + font-size: 1.75rem; + line-height: 1.4; + } + + h2 { + font-size: 1.25em; + line-height: 1.5; + } + } + + sub { + font-size: 0.8rem; + position: relative; + top: 0.5rem; + } + + sup { + font-size: 0.8rem; + position: relative; + top: -0.5rem; + } + + blockquote { + border-left: solid (_size(border-width) * 4) _palette(border); + font-style: italic; + margin: 0 0 _size(element-margin) 0; + padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); + } + + code { + background: _palette(border-bg); + border-radius: _size(border-radius); + font-family: _font(family-fixed); + font-size: 0.9rem; + margin: 0 0.25rem; + padding: 0.25rem 0.65rem; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: _font(family-fixed); + font-size: 0.9rem; + margin: 0 0 _size(element-margin) 0; + + code { + display: block; + line-height: 1.75; + padding: 1rem 1.5rem; + overflow-x: auto; + } + } + + hr { + border: 0; + border-bottom: solid _size(border-width) _palette(border); + margin: (_size(element-margin) * 1.375) 0; + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } \ No newline at end of file diff --git a/assets/sass/components/_actions.scss b/assets/sass/components/_actions.scss new file mode 100644 index 0000000..c3605a0 --- /dev/null +++ b/assets/sass/components/_actions.scss @@ -0,0 +1,101 @@ +/// +/// Dimension 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%; + } + } + + @include breakpoint('<=xsmall') { + &:not(.fixed) { + @include vendor('flex-direction', 'column'); + margin-left: 0; + width: 100% !important; + + li { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + padding: (_size(element-margin) * 0.5) 0 0 0; + text-align: center; + width: 100%; + + > * { + width: 100%; + } + + &:first-child { + padding-top: 0; + } + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + width: 100%; + + &.icon { + &:before { + margin-left: -0.5em; + } + } + } + } + } + } + } \ 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..ec5ab0d --- /dev/null +++ b/assets/sass/components/_box.scss @@ -0,0 +1,26 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Box */ + + .box { + border-radius: _size(border-radius); + border: solid _size(border-width) _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..61fe069 --- /dev/null +++ b/assets/sass/components/_button.scss @@ -0,0 +1,84 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + @include vendor('appearance', 'none'); + @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out'); + background-color: transparent; + border-radius: _size(border-radius); + border: 0; + box-shadow: inset 0 0 0 _size(border-width) _palette(border); + color: _palette(fg-bold) !important; + cursor: pointer; + display: inline-block; + font-size: 0.8rem; + font-weight: _font(weight); + height: _size(element-height); + letter-spacing: _font(letter-spacing); + line-height: _size(element-height); + outline: 0; + padding: 0 1.25rem 0 (1.25rem + (_font(letter-spacing) * 0.5)); + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + + &:hover { + background-color: _palette(border-bg); + } + + &:active { + background-color: _palette(border-bg-alt); + } + + &.icon { + &:before { + margin-right: 0.5em; + } + } + + &.fit { + width: 100%; + } + + &.small { + font-size: 0.6rem; + height: (_size(element-height) * 0.75); + line-height: (_size(element-height) * 0.75); + } + + &.primary { + background-color: _palette(fg-bold); + color: _palette(bg) !important; + font-weight: _font(weight-bold); + + &:hover { + } + + &:active { + } + } + + &.disabled, + &:disabled { + @include vendor('pointer-events', 'none'); + cursor: default; + opacity: 0.25; + } + } + + input[type="submit"], + input[type="reset"], + input[type="button"], + button { + line-height: calc(#{_size(element-height)} - 2px); + } \ 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..fdae12e --- /dev/null +++ b/assets/sass/components/_form.scss @@ -0,0 +1,252 @@ +/// +/// Dimension 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.8rem; + font-weight: _font(weight); + letter-spacing: _font(letter-spacing); + line-height: 1.5; + margin: 0 0 (_size(element-margin) * 0.5) 0; + text-transform: uppercase; + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + select, + textarea { + @include vendor('appearance', 'none'); + @include vendor('transition', ( + 'border-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out', + 'background-color #{_duration(transition)} ease-in-out' + )); + background-color: transparent; + border-radius: _size(border-radius); + border: solid _size(border-width) _palette(border); + color: inherit; + display: block; + outline: 0; + padding: 0 1rem; + text-decoration: none; + width: 100%; + + &:invalid { + box-shadow: none; + } + + &:focus { + background: _palette(border-bg); + border-color: _palette(fg-bold); + box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); + } + } + + 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); + background: _palette(bg); + } + + &:focus { + &::-ms-value { + background-color: transparent; + } + } + + &::-ms-expand { + display: none; + } + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: _size(element-height); + } + + textarea { + padding: 0.75rem 1rem; + } + + input[type="checkbox"], + input[type="radio"], { + @include vendor('appearance', 'none'); + display: block; + float: left; + margin-right: -2rem; + opacity: 0; + width: 1rem; + z-index: -1; + + & + label { + @include icon(false, solid); + @include vendor('user-select', 'none'); + color: _palette(fg); + cursor: pointer; + display: inline-block; + font-size: 0.8rem; + font-weight: _font(weight); + margin: 0 0 (_size(element-margin) * 0.25) 0; + padding-left: (_size(element-height) * 0.6) + 1rem; + padding-right: 0.75rem; + position: relative; + + &:before { + @include vendor('transition', ( + 'border-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out', + 'background-color #{_duration(transition)} ease-in-out' + )); + border-radius: _size(border-radius); + border: solid _size(border-width) _palette(border); + content: ''; + display: inline-block; + height: (_size(element-height) * 0.6); + left: 0; + line-height: (_size(element-height) * 0.6); + //line-height: calc(#{_size(element-height) * 0.6} + 0em); + position: absolute; + text-align: center; + top: -0.15rem; + width: (_size(element-height) * 0.6); + } + } + + &:checked + label { + &:before { + background: _palette(fg-bold) !important; + border-color: _palette(fg-bold) !important; + color: _palette(bg); + content: '\f00c'; + } + } + + &:focus + label { + &:before { + background: _palette(border-bg); + border-color: _palette(fg-bold); + box-shadow: 0 0 0 _size(border-width) _palette(fg-bold); + } + } + } + + input[type="checkbox"] { + & + label { + &:before { + border-radius: _size(border-radius); + } + } + } + + input[type="radio"] { + & + label { + &:before { + border-radius: 100%; + } + } + } + + ::-webkit-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + ::-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-ms-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + .formerize-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..4726114 --- /dev/null +++ b/assets/sass/components/_icon.scss @@ -0,0 +1,33 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Icon */ + + .icon { + @include icon; + border-bottom: none; + position: relative; + + > .label { + display: none; + } + + &:before { + line-height: inherit; + } + + &.solid { + &:before { + font-weight: 900; + } + } + + &.brands { + &:before { + font-family: 'Font Awesome 5 Brands'; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_icons.scss b/assets/sass/components/_icons.scss new file mode 100644 index 0000000..f096a32 --- /dev/null +++ b/assets/sass/components/_icons.scss @@ -0,0 +1,40 @@ +/// +/// Dimension 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 0.75em 0 0; + + &:last-child { + padding-right: 0; + } + + a { + border-radius: 100%; + box-shadow: inset 0 0 0 _size(border-width) _palette(border); + display: inline-block; + height: 2.25rem; + line-height: 2.25rem; + text-align: center; + width: 2.25rem; + + &:hover { + background-color: _palette(border-bg); + } + + &:active { + background-color: _palette(border-bg-alt); + } + } + } + } \ 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..ed94ed7 --- /dev/null +++ b/assets/sass/components/_image.scss @@ -0,0 +1,87 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Image */ + + .image { + border-radius: _size(border-radius); + border: 0; + display: inline-block; + position: relative; + + &:before { + @include vendor('pointer-events', 'none'); + background-image: url('../../images/overlay.png'); + background-color: _palette(bg-overlay); + border-radius: _size(border-radius); + content: ''; + display: block; + height: 100%; + left: 0; + opacity: 0.5; + position: absolute; + top: 0; + width: 100%; + } + + img { + border-radius: _size(border-radius); + display: block; + } + + &.left, + &.right { + max-width: 40%; + + img { + width: 100%; + } + } + + &.left { + float: left; + padding: 0 1.5em 1em 0; + top: 0.25em; + } + + &.right { + float: right; + padding: 0 0 1em 1.5em; + top: 0.25em; + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + + &.main { + display: block; + margin: (_size(element-margin) * 1.25) 0; + width: 100%; + + img { + width: 100%; + } + } + + @include breakpoint('<=small') { + &.main { + margin: (_size(element-margin) * 1) 0; + } + } + + @include breakpoint('<=xsmall') { + &.main { + 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..1b384c2 --- /dev/null +++ b/assets/sass/components/_list.scss @@ -0,0 +1,56 @@ +/// +/// Dimension 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 _size(border-width) _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/_table.scss b/assets/sass/components/_table.scss new file mode 100644 index 0000000..0c51148 --- /dev/null +++ b/assets/sass/components/_table.scss @@ -0,0 +1,81 @@ +/// +/// Dimension 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 _size(border-width) _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 (_size(border-width) * 2) _palette(border); + } + + tfoot { + border-top: solid (_size(border-width) * 2) _palette(border); + } + + &.alt { + border-collapse: separate; + + tbody { + tr { + td { + border: solid _size(border-width) _palette(border); + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: _size(border-width); + } + } + + &:first-child { + td { + border-top-width: _size(border-width); + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_bg.scss b/assets/sass/layout/_bg.scss new file mode 100644 index 0000000..3bbbceb --- /dev/null +++ b/assets/sass/layout/_bg.scss @@ -0,0 +1,68 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* BG */ + + #bg { + @include vendor('transform', 'scale(1.0)'); + -webkit-backface-visibility: hidden; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + z-index: 1; + + &:before, &:after { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + &:before { + @include vendor('transition', 'background-color #{_duration(bg)} ease-in-out'); + @include vendor('transition-delay', '#{_duration(intro)}'); + background-image: linear-gradient(to top, #{_palette(bg-overlay)}, #{_palette(bg-overlay)}), + url('../../images/overlay.png'); + background-size: auto, + 256px 256px; + background-position: center, + center; + background-repeat: no-repeat, + repeat; + z-index: 2; + } + + &:after { + @include vendor('transform', 'scale(1.125)'); + @include vendor('transition', ( + 'transform #{_duration(article)} ease-in-out', + 'filter #{_duration(article)} ease-in-out' + )); + background-image: url('../../images/bg.webp'); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + z-index: 1; + } + + body.is-article-visible & { + &:after { + @include vendor('transform', 'scale(1.0825)'); + @include vendor('filter', 'blur(0.2rem)'); + } + } + + body.is-preload & { + &:before { + background-color: _palette(bg-alt); + } + } + } \ 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..b87cc7a --- /dev/null +++ b/assets/sass/layout/_footer.scss @@ -0,0 +1,37 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Footer */ + + #footer { + @include vendor('transition', ( + 'transform #{_duration(article)} ease-in-out', + 'filter #{_duration(article)} ease-in-out', + 'opacity #{_duration(article)} ease-in-out', + )); + width: 100%; + max-width: 100%; + margin-top: 2rem; + text-align: center; + + .copyright { + letter-spacing: _font(letter-spacing); + font-size: 0.6rem; + opacity: 0.75; + margin-bottom: 0; + text-transform: uppercase; + } + + body.is-article-visible & { + @include vendor('transform', 'scale(0.95)'); + @include vendor('filter', 'blur(0.1rem)'); + opacity: 0; + } + + body.is-preload & { + opacity: 0; + } + } \ 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..52b3ce5 --- /dev/null +++ b/assets/sass/layout/_header.scss @@ -0,0 +1,261 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Header */ + + #header { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('align-items', 'center'); + @include vendor('transition', ( + 'transform #{_duration(article)} ease-in-out', + 'filter #{_duration(article)} ease-in-out', + 'opacity #{_duration(article)} ease-in-out', + )); + background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); + background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); + background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); + background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%); + max-width: 100%; + text-align: center; + + > * { + @include vendor('transition', 'opacity #{_duration(article)} ease-in-out'); + position: relative; + margin-top: 3.5rem; + + &:before { + content: ''; + display: block; + position: absolute; + top: calc(-3.5rem - 1px); + left: calc(50% - #{_size(border-width) * 1}); + width: _size(border-width); + height: calc(3.5rem + 1px); + background: _palette(border); + } + } + + > :first-child { + margin-top: 0; + + &:before { + display: none; + } + } + + .logo { + width: 5.5rem; + height: 5.5rem; + line-height: 5.5rem; + border: solid _size(border-width) _palette(border); + border-radius: 100%; + + .icon { + &:before { + font-size: 2rem; + } + } + } + + .content { + border-style: solid; + border-color: _palette(border); + border-top-width: _size(border-width); + border-bottom-width: _size(border-width); + max-width: 100%; + + .inner { + @include vendor('transition', ( + 'max-height #{_duration(intro)} ease', + 'padding #{_duration(intro)} ease', + 'opacity #{_duration(article)} ease-in-out' + )); + @include vendor('transition-delay', '0.25s'); + padding: 3rem 2rem; + max-height: 40rem; + overflow: hidden; + + > :last-child { + margin-bottom: 0; + } + } + + p { + text-transform: uppercase; + letter-spacing: _font(letter-spacing); + font-size: 0.8rem; + line-height: 2; + } + } + + nav { + ul { + @include vendor('display', 'flex'); + margin-bottom: 0; + list-style: none; + padding-left: 0; + border: solid _size(border-width) _palette(border); + border-radius: _size(border-radius); + + li { + padding-left: 0; + border-left: solid _size(border-width) _palette(border); + + &:first-child { + border-left: 0; + } + + a { + display: block; + min-width: 7.5rem; + height: 2.75rem; + line-height: 2.75rem; + padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing)); + text-transform: uppercase; + letter-spacing: _font(letter-spacing); + font-size: 0.8rem; + border-bottom: 0; + + &:hover { + background-color: _palette(border-bg); + } + + &:active { + background-color: _palette(border-bg-alt); + } + } + } + } + + &.use-middle { + &:after { + content: ''; + display: block; + position: absolute; + top: 0; + left: calc(50% - #{_size(border-width) * 1}); + width: _size(border-width); + height: 100%; + background: _palette(border); + } + + ul { + li { + &.is-middle { + border-left: 0; + } + } + } + } + } + + body.is-article-visible & { + @include vendor('transform', 'scale(0.95)'); + @include vendor('filter', 'blur(0.1rem)'); + opacity: 0; + } + + body.is-preload & { + > * { + opacity: 0; + } + + @include vendor('filter', 'blur(0.125rem)'); + + .content { + .inner { + max-height: 0; + padding-top: 0; + padding-bottom: 0; + opacity: 0; + } + } + } + + @include breakpoint('<=medium') { + .content { + p { + br { + display: none; + } + } + } + } + + @include breakpoint('<=small') { + > * { + margin-top: 2rem; + + &:before { + top: calc(-2rem - 1px); + height: calc(2rem + 1px); + } + } + + .logo { + width: 4.75rem; + height: 4.75rem; + line-height: 4.75rem; + + .icon { + &:before { + font-size: 1.75rem; + } + } + } + + .content { + .inner { + padding: 2.5rem 1rem; + } + + p { + line-height: 1.875; + } + } + } + + @include breakpoint('<=xsmall') { + padding: 1.5rem 0; + + .content { + .inner { + padding: 2.5rem 0; + } + } + + nav { + ul { + @include vendor('flex-direction', 'column'); + min-width: 10rem; + max-width: 100%; + + li { + border-left: 0; + border-top: solid _size(border-width) _palette(border); + + &:first-child { + border-top: 0; + } + + a { + height: 3rem; + line-height: 3rem; + min-width: 0; + width: 100%; + } + } + } + + &.use-middle { + &:after { + display: none; + } + } + } + } + } \ 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..0588446 --- /dev/null +++ b/assets/sass/layout/_main.scss @@ -0,0 +1,102 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Main */ + + #main { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'center'); + @include vendor('flex-direction', 'column'); + position: relative; + max-width: 100%; + z-index: 3; + + article { + @include vendor('transform', 'translateY(0.25rem)'); + @include vendor('transition', ( + 'opacity #{_duration(article)} ease-in-out', + 'transform #{_duration(article)} ease-in-out' + )); + @include padding(2.5rem, 2.5rem, (2rem, 0, 1rem, 0)); + position: relative; + width: 40rem; + max-width: 100%; + background-color: transparentize(_palette(bg), 0.15); + border-radius: _size(border-radius); + opacity: 0; + + &.active { + @include vendor('transform', 'translateY(0)'); + opacity: 1; + } + + .close { + display: block; + position: absolute; + top: 0; + right: 0; + width: 4rem; + height: 4rem; + cursor: pointer; + text-indent: 4rem; + overflow: hidden; + white-space: nowrap; + + &:before { + @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); + content: ''; + display: block; + position: absolute; + top: 0.75rem; + left: 0.75rem; + width: 2.5rem; + height: 2.5rem; + border-radius: 100%; + background-position: center; + background-image: svg-url(''); + background-size: 20px 20px; + background-repeat: no-repeat; + } + + &:hover { + &:before { + background-color: _palette(border-bg); + } + } + + &:active { + &:before { + background-color: _palette(border-bg-alt); + } + } + } + } + + @include breakpoint('<=small') { + article { + @include padding(2rem, 2rem, (1.5rem, 0, 0.5rem, 0)); + + .close { + &:before { + top: 0.875rem; + left: 0.875rem; + width: 2.25rem; + height: 2.25rem; + background-size: 14px 14px; + } + } + } + } + + @include breakpoint('<=xsmall') { + article { + @include padding(2rem, 1.5rem, (1rem, 0, 0.5rem, 0)); + } + } + } \ 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..9a8c9ca --- /dev/null +++ b/assets/sass/layout/_wrapper.scss @@ -0,0 +1,36 @@ +/// +/// Dimension by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Wrapper */ + + #wrapper { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'space-between'); + position: relative; + min-height: 100vh; + width: 100%; + padding: 4rem 2rem; + z-index: 3; + + &:before { + content: ''; + display: block; + } + + @include breakpoint('<=xlarge') { + padding: 3rem 2rem; + } + + @include breakpoint('<=small') { + padding: 2rem 1rem; + } + + @include breakpoint('<=xsmall') { + padding: 1rem; + } + } \ 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/_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/_vars.scss b/assets/sass/libs/_vars.scss new file mode 100644 index 0000000..3be728c --- /dev/null +++ b/assets/sass/libs/_vars.scss @@ -0,0 +1,43 @@ +// Misc. + $misc: ( + z-index-base: 10000 + ); + +// Duration. + $duration: ( + transition: 0.2s, + bg: 2.5s, + intro: 0.75s, + article: 0.325s + ); + +// Size. + $size: ( + border-radius: 4px, + border-width: 1px, + element-height: 2.75rem, + element-margin: 2rem + ); + +// Font. + $font: ( + family: ('Source Sans Pro', sans-serif), + family-fixed: ('Courier New', monospace), + weight: 300, + weight-bold: 600, + letter-spacing: 0.2rem, + letter-spacing-heading: 0.5rem + ); + +// Palette. + $palette: ( + bg: #1b1f22, + bg-alt: #000000, + bg-overlay: rgba(19,21,25,0.5), + fg: #ffffff, + fg-bold: #ffffff, + fg-light: rgba(255,255,255,0.5), + border: #ffffff, + border-bg: rgba(255,255,255,0.075), + border-bg-alt: rgba(255,255,255,0.175) + ); \ 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 new file mode 100644 index 0000000..2ab4be5 --- /dev/null +++ b/assets/sass/main.scss @@ -0,0 +1,50 @@ +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; +@import 'fontawesome-all.min.css'; +@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600'); + +/* + Dimension by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +// Breakpoints. + + @include breakpoints(( + xlarge: ( 1281px, 1680px ), + large: ( 981px, 1280px ), + medium: ( 737px, 980px ), + small: ( 481px, 736px ), + xsmall: ( 361px, 480px ), + xxsmall: ( null, 360px ) + )); + +// Base. + + @import 'base/reset'; + @import 'base/page'; + @import 'base/typography'; + +// Component. + + @import 'components/form'; + @import 'components/box'; + @import 'components/icon'; + @import 'components/image'; + @import 'components/list'; + @import 'components/actions'; + @import 'components/icons'; + @import 'components/table'; + @import 'components/button'; + +// Layout. + + @import 'layout/bg'; + @import 'layout/wrapper'; + @import 'layout/header'; + @import 'layout/main'; + @import 'layout/footer'; \ No newline at end of file diff --git a/assets/sass/noscript.scss b/assets/sass/noscript.scss new file mode 100644 index 0000000..b101db7 --- /dev/null +++ b/assets/sass/noscript.scss @@ -0,0 +1,50 @@ +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; + +/* + Dimension by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* BG */ + + #bg { + body.is-preload & { + &:before { + background-color: transparent; + } + } + } + +/* Header */ + + #header { + body.is-preload & { + > * { + opacity: 1; + } + + @include vendor('filter', 'none'); + + .content { + .inner { + max-height: none; + padding: 3rem 2rem; + opacity: 1; + } + } + } + } + +/* Main */ + + #main { + article { + opacity: 1; + margin: (_size(element-margin) * 2) 0 0 0; + } + } \ No newline at end of file -- cgit v1.2.3