diff --git a/src/router/index.js b/src/router/index.js index 5c780cd..ca97d6d 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -41,6 +41,11 @@ Vue.use(VueRouter) name: 'Nationals', component: () => import('../views/Nationals.vue') }, + { + path: '/regionalrumble', + name: 'RumbleMain', + component: () => import('../views/RegionalRumble.vue'), + }, { path: '/Nationals', redirect: '/nationals', diff --git a/src/scss/main.scss b/src/scss/main.scss index c88d8bb..3f3fbb7 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -30,7 +30,8 @@ 'pages/tournaments', 'pages/about', 'pages/kickoff', - 'pages/nationals'; + 'pages/nationals', + 'pages/rumble'; @import 'themes/default'; diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss new file mode 100644 index 0000000..3d3af1d --- /dev/null +++ b/src/scss/pages/_rumble.scss @@ -0,0 +1,127 @@ +.rumble { + display: flex; + flex-direction: column; + max-height: 100vh; + scroll-snap-type: y mandatory; + overflow-x: hidden; + overflow-y: scroll; + + section { + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + scroll-snap-align: start; + + &:nth-child(2) { + background: purple; + } + &:nth-child(3) { + background: coral; + } + } + + .intro { + position: relative; + flex-direction: column; + + .bg-only { + position: absolute; + top: 0; + left: 0; + height: 400%; + width: 400%; + overflow: hidden; + z-index: -1; + background-color: #161616; + opacity: 0.1; + rotate: 30deg; + transform: translate(-50%, 0); + background-image: linear-gradient(#ffffff 1.8px, transparent 1.8px), linear-gradient(90deg, #ffffff 1.8px, transparent 1.8px), linear-gradient(#ffffff 0.9px, transparent 0.9px), linear-gradient(90deg, #ffffff 0.9px, #161616 0.9px); + background-size: 45px 45px, 45px 45px, 9px 9px, 9px 9px; + background-position: -1.8px -1.8px, -1.8px -1.8px, -0.9px -0.9px, -0.9px -0.9px; + + animation: moveBg 30s ease-in-out infinite; + } + img { + width: 60vh; + display: block; + transition: 0.15s linear; + + &:hover { + cursor: pointer; + animation: logoHover 0.25s ease-in-out; + scale: 1.1; + filter: drop-shadow(0px 50px 15px rgba(white, 0.25)); + } + } + + .scroll-indicator { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + bottom: 5%; + rotate: 90deg; + text-transform: uppercase; + font-size: 0.8rem; + animation: moveScroll 2s ease-in-out infinite; + + &::after { + content: ''; + display: inline-block; + width: 30px; + height: 1px; + background: white; + } + } + } +} + +@keyframes moveBg { + 0% { + transform: translate(-50%, 0); + } + 50% { + transform: translate(-50%, 2%); + } + 100% { + transform: translate(-50%, 0); + } +} + +@keyframes logoHover { + 0% { + scale: 1; + rotate: 0; + } + 25% { + rotate: 2deg; + } + 50% { + rotate: -2deg; + } + 75% { + rotate: 2deg; + } + 100% { + scale: 1.1; + rotate: 0; + } +} + +@keyframes moveScroll { + 0% { + transform: translate(0, 0); + } + 10% { + transform: translate(10%, 0); + } + 20% { + transform: translate(0, 0); + } + 100% { + transform: translate(0, 0); + } +} diff --git a/src/views/AfricanRumble.vue b/src/views/AfricanRumble.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/views/AsianRumble.vue b/src/views/AsianRumble.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/views/MERumble.vue b/src/views/MERumble.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/views/RegionalRumble.vue b/src/views/RegionalRumble.vue new file mode 100644 index 0000000..3f5e461 --- /dev/null +++ b/src/views/RegionalRumble.vue @@ -0,0 +1,20 @@ + +