diff options
| author | Jason McCormick <jdm@mfamily.org> | 2025-10-09 12:49:05 -0400 |
|---|---|---|
| committer | Jason McCormick <jdm@mfamily.org> | 2025-10-09 12:49:05 -0400 |
| commit | 3c02dc1c0cd480fc11647ec0f7900d4034a00cc4 (patch) | |
| tree | 468f503c5b64dec012ca3f09350a85aa500d20d5 /assets/sass | |
initial add
Diffstat (limited to 'assets/sass')
24 files changed, 2475 insertions, 0 deletions
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("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
+ 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('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(border)}; stroke-width: 1; }</style><line x1="2" y1="2" x2="18" y2="18" /><line x1="18" y1="2" x2="2" y2="18" /></svg>');
+ 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 |