├── js ├── components │ ├── .gitkeep │ └── Slider.js ├── index.js ├── utils │ ├── dom.js │ └── bind.js └── classes │ └── Component.js ├── styles ├── pages │ └── .gitkeep ├── core │ ├── _fonts.scss │ ├── _variables.scss │ ├── _globals.scss │ └── _reset.scss ├── shared │ ├── _fonts.scss │ ├── _links.scss │ ├── _sections.scss │ └── _layout.scss ├── index.scss ├── utils │ ├── _functions.scss │ ├── _mixins.scss │ └── _breakpoints.scss └── components │ └── _slider.scss ├── font ├── SuisseIntl-Book.woff └── SuisseIntl-Book.woff2 ├── .gitignore ├── package.json ├── public └── vite.svg ├── index.html └── yarn.lock /js/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /styles/pages/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | import Slider from "./components/Slider"; 2 | 3 | new Slider(); 4 | -------------------------------------------------------------------------------- /font/SuisseIntl-Book.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oluwadareseyi/stripe-sessions-rebuild/HEAD/font/SuisseIntl-Book.woff -------------------------------------------------------------------------------- /font/SuisseIntl-Book.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oluwadareseyi/stripe-sessions-rebuild/HEAD/font/SuisseIntl-Book.woff2 -------------------------------------------------------------------------------- /styles/core/_fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Suisse"; 3 | src: url("../fonts/SuisseIntl-Book.woff2") format("woff2"), 4 | url("../fonts/SuisseIntl-Book.woff") format("woff"); 5 | font-weight: 500; 6 | font-style: normal; 7 | font-display: swap; 8 | } 9 | -------------------------------------------------------------------------------- /styles/shared/_fonts.scss: -------------------------------------------------------------------------------- 1 | // sans 2 | 3 | @mixin title120Mobile { 4 | font-size: 64px; 5 | letter-spacing: calc(-0.035 * 64px); 6 | line-height: 1; 7 | } 8 | 9 | %title-120 { 10 | font-size: 120px; 11 | line-height: 1; 12 | letter-spacing: calc(-0.055 * 120px); 13 | 14 | @include media("<=tablet") { 15 | @include title120Mobile; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "utils/breakpoints"; 2 | @import "utils/mixins"; 3 | @import "utils/functions"; 4 | 5 | @import "core/variables"; 6 | @import "core/reset"; 7 | @import "core/globals"; 8 | @import "core/fonts"; 9 | 10 | @import "shared/links"; 11 | @import "shared/layout"; 12 | @import "shared/sections"; 13 | @import "shared/fonts"; 14 | 15 | @import "components/slider"; 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-base", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite --port 3000", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^4.2.0" 13 | }, 14 | "dependencies": { 15 | "lodash": "^4.17.21", 16 | "sass": "^1.62.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /styles/utils/_functions.scss: -------------------------------------------------------------------------------- 1 | @function z($name) { 2 | @if index($z-indexes, $name) { 3 | @return (length($z-indexes) - index($z-indexes, $name)) + 1; 4 | } @else { 5 | @warn 'There is no item "#{$name}" in this list; Choose one of: #{$z-indexes}'; 6 | 7 | @return null; 8 | } 9 | } 10 | 11 | @function toRem($value) { 12 | $remValue: calc($value / 10) + rem; 13 | @return $remValue; 14 | } 15 | -------------------------------------------------------------------------------- /styles/core/_variables.scss: -------------------------------------------------------------------------------- 1 | $white: #ffffff; 2 | $black: #000010; 3 | 4 | $ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); 5 | $ease-custom: cubic-bezier(0.33, 0, 0.67, 1); 6 | $ease-menu: cubic-bezier(0.63, 0, 0.4, 0.99); 7 | $ease-hero-marquee: cubic-bezier(0.24, 0.6, 0.25, 1); 8 | 9 | // fonts 10 | $font-sans: "Suisse", sans-serif; 11 | $font-serif: "Fraunces", serif; 12 | $font-bitmap: "PP Neue", "Adjusted Arial Fallback", sans-serif; 13 | 14 | $z-indexes: ( 15 | "noscript", 16 | "preloader", 17 | "transition", 18 | "modal", 19 | "overlay", 20 | "nav", 21 | "canvas", 22 | "menu", 23 | "content", 24 | "smoke", 25 | "4", 26 | "3", 27 | "2", 28 | "1" 29 | ); 30 | -------------------------------------------------------------------------------- /styles/core/_globals.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-size: calc(100vw / 1440 * 10); 4 | width: 100%; 5 | 6 | @include media(">desktop") { 7 | font-size: 10px; 8 | } 9 | } 10 | 11 | html, 12 | body { 13 | overscroll-behavior: none; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-font-smoothing: antialiased; 16 | } 17 | 18 | body { 19 | font-family: "Suisse", sans-serif; 20 | font-size: 16px; 21 | font-weight: 500; 22 | line-height: 1.35; 23 | background: $white; 24 | color: $black; 25 | font-feature-settings: "case" on; 26 | } 27 | 28 | main { 29 | min-height: 100vh; 30 | max-width: 1232px; 31 | width: 100%; 32 | padding: 0 16px; 33 | margin: 0 auto; 34 | overflow: hidden; 35 | } 36 | -------------------------------------------------------------------------------- /js/utils/dom.js: -------------------------------------------------------------------------------- 1 | import map from "lodash/map"; 2 | 3 | export const findAncestor = (element, selector) => { 4 | while ( 5 | (element = element.parentElement) && 6 | !(element.matches || element.matchesSelector).call(element, selector) 7 | ) { 8 | return element; 9 | } 10 | }; 11 | 12 | export const getOffset = (element, scroll = 0) => { 13 | const box = element.getBoundingClientRect(); 14 | 15 | return { 16 | bottom: box.bottom, 17 | height: box.height, 18 | left: box.left, 19 | right: box.right, 20 | top: box.top + scroll, 21 | width: box.width, 22 | }; 23 | }; 24 | 25 | export function getIndex(node) { 26 | let index = 0; 27 | 28 | while ((node = node.previousElementSibling)) { 29 | index++; 30 | } 31 | 32 | return index; 33 | } 34 | 35 | export function mapEach(element, callback) { 36 | if (element instanceof window.HTMLElement) { 37 | return [callback(element)]; 38 | } 39 | 40 | return map(element, callback); 41 | } 42 | -------------------------------------------------------------------------------- /js/classes/Component.js: -------------------------------------------------------------------------------- 1 | import AutoBind from "../utils/bind"; 2 | 3 | export default class Component { 4 | constructor({ element, elements }) { 5 | AutoBind(this); 6 | 7 | this.selector = element; 8 | this.selectorChildren = { ...elements }; 9 | this.create(); 10 | } 11 | 12 | create() { 13 | if (this.selector instanceof HTMLElement) { 14 | this.element = this.selector; 15 | } else { 16 | this.element = document.querySelector(this.selector); 17 | } 18 | 19 | this.elements = {}; 20 | 21 | Object.keys(this.selectorChildren).forEach((key) => { 22 | const entry = this.selectorChildren[key]; 23 | 24 | if ( 25 | entry instanceof HTMLElement || 26 | entry instanceof NodeList || 27 | Array.isArray(entry) 28 | ) { 29 | this.elements[key] = entry; 30 | } else { 31 | this.elements[key] = this.element.querySelectorAll(entry); 32 | 33 | if (this.elements[key].length === 0) { 34 | this.elements[key] = null; 35 | } else if (this.elements[key].length === 1) { 36 | this.elements[key] = this.element.querySelector(entry); 37 | } 38 | } 39 | }); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /styles/shared/_links.scss: -------------------------------------------------------------------------------- 1 | %link__wrapper { 2 | display: inline-block; 3 | overflow: hidden; 4 | position: relative; 5 | vertical-align: top; 6 | } 7 | 8 | %link__line { 9 | background: currentColor; 10 | bottom: 0; 11 | content: ''; 12 | height: 1px; 13 | left: 0; 14 | position: absolute; 15 | transition: transform 0.7s $ease-out-expo; 16 | width: 100%; 17 | } 18 | 19 | %link__line--visible { 20 | transform: scaleX(1); 21 | transform-origin: left center; 22 | } 23 | 24 | %link__line--hidden { 25 | transform: scaleX(0); 26 | transform-origin: right center; 27 | } 28 | 29 | %link { 30 | @extend %link__wrapper; 31 | 32 | display: inline-block; 33 | 34 | &:after { 35 | @extend %link__line; 36 | @extend %link__line--visible; 37 | } 38 | 39 | &:hover { 40 | &:after { 41 | @extend %link__line--hidden; 42 | } 43 | } 44 | } 45 | 46 | %link--hidden { 47 | @extend %link__wrapper; 48 | 49 | display: inline-block; 50 | 51 | &:after { 52 | @extend %link__line; 53 | @extend %link__line--hidden; 54 | } 55 | 56 | &:hover { 57 | &:after { 58 | @extend %link__line--visible; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /js/utils/bind.js: -------------------------------------------------------------------------------- 1 | // Gets all non-builtin properties up the prototype chain. 2 | const getAllProperties = (object) => { 3 | const properties = new Set(); 4 | 5 | do { 6 | for (const key of Reflect.ownKeys(object)) { 7 | properties.add([object, key]); 8 | } 9 | } while ( 10 | (object = Reflect.getPrototypeOf(object)) && 11 | object !== Object.prototype 12 | ); 13 | 14 | return properties; 15 | }; 16 | 17 | export default function AutoBind(self, { include, exclude } = {}) { 18 | const filter = (key) => { 19 | const match = (pattern) => 20 | typeof pattern === "string" ? key === pattern : pattern.test(key); 21 | 22 | if (include) { 23 | return include.some(match); // eslint-disable-line unicorn/no-array-callback-reference 24 | } 25 | 26 | if (exclude) { 27 | return !exclude.some(match); // eslint-disable-line unicorn/no-array-callback-reference 28 | } 29 | 30 | return true; 31 | }; 32 | 33 | for (const [object, key] of getAllProperties(self.constructor.prototype)) { 34 | if (key === "constructor" || !filter(key)) { 35 | continue; 36 | } 37 | 38 | const descriptor = Reflect.getOwnPropertyDescriptor(object, key); 39 | if (descriptor && typeof descriptor.value === "function") { 40 | self[key] = self[key].bind(self); 41 | } 42 | } 43 | 44 | return self; 45 | } 46 | -------------------------------------------------------------------------------- /styles/shared/_sections.scss: -------------------------------------------------------------------------------- 1 | %page { 2 | // opacity: 0; 3 | // overflow: hidden; 4 | // pointer-events: none; 5 | // position: absolute; 6 | // left: 0; 7 | // top: 0; 8 | // visibility: hidden; 9 | // width: 100%; 10 | // height: 100%; 11 | // z-index: z("content"); 12 | } 13 | 14 | %page--active { 15 | opacity: 1; 16 | pointer-events: auto; 17 | visibility: visible; 18 | overflow: unset; 19 | height: auto; 20 | } 21 | 22 | %content { 23 | left: 0; 24 | overflow: hidden; 25 | position: absolute; 26 | top: 0; 27 | width: 100%; 28 | will-change: transform; 29 | } 30 | 31 | %img { 32 | width: 100%; 33 | height: 100%; 34 | object-fit: cover; 35 | } 36 | 37 | %svg-full { 38 | svg { 39 | display: inline-block; 40 | width: 100%; 41 | height: 100%; 42 | } 43 | } 44 | 45 | %wrapper { 46 | margin: auto; 47 | max-width: 130rem; 48 | width: 90%; 49 | 50 | @include media("<=phone") { 51 | width: calc(100% - 5rem); 52 | } 53 | } 54 | 55 | %desktop { 56 | @include media("<=phone") { 57 | display: none; 58 | } 59 | } 60 | 61 | %desktop-tab { 62 | @include media("<=tablet") { 63 | display: none; 64 | } 65 | } 66 | 67 | %tablet { 68 | @include media(">tablet") { 69 | display: none; 70 | } 71 | } 72 | 73 | %mobile { 74 | @include media(">phone") { 75 | display: none; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /styles/shared/_layout.scss: -------------------------------------------------------------------------------- 1 | %ovh { 2 | overflow: hidden; 3 | -webkit-backface-visibility: hidden; 4 | -moz-backface-visibility: hidden; 5 | -webkit-transform: translate3d(0, 0, 0); 6 | -moz-transform: translate3d(0, 0, 0); 7 | 8 | img, 9 | video { 10 | overflow: hidden; 11 | -webkit-backface-visibility: hidden; 12 | -moz-backface-visibility: hidden; 13 | } 14 | } 15 | 16 | %flex-center { 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | 22 | @mixin pagePadding { 23 | .c-section { 24 | width: 100%; 25 | } 26 | 27 | .c-section:not(.full-section) { 28 | padding-left: 20px; 29 | padding-right: 20px; 30 | 31 | @include media(">tablet") { 32 | max-width: calc(100% - 88px); 33 | margin-left: auto; 34 | padding-left: 0; 35 | padding-right: 24px; 36 | } 37 | 38 | .c-section__inner { 39 | width: 100%; 40 | } 41 | } 42 | } 43 | 44 | @mixin multiParagraphs { 45 | p { 46 | &:first-of-type { 47 | margin: 0; 48 | } 49 | 50 | &:not(:first-of-type) { 51 | margin-top: revert; 52 | } 53 | 54 | &:last-of-type { 55 | margin-bottom: 0; 56 | } 57 | } 58 | 59 | a { 60 | @extend %link; 61 | } 62 | } 63 | 64 | %page-full { 65 | min-height: 100vh; 66 | display: flex; 67 | flex-direction: column; 68 | } 69 | 70 | %element-cover { 71 | position: absolute; 72 | top: 0; 73 | left: 0; 74 | width: 100%; 75 | height: 100%; 76 | } 77 | -------------------------------------------------------------------------------- /styles/core/_reset.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | hgroup, 72 | menu, 73 | nav, 74 | output, 75 | ruby, 76 | section, 77 | summary, 78 | time, 79 | mark, 80 | audio, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | 90 | article, 91 | aside, 92 | details, 93 | figcaption, 94 | figure, 95 | footer, 96 | header, 97 | hgroup, 98 | menu, 99 | nav, 100 | section { 101 | display: block; 102 | } 103 | 104 | body { 105 | line-height: 1; 106 | } 107 | 108 | ol, 109 | ul { 110 | list-style: none; 111 | } 112 | 113 | blockquote, 114 | q { 115 | quotes: none; 116 | } 117 | 118 | blockquote:before, 119 | blockquote:after, 120 | q:before, 121 | q:after { 122 | content: ""; 123 | content: none; 124 | } 125 | 126 | table { 127 | border-collapse: collapse; 128 | border-spacing: 0; 129 | } 130 | 131 | button { 132 | background: transparent; 133 | border: 0; 134 | padding: 0; 135 | font-family: inherit; 136 | } 137 | 138 | a { 139 | text-decoration: none; 140 | font-family: inherit; 141 | } 142 | 143 | *, 144 | *:before, 145 | *:after { 146 | box-sizing: border-box; 147 | // outline: none; 148 | -webkit-touch-callout: none; 149 | } 150 | 151 | a, 152 | button { 153 | color: inherit; 154 | text-decoration: none; 155 | } 156 | 157 | ol, 158 | ul { 159 | list-style: none; 160 | } 161 | -------------------------------------------------------------------------------- /styles/utils/_mixins.scss: -------------------------------------------------------------------------------- 1 | %cover { 2 | height: 100%; 3 | left: 0; 4 | object-fit: cover; 5 | position: absolute; 6 | top: 0; 7 | width: 100%; 8 | } 9 | 10 | @mixin screenHeight { 11 | height: 100vh; 12 | @supports (-webkit-touch-callout: none) { 13 | & { 14 | max-height: -webkit-fill-available; 15 | } 16 | } 17 | } 18 | 19 | @mixin placeholder { 20 | &.placeholder { 21 | @content; 22 | } 23 | &::-webkit-input-placeholder { 24 | @content; 25 | } 26 | &::-moz-placeholder { 27 | @content; 28 | } 29 | &:-moz-placeholder { 30 | @content; 31 | } 32 | &:-ms-input-placeholder { 33 | @content; 34 | } 35 | } 36 | 37 | @mixin cursor { 38 | @media (any-pointer: fine) { 39 | @content; 40 | } 41 | } 42 | 43 | @mixin cursor-mobile { 44 | @media (any-pointer: fine) { 45 | @content; 46 | } 47 | 48 | @include media(">tablet") { 49 | @content; 50 | } 51 | } 52 | 53 | @mixin ratio($height, $width) { 54 | font-size: 0; 55 | overflow: hidden; 56 | position: relative; 57 | // aspect-ratio: calc($width / $height); 58 | 59 | @supports (aspect-ratio: calc($width / $height)) { 60 | &:after { 61 | content: ""; 62 | display: inline-block; 63 | padding-top: calc($height / $width) * 100%; 64 | width: 100%; 65 | } 66 | } 67 | 68 | img, 69 | video { 70 | @extend %img; 71 | position: absolute; 72 | top: 0; 73 | left: 0; 74 | } 75 | } 76 | 77 | @mixin flex-gap($row-gap, $column-gap: $row-gap) { 78 | display: inline-flex; 79 | gap: $row-gap $column-gap; 80 | 81 | @supports not (gap: $row-gap $column-gap) { 82 | --row-gap: #{$row-gap}; 83 | --column-gap: #{$column-gap}; 84 | margin: calc(-1 * var(--row-gap)) 0 0 calc(-1 * var(--column-gap)); 85 | width: calc(100% + var(--column-gap)); 86 | 87 | > * { 88 | margin: var(--row-gap) 0 0 var(--column-gap); 89 | } 90 | } 91 | } 92 | 93 | @mixin gap-margin($column-gap, $margin) { 94 | > * { 95 | &:not(:last-child) { 96 | margin-right: $column-gap; 97 | } 98 | } 99 | 100 | @include media("<=tablet") { 101 | margin-bottom: $margin; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vite App 9 | 10 | 11 |
12 |
13 |
14 |
15 | 31 | 47 |
48 |
    49 |
  • 50 |
  • 51 |
  • 52 |
  • 53 |
  • 54 |
  • 55 |
  • 56 |
  • 57 |
  • 58 |
  • 59 |
  • 60 |
  • 61 |
  • 62 |
  • 63 |
  • 64 |
  • 65 |
  • 66 |
67 |
68 |
69 |
70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /styles/components/_slider.scss: -------------------------------------------------------------------------------- 1 | .c-slider { 2 | height: 100vh; 3 | width: 100%; 4 | padding: 0 20px; 5 | overflow: hidden; 6 | display: grid; 7 | align-items: center; 8 | 9 | &__wrapper { 10 | display: grid; 11 | align-items: flex-start; 12 | } 13 | 14 | &__controls { 15 | display: flex; 16 | align-items: center; 17 | justify-content: flex-end; 18 | @include flex-gap(8px); 19 | 20 | button { 21 | width: 24px; 22 | height: 24px; 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | cursor: pointer; 27 | background: linear-gradient( 28 | 50.97deg, 29 | hsl(278.538, 97%, 62%) -19.81%, 30 | hsl(300.151, 100%, 68%) 57.52% 31 | ); 32 | } 33 | } 34 | } 35 | 36 | .c-slides { 37 | @include flex-gap(20px); 38 | display: flex; 39 | position: relative; 40 | margin: 0 -26px; 41 | 42 | &--prepend { 43 | -webkit-animation: speakers-carousel-prepend-slide-in 0.6s 44 | cubic-bezier(0.22, 0.61, 0.36, 1); 45 | animation: speakers-carousel-prepend-slide-in 0.6s 46 | cubic-bezier(0.22, 0.61, 0.36, 1); 47 | } 48 | 49 | &--append { 50 | -webkit-animation: speakers-carousel-append-slide-in 0.6s 51 | cubic-bezier(0.22, 0.61, 0.36, 1); 52 | animation: speakers-carousel-append-slide-in 0.6s 53 | cubic-bezier(0.22, 0.61, 0.36, 1); 54 | } 55 | } 56 | 57 | .c-slide { 58 | height: 640px; 59 | background: linear-gradient( 60 | 50.97deg, 61 | hsl(228.396, 97%, 62%) -19.81%, 62 | hsl(269.987, 100%, 68%) 57.52% 63 | ); 64 | will-change: transform; 65 | transition: 0.36s ease; 66 | width: 8%; 67 | outline: 12px solid #fff; 68 | border-radius: 20px; 69 | opacity: 0.8; 70 | cursor: pointer; 71 | flex-grow: 0; 72 | 73 | &:hover { 74 | &:not(.c-slide--active) { 75 | width: 12%; 76 | } 77 | } 78 | 79 | &--active { 80 | width: 48%; 81 | opacity: 1; 82 | padding: 32px; 83 | background-size: 250% 100%; 84 | animation: gradientAnim 5s ease infinite alternate; 85 | 86 | .c-slide__inner { 87 | opacity: 1; 88 | transition-delay: 0.25s; 89 | } 90 | } 91 | 92 | &:nth-child(n + 11) { 93 | display: none; 94 | } 95 | 96 | &:nth-child(1), 97 | &:nth-child(2), 98 | &:nth-child(9), 99 | &:nth-child(10) { 100 | width: 8px; 101 | flex-shrink: 0; 102 | pointer-events: none; 103 | // transition: none; 104 | } 105 | 106 | &:nth-child(1) { 107 | transform: translateX(-20px); 108 | } 109 | 110 | &:nth-child(10) { 111 | transform: translateX(20px); 112 | } 113 | 114 | &__inner { 115 | color: $white; 116 | font-size: 32px; 117 | opacity: 0; 118 | transition: 0.2s ease; 119 | } 120 | } 121 | 122 | @-webkit-keyframes speakers-carousel-prepend-slide-in { 123 | 0% { 124 | transform: translateX(-28px); 125 | } 126 | } 127 | 128 | @keyframes speakers-carousel-prepend-slide-in { 129 | 0% { 130 | transform: translateX(-28px); 131 | } 132 | } 133 | 134 | @-webkit-keyframes speakers-carousel-append-slide-in { 135 | 0% { 136 | transform: translateX(28px); 137 | } 138 | } 139 | 140 | @keyframes speakers-carousel-append-slide-in { 141 | 0% { 142 | transform: translateX(28px); 143 | } 144 | } 145 | 146 | @keyframes gradientAnim { 147 | 0% { 148 | background-position: 0 50%; 149 | } 150 | 151 | 50% { 152 | background-position: 100% 50%; 153 | } 154 | 155 | 100% { 156 | background-position: 0 50%; 157 | } 158 | } 159 | 160 | @-webkit-keyframes gradientAnim { 161 | 0% { 162 | background-position: 0 50%; 163 | } 164 | 165 | 50% { 166 | background-position: 100% 50%; 167 | } 168 | 169 | 100% { 170 | background-position: 0 50%; 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /js/components/Slider.js: -------------------------------------------------------------------------------- 1 | import Component from "../classes/Component"; 2 | import AutoBind from "../utils/bind"; 3 | import { getIndex } from "../utils/dom"; 4 | 5 | export default class extends Component { 6 | constructor() { 7 | super({ 8 | element: "[data-slider]", 9 | elements: { 10 | slides: "[data-slide]", 11 | slideParent: "[data-slides]", 12 | prevButton: "[data-prev-button]", 13 | nextButton: "[data-next-button]", 14 | }, 15 | }); 16 | 17 | AutoBind(this); 18 | 19 | this.classes = { 20 | active: "c-slide--active", 21 | prepend: "c-slides--prepend", 22 | append: "c-slides--append", 23 | }; 24 | 25 | this.elements.slides.forEach((slide, index) => { 26 | slide.innerHTML = `

Slide ${index}

`; 27 | }); 28 | 29 | this.addEventListeners(); 30 | this.autoPlay(); 31 | } 32 | 33 | get slides() { 34 | return document.querySelectorAll("[data-slide]"); 35 | } 36 | 37 | resetSlidesClasses() { 38 | const slides = this.slides; 39 | 40 | slides.forEach((slide) => { 41 | slide.classList.remove(this.classes.active); 42 | }); 43 | } 44 | 45 | prependSlide() { 46 | // move last slide to the front 47 | const slides = this.slides; 48 | 49 | const lastSlide = slides[slides.length - 1]; 50 | const firstSlide = slides[0]; 51 | 52 | this.elements.slideParent.insertBefore(lastSlide, firstSlide); 53 | this.elements.slideParent.classList.add(this.classes.prepend); 54 | 55 | const delay = setTimeout(() => { 56 | this.elements.slideParent.classList.remove(this.classes.prepend); 57 | 58 | clearTimeout(delay); 59 | }, 600); 60 | } 61 | 62 | appendSlide() { 63 | // move first slide to the back 64 | const slides = this.slides; 65 | 66 | const firstSlide = slides[0]; 67 | 68 | this.elements.slideParent.insertBefore(firstSlide, null); 69 | this.elements.slideParent.classList.add(this.classes.append); 70 | 71 | const delay = setTimeout(() => { 72 | this.elements.slideParent.classList.remove(this.classes.append); 73 | 74 | clearTimeout(delay); 75 | }, 600); 76 | } 77 | 78 | handleSlideChange(el) { 79 | const slide = el.closest("[data-slide]"); 80 | 81 | const index = getIndex(slide); 82 | 83 | if (index === 2) { 84 | this.prependSlide(); 85 | } else if (index === 7) { 86 | this.appendSlide(); 87 | } 88 | 89 | this.resetSlidesClasses(); 90 | slide.classList.add(this.classes.active); 91 | } 92 | 93 | playPreviousSlide() { 94 | // check for active slide 95 | const activeSlide = document.querySelector(`.${this.classes.active}`); 96 | 97 | // get previous slide 98 | const prevSlide = activeSlide.previousElementSibling; 99 | 100 | this.handleSlideChange(prevSlide); 101 | this.resetAutoPlay(); 102 | } 103 | 104 | playNextSlide() { 105 | // check for active slide 106 | const activeSlide = document.querySelector(`.${this.classes.active}`); 107 | 108 | // get next slide 109 | const nextSlide = activeSlide.nextElementSibling; 110 | 111 | this.handleSlideChange(nextSlide); 112 | this.resetAutoPlay(); 113 | } 114 | 115 | addEventListeners() { 116 | const slides = this.slides; 117 | const { prevButton, nextButton, slideParent } = this.elements; 118 | 119 | slides.forEach((slide) => { 120 | slide.addEventListener("click", (el) => { 121 | this.handleSlideChange(el.target); 122 | }); 123 | }); 124 | 125 | prevButton.addEventListener("click", this.playPreviousSlide); 126 | nextButton.addEventListener("click", this.playNextSlide); 127 | 128 | slideParent.addEventListener("mouseenter", this.cancelAutoPlay); 129 | slideParent.addEventListener("mouseleave", this.autoPlay); 130 | } 131 | 132 | resetAutoPlay() { 133 | this.cancelAutoPlay(); 134 | this.autoPlay(); 135 | } 136 | 137 | autoPlay() { 138 | this.interval = setInterval(() => { 139 | this.playNextSlide(); 140 | }, 5000); 141 | } 142 | 143 | cancelAutoPlay() { 144 | clearInterval(this.interval); 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /styles/utils/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | $breakpoints: ( 2 | "phone": 425px, 3 | "tablet": 768px, 4 | "desktop": 1440px, 5 | "LGdesktop": 1920px, 6 | ) !default; 7 | 8 | /// 9 | /// Creates a list of static expressions or media types 10 | /// 11 | /// @author Eduardo Boucas 12 | /// 13 | /// @example scss - Creates a single media type (screen) 14 | /// $media-expressions: ('screen': 'screen'); 15 | /// 16 | /// @example scss - Creates a static expression with logical disjunction (OR operator) 17 | /// $media-expressions: ( 18 | /// 'retina2x': ( 19 | /// '(-webkit-min-device-pixel-ratio: 2)', 20 | /// '(min-resolution: 192dpi)' 21 | /// ) 22 | /// ); 23 | /// 24 | $media-expressions: ( 25 | "screen": "screen", 26 | "print": "print", 27 | "handheld": "handheld", 28 | "retina2x": ( 29 | "(-webkit-min-device-pixel-ratio: 2)", 30 | "(min-resolution: 192dpi)", 31 | ), 32 | "retina3x": ( 33 | "(-webkit-min-device-pixel-ratio: 3)", 34 | "(min-resolution: 350dpi)", 35 | ), 36 | ) !default; 37 | 38 | /// 39 | /// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals 40 | /// 41 | /// @author Eduardo Boucas 42 | /// 43 | /// @example scss - Interval for pixels is defined as `1` by default 44 | /// @include media(">128px") {} 45 | /// 46 | /// /* Generates: */ 47 | /// @media (min-width: 129px) {} 48 | /// 49 | /// @example scss - Interval for ems is defined as `0.01` by default 50 | /// @include media(">20em") {} 51 | /// 52 | /// /* Generates: */ 53 | /// @media (min-width: 20.01em) {} 54 | /// 55 | /// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;` 56 | /// @include media(">2.0rem") {} 57 | /// 58 | /// /* Generates: */ 59 | /// @media (min-width: 2.1rem) {} 60 | /// 61 | $unit-intervals: ( 62 | "px": 1, 63 | "em": 0.01, 64 | "rem": 0.1, 65 | ) !default; 66 | /// 67 | /// Generates a media query based on a list of conditions 68 | /// 69 | /// @author Eduardo Boucas 70 | /// 71 | /// @param {List} $conditions - Media query conditions 72 | /// 73 | /// @example scss - With a single set breakpoint 74 | /// @include media(">phone") { } 75 | /// 76 | /// @example scss - With two set breakpoints 77 | /// @include media(">phone", "<=tablet") { } 78 | /// 79 | /// @example scss - With custom values 80 | /// @include media(">=358px", "<850px") { } 81 | /// 82 | /// @example scss - With set breakpoints with custom values 83 | /// @include media(">desktop", "<=1350px") { } 84 | /// 85 | /// @example scss - With a static expression 86 | /// @include media("retina2x") { } 87 | /// 88 | /// @example scss - Mixing everything 89 | /// @include media(">=350px", "") { 224 | $element: "(min-width: #{$result + $interval})"; 225 | } @else if ($operator == "<") { 226 | $element: "(max-width: #{$result - $interval})"; 227 | } @else if ($operator == ">=") { 228 | $element: "(min-width: #{$result})"; 229 | } @else if ($operator == "<=") { 230 | $element: "(max-width: #{$result})"; 231 | } @else { 232 | @warn '#{$expression} is missing an operator.'; 233 | } 234 | } @else { 235 | $element: $result; 236 | } 237 | 238 | @return $element; 239 | } 240 | 241 | /// 242 | /// Replaces the first occurence of the string with the replacement string 243 | /// 244 | /// @author Eduardo Boucas 245 | /// 246 | /// @param {String} $search - The value being searched for 247 | /// @param {String} $replace - The replacement string 248 | /// @param {String} $subject - The string being replaced on 249 | /// 250 | /// @return {String | Null} 251 | /// 252 | @function str-replace-first($search, $replace, $subject) { 253 | $search-start: str-index($subject, $search); 254 | 255 | @if $search-start == null { 256 | @return $subject; 257 | } 258 | 259 | $result: str-slice($subject, 0, $search-start - 1); 260 | $result: $result + $replace; 261 | $result: $result + str-slice($subject, $search-start + str-length($search)); 262 | 263 | @return $result; 264 | } 265 | 266 | /// 267 | /// Casts a number to a string 268 | /// 269 | /// @author Hugo Giraudel 270 | /// 271 | /// @param {String} $string - Number to be parsed 272 | /// 273 | /// @return {List | Null} 274 | /// 275 | @function to-number($string) { 276 | // Matrices 277 | $strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; 278 | $numbers: 0 1 2 3 4 5 6 7 8 9; 279 | 280 | // Result 281 | $result: 0; 282 | $divider: 0; 283 | $minus: false; 284 | 285 | // Looping through all characters 286 | @for $i from 1 through str-length($string) { 287 | $character: str-slice($string, $i, $i); 288 | $index: index($strings, $character); 289 | 290 | @if $character == "-" { 291 | $minus: true; 292 | } @else if $character == "." { 293 | $divider: 1; 294 | } @else { 295 | @if type-of($index) != "number" { 296 | $result: if($minus, $result * -1, $result); 297 | @return _length($result, str-slice($string, $i)); 298 | } 299 | 300 | $number: nth($numbers, $index); 301 | 302 | @if $divider == 0 { 303 | $result: $result * 10; 304 | } @else { 305 | // Move the decimal dot to the left 306 | $divider: $divider * 10; 307 | $number: $number / $divider; 308 | } 309 | 310 | $result: $result + $number; 311 | } 312 | } 313 | 314 | @return if($minus, $result * -1, $result); 315 | } 316 | 317 | @function _length($number, $unit) { 318 | $strings: "px" "cm" "mm" "%" "ch" "pica" "in" "em" "rem" "pt" "pc" "ex" "vw" 319 | "vh" "vmin" "vmax"; 320 | $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax; 321 | $index: index($strings, $unit); 322 | 323 | @if type-of($index) != "number" { 324 | @warn 'Unknown unit `#{$unit}`.'; 325 | @return false; 326 | } 327 | 328 | @return $number * nth($units, $index); 329 | } 330 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@esbuild/android-arm64@0.17.16": 6 | version "0.17.16" 7 | resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.16.tgz#7b18cab5f4d93e878306196eed26b6d960c12576" 8 | integrity sha512-QX48qmsEZW+gcHgTmAj+x21mwTz8MlYQBnzF6861cNdQGvj2jzzFjqH0EBabrIa/WVZ2CHolwMoqxVryqKt8+Q== 9 | 10 | "@esbuild/android-arm@0.17.16": 11 | version "0.17.16" 12 | resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.16.tgz#5c47f6a7c2cada6ed4b4d4e72d8c66e76d812812" 13 | integrity sha512-baLqRpLe4JnKrUXLJChoTN0iXZH7El/mu58GE3WIA6/H834k0XWvLRmGLG8y8arTRS9hJJibPnF0tiGhmWeZgw== 14 | 15 | "@esbuild/android-x64@0.17.16": 16 | version "0.17.16" 17 | resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.16.tgz#8686a6e98359071ffd5312046551943e7244c51a" 18 | integrity sha512-G4wfHhrrz99XJgHnzFvB4UwwPxAWZaZBOFXh+JH1Duf1I4vIVfuYY9uVLpx4eiV2D/Jix8LJY+TAdZ3i40tDow== 19 | 20 | "@esbuild/darwin-arm64@0.17.16": 21 | version "0.17.16" 22 | resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.16.tgz#aa79fbf447630ca0696a596beba962a775bbf394" 23 | integrity sha512-/Ofw8UXZxuzTLsNFmz1+lmarQI6ztMZ9XktvXedTbt3SNWDn0+ODTwxExLYQ/Hod91EZB4vZPQJLoqLF0jvEzA== 24 | 25 | "@esbuild/darwin-x64@0.17.16": 26 | version "0.17.16" 27 | resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.16.tgz#d5d68ee510507104da7e7503224c647c957e163e" 28 | integrity sha512-SzBQtCV3Pdc9kyizh36Ol+dNVhkDyIrGb/JXZqFq8WL37LIyrXU0gUpADcNV311sCOhvY+f2ivMhb5Tuv8nMOQ== 29 | 30 | "@esbuild/freebsd-arm64@0.17.16": 31 | version "0.17.16" 32 | resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.16.tgz#b00b4cc8c2e424907cfe3a607384ab24794edd52" 33 | integrity sha512-ZqftdfS1UlLiH1DnS2u3It7l4Bc3AskKeu+paJSfk7RNOMrOxmeFDhLTMQqMxycP1C3oj8vgkAT6xfAuq7ZPRA== 34 | 35 | "@esbuild/freebsd-x64@0.17.16": 36 | version "0.17.16" 37 | resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.16.tgz#84af4430a07730b50bbc945a90cf7036c1853b76" 38 | integrity sha512-rHV6zNWW1tjgsu0dKQTX9L0ByiJHHLvQKrWtnz8r0YYJI27FU3Xu48gpK2IBj1uCSYhJ+pEk6Y0Um7U3rIvV8g== 39 | 40 | "@esbuild/linux-arm64@0.17.16": 41 | version "0.17.16" 42 | resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.16.tgz#35571d15de6272c862d9ce6341372fb3cef0f266" 43 | integrity sha512-8yoZhGkU6aHu38WpaM4HrRLTFc7/VVD9Q2SvPcmIQIipQt2I/GMTZNdEHXoypbbGao5kggLcxg0iBKjo0SQYKA== 44 | 45 | "@esbuild/linux-arm@0.17.16": 46 | version "0.17.16" 47 | resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.16.tgz#b65c7cd5b0eadd08f91aab66b9dda81b6a4b2a70" 48 | integrity sha512-n4O8oVxbn7nl4+m+ISb0a68/lcJClIbaGAoXwqeubj/D1/oMMuaAXmJVfFlRjJLu/ZvHkxoiFJnmbfp4n8cdSw== 49 | 50 | "@esbuild/linux-ia32@0.17.16": 51 | version "0.17.16" 52 | resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.16.tgz#673a68cb251ce44a00a6422ada29064c5a1cd2c0" 53 | integrity sha512-9ZBjlkdaVYxPNO8a7OmzDbOH9FMQ1a58j7Xb21UfRU29KcEEU3VTHk+Cvrft/BNv0gpWJMiiZ/f4w0TqSP0gLA== 54 | 55 | "@esbuild/linux-loong64@0.17.16": 56 | version "0.17.16" 57 | resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.16.tgz#477e2da34ab46ffdbf4740fa6441e80045249385" 58 | integrity sha512-TIZTRojVBBzdgChY3UOG7BlPhqJz08AL7jdgeeu+kiObWMFzGnQD7BgBBkWRwOtKR1i2TNlO7YK6m4zxVjjPRQ== 59 | 60 | "@esbuild/linux-mips64el@0.17.16": 61 | version "0.17.16" 62 | resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.16.tgz#e1e9687bbdaa831d7c34edc9278200982c1a4bf4" 63 | integrity sha512-UPeRuFKCCJYpBbIdczKyHLAIU31GEm0dZl1eMrdYeXDH+SJZh/i+2cAmD3A1Wip9pIc5Sc6Kc5cFUrPXtR0XHA== 64 | 65 | "@esbuild/linux-ppc64@0.17.16": 66 | version "0.17.16" 67 | resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.16.tgz#2f19075d63622987e86e83a4b7866cd57b796c60" 68 | integrity sha512-io6yShgIEgVUhExJejJ21xvO5QtrbiSeI7vYUnr7l+v/O9t6IowyhdiYnyivX2X5ysOVHAuyHW+Wyi7DNhdw6Q== 69 | 70 | "@esbuild/linux-riscv64@0.17.16": 71 | version "0.17.16" 72 | resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.16.tgz#bbf40a38f03ba2434fe69b5ceeec5d13c742b329" 73 | integrity sha512-WhlGeAHNbSdG/I2gqX2RK2gfgSNwyJuCiFHMc8s3GNEMMHUI109+VMBfhVqRb0ZGzEeRiibi8dItR3ws3Lk+cA== 74 | 75 | "@esbuild/linux-s390x@0.17.16": 76 | version "0.17.16" 77 | resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.16.tgz#d2b8c0779ccd2b7917cdf0fab8831a468e0f9c01" 78 | integrity sha512-gHRReYsJtViir63bXKoFaQ4pgTyah4ruiMRQ6im9YZuv+gp3UFJkNTY4sFA73YDynmXZA6hi45en4BGhNOJUsw== 79 | 80 | "@esbuild/linux-x64@0.17.16": 81 | version "0.17.16" 82 | resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.16.tgz#da48b39cfdc1b12a74976625f583f031eac43590" 83 | integrity sha512-mfiiBkxEbUHvi+v0P+TS7UnA9TeGXR48aK4XHkTj0ZwOijxexgMF01UDFaBX7Q6CQsB0d+MFNv9IiXbIHTNd4g== 84 | 85 | "@esbuild/netbsd-x64@0.17.16": 86 | version "0.17.16" 87 | resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.16.tgz#ddef985aed37cc81908d2573b66c0299dbc49037" 88 | integrity sha512-n8zK1YRDGLRZfVcswcDMDM0j2xKYLNXqei217a4GyBxHIuPMGrrVuJ+Ijfpr0Kufcm7C1k/qaIrGy6eG7wvgmA== 89 | 90 | "@esbuild/openbsd-x64@0.17.16": 91 | version "0.17.16" 92 | resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.16.tgz#85035bf89efd66e9068bc72aa6bb85a2c317d090" 93 | integrity sha512-lEEfkfsUbo0xC47eSTBqsItXDSzwzwhKUSsVaVjVji07t8+6KA5INp2rN890dHZeueXJAI8q0tEIfbwVRYf6Ew== 94 | 95 | "@esbuild/sunos-x64@0.17.16": 96 | version "0.17.16" 97 | resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.16.tgz#16338ecab854cb2d831cc9ee9cc21ef69566e1f3" 98 | integrity sha512-jlRjsuvG1fgGwnE8Afs7xYDnGz0dBgTNZfgCK6TlvPH3Z13/P5pi6I57vyLE8qZYLrGVtwcm9UbUx1/mZ8Ukag== 99 | 100 | "@esbuild/win32-arm64@0.17.16": 101 | version "0.17.16" 102 | resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.16.tgz#423f46bb744aff897a5f74435469e1ef4952e343" 103 | integrity sha512-TzoU2qwVe2boOHl/3KNBUv2PNUc38U0TNnzqOAcgPiD/EZxT2s736xfC2dYQbszAwo4MKzzwBV0iHjhfjxMimg== 104 | 105 | "@esbuild/win32-ia32@0.17.16": 106 | version "0.17.16" 107 | resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.16.tgz#1978be5b192c7063bd2c8d5960eb213e1964740e" 108 | integrity sha512-B8b7W+oo2yb/3xmwk9Vc99hC9bNolvqjaTZYEfMQhzdpBsjTvZBlXQ/teUE55Ww6sg//wlcDjOaqldOKyigWdA== 109 | 110 | "@esbuild/win32-x64@0.17.16": 111 | version "0.17.16" 112 | resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.16.tgz#260f19b0a3300d22c3a3f52722c671dc561edaa3" 113 | integrity sha512-xJ7OH/nanouJO9pf03YsL9NAFQBHd8AqfrQd7Pf5laGyyTt/gToul6QYOA/i5i/q8y9iaM5DQFNTgpi995VkOg== 114 | 115 | anymatch@~3.1.2: 116 | version "3.1.3" 117 | resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e" 118 | integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw== 119 | dependencies: 120 | normalize-path "^3.0.0" 121 | picomatch "^2.0.4" 122 | 123 | binary-extensions@^2.0.0: 124 | version "2.2.0" 125 | resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" 126 | integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== 127 | 128 | braces@~3.0.2: 129 | version "3.0.2" 130 | resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" 131 | integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== 132 | dependencies: 133 | fill-range "^7.0.1" 134 | 135 | "chokidar@>=3.0.0 <4.0.0": 136 | version "3.5.3" 137 | resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" 138 | integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== 139 | dependencies: 140 | anymatch "~3.1.2" 141 | braces "~3.0.2" 142 | glob-parent "~5.1.2" 143 | is-binary-path "~2.1.0" 144 | is-glob "~4.0.1" 145 | normalize-path "~3.0.0" 146 | readdirp "~3.6.0" 147 | optionalDependencies: 148 | fsevents "~2.3.2" 149 | 150 | esbuild@^0.17.5: 151 | version "0.17.16" 152 | resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.16.tgz#5efec24a8ff29e0c157359f27e1b5532a728b720" 153 | integrity sha512-aeSuUKr9aFVY9Dc8ETVELGgkj4urg5isYx8pLf4wlGgB0vTFjxJQdHnNH6Shmx4vYYrOTLCHtRI5i1XZ9l2Zcg== 154 | optionalDependencies: 155 | "@esbuild/android-arm" "0.17.16" 156 | "@esbuild/android-arm64" "0.17.16" 157 | "@esbuild/android-x64" "0.17.16" 158 | "@esbuild/darwin-arm64" "0.17.16" 159 | "@esbuild/darwin-x64" "0.17.16" 160 | "@esbuild/freebsd-arm64" "0.17.16" 161 | "@esbuild/freebsd-x64" "0.17.16" 162 | "@esbuild/linux-arm" "0.17.16" 163 | "@esbuild/linux-arm64" "0.17.16" 164 | "@esbuild/linux-ia32" "0.17.16" 165 | "@esbuild/linux-loong64" "0.17.16" 166 | "@esbuild/linux-mips64el" "0.17.16" 167 | "@esbuild/linux-ppc64" "0.17.16" 168 | "@esbuild/linux-riscv64" "0.17.16" 169 | "@esbuild/linux-s390x" "0.17.16" 170 | "@esbuild/linux-x64" "0.17.16" 171 | "@esbuild/netbsd-x64" "0.17.16" 172 | "@esbuild/openbsd-x64" "0.17.16" 173 | "@esbuild/sunos-x64" "0.17.16" 174 | "@esbuild/win32-arm64" "0.17.16" 175 | "@esbuild/win32-ia32" "0.17.16" 176 | "@esbuild/win32-x64" "0.17.16" 177 | 178 | fill-range@^7.0.1: 179 | version "7.0.1" 180 | resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" 181 | integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== 182 | dependencies: 183 | to-regex-range "^5.0.1" 184 | 185 | fsevents@~2.3.2: 186 | version "2.3.2" 187 | resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" 188 | integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== 189 | 190 | function-bind@^1.1.1: 191 | version "1.1.1" 192 | resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" 193 | integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== 194 | 195 | glob-parent@~5.1.2: 196 | version "5.1.2" 197 | resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" 198 | integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== 199 | dependencies: 200 | is-glob "^4.0.1" 201 | 202 | has@^1.0.3: 203 | version "1.0.3" 204 | resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" 205 | integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== 206 | dependencies: 207 | function-bind "^1.1.1" 208 | 209 | immutable@^4.0.0: 210 | version "4.3.0" 211 | resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.0.tgz#eb1738f14ffb39fd068b1dbe1296117484dd34be" 212 | integrity sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg== 213 | 214 | is-binary-path@~2.1.0: 215 | version "2.1.0" 216 | resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" 217 | integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== 218 | dependencies: 219 | binary-extensions "^2.0.0" 220 | 221 | is-core-module@^2.12.0: 222 | version "2.12.0" 223 | resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.0.tgz#36ad62f6f73c8253fd6472517a12483cf03e7ec4" 224 | integrity sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ== 225 | dependencies: 226 | has "^1.0.3" 227 | 228 | is-extglob@^2.1.1: 229 | version "2.1.1" 230 | resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" 231 | integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ== 232 | 233 | is-glob@^4.0.1, is-glob@~4.0.1: 234 | version "4.0.3" 235 | resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" 236 | integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== 237 | dependencies: 238 | is-extglob "^2.1.1" 239 | 240 | is-number@^7.0.0: 241 | version "7.0.0" 242 | resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" 243 | integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== 244 | 245 | lodash@^4.17.21: 246 | version "4.17.21" 247 | resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" 248 | integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== 249 | 250 | nanoid@^3.3.4: 251 | version "3.3.6" 252 | resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" 253 | integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== 254 | 255 | normalize-path@^3.0.0, normalize-path@~3.0.0: 256 | version "3.0.0" 257 | resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" 258 | integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== 259 | 260 | path-parse@^1.0.7: 261 | version "1.0.7" 262 | resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" 263 | integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== 264 | 265 | picocolors@^1.0.0: 266 | version "1.0.0" 267 | resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" 268 | integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== 269 | 270 | picomatch@^2.0.4, picomatch@^2.2.1: 271 | version "2.3.1" 272 | resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" 273 | integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== 274 | 275 | postcss@^8.4.21: 276 | version "8.4.21" 277 | resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4" 278 | integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg== 279 | dependencies: 280 | nanoid "^3.3.4" 281 | picocolors "^1.0.0" 282 | source-map-js "^1.0.2" 283 | 284 | readdirp@~3.6.0: 285 | version "3.6.0" 286 | resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" 287 | integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== 288 | dependencies: 289 | picomatch "^2.2.1" 290 | 291 | resolve@^1.22.1: 292 | version "1.22.3" 293 | resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.3.tgz#4b4055349ffb962600972da1fdc33c46a4eb3283" 294 | integrity sha512-P8ur/gp/AmbEzjr729bZnLjXK5Z+4P0zhIJgBgzqRih7hL7BOukHGtSTA3ACMY467GRFz3duQsi0bDZdR7DKdw== 295 | dependencies: 296 | is-core-module "^2.12.0" 297 | path-parse "^1.0.7" 298 | supports-preserve-symlinks-flag "^1.0.0" 299 | 300 | rollup@^3.18.0: 301 | version "3.20.2" 302 | resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.20.2.tgz#f798c600317f216de2e4ad9f4d9ab30a89b690ff" 303 | integrity sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg== 304 | optionalDependencies: 305 | fsevents "~2.3.2" 306 | 307 | sass@^1.62.0: 308 | version "1.62.0" 309 | resolved "https://registry.yarnpkg.com/sass/-/sass-1.62.0.tgz#3686b2195b93295d20765135e562366b33ece37d" 310 | integrity sha512-Q4USplo4pLYgCi+XlipZCWUQz5pkg/ruSSgJ0WRDSb/+3z9tXUOkQ7QPYn4XrhZKYAK4HlpaQecRwKLJX6+DBg== 311 | dependencies: 312 | chokidar ">=3.0.0 <4.0.0" 313 | immutable "^4.0.0" 314 | source-map-js ">=0.6.2 <2.0.0" 315 | 316 | "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: 317 | version "1.0.2" 318 | resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" 319 | integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== 320 | 321 | supports-preserve-symlinks-flag@^1.0.0: 322 | version "1.0.0" 323 | resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" 324 | integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== 325 | 326 | to-regex-range@^5.0.1: 327 | version "5.0.1" 328 | resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4" 329 | integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ== 330 | dependencies: 331 | is-number "^7.0.0" 332 | 333 | vite@^4.2.0: 334 | version "4.2.1" 335 | resolved "https://registry.yarnpkg.com/vite/-/vite-4.2.1.tgz#6c2eb337b0dfd80a9ded5922163b94949d7fc254" 336 | integrity sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg== 337 | dependencies: 338 | esbuild "^0.17.5" 339 | postcss "^8.4.21" 340 | resolve "^1.22.1" 341 | rollup "^3.18.0" 342 | optionalDependencies: 343 | fsevents "~2.3.2" 344 | --------------------------------------------------------------------------------