From 3e4d1ca13d0ef6f0a1d1f0248fe15cf34fe3bcd6 Mon Sep 17 00:00:00 2001 From: Ayush Mukherjee Date: Tue, 19 Sep 2023 19:31:04 +0530 Subject: [PATCH] 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 @@