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 @@