diff --git a/public/flag-bg.webm b/public/flag-bg.webm new file mode 100644 index 0000000..01bfc6f Binary files /dev/null and b/public/flag-bg.webm differ diff --git a/src/assets/Acumin-BdItPro.woff b/src/assets/Acumin-BdItPro.woff new file mode 100644 index 0000000..48047be Binary files /dev/null and b/src/assets/Acumin-BdItPro.woff differ diff --git a/src/assets/Acumin-BdPro.woff b/src/assets/Acumin-BdPro.woff new file mode 100644 index 0000000..02886d2 Binary files /dev/null and b/src/assets/Acumin-BdPro.woff differ diff --git a/src/assets/Acumin-ItPro.woff b/src/assets/Acumin-ItPro.woff new file mode 100644 index 0000000..9af5ba3 Binary files /dev/null and b/src/assets/Acumin-ItPro.woff differ diff --git a/src/assets/Acumin-RPro.woff b/src/assets/Acumin-RPro.woff new file mode 100644 index 0000000..85487dc Binary files /dev/null and b/src/assets/Acumin-RPro.woff differ diff --git a/src/components/Header.vue b/src/components/Header.vue index e83be69..0a4ab80 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -13,13 +13,14 @@ home + nationals the kickoff news tournaments diff --git a/src/router/index.js b/src/router/index.js index cfef7de..e7f35c7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -36,6 +36,11 @@ Vue.use(VueRouter) name: 'Kickoff', component: () => import(/* webpackChunkName: "tournaments" */'../views/Kickoff.vue') }, + { + path: '/nationals', + name: 'Nationals', + component: () => import('../views/Nationals.vue') + }, { path: '*', name: 'NotFound', diff --git a/src/scss/main.scss b/src/scss/main.scss index 9efb42e..c88d8bb 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -29,7 +29,8 @@ 'pages/article', 'pages/tournaments', 'pages/about', - 'pages/kickoff'; + 'pages/kickoff', + 'pages/nationals'; @import 'themes/default'; diff --git a/src/scss/pages/_nationals.scss b/src/scss/pages/_nationals.scss new file mode 100644 index 0000000..9050115 --- /dev/null +++ b/src/scss/pages/_nationals.scss @@ -0,0 +1,148 @@ +@font-face { + src: url('assets/Acumin-RPro.woff'); + font-family: 'Acumin'; + font-weight: 500; +} + +@font-face { + src: url('assets/Acumin-BdPro.woff'); + font-family: 'Acumin'; + font-weight: 700; +} + +.btn { + font-family: $text-font-stack; +} + +.nationals { + font-family: 'Acumin', sans-serif; + line-height: 1.7; + letter-spacing: 1px; + overflow: hidden; + main { + font-weight: 500; + padding: 120px 0; + .bg { + position: fixed; + top: 0; + left: 0; + z-index: -1; + width: 100vw; + height: 100vh; + overflow: hidden; + } + .presenting { + font-weight: 700; + font-size: 16pt; + text-transform: uppercase; + letter-spacing: 2px; + text-align: center; + } + .heading { + padding: 50px 0; + font-weight: 700; + font-size: 16pt; + text-transform: uppercase; + text-align: center; + } + .brand { + display: flex; + flex-direction: column-reverse; + justify-content: center; + align-items: center; + img { + margin-top: 50px; + display: block; + max-width: 750px; + width: 100%; + &:first-child { + max-width: 150px; + } + } + } + .psyonix { + margin-top: 2em; + text-align: center; + img { + width: 150px; + } + } + .introp { + div { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; + } + } + .poster { + width: 100%; + overflow: hidden; + img { + width: 100%; + height: 100%; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); + } + } + .ftier { + padding-bottom: 0; + &.ind { + display: flex; + justify-content: center; + align-items: center; + img { + width: 30px; + display: inline-block; + margin-left: 10px; + } + } + } + .tier { + margin-top: 20px; + margin-bottom: 20px; + min-height: 300px; + max-width: 1200px; + position: relative; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + ul { + max-width: 550px; + div { + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; + img { + width: 30px; + display: inline-block; + margin-left: 10px; + } + } + } + a.btn { + margin: 0 auto; + margin-top: 10px; + } + } + .trailer { + width: 1280px; + height: 720px; + iframe { + width: 100%; + height: 100%; + } + } + } + .footer { + font-family: $text-font-stack; + width: 100%; + padding: 2rem 2rem; + background: lighten($bg-color, 20%); + text-align: center; + font-size: 1rem; + letter-spacing: 0.5px; + line-height: 1.5; + } +} \ No newline at end of file diff --git a/src/views/Nationals.vue b/src/views/Nationals.vue new file mode 100644 index 0000000..8c957ab --- /dev/null +++ b/src/views/Nationals.vue @@ -0,0 +1,98 @@ + \ No newline at end of file