From 3f7f882d2a5f56f5d6d1a8612541b504a6f81db2 Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Mon, 18 Sep 2023 18:23:03 +0530 Subject: [PATCH 01/18] section 1 progress --- src/router/index.js | 5 ++ src/scss/main.scss | 3 +- src/scss/pages/_rumble.scss | 127 +++++++++++++++++++++++++++++++++++ src/views/AfricanRumble.vue | 0 src/views/AsianRumble.vue | 0 src/views/MERumble.vue | 0 src/views/RegionalRumble.vue | 20 ++++++ 7 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 src/scss/pages/_rumble.scss create mode 100644 src/views/AfricanRumble.vue create mode 100644 src/views/AsianRumble.vue create mode 100644 src/views/MERumble.vue create mode 100644 src/views/RegionalRumble.vue 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 @@ + + From 5e9101d0623f1d14b1623b466f71727db5aaab67 Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Mon, 18 Sep 2023 18:24:13 +0530 Subject: [PATCH 02/18] change bg move speed --- src/scss/pages/_rumble.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss index 3d3af1d..1858f7e 100644 --- a/src/scss/pages/_rumble.scss +++ b/src/scss/pages/_rumble.scss @@ -42,7 +42,7 @@ 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; + animation: moveBg 20s ease-in-out infinite; } img { width: 60vh; From 20afabf147f20dc51b0922e8a095e4a451cf732e Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Mon, 18 Sep 2023 20:19:48 +0530 Subject: [PATCH 03/18] finish sections 2 and 3 --- src/scss/pages/_rumble.scss | 173 +++++++++++++++++++++++++++++------ src/views/RegionalRumble.vue | 37 +++++++- 2 files changed, 178 insertions(+), 32 deletions(-) diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss index 1858f7e..5c3005f 100644 --- a/src/scss/pages/_rumble.scss +++ b/src/scss/pages/_rumble.scss @@ -6,6 +6,25 @@ overflow-x: hidden; overflow-y: scroll; + .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 20s ease-in-out infinite; + } + section { min-height: 100vh; display: flex; @@ -14,38 +33,15 @@ 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 20s ease-in-out infinite; - } - img { - width: 60vh; + + img.rumbleLogo { + min-width: 400px; + width: 30%; display: block; transition: 0.15s linear; @@ -57,6 +53,13 @@ } } + img.rlLogo { + min-width: 100px; + width: 7%; + display: block; + margin-top: 5.5rem; + } + .scroll-indicator { position: absolute; display: flex; @@ -77,6 +80,122 @@ } } } + + .info { + height: 100vh; + justify-content: flex-start; + + .trailer { + position: relative; + height: 100%; + width: 50%; + overflow: hidden; + + img { + position: absolute; + top: 0; + display: block; + width: 100%; + height: 100%; + rotate: -90deg; + z-index: -1; + } + + .overlay { + width: 100%; + height: 100%; + position: absolute; + top: 0; + background: rgba(0, 0, 0, 0.2); + display: grid; + place-items: center; + transition: 0.25s linear; + + svg { + width: 40px; + height: 40px; + fill: white; + } + + &:hover { + cursor: pointer; + background: rgba(0, 0, 0, 0.5); + } + } + } + + .textInfo { + height: 100%; + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + div { + display: flex; + align-items: center; + + h2 { + margin-left: 2rem; + text-shadow: 0 0 15px white; + } + } + } + } + + .selector { + width: 100%; + height: 100%; + overflow: hidden; + + div.apac, div.me, div.ssa { + position: relative; + width: calc(100vw / 3); + height: 100vh; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + transition: 0.15s ease-in; + + &.apac { + background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085dc28ca0frawkkim-KKz6NgO69yQ-unsplash.jpg'); + background-position: 25% 50%; + } + + &.me { + background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085e8004a71neom-9633dHhioC8-unsplash1.jpg'); + background-position: 50% 50%; + } + + &.ssa { + background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085e22e5166lina-loos-04-C1NZk1hE-unsplash.jpg'); + background-position: 40% 50%; + } + + &:hover { + width: calc(calc(100vw / 3) + 50%); + cursor: pointer; + } + + img { + width: 50%; + } + + .overlay { + position: absolute; + width: 100%; + height: 100%; + background: rgba(black, 0.05); + transition: 0.15s ease-in; + + &:hover { + background: rgba(black, 0.2); + } + } + } + } } @keyframes moveBg { diff --git a/src/views/RegionalRumble.vue b/src/views/RegionalRumble.vue index 3f5e461..067b19a 100644 --- a/src/views/RegionalRumble.vue +++ b/src/views/RegionalRumble.vue @@ -2,18 +2,45 @@
- Regional Rumble Logo - + +
scroll  
-
+
- Section 2 +
+ APL Regional Rumble Trailer +
+ +
+
+
+
+

3 Major Tournaments

+

$51,000 Prize Pool

+
+
+

15 Qualifiers

+

$24,000 Prize Pool

+
+
+
- Section 3 +
+
+ Regional Rumble APAC Logo +
+
+
+ Regional Rumble MENA Logo +
+
+
+ Regional Rumble SSA Logo +
From 253bf361e7f529f3422b65a63f0d20efcc6976e2 Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Mon, 18 Sep 2023 20:24:53 +0530 Subject: [PATCH 04/18] change animation timing function --- src/scss/pages/_rumble.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss index 5c3005f..0d82f6d 100644 --- a/src/scss/pages/_rumble.scss +++ b/src/scss/pages/_rumble.scss @@ -157,7 +157,7 @@ display: flex; justify-content: center; align-items: center; - transition: 0.15s ease-in; + transition: 0.15s ease-in-out; &.apac { background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085dc28ca0frawkkim-KKz6NgO69yQ-unsplash.jpg'); @@ -188,7 +188,7 @@ width: 100%; height: 100%; background: rgba(black, 0.05); - transition: 0.15s ease-in; + transition: 0.15s ease-in-out; &:hover { background: rgba(black, 0.2); From fcfa932f004c4bb77fa1f91424ecaf0ee82cf054 Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Mon, 18 Sep 2023 20:29:59 +0530 Subject: [PATCH 05/18] increase transition delay --- src/scss/pages/_rumble.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss index 0d82f6d..d79fe85 100644 --- a/src/scss/pages/_rumble.scss +++ b/src/scss/pages/_rumble.scss @@ -157,7 +157,7 @@ display: flex; justify-content: center; align-items: center; - transition: 0.15s ease-in-out; + transition: 0.35s ease; &.apac { background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085dc28ca0frawkkim-KKz6NgO69yQ-unsplash.jpg'); @@ -188,7 +188,7 @@ width: 100%; height: 100%; background: rgba(black, 0.05); - transition: 0.15s ease-in-out; + transition: 0.35s ease-in-out; &:hover { background: rgba(black, 0.2); From 443ed8a68c7679119a5e11f53037684aa3d072bf Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Mon, 18 Sep 2023 20:34:24 +0530 Subject: [PATCH 06/18] change transition length --- src/scss/pages/_rumble.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss index d79fe85..4b96020 100644 --- a/src/scss/pages/_rumble.scss +++ b/src/scss/pages/_rumble.scss @@ -157,7 +157,7 @@ display: flex; justify-content: center; align-items: center; - transition: 0.35s ease; + transition: 0.5s ease; &.apac { background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085dc28ca0frawkkim-KKz6NgO69yQ-unsplash.jpg'); @@ -188,7 +188,7 @@ width: 100%; height: 100%; background: rgba(black, 0.05); - transition: 0.35s ease-in-out; + transition: 0.5s ease-in-out; &:hover { background: rgba(black, 0.2); From d29fe7347f724175b66ad8f41d07be11c9e714e6 Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Tue, 19 Sep 2023 13:05:26 +0530 Subject: [PATCH 07/18] remove section 2, finish new section 2 and add footer --- src/scss/pages/_rumble.scss | 84 +++++++----------------------------- src/views/RegionalRumble.vue | 71 ++++++++++++++++++++---------- 2 files changed, 64 insertions(+), 91 deletions(-) diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss index 4b96020..f7ffd39 100644 --- a/src/scss/pages/_rumble.scss +++ b/src/scss/pages/_rumble.scss @@ -81,75 +81,12 @@ } } - .info { - height: 100vh; - justify-content: flex-start; - - .trailer { - position: relative; - height: 100%; - width: 50%; - overflow: hidden; - - img { - position: absolute; - top: 0; - display: block; - width: 100%; - height: 100%; - rotate: -90deg; - z-index: -1; - } - - .overlay { - width: 100%; - height: 100%; - position: absolute; - top: 0; - background: rgba(0, 0, 0, 0.2); - display: grid; - place-items: center; - transition: 0.25s linear; - - svg { - width: 40px; - height: 40px; - fill: white; - } - - &:hover { - cursor: pointer; - background: rgba(0, 0, 0, 0.5); - } - } - } - - .textInfo { - height: 100%; - width: 50%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - div { - display: flex; - align-items: center; - - h2 { - margin-left: 2rem; - text-shadow: 0 0 15px white; - } - } - } - } - .selector { width: 100%; height: 100%; overflow: hidden; - div.apac, div.me, div.ssa { + div { position: relative; width: calc(100vw / 3); height: 100vh; @@ -184,18 +121,27 @@ } .overlay { + display: block; position: absolute; width: 100%; height: 100%; - background: rgba(black, 0.05); + background: rgba(black, 0); transition: 0.5s ease-in-out; - - &:hover { - background: rgba(black, 0.2); - } } } } + section.footer { + font-family: $text-font-stack; + width: 100%; + min-height: 200px; + height: 200px; + padding: 2rem 2rem; + background: lighten($bg-color, 20%); + text-align: center; + font-size: 1rem; + letter-spacing: 0.5px; + line-height: 1.5; + } } @keyframes moveBg { diff --git a/src/views/RegionalRumble.vue b/src/views/RegionalRumble.vue index 067b19a..6a935ed 100644 --- a/src/views/RegionalRumble.vue +++ b/src/views/RegionalRumble.vue @@ -9,39 +9,66 @@ -
-
- APL Regional Rumble Trailer -
- -
-
-
-
-

3 Major Tournaments

-

$51,000 Prize Pool

-
-
-

15 Qualifiers

-

$24,000 Prize Pool

-
-
-
-
-
+ Regional Rumble APAC Logo
-
+ Regional Rumble MENA Logo
-
+ Regional Rumble SSA Logo
+
+ Rocket League, Psyonix, and all related marks and logos are trademarks or registered trademarks of Psyonix LLC and used under license. © 2015-2023 Licensed by Psyonix LLC, All rights reserved. All other trademarks are property of their respective owners. +
+ From e20a4d36d40b67266cc7d69fe979683c7052be6f Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Tue, 19 Sep 2023 14:28:01 +0530 Subject: [PATCH 08/18] finish regional rumble landing --- src/components/Header.vue | 8 ++- src/scss/pages/_rumble.scss | 127 +++++++++++++++++++++++++++++++++-- src/views/RegionalRumble.vue | 3 + 3 files changed, 130 insertions(+), 8 deletions(-) diff --git a/src/components/Header.vue b/src/components/Header.vue index 0a4ab80..645a589 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -13,8 +13,9 @@
home + RegionalRumble nationals - the kickoff + news tournaments team @@ -31,8 +32,9 @@
home + RegionalRumble nationals - the kickoff + news tournaments team @@ -98,4 +100,4 @@ export default { } } } - \ No newline at end of file + diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss index f7ffd39..767864c 100644 --- a/src/scss/pages/_rumble.scss +++ b/src/scss/pages/_rumble.scss @@ -38,12 +38,21 @@ .intro { position: relative; flex-direction: column; + + img.rumbleLogo, + img.rumbleRedLogo, + img.rumbleGreenLogo, + img.rumbleYellowLogo { + position: absolute; + display: block; + } img.rumbleLogo { - min-width: 400px; - width: 30%; - display: block; + top: 20%; + width: calc(100vw * 0.8); + max-width: 600px; transition: 0.15s linear; + z-index: 5; &:hover { cursor: pointer; @@ -53,11 +62,34 @@ } } + img.rumbleRedLogo, + img.rumbleGreenLogo, + img.rumbleYellowLogo { + top: 20%; + min-width: 400px; + width: 40%; + max-width: 840px; + visibility: hidden; + } + + img.rumbleLogo:hover ~ img.rumbleRedLogo { + animation: logoRedDisplay 0.25s ease-in-out; + } + + img.rumbleLogo:hover ~ img.rumbleGreenLogo { + animation: logoGreenDisplay 0.25s ease-in-out; + } + + img.rumbleLogo:hover ~ img.rumbleYellowLogo { + animation: logoYellowDisplay 0.25s ease-in-out; + } + img.rlLogo { + position: absolute; min-width: 100px; width: 7%; display: block; - margin-top: 5.5rem; + bottom: 10rem; } .scroll-indicator { @@ -94,7 +126,7 @@ display: flex; justify-content: center; align-items: center; - transition: 0.5s ease; + transition: all 0.5s ease; &.apac { background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085dc28ca0frawkkim-KKz6NgO69yQ-unsplash.jpg'); @@ -176,6 +208,60 @@ } } +@keyframes logoRedDisplay { + 0% { + visibility: hidden; + } + 25% { + visibility: visible; + } + 40% { + visibility: hidden; + } + 75% { + visibility: hidden; + } + 100% { + visibility: hidden; + } +} + +@keyframes logoGreenDisplay { + 0% { + visibility: hidden; + } + 25% { + visibility: hidden; + } + 50% { + visibility: visible; + } + 60% { + visibility: hidden; + } + 100% { + visibility: hidden; + } +} + +@keyframes logoYellowDisplay { + 0% { + visibility: hidden; + } + 25% { + visibility: hidden; + } + 50% { + visibility: hidden; + } + 75% { + visibility: visible; + } + 90% { + visibility: hidden; + } +} + @keyframes moveScroll { 0% { transform: translate(0, 0); @@ -190,3 +276,34 @@ transform: translate(0, 0); } } + +@media screen and (max-width: 960px) { + .rumble > .selector { + flex-direction: column; + + div { + width: 100vw; + height: calc(100vh / 3); + + img { + width: auto; + min-height: 100px; + height: 30%; + transition: 0.5s ease; + } + + &:hover { + width: 100vw; + height: 70vh; + } + + &.apac:hover > img { + margin-top: 50%; + } + + &.ssa:hover > img { + margin-bottom: 50%; + } + } + } +} diff --git a/src/views/RegionalRumble.vue b/src/views/RegionalRumble.vue index 6a935ed..5ed03e9 100644 --- a/src/views/RegionalRumble.vue +++ b/src/views/RegionalRumble.vue @@ -3,6 +3,9 @@
+ + +
scroll   From 2cdc967c104027878fa58da57bcd65c877eef27d Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Tue, 19 Sep 2023 15:24:52 +0530 Subject: [PATCH 09/18] change hero section positions/sizes --- src/scss/pages/_rumble.scss | 39 +++++++++++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss index 767864c..8a1d690 100644 --- a/src/scss/pages/_rumble.scss +++ b/src/scss/pages/_rumble.scss @@ -37,7 +37,7 @@ .intro { position: relative; - flex-direction: column; + flex-direction: row; img.rumbleLogo, img.rumbleRedLogo, @@ -48,9 +48,11 @@ } img.rumbleLogo { - top: 20%; - width: calc(100vw * 0.8); - max-width: 600px; + top: 47%; + bottom: 63%; + margin: auto; + width: 30%; + max-width: 576px; transition: 0.15s linear; z-index: 5; @@ -65,9 +67,12 @@ img.rumbleRedLogo, img.rumbleGreenLogo, img.rumbleYellowLogo { - top: 20%; - min-width: 400px; - width: 40%; + left: 0; + right: 0; + top: 50%; + bottom: 50%; + margin: auto; + width: 28%; max-width: 840px; visibility: hidden; } @@ -89,7 +94,12 @@ min-width: 100px; width: 7%; display: block; - bottom: 10rem; + align-self: flex-end; + left: 0; + right: 0; + top: 62%; + bottom: 0; + margin: auto; } .scroll-indicator { @@ -278,6 +288,19 @@ } @media screen and (max-width: 960px) { + .rumble > .intro { + img.rumbleLogo { + width: calc(100vw * 0.8); + } + + img.rumbleRedLogo, + img.rumbleGreenLogo, + img.rumbleYellowLogo { + width: 95%; + } + + } + .rumble > .selector { flex-direction: column; From 4d32436018b8d35c26be947ead9cf60252205557 Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Tue, 19 Sep 2023 18:24:47 +0530 Subject: [PATCH 10/18] fix header not turning dark on scroll --- src/scss/pages/_rumble.scss | 8 ++++++-- src/views/RegionalRumble.vue | 20 +++++++++++++++++--- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss index 8a1d690..09d7a87 100644 --- a/src/scss/pages/_rumble.scss +++ b/src/scss/pages/_rumble.scss @@ -1,3 +1,7 @@ +.scroll { + background: rgba(black, 0.5) !important; +} + .rumble { display: flex; flex-direction: column; @@ -97,7 +101,7 @@ align-self: flex-end; left: 0; right: 0; - top: 62%; + top: 60%; bottom: 0; margin: auto; } @@ -162,7 +166,7 @@ width: 50%; } - .overlay { + .unoverlay { display: block; position: absolute; width: 100%; diff --git a/src/views/RegionalRumble.vue b/src/views/RegionalRumble.vue index 5ed03e9..1e89252 100644 --- a/src/views/RegionalRumble.vue +++ b/src/views/RegionalRumble.vue @@ -14,15 +14,15 @@
- + Regional Rumble APAC Logo
- + Regional Rumble MENA Logo
- + Regional Rumble SSA Logo
@@ -36,6 +36,20 @@ export default { name: 'RegionalRumble', mounted() { + const h = document.querySelector('header'); + const container = document.querySelector('.rumble'); + container.addEventListener('scroll', () => { + if(container.scrollTop > 128) { + if(!h.classList.contains('scroll')) { + h.classList.add('scroll') + } + } else { + if(h.classList.contains('scroll')) { + h.classList.remove('scroll') + } + } + }); + const apac = document.querySelector('.apac')[0]; const apac_overlay = document.querySelector('.apac span'); const me = document.querySelector('.me')[0]; From 3e4d1ca13d0ef6f0a1d1f0248fe15cf34fe3bcd6 Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Tue, 19 Sep 2023 19:31:04 +0530 Subject: [PATCH 11/18] finish regional pages --- src/components/Header.vue | 8 +- src/router/index.js | 25 ++++-- src/scss/main.scss | 3 +- src/scss/pages/_rumble.scss | 4 - src/scss/pages/_rumbleregions.scss | 135 +++++++++++++++++++++++++++++ src/views/AfricanRumble.vue | 44 ++++++++++ src/views/AsianRumble.vue | 45 ++++++++++ src/views/MERumble.vue | 45 ++++++++++ src/views/RegionalRumble.vue | 12 ++- 9 files changed, 304 insertions(+), 17 deletions(-) create mode 100644 src/scss/pages/_rumbleregions.scss diff --git a/src/components/Header.vue b/src/components/Header.vue index 645a589..fafd5c7 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -19,7 +19,7 @@ news tournaments team - discord + discord
@@ -35,12 +35,12 @@ RegionalRumble nationals - news + news tournaments team - discord + discord - donate + diff --git a/src/router/index.js b/src/router/index.js index ca97d6d..f4786a4 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -41,11 +41,6 @@ Vue.use(VueRouter) name: 'Nationals', component: () => import('../views/Nationals.vue') }, - { - path: '/regionalrumble', - name: 'RumbleMain', - component: () => import('../views/RegionalRumble.vue'), - }, { path: '/Nationals', redirect: '/nationals', @@ -55,6 +50,26 @@ Vue.use(VueRouter) name: 'Nationals Register', component: () => import('../views/NationalsRegister.vue') }, + { + path: '/regionalrumble', + name: 'RumbleMain', + component: () => import('../views/RegionalRumble.vue'), + }, + { + path: '/regionalrumble/apac', + name: 'RumbleApac', + component: () => import('../views/AsianRumble.vue'), + }, + { + path: '/regionalrumble/mena', + name: 'RumbleMena', + component: () => import('../views/MERumble.vue'), + }, + { + path: '/regionalrumble/ssa', + name: 'RumbleSsa', + component: () => import('../views/AfricanRumble.vue'), + }, { path: '*', name: 'NotFound', diff --git a/src/scss/main.scss b/src/scss/main.scss index 3f3fbb7..6dd2955 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -31,7 +31,8 @@ 'pages/about', 'pages/kickoff', 'pages/nationals', - 'pages/rumble'; + 'pages/rumble', + 'pages/rumbleregions'; @import 'themes/default'; diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss index 09d7a87..617eb8d 100644 --- a/src/scss/pages/_rumble.scss +++ b/src/scss/pages/_rumble.scss @@ -1,7 +1,3 @@ -.scroll { - background: rgba(black, 0.5) !important; -} - .rumble { display: flex; flex-direction: column; diff --git a/src/scss/pages/_rumbleregions.scss b/src/scss/pages/_rumbleregions.scss new file mode 100644 index 0000000..adad8b1 --- /dev/null +++ b/src/scss/pages/_rumbleregions.scss @@ -0,0 +1,135 @@ +.regional { + .bg-only { + position: fixed; + 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 20s ease-in-out infinite; + } + section { + min-height: 100vh; + + &.hero { + position: relative; + + img { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + min-width: 300px; + width: 20%; + max-width: 500px; + } + + .goback { + padding-top: 100px; + margin: 0 auto; + display: flex; + flex-direction: row; + max-width: 300px; + justify-content: space-evenly; + align-items: center; + + p { + font-size: 14pt; + } + svg { + width: 24px; + height: 24px; + fill: white; + } + + &:hover { + cursor: pointer; + + p { + text-decoration-line: underline; + } + } + } + } + + &.info { + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .infomercial { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: calc(100vw / 2); + } + } + } + + &.trailer { + min-height: 100vh; + display: grid; + place-items: center; + padding: 1rem 2rem; + + iframe { + width: 100%; + height: 100%; + max-width: 1280px; + max-height: 720px; + } + } + } +} + +@keyframes moveBg { + 0% { + transform: translate(-50%, 0); + } + 50% { + transform: translate(-50%, 2%); + } + 100% { + transform: translate(-50%, 0); + } +} + +@media screen and (max-width: 960px) { + .regional > section.info { + padding: 1rem 2rem; + margin-bottom: 5rem; + + .infomercial { + flex-direction: column; + width: 100%; + height: 100%; + + div { + width: 100%; + height: 100%; + justify-content: space-evenly; + align-items: flex-start; + } + } + } +} diff --git a/src/views/AfricanRumble.vue b/src/views/AfricanRumble.vue index e69de29..6e10e3d 100644 --- a/src/views/AfricanRumble.vue +++ b/src/views/AfricanRumble.vue @@ -0,0 +1,44 @@ + + + diff --git a/src/views/AsianRumble.vue b/src/views/AsianRumble.vue index e69de29..bf4e0d8 100644 --- a/src/views/AsianRumble.vue +++ b/src/views/AsianRumble.vue @@ -0,0 +1,45 @@ + + + diff --git a/src/views/MERumble.vue b/src/views/MERumble.vue index e69de29..2615e43 100644 --- a/src/views/MERumble.vue +++ b/src/views/MERumble.vue @@ -0,0 +1,45 @@ + + + diff --git a/src/views/RegionalRumble.vue b/src/views/RegionalRumble.vue index 1e89252..e18f3a4 100644 --- a/src/views/RegionalRumble.vue +++ b/src/views/RegionalRumble.vue @@ -13,15 +13,15 @@
-
+
Regional Rumble APAC Logo
-
+
Regional Rumble MENA Logo
-
+
Regional Rumble SSA Logo
@@ -35,6 +35,12 @@