removing commit history
commit
d89b33e2c1
@ -0,0 +1,3 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
# aplesports
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "aplesports",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"aos": "^2.3.4",
|
||||||
|
"axios": "^0.19.2",
|
||||||
|
"core-js": "^3.8.1",
|
||||||
|
"countup.js": "^2.0.7",
|
||||||
|
"markdown-it": "^10.0.0",
|
||||||
|
"vue": "^2.6.12",
|
||||||
|
"vue-matomo": "^3.13.5-0",
|
||||||
|
"vue-router": "^3.4.9",
|
||||||
|
"vue-twitter": "^0.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "^4.5.9",
|
||||||
|
"@vue/cli-plugin-router": "^4.5.9",
|
||||||
|
"@vue/cli-service": "^4.5.9",
|
||||||
|
"sass": "^1.32.0",
|
||||||
|
"sass-loader": "^8.0.2",
|
||||||
|
"vue-template-compiler": "^2.6.12"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
Binary file not shown.
|
After Width: | Height: | Size: 871 B |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- compat -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
|
||||||
|
<!-- Facebook/Open Graph -->
|
||||||
|
<meta property="og:title" content="APL Esports">
|
||||||
|
<meta property="og:description" content="An independent tournament organiser that combines the experience of various community figures in Asia to produce premier tournaments.">
|
||||||
|
<meta property="og:image" content="https://cms.aplesports.com/storage/uploads/2020/04/21/5e9f20df6a8c0apl-new.png">
|
||||||
|
<meta property="og:url" content="https://aplesports.com">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta property="twitter:title" content="APL Esports">
|
||||||
|
<meta property="twitter:description" content="An independent tournament organiser that combines the experience of various community figures in Asia to produce premier tournaments.">
|
||||||
|
<meta property="twitter:image" content="https://cms.aplesports.com/storage/uploads/2020/04/21/5e9f20df6a8c0apl-new.png">
|
||||||
|
<meta property="twitter:card" content="summary_large_image">
|
||||||
|
|
||||||
|
<!-- favicon -->
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="site.webmanifest">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
|
||||||
|
<!-- nprogress -->
|
||||||
|
<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
|
||||||
|
|
||||||
|
<!-- Animate -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
|
||||||
|
|
||||||
|
<!-- AOS -->
|
||||||
|
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
||||||
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- fonts -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Raleway:wght@400;500;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- title -->
|
||||||
|
<title>APL Esports</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but APL Esports doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
<script>
|
||||||
|
AOS.init();
|
||||||
|
|
||||||
|
// window.onpaint = function() {
|
||||||
|
// // NProgress.configure({ showSpinner: false })
|
||||||
|
// // NProgress.start()
|
||||||
|
// alert('test');
|
||||||
|
// };
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
NProgress.done()
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<Header></Header>
|
||||||
|
<router-view/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios';
|
||||||
|
import Header from '@/components/Header.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Header
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import './scss/main.scss';
|
||||||
|
</style>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/></svg>
|
||||||
|
After Width: | Height: | Size: 181 B |
@ -0,0 +1,99 @@
|
|||||||
|
<template>
|
||||||
|
<header>
|
||||||
|
<div class="wrapper">
|
||||||
|
<img src="https://cms.aplesports.com/storage/uploads/2020/04/23/5ea18b0a28273APL_New.png" alt="APL Esports Logo">
|
||||||
|
<nav>
|
||||||
|
<div class="menu" @click="openMenu()">
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div class="bar"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay animate__animated animate__fadeIn"></div>
|
||||||
|
|
||||||
|
<div class="links">
|
||||||
|
<router-link :to="{ name: 'Home' }">home</router-link>
|
||||||
|
<router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''">the kickoff</router-link>
|
||||||
|
<router-link :to="{ name: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''">news</router-link>
|
||||||
|
<router-link :to="{ name: 'Tournaments' }">tournaments</router-link>
|
||||||
|
<router-link :to="{ name: 'Team' }">team</router-link>
|
||||||
|
<a href="https://discord.aplesports.com" target="_blank">discord</a>
|
||||||
|
<!-- <a href="https://www.patreon.com/apl_esports" target="_blank">patreon</a> -->
|
||||||
|
<a href="https://donate.aplesports.com" target="_blank">donate</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="links_mobile animate__animated animate__slideInRight">
|
||||||
|
<div class="close" @click="closeMenu()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<router-link :to="{ name: 'Home' }" @click.native="closeMenu()">home</router-link>
|
||||||
|
<router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">the kickoff</router-link>
|
||||||
|
<router-link :to="{ name: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">news</router-link>
|
||||||
|
<router-link :to="{ name: 'Tournaments' }" @click.native="closeMenu()">tournaments</router-link>
|
||||||
|
<router-link :to="{ name: 'Team' }" @click.native="closeMenu()">team</router-link>
|
||||||
|
<a href="https://discord.aplesports.com" target="_blank" @click.native="closeMenu()">discord</a>
|
||||||
|
<!-- <a href="https://www.patreon.com/apl_esports" target="_blank" @click.native="closeMenu()">patreon</a> -->
|
||||||
|
<a href="https://donate.aplesports.com" target="_blank" @click.native="closeMenu()">donate</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
let h = document.querySelector('header');
|
||||||
|
if(document.body.scrollTop > 128 || document.documentElement.scrollTop > 128) {
|
||||||
|
if(!h.classList.contains('scroll')) {
|
||||||
|
h.classList.add('scroll')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if(h.classList.contains('scroll')) {
|
||||||
|
h.classList.remove('scroll')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
openMenu() {
|
||||||
|
if(document.querySelector('.overlay').classList.contains('animate__fadeOut')) {
|
||||||
|
document.querySelector('.overlay').classList.remove('animate__fadeOut');
|
||||||
|
}
|
||||||
|
|
||||||
|
if(document.querySelector('.links_mobile').classList.contains('animate__slideOutRight')) {
|
||||||
|
document.querySelector('.links_mobile').classList.remove('animate__slideOutRight');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector('.overlay').classList.add('animate__fadeIn');
|
||||||
|
document.querySelector('.links_mobile').classList.add('animate__slideInRight');
|
||||||
|
|
||||||
|
document.querySelector('body').style.overflowY = "hidden";
|
||||||
|
document.querySelector('.overlay').style.display = "flex";
|
||||||
|
document.querySelector('.links_mobile').style.display = "flex";
|
||||||
|
},
|
||||||
|
closeMenu() {
|
||||||
|
if(document.querySelector('.overlay').classList.contains('animate__fadeIn')) {
|
||||||
|
document.querySelector('.overlay').classList.remove('animate__fadeIn');
|
||||||
|
}
|
||||||
|
|
||||||
|
if(document.querySelector('.links_mobile').classList.contains('animate__slideInRight')) {
|
||||||
|
document.querySelector('.links_mobile').classList.remove('animate__slideInRight');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector('.overlay').classList.add('animate__fadeOut');
|
||||||
|
document.querySelector('.links_mobile').classList.add('animate__slideOutRight');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelector('.overlay').style.display = "none";
|
||||||
|
document.querySelector('.links_mobile').style.display = "none";
|
||||||
|
document.querySelector('body').style.overflowY = "scroll";
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import VueMatomo from 'vue-matomo'
|
||||||
|
|
||||||
|
Vue.use(VueMatomo, {
|
||||||
|
host: 'https://matomo.ayushm.com',
|
||||||
|
siteId: 1,
|
||||||
|
router: router,
|
||||||
|
enableLinkTracking: true,
|
||||||
|
domains: '*.aplespots.com'
|
||||||
|
})
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import Home from '../views/Home.vue'
|
||||||
|
import NotFound from '../views/NotFound.vue'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Home',
|
||||||
|
component: Home
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/team',
|
||||||
|
name: 'Team',
|
||||||
|
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/news',
|
||||||
|
name: 'News',
|
||||||
|
component: () => import(/* webpackChunkName: "news" */'../views/News.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/news/:id',
|
||||||
|
name: 'Article',
|
||||||
|
component: () => import(/* webpackChunkName: "news" */'../views/Article.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/tournaments',
|
||||||
|
name: 'Tournaments',
|
||||||
|
component: () => import(/* webpackChunkName: "tournaments" */'../views/Tournaments.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/thekickoff',
|
||||||
|
name: 'Kickoff',
|
||||||
|
component: () => import(/* webpackChunkName: "tournaments" */'../views/Kickoff.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '*',
|
||||||
|
name: 'NotFound',
|
||||||
|
component: NotFound
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
linkExactActiveClass: 'active',
|
||||||
|
routes,
|
||||||
|
scrollBehavior (to, from, savedPosition) {
|
||||||
|
if (to.hash) {
|
||||||
|
return { selector: to.hash }
|
||||||
|
} else if (savedPosition) {
|
||||||
|
return savedPosition;
|
||||||
|
} else {
|
||||||
|
return { x: 0, y: 0 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
router.beforeResolve((to, from, next) => {
|
||||||
|
if(to.name) {
|
||||||
|
NProgress.configure({ showSpinner: false })
|
||||||
|
NProgress.start()
|
||||||
|
}
|
||||||
|
next()
|
||||||
|
})
|
||||||
|
|
||||||
|
router.afterEach((to, from) => {
|
||||||
|
NProgress.done()
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// This file contains all application-wide Sass mixins.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/// Event wrapper
|
||||||
|
/// @author Harry Roberts
|
||||||
|
/// @param {Bool} $self [false] - Whether or not to include current selector
|
||||||
|
/// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
|
||||||
|
@mixin on-event($self: false) {
|
||||||
|
@if $self {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Make a context based selector a little more friendly
|
||||||
|
/// @author Hugo Giraudel
|
||||||
|
/// @param {String} $context
|
||||||
|
@mixin when-inside($context) {
|
||||||
|
#{$context} & {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// This file contains all application-wide Sass variables.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
/// Regular font family
|
||||||
|
/// @type List
|
||||||
|
$text-font-stack: 'Raleway', 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
|
||||||
|
|
||||||
|
/// Logo font family
|
||||||
|
$text-logo: 'Montserrat' !default;
|
||||||
|
|
||||||
|
/// Code (monospace) font family
|
||||||
|
/// @type List
|
||||||
|
$code-font-stack: 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace !default;
|
||||||
|
|
||||||
|
|
||||||
|
/// Copy text color
|
||||||
|
/// @type Color
|
||||||
|
$text-color: white !default;
|
||||||
|
|
||||||
|
/// Background Color
|
||||||
|
/// @type Color
|
||||||
|
$bg-color: #191919 !default;
|
||||||
|
|
||||||
|
/// Main brand color
|
||||||
|
/// @type Color
|
||||||
|
$brand-color: #d32f2f !default;
|
||||||
|
|
||||||
|
/// Light grey
|
||||||
|
/// @type Color
|
||||||
|
$light-grey: rgb(237, 237, 237) !default;
|
||||||
|
|
||||||
|
/// Medium grey
|
||||||
|
/// @type Color
|
||||||
|
$mid-grey: rgb(153, 153, 153) !default;
|
||||||
|
|
||||||
|
/// Dark grey
|
||||||
|
/// @type Color
|
||||||
|
$dark-grey: rgb(68, 68, 68) !default;
|
||||||
|
|
||||||
|
|
||||||
|
/// Container's maximum width
|
||||||
|
/// @type Length
|
||||||
|
$max-width: 75% !default;
|
||||||
|
|
||||||
|
|
||||||
|
/// Breakpoints map
|
||||||
|
/// @prop {String} keys - Keys are identifiers mapped to a given length
|
||||||
|
/// @prop {Map} values - Values are actual breakpoints expressed in pixels
|
||||||
|
$breakpoints: (
|
||||||
|
'small': 320px,
|
||||||
|
'medium': 768px,
|
||||||
|
'large': 1024px,
|
||||||
|
) !default;
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// This file contains very basic styles.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set up a decent box model on the root element
|
||||||
|
*/
|
||||||
|
html, body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: $bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Make all elements from the DOM inherit from the parent box-sizing
|
||||||
|
* Since `*` has a specificity of 0, it does not override the `html` value
|
||||||
|
* making all elements inheriting from the root box-sizing value
|
||||||
|
* See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
||||||
|
*/
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Basic styles for links
|
||||||
|
*/
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Paragraph styling
|
||||||
|
*/
|
||||||
|
p {
|
||||||
|
letter-spacing: .05em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* NProgress CSS
|
||||||
|
*/
|
||||||
|
#nprogress .bar {
|
||||||
|
background: $brand-color;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// This file contains all @font-face declarations, if any.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// This file contains CSS helper classes.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear inner floats
|
||||||
|
*/
|
||||||
|
.clearfix::after {
|
||||||
|
clear: both;
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Main content containers
|
||||||
|
* 1. Make the container full-width with a maximum width
|
||||||
|
* 2. Center it in the viewport
|
||||||
|
* 3. Leave some space on the edges, especially valuable on small screens
|
||||||
|
*/
|
||||||
|
.container {
|
||||||
|
max-width: $max-width; /* 1 */
|
||||||
|
margin-left: auto; /* 2 */
|
||||||
|
margin-right: auto; /* 2 */
|
||||||
|
padding-left: 20px; /* 3 */
|
||||||
|
padding-right: 20px; /* 3 */
|
||||||
|
width: 100%; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapping {
|
||||||
|
padding-top: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide text while making it readable for screen readers
|
||||||
|
* 1. Needed in WebKit-based browsers because of an implementation bug;
|
||||||
|
* See: https://code.google.com/p/chromium/issues/detail?id=457146
|
||||||
|
*/
|
||||||
|
.hide-text {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0; /* 1 */
|
||||||
|
text-indent: 101%;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide element while making it readable for screen readers
|
||||||
|
* Shamelessly borrowed from HTML5Boilerplate:
|
||||||
|
* https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
|
||||||
|
*/
|
||||||
|
.visually-hidden {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 960px) {
|
||||||
|
.container {
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
/**
|
||||||
|
* Basic typography style for copy text
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
color: $text-color;
|
||||||
|
font: normal 125% / 1.4 $text-font-stack;
|
||||||
|
}
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// This file contains all styles related to the button component.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
.btn {
|
||||||
|
background: #393939;
|
||||||
|
position: relative;
|
||||||
|
color: $text-color;
|
||||||
|
width: 250px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 25x;
|
||||||
|
transform: perspective(1) translateZ(0);
|
||||||
|
transition: 0.3s ease-in;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
background: $brand-color;
|
||||||
|
height: 50px;
|
||||||
|
width: 250px;
|
||||||
|
// top: 0;
|
||||||
|
// left: 0;
|
||||||
|
// bottom: 0;
|
||||||
|
// right: 0;
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: 0 50%;
|
||||||
|
// border-top-left-radius: 5px;
|
||||||
|
// border-bottom-left-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background: $brand-color;
|
||||||
|
height: 50px;
|
||||||
|
width: 15px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
transition: 0.5s ease-in;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
.horizontal-card {
|
||||||
|
margin: 30px 0;
|
||||||
|
padding: 15px;
|
||||||
|
background: lighten(black, 20%);
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 500px 1fr;
|
||||||
|
grid-gap: 30px;
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
.card__header {
|
||||||
|
max-width: 500px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
.card__header__img {
|
||||||
|
background: lighten(black, 15%);
|
||||||
|
max-width: 500px;
|
||||||
|
height: 220px;
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__body {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.card__body__title {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__body__author {
|
||||||
|
margin-top: 3px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1em;
|
||||||
|
fill: $text-color;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 15px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__body__content {
|
||||||
|
margin-top: 15px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
a, a:active, a:visited {
|
||||||
|
color: $brand-color;
|
||||||
|
transition: 0.2s ease-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: lighten($brand-color, 40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__body__cta {
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
a, a:visited, a:active {
|
||||||
|
width: 150px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: $brand-color;
|
||||||
|
border-radius: 15px;
|
||||||
|
color: $text-color;
|
||||||
|
font-size: 0.9em;
|
||||||
|
transition: .3s ease-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $brand-color;
|
||||||
|
background: $text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1200px) {
|
||||||
|
.horizontal-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.card__header {
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
.card__header__img {
|
||||||
|
height: 200px;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__body {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
.title {
|
||||||
|
font-size: 25pt;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
&.main {
|
||||||
|
height: 100%;
|
||||||
|
font-size: 32pt;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
.vertical-card {
|
||||||
|
position: relative;
|
||||||
|
width: 400px;
|
||||||
|
height: 480px;
|
||||||
|
padding: 25px 20px;
|
||||||
|
background: lighten(black, 20%);
|
||||||
|
border-radius: 15px;
|
||||||
|
transition: 0.2s ease-out;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.card__header {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.card__header__img {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__header__title {
|
||||||
|
font-size: 1.3em;
|
||||||
|
font-weight:500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__arrow {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 20px;
|
||||||
|
fill: white;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 25px;
|
||||||
|
transition: 0.2s ease-in;
|
||||||
|
left: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__body {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 70%;
|
||||||
|
margin-top: 150px;
|
||||||
|
text-align: center;
|
||||||
|
transition: 0.2s ease-out;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
margin-right: 5px;
|
||||||
|
width: 20px;
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__body__cta {
|
||||||
|
a, a:visited, a:active {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 150px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: $brand-color;
|
||||||
|
border-radius: 15px;
|
||||||
|
color: $text-color;
|
||||||
|
font-size: 0.9em;
|
||||||
|
transition: .3s ease-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $brand-color;
|
||||||
|
background: $text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
height: 650px;
|
||||||
|
|
||||||
|
.card__arrow {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__body {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// This file contains all styles related to the footer of the site/application.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
@ -0,0 +1,161 @@
|
|||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// This file contains all styles related to the header of the site/application.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
header {
|
||||||
|
// background: #292929;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 64px;
|
||||||
|
z-index: 10;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
.menu {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
width: 30px;
|
||||||
|
height: 2px;
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
align-self: flex-end;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
margin: 6px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
display: none;
|
||||||
|
// animation-delay: 0.3s;
|
||||||
|
animation-duration: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
width: 600px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.close {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:visited,
|
||||||
|
a:active {
|
||||||
|
font-size: 10pt;
|
||||||
|
color: white;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.3s linear;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-bottom: 4px solid $brand-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $brand-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.links_mobile {
|
||||||
|
display: none;
|
||||||
|
animation-duration: 0.4s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.scroll {
|
||||||
|
background: #292929;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 960px) {
|
||||||
|
header {
|
||||||
|
height: 64px;
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
img {
|
||||||
|
width: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: calc(100vw - 20rem);
|
||||||
|
height: 100vh;
|
||||||
|
background: rgba(black, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links_mobile {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 20rem;
|
||||||
|
height: 100vh;
|
||||||
|
background: lighten(black, 20%);
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem;
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:active,
|
||||||
|
a:visited {
|
||||||
|
display: block;
|
||||||
|
margin: .5rem 0;
|
||||||
|
padding: 1rem 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: white;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
width: 100%;
|
||||||
|
background: $brand-color;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import
|
||||||
|
'abstracts/variables',
|
||||||
|
'abstracts/mixins';
|
||||||
|
|
||||||
|
@import
|
||||||
|
'vendors/normalize';
|
||||||
|
|
||||||
|
@import
|
||||||
|
'base/base',
|
||||||
|
'base/fonts',
|
||||||
|
'base/typography',
|
||||||
|
'base/helpers';
|
||||||
|
|
||||||
|
@import
|
||||||
|
'layout/header',
|
||||||
|
'layout/footer';
|
||||||
|
|
||||||
|
@import
|
||||||
|
'components/title',
|
||||||
|
'components/horizontal-card',
|
||||||
|
'components/vertical-card',
|
||||||
|
'components/button';
|
||||||
|
|
||||||
|
@import
|
||||||
|
'pages/home',
|
||||||
|
'pages/news',
|
||||||
|
'pages/article',
|
||||||
|
'pages/tournaments',
|
||||||
|
'pages/about',
|
||||||
|
'pages/kickoff';
|
||||||
|
|
||||||
|
@import
|
||||||
|
'themes/default';
|
||||||
@ -0,0 +1,236 @@
|
|||||||
|
.team {
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
height: 400px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(black, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
top: 0;
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-us {
|
||||||
|
margin: 5rem 0;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 8em;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 300px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraphs {
|
||||||
|
max-width: 43rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history {
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 300px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraphs {
|
||||||
|
margin-right: 8em;
|
||||||
|
max-width: 43rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.members {
|
||||||
|
margin: 10rem 0;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.team-panel {
|
||||||
|
margin: 2rem 1rem 0 1rem;
|
||||||
|
width: 350px;
|
||||||
|
padding: 2rem;
|
||||||
|
background: lighten(black, 20%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.pfp {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roles {
|
||||||
|
margin: 1rem 0;
|
||||||
|
display: flex;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
.role {
|
||||||
|
color: $brand-color;
|
||||||
|
padding: 5px 1rem;
|
||||||
|
border: 2px solid $brand-color;
|
||||||
|
border-radius: 20px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.socials {
|
||||||
|
|
||||||
|
.social {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-left: 10px;
|
||||||
|
color: $brand-color;
|
||||||
|
transition: 0.2s ease-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: lighten($brand-color, 40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.twitch {
|
||||||
|
margin-top: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1200px) {
|
||||||
|
.team {
|
||||||
|
main {
|
||||||
|
height: 250px;
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-us {
|
||||||
|
.container {
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history {
|
||||||
|
.container {
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
|
||||||
|
.paragraphs {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.members {
|
||||||
|
.team-panel {
|
||||||
|
.roles {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,139 @@
|
|||||||
|
.article {
|
||||||
|
article {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 83vh;
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(black, 0.7);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: -2;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
height: 600px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2.2em;
|
||||||
|
text-transform: none;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 5px 5px 15px rgba(black, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
font-size: 1.2em;
|
||||||
|
text-shadow: 5px 5px 15px rgba(black, 0.5);
|
||||||
|
fill: white;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 16px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
.container {
|
||||||
|
margin-top: -100px;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
padding: 50px;
|
||||||
|
background: lighten(black, 20%);
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.95em;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 550px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:active, a:visited {
|
||||||
|
color: $brand-color;
|
||||||
|
transition: 0.2s ease-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: lighten($brand-color, 40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
background: lighten(black, 20%);
|
||||||
|
border-left: 10px solid lighten(black, 30%);
|
||||||
|
margin: 1.5em 10px;
|
||||||
|
padding: 0.5em 10px;
|
||||||
|
quotes: "\201C""\201D""\2018""\2019";
|
||||||
|
}
|
||||||
|
blockquote:before {
|
||||||
|
color: #ccc;
|
||||||
|
content: open-quote;
|
||||||
|
font-size: 4em;
|
||||||
|
line-height: 0.1em;
|
||||||
|
margin-right: 0.25em;
|
||||||
|
vertical-align: -0.4em;
|
||||||
|
}
|
||||||
|
blockquote p {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 400px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 720px) {
|
||||||
|
.article {
|
||||||
|
article {
|
||||||
|
.image {
|
||||||
|
height: 83vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
height: 400px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
.container {
|
||||||
|
padding: .5rem 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,415 @@
|
|||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// This file contains styles that are specific to the home page.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
.home {
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.background-apl-text {
|
||||||
|
position: absolute;
|
||||||
|
left: -25%;
|
||||||
|
font-family: $text-logo;
|
||||||
|
color: #262626;
|
||||||
|
font-size: 51em;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
small {
|
||||||
|
display: block;
|
||||||
|
padding-top: 200px;
|
||||||
|
font-size: 16pt;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
big {
|
||||||
|
display: block;
|
||||||
|
line-height: 1em;
|
||||||
|
font-size: 48pt;
|
||||||
|
font-family: $text-logo;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
float: right;
|
||||||
|
width: 256px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
max-width: 600px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-news {
|
||||||
|
margin-top: 270px;
|
||||||
|
margin-bottom: 200px;
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin-top: 30px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 70% 1fr;
|
||||||
|
grid-template-rows: 500px;
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
position: relative;
|
||||||
|
font-weight: 500;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
text-align: center;
|
||||||
|
transition: 0.5s ease-in-out;
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
transition: 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptitle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14pt;
|
||||||
|
color: $text-color;
|
||||||
|
transition: 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author_name {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
bottom: 25px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 12pt;
|
||||||
|
color: $text-color;
|
||||||
|
fill: $text-color;
|
||||||
|
transition: 0.5s ease-in-out;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 16px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.big {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.ptitle {
|
||||||
|
font-size: 18pt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.panel {
|
||||||
|
transform: scale(1.1);
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptitle {
|
||||||
|
color: $brand-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author_name {
|
||||||
|
color: $brand-color;
|
||||||
|
fill: $brand-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
.panel {
|
||||||
|
transform: scale(1.1);
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptitle {
|
||||||
|
color: $brand-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author_name {
|
||||||
|
color: $brand-color;
|
||||||
|
fill: $brand-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small1 {
|
||||||
|
height: calc(100% / 2);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
background: rgba(black, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptitle {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.panel {
|
||||||
|
transform: scale(1.1);
|
||||||
|
|
||||||
|
.ptitle {
|
||||||
|
color: $brand-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author_name {
|
||||||
|
color: $brand-color;
|
||||||
|
fill: $brand-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
.panel {
|
||||||
|
transform: scale(1.1);
|
||||||
|
|
||||||
|
.ptitle {
|
||||||
|
color: $brand-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author_name {
|
||||||
|
color: $brand-color;
|
||||||
|
fill: $brand-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.small2 {
|
||||||
|
height: calc(100% / 2);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
background: rgba(black, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ptitle {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.panel {
|
||||||
|
transform: scale(1.1);
|
||||||
|
|
||||||
|
.ptitle {
|
||||||
|
color: $brand-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author_name {
|
||||||
|
color: $brand-color;
|
||||||
|
fill: $brand-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
.panel {
|
||||||
|
transform: scale(1.1);
|
||||||
|
|
||||||
|
.ptitle {
|
||||||
|
color: $brand-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author_name {
|
||||||
|
color: $brand-color;
|
||||||
|
fill: $brand-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-tournament {
|
||||||
|
margin-bottom: 200px;
|
||||||
|
.tournament {
|
||||||
|
margin: 50px 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 400px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-top: 125px;
|
||||||
|
line-height: 2.2em;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 30pt;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 25%;
|
||||||
|
width: 100%;
|
||||||
|
height: 230px;
|
||||||
|
right: 0;
|
||||||
|
z-index: -1;
|
||||||
|
background: #920000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tweets {
|
||||||
|
|
||||||
|
.container {
|
||||||
|
.title {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.twitter {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 960px) {
|
||||||
|
.home {
|
||||||
|
main {
|
||||||
|
img {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-apl-text {
|
||||||
|
font-size: 30em;
|
||||||
|
top: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
big {
|
||||||
|
font-size: 40pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 3rem;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-news {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: 100%;
|
||||||
|
grid-template-rows: 300px 600px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-tournament {
|
||||||
|
.tournament {
|
||||||
|
.container {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 400px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.home {
|
||||||
|
main {
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
big {
|
||||||
|
font-size: 30pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
padding-top: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-apl-text {
|
||||||
|
font-size: 20em;
|
||||||
|
margin-top: 10rem;
|
||||||
|
margin-left: -8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-news {
|
||||||
|
margin-top: 7rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-tournament {
|
||||||
|
margin-top: 7rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
.tournament > .container > img {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tournament > .container > .text {
|
||||||
|
.name {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tweets {
|
||||||
|
margin-top: 7em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,251 @@
|
|||||||
|
.kickoff {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding-top: 64px;
|
||||||
|
height:100vh;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.apl-presents {
|
||||||
|
max-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsored-by-psyonix {
|
||||||
|
max-width: 130px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.kickoff-logo {
|
||||||
|
max-width: 50%;
|
||||||
|
transform: translatey(0px);
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-top: -100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content:"";
|
||||||
|
position:absolute;
|
||||||
|
width:100%;
|
||||||
|
bottom:1px;
|
||||||
|
z-index:-1;
|
||||||
|
transform:scale(.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding-top: 60px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
width: 30px;
|
||||||
|
height: 50px;
|
||||||
|
margin-left: -15px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-radius: 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 50%;
|
||||||
|
content: '';
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
margin-left: -3px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 100%;
|
||||||
|
-webkit-animation: sdb10 2s infinite;
|
||||||
|
animation: sdb10 2s infinite;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 64px);
|
||||||
|
padding-top: 10rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.counter {
|
||||||
|
h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
text-shadow: 0px 0px 15px rgba(white, 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subt {
|
||||||
|
margin-top: 5rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
max-width: 500px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
&.big {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.asia {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.trailer {
|
||||||
|
margin-top: 5rem;
|
||||||
|
width: 1280px;
|
||||||
|
height: 720px;
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 10rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 2rem 2rem;
|
||||||
|
background: lighten($bg-color, 20%);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0% {
|
||||||
|
transform: translatey(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translatey(-20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translatey(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sdb10 {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
transform: translate(0, 20px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 960px) {
|
||||||
|
.kickoff {
|
||||||
|
main {
|
||||||
|
.container {
|
||||||
|
justify-content: space-between;
|
||||||
|
.kickoff-logo {
|
||||||
|
img {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
.counter {
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subt {
|
||||||
|
.container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.asia {
|
||||||
|
.container {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 720px) {
|
||||||
|
.kickoff {
|
||||||
|
main {
|
||||||
|
.container {
|
||||||
|
.kickoff-logo {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.details {
|
||||||
|
.counter {
|
||||||
|
.h1 {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.trailer {
|
||||||
|
width: 100%;
|
||||||
|
height: 480px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
.news {
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
height: 400px;
|
||||||
|
//overflow: hidden;
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(black, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
top: 0;
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.articles {
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.news {
|
||||||
|
main {
|
||||||
|
height: 250px;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
.tournaments {
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
height: 400px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(black, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
top: 0;
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin: 70px 0;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.vertical-card {
|
||||||
|
margin: 2rem 1rem 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.tournaments {
|
||||||
|
main {
|
||||||
|
height: 250px;
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
// -----------------------------------------------------------------------------
|
||||||
|
// When having several themes, this file contains everything related to the
|
||||||
|
// default one.
|
||||||
|
// -----------------------------------------------------------------------------
|
||||||
@ -0,0 +1,349 @@
|
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the `main` element consistently in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background on active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57-
|
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none; /* 1 */
|
||||||
|
text-decoration: underline; /* 2 */
|
||||||
|
text-decoration: underline dotted; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers.
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10.
|
||||||
|
* 2. Remove the padding in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@ -0,0 +1,109 @@
|
|||||||
|
<template>
|
||||||
|
<div class="team">
|
||||||
|
<main>
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<img src="https://cms.aplesports.com/storage/uploads/2020/05/06/5eb29cba6d8d01920x400_2.png">
|
||||||
|
<div class="container">
|
||||||
|
<div class="title main">our team</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<section class="about-us">
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">About Us</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="https://cms.aplesports.com/storage/uploads/2020/04/23/5ea178d6570e1APL_New.png" alt="APL Logo">
|
||||||
|
</div>
|
||||||
|
<div class="paragraphs">
|
||||||
|
<p>
|
||||||
|
APL Esports is an independent tournament organiser that combines the experience of various community figures in Asia to produce premier tournaments. Our goal is to bring the best of Rocket League to the Asian region.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
We are dedicated towards bringing the best to Asia by providing them with regular tournaments and incentives to play for with quality production.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="history">
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">history</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="paragraphs">
|
||||||
|
<p>
|
||||||
|
After two iterations of the region's largest event, APL Esports was founded to carry on the torch and successfully ran the Asia Pro League's third season.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Since then, we've been focused on tournaments run by the community, for the community. Having run several iterations of both The Clash and the Ketteisen Cup, our events have consistently attracted Asia's top teams and fans alike. Even though it's been more than a year since APL Season 3, our goal remains the same - to deliver the region's best teams to the world's biggest stages.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="logo">
|
||||||
|
<img src="https://cms.aplesports.com/storage/uploads/2020/04/23/5ea1cb9613cddapl_old.png" alt="Old APL Logo">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="members">
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">our members</div>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<div class="team-panel" v-for="member in members" :key="member.id">
|
||||||
|
<div class="pfp">
|
||||||
|
<img :src="member.dp" :alt="member.name">
|
||||||
|
</div>
|
||||||
|
<div class="name">
|
||||||
|
<div class="discord">{{ member.discord }}</div>
|
||||||
|
<div class="name">{{ member.name }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="roles">
|
||||||
|
<span class="role" v-for="role in member.role" :key="role">
|
||||||
|
{{ role }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="socials">
|
||||||
|
<div class="social twitter" v-if="member.twitter">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"/>
|
||||||
|
</svg>
|
||||||
|
<a target="_blank" :href="'https://twitter.com/' + member.twitter">{{ member.twitter }}</a>
|
||||||
|
</div>
|
||||||
|
<div class="social twitch" v-if="member.twitch">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M10.224 17.806l1.776-1.776h3.343l2.09-2.09v-6.686h-10.03v8.776h2.821v1.776zm3.866-8.149h1.254v3.653h-1.254v-3.653zm-3.344 0h1.254v3.653h-1.254v-3.653zm1.254-9.657c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.687 14.567l-3.657 3.657h-2.716l-1.777 1.776h-1.88v-1.776h-3.344v-9.821l.941-2.403h12.433v8.567z"/>
|
||||||
|
</svg>
|
||||||
|
<a target="_blank" :href="'https://twitch.tv/' + member.twitch">{{ member.twitch }}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Team',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
members: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
axios.post("https://cms.aplesports.com/api/collections/get/Members", {}, {
|
||||||
|
headers: {
|
||||||
|
'Cockpit-Token': env('VUE_APP_CMS_TOKEN')
|
||||||
|
}
|
||||||
|
}).then((res) => {
|
||||||
|
this.members = res.data.entries;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,109 @@
|
|||||||
|
<template>
|
||||||
|
<div class="article">
|
||||||
|
<article>
|
||||||
|
<div class="image">
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<img :src="imgRoot + this.image" alt=" ">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">{{ this.title }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="author">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
|
<path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
|
||||||
|
</svg>
|
||||||
|
{{ this.author }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="body">
|
||||||
|
<div class="container" v-html="this.content"></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios';
|
||||||
|
const md = require('markdown-it')({
|
||||||
|
breaks: true,
|
||||||
|
html: true
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Article',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: null,
|
||||||
|
author: null,
|
||||||
|
id: null,
|
||||||
|
image: null,
|
||||||
|
content: null,
|
||||||
|
imgRoot: 'https://cms.aplesports.com/storage/uploads'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.id = this.$route.params.id;
|
||||||
|
|
||||||
|
axios.post("https://cms.aplesports.com/api/collections/get/News", {
|
||||||
|
"sort": {
|
||||||
|
"_created": -1
|
||||||
|
},
|
||||||
|
"filter": {
|
||||||
|
"published": true,
|
||||||
|
"title_slug": this.id
|
||||||
|
},
|
||||||
|
"fields": {
|
||||||
|
"title": 1,
|
||||||
|
"title_slug": 1,
|
||||||
|
"image": 1,
|
||||||
|
"content": 1,
|
||||||
|
"_by": 1,
|
||||||
|
"link": 1
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
headers: {
|
||||||
|
'Cockpit-Token': env('VUE_APP_CMS_TOKEN')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if(!res.data.entries.length == 0) {
|
||||||
|
this.title = res.data.entries[0].title;
|
||||||
|
this.author = res.data.entries[0].author;
|
||||||
|
this.image = res.data.entries[0].image.path;
|
||||||
|
this.content = md.render(res.data.entries[0].content);
|
||||||
|
} else {
|
||||||
|
axios.post("https://cms.aplesports.com/api/collections/get/News", {
|
||||||
|
"sort": {
|
||||||
|
"_created": -1
|
||||||
|
},
|
||||||
|
"filter": {
|
||||||
|
"published": true,
|
||||||
|
"link": this.id
|
||||||
|
},
|
||||||
|
"fields": {
|
||||||
|
"title": 1,
|
||||||
|
"title_slug": 1,
|
||||||
|
"image": 1,
|
||||||
|
"content": 1,
|
||||||
|
"_by": 1,
|
||||||
|
"link": 1
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
headers: {
|
||||||
|
'Cockpit-Token': env('VUE_APP_CMS_TOKEN')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
this.title = res.data.entries[0].title;
|
||||||
|
this.author = res.data.entries[0].author;
|
||||||
|
this.image = res.data.entries[0].image.path;
|
||||||
|
this.content = md.render(res.data.entries[0].content);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,194 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrapping home">
|
||||||
|
<!-- begin hero section -->
|
||||||
|
<div class="container">
|
||||||
|
<main>
|
||||||
|
<div class="background-apl-text">APL</div>
|
||||||
|
<small>Welcome To</small>
|
||||||
|
<img src="https://cms.aplesports.com/storage/uploads/2020/04/23/5ea178d6570e1APL_New.png" alt="APL Esports Logo">
|
||||||
|
<br>
|
||||||
|
<big>APL Esports</big>
|
||||||
|
<p>An independent tournament organiser that combines the experience of various community figures in Asia to produce premier tournaments.</p>
|
||||||
|
<router-link :to="{ name: 'Team' }" class="btn">Our Team</router-link>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<!-- end hero section -->
|
||||||
|
|
||||||
|
<!-- begin featured news -->
|
||||||
|
<section class="featured-news">
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">featured news</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="big">
|
||||||
|
<router-link v-if="this.posts[0].link" :to="'news/' + this.posts[0].link">
|
||||||
|
<div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[0].image.path + ')' }">
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<div class="ptitle">{{ this.posts[0].title }}</div>
|
||||||
|
<div class="author_name">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
|
<path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
|
||||||
|
</svg>
|
||||||
|
{{ this.posts[0].author }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
<router-link v-else :to="'news/' + this.posts[0].title_slug">
|
||||||
|
<div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[0].image.path + ')' }">
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<div class="ptitle">{{ this.posts[0].title }}</div>
|
||||||
|
<div class="author_name">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
|
<path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
|
||||||
|
</svg>
|
||||||
|
{{ this.posts[0].author }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="inner-grid">
|
||||||
|
<div class="small1">
|
||||||
|
<router-link v-if="this.posts[1].link" :to="'news/' + this.posts[1].link">
|
||||||
|
<div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[1].image.path + ')' }">
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<p class="ptitle">{{ this.posts[1].title }}</p>
|
||||||
|
<div class="author_name">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
|
<path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
|
||||||
|
</svg>
|
||||||
|
{{ this.posts[1].author }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
<router-link v-else :to="'news/' + this.posts[1].title_slug">
|
||||||
|
<div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[1].image.path + ')' }">
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<p class="ptitle">{{ this.posts[1].title }}</p>
|
||||||
|
<div class="author_name">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
|
<path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
|
||||||
|
</svg>
|
||||||
|
{{ this.posts[1].author }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="small2">
|
||||||
|
<router-link v-if="this.posts[2].link" :to="'news/' + this.posts[2].link">
|
||||||
|
<div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[2].image.path + ')' }">
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<p class="ptitle">{{ this.posts[2].title }}</p>
|
||||||
|
<div class="author_name">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
|
<path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
|
||||||
|
</svg>
|
||||||
|
{{ this.posts[2].author }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
<router-link v-else :to="'news/' + this.posts[2].title_slug">
|
||||||
|
<div class="panel" v-bind:style="{ 'background-image': 'url(' + imgRoot + this.posts[2].image.path + ')' }">
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<p class="ptitle">{{ this.posts[2].title }}</p>
|
||||||
|
<div class="author_name">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
|
<path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
|
||||||
|
</svg>
|
||||||
|
{{ this.posts[2].author }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- end featured news -->
|
||||||
|
|
||||||
|
<!-- begin featured tournament -->
|
||||||
|
<section class="featured-tournament">
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">featured tournament</div>
|
||||||
|
</div>
|
||||||
|
<div class="tournament">
|
||||||
|
<div class="container">
|
||||||
|
<img :src="torRoot + this.tournaments.logo.path" alt="">
|
||||||
|
<div class="text">
|
||||||
|
<div class="name">{{ this.tournaments.name }}</div>
|
||||||
|
<div class="date">Date: {{ this.tournaments.date }}</div>
|
||||||
|
<div class="time">Time: {{ this.tournaments.time }}</div>
|
||||||
|
<div class="pool">Prizepool: {{ this.tournaments.prize }}</div>
|
||||||
|
<a :href="this.tournaments.link" class="btn" target="_blank">Details</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- end featured tournament -->
|
||||||
|
|
||||||
|
<!-- begin tweets -->
|
||||||
|
<section class="tweets">
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">latest tweet</div>
|
||||||
|
<twitter class="twitter">
|
||||||
|
<div slot="loading">Loading...</div>
|
||||||
|
<a class="twitter-timeline" data-width="1000" data-tweet-limit="1" data-chrome="noheader nofooter noborders transparent" data-lang="en" data-theme="dark" href="https://twitter.com/APL_Esports">@APL_Esports</a>
|
||||||
|
</twitter>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- end tweets -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
import { twitter } from 'vue-twitter'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Home',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
posts: {},
|
||||||
|
tournaments: {},
|
||||||
|
imgRoot: 'https://cms.aplesports.com/storage/uploads',
|
||||||
|
torRoot: 'https://cms.aplesports.com'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
axios.post("https://cms.aplesports.com/api/collections/get/News", {
|
||||||
|
"sort": {
|
||||||
|
"_created": -1
|
||||||
|
},
|
||||||
|
"limit": 3,
|
||||||
|
"filter": {
|
||||||
|
"published": true
|
||||||
|
},
|
||||||
|
"fields": {
|
||||||
|
"title": 1,
|
||||||
|
"image": 1,
|
||||||
|
"title_slug": 1,
|
||||||
|
"_by": 1,
|
||||||
|
"link": 1
|
||||||
|
}
|
||||||
|
} ,{
|
||||||
|
headers: {
|
||||||
|
'Cockpit-Token': env('VUE_APP_CMS_TOKEN')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
this.posts = res.data.entries
|
||||||
|
})
|
||||||
|
|
||||||
|
axios.get("https://cms.aplesports.com/api/collections/get/Tournaments", {
|
||||||
|
headers: {
|
||||||
|
'Cockpit-Token': env('VUE_APP_CMS_TOKEN')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((res2) => {
|
||||||
|
let tourneys = res2.data.entries
|
||||||
|
this.tournaments = tourneys[tourneys.length - 1]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
twitter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
<template>
|
||||||
|
<div class="news">
|
||||||
|
<main>
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<img src="https://cms.aplesports.com/storage/uploads/2020/05/06/5eb29cbda00981920x400_4.png">
|
||||||
|
<div class="container">
|
||||||
|
<div class="title main">news</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<section class="articles">
|
||||||
|
<div class="container">
|
||||||
|
<div class="horizontal-card" v-for="p in displayPosts" :key="p._id">
|
||||||
|
<div class="card__header">
|
||||||
|
<div class="card__header__img"><img :src=" imgRoot + p.image.path" alt=" "></div>
|
||||||
|
</div>
|
||||||
|
<div class="card__body">
|
||||||
|
<div class="card__body__title">{{ p.title }}</div>
|
||||||
|
<div class="card__body__author">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||||
|
<path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
|
||||||
|
</svg>
|
||||||
|
{{ p.author }}
|
||||||
|
</div>
|
||||||
|
<div class="card__body__content" v-html="p.excerpt"></div>
|
||||||
|
<div class="card__body__cta">
|
||||||
|
<router-link v-if="p.link" :to="'/news/' + p.link">Read More</router-link>
|
||||||
|
<router-link v-else :to="'/news/' + p.title_slug">Read More</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
const md = require('markdown-it')({
|
||||||
|
breaks: true,
|
||||||
|
html: true
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'News',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
posts: {},
|
||||||
|
displayPosts: {},
|
||||||
|
count: 7,
|
||||||
|
bottom: false,
|
||||||
|
total: 1,
|
||||||
|
imgRoot: 'https://cms.aplesports.com/storage/uploads'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
axios.post("https://cms.aplesports.com/api/collections/get/News", {
|
||||||
|
"sort": {
|
||||||
|
"_created": -1
|
||||||
|
},
|
||||||
|
"filter": {
|
||||||
|
"published": true
|
||||||
|
},
|
||||||
|
"fields": {
|
||||||
|
"title": 1,
|
||||||
|
"title_slug": 1,
|
||||||
|
"image": 1,
|
||||||
|
"excerpt": 1,
|
||||||
|
"_by": 1,
|
||||||
|
"link": 1
|
||||||
|
}
|
||||||
|
} ,{
|
||||||
|
headers: {
|
||||||
|
'Cockpit-Token': env('VUE_APP_CMS_TOKEN')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
this.posts = res.data.entries;
|
||||||
|
this.posts.forEach((post) => {
|
||||||
|
post.excerpt = md.render(post.excerpt);
|
||||||
|
});
|
||||||
|
this.displayPosts = this.posts.slice(0, this.count);
|
||||||
|
this.total = res.data.total;
|
||||||
|
});
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
this.bottom = this.bottomVisible();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
bottomVisible() {
|
||||||
|
return (document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight ? true : false);
|
||||||
|
},
|
||||||
|
addNews() {
|
||||||
|
if(this.displayPosts.length == this.posts.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
let n = this.posts.slice(this.count, this.count + 1);
|
||||||
|
this.displayPosts.push(n[0]);
|
||||||
|
this.count += 1;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
bottom(bottom) {
|
||||||
|
if(bottom) {
|
||||||
|
this.addNews();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrapping">
|
||||||
|
<div class="container">
|
||||||
|
Sorry, this page doesn't exist.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.wrapping > .container {
|
||||||
|
height: calc(100vh - 64px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tournaments">
|
||||||
|
<main>
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<img src="https://cms.aplesports.com/storage/uploads/2020/05/06/5eb29cbc2fea41920x400_3.png">
|
||||||
|
<div class="container">
|
||||||
|
<div class="title main">tournaments</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<section class="grid">
|
||||||
|
<div class="container">
|
||||||
|
<div class="vertical-card" v-for="t in display" :key="t._id">
|
||||||
|
<div class="card__header">
|
||||||
|
<div class="card__header__img"><img :src=" imgRoot + t.logo.path" alt=" "></div>
|
||||||
|
<div class="card__header__title">{{ t.name }}</div>
|
||||||
|
<div class="card__header__date">
|
||||||
|
{{ t.date }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__body">
|
||||||
|
<p>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z"/></svg>
|
||||||
|
{{ t.time }}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm1-5h1a3 3 0 0 0 0-6H7.99a1 1 0 0 1 0-2H14V5h-3V3H9v2H8a3 3 0 1 0 0 6h4a1 1 0 1 1 0 2H6v2h3v2h2v-2z"/></svg>
|
||||||
|
{{ t.prize }}
|
||||||
|
</p>
|
||||||
|
<div v-if="t.link" class="card__body__cta">
|
||||||
|
<a :href="t.link" target="_blank">Details</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card__arrow">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="9 16.172 2.929 10.101 1.515 11.515 10 20 10.707 19.293 18.485 11.515 17.071 10.101 11 16.172 11 0 9 0"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Tournaments',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tournaments: {},
|
||||||
|
display: {},
|
||||||
|
count: 9,
|
||||||
|
bottom: false,
|
||||||
|
total: null,
|
||||||
|
imgRoot: 'https://cms.aplesports.com'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
axios.post("https://cms.aplesports.com/api/collections/get/Tournaments", {
|
||||||
|
"sort": {
|
||||||
|
"_created": -1
|
||||||
|
},
|
||||||
|
"fields": {
|
||||||
|
"name": 1,
|
||||||
|
"logo": 1,
|
||||||
|
"time": 1,
|
||||||
|
"date": 1,
|
||||||
|
"prize": 1,
|
||||||
|
"link": 1
|
||||||
|
}
|
||||||
|
} ,{
|
||||||
|
headers: {
|
||||||
|
'Cockpit-Token': env('VUE_APP_CMS_TOKEN')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
res.data.entries.forEach((t) => {
|
||||||
|
let d = Date.parse(t.date);
|
||||||
|
try {
|
||||||
|
const dtf = new Intl.DateTimeFormat('en', { year: 'numeric', month: 'short', day: '2-digit' });
|
||||||
|
const [{ value: mo },,{ value: da },,{ value: ye }] = dtf.formatToParts(d);
|
||||||
|
t.date = `${da} ${mo}, ${ye}`;
|
||||||
|
} catch($err) {
|
||||||
|
console.warn(`Warning: Date conversion error for ${t.name}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.tournaments = res.data.entries;
|
||||||
|
this.display = this.tournaments.slice(0, this.count);
|
||||||
|
this.total = res.data.total;
|
||||||
|
});
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
this.bottom = this.bottomVisible();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
bottomVisible() {
|
||||||
|
return (document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight ? true : false);
|
||||||
|
},
|
||||||
|
addTournaments() {
|
||||||
|
if(this.display.length == this.tournaments.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
let n = this.tournaments.slice(this.count, this.count + 3);
|
||||||
|
this.display.push(n[0]);
|
||||||
|
this.display.push(n[1]);
|
||||||
|
this.display.push(n[2]);
|
||||||
|
this.count += 3;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
bottom(bottom) {
|
||||||
|
if(bottom) {
|
||||||
|
this.addTournaments();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
worker
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The DEBUG flag will do two things that help during development:
|
||||||
|
* 1. we will skip caching on the edge, which makes it easier to
|
||||||
|
* debug.
|
||||||
|
* 2. we will return an error message on exception in your Response rather
|
||||||
|
* than the default 404.html page.
|
||||||
|
*/
|
||||||
|
const DEBUG = false
|
||||||
|
|
||||||
|
addEventListener('fetch', event => {
|
||||||
|
try {
|
||||||
|
event.respondWith(handleEvent(event))
|
||||||
|
} catch (e) {
|
||||||
|
if (DEBUG) {
|
||||||
|
return event.respondWith(
|
||||||
|
new Response(e.message || e.toString(), {
|
||||||
|
status: 500,
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
event.respondWith(new Response('Internal Error', { status: 500 }))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
async function handleEvent(event) {
|
||||||
|
const url = new URL(event.request.url)
|
||||||
|
let options = {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* You can add custom logic to how we fetch your assets
|
||||||
|
* by configuring the function `mapRequestToAsset`
|
||||||
|
*/
|
||||||
|
// options.mapRequestToAsset = handlePrefix(/^\/docs/)
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (DEBUG) {
|
||||||
|
// customize caching
|
||||||
|
options.cacheControl = {
|
||||||
|
bypassCache: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return await getAssetFromKV(event, options)
|
||||||
|
} catch (e) {
|
||||||
|
// if an error is thrown try to serve the asset at 404.html
|
||||||
|
if (!DEBUG) {
|
||||||
|
try {
|
||||||
|
let notFoundResponse = await getAssetFromKV(event, {
|
||||||
|
mapRequestToAsset: req => new Request(`${new URL(req.url).origin}/404.html`, req),
|
||||||
|
})
|
||||||
|
|
||||||
|
return new Response(notFoundResponse.body, { ...notFoundResponse, status: 404 })
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Response(e.message || e.toString(), { status: 500 })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Here's one example of how to modify a request to
|
||||||
|
* remove a specific prefix, in this case `/docs` from
|
||||||
|
* the url. This can be useful if you are deploying to a
|
||||||
|
* route on a zone, or if you only want your static content
|
||||||
|
* to exist at a specific path.
|
||||||
|
*/
|
||||||
|
function handlePrefix(prefix) {
|
||||||
|
return request => {
|
||||||
|
// compute the default (e.g. / -> index.html)
|
||||||
|
let defaultAssetKey = mapRequestToAsset(request)
|
||||||
|
let url = new URL(defaultAssetKey.url)
|
||||||
|
|
||||||
|
// strip the prefix from the path for lookup
|
||||||
|
url.pathname = url.pathname.replace(prefix, '/')
|
||||||
|
|
||||||
|
// inherit all other props from the default request
|
||||||
|
return new Request(url.toString(), defaultAssetKey)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"name": "worker",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 1,
|
||||||
|
"requires": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@cloudflare/kv-asset-handler": {
|
||||||
|
"version": "0.0.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.0.11.tgz",
|
||||||
|
"integrity": "sha512-D2kGr8NF2Er//Mx0c4+8FtOHuLrnwOlpC48TbtyxRSegG/Js15OKoqxxlG9BMUj3V/YSqtN8bUU6pjaRlsoSqg==",
|
||||||
|
"requires": {
|
||||||
|
"@cloudflare/workers-types": "^2.0.0",
|
||||||
|
"@types/mime": "^2.0.2",
|
||||||
|
"mime": "^2.4.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@cloudflare/workers-types": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-SFUPQzR5aV2TBLP4Re+xNX5KfAGArcRGA44OLulBDnfblEf3J+6kFvdJAQwFhFpqru3wImwT1cX0wahk6EeWTw=="
|
||||||
|
},
|
||||||
|
"@types/mime": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-4kPlzbljFcsttWEq6aBW0OZe6BDajAmyvr2xknBG92tejQnvdGtT9+kXSZ580DqpxY9qG2xeQVF9Dq0ymUTo5Q=="
|
||||||
|
},
|
||||||
|
"mime": {
|
||||||
|
"version": "2.4.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
|
||||||
|
"integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"name": "worker",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "A template for kick starting a Cloudflare Workers project",
|
||||||
|
"main": "index.js",
|
||||||
|
"author": "Ashley Lewis <ashleymichal@gmail.com>",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@cloudflare/kv-asset-handler": "~0.0.11"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
name = "aplesports"
|
||||||
|
type = "webpack"
|
||||||
|
account_id = "b145b7736bf8766828b646bb3a4d41d4"
|
||||||
|
workers_dev = false
|
||||||
|
route = "aplesports.com/*"
|
||||||
|
zone_id = "6fdf37ae02c450309546d9444bc57a0a"
|
||||||
|
|
||||||
|
[site]
|
||||||
|
bucket = "./dist"
|
||||||
|
entry-point = "workers-site"
|
||||||
Loading…
Reference in New Issue