Homepage base
This commit is contained in:
Jai A
parent
fb38573b7e
commit
1c0cc8e91c
@ -363,6 +363,10 @@ export default {
|
||||
return []
|
||||
},
|
||||
},
|
||||
isAd: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -211,7 +211,7 @@ export default {
|
||||
theme: 'light',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
beforeMount() {
|
||||
const theme = localStorage.getItem('data-theme')
|
||||
? localStorage.getItem('data-theme')
|
||||
: 'light'
|
||||
|
||||
9
layouts/none.vue
Normal file
9
layouts/none.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<nuxt />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
32
package-lock.json
generated
32
package-lock.json
generated
@ -1943,6 +1943,28 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@nuxtjs/auth": {
|
||||
"version": "4.9.1",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/auth/-/auth-4.9.1.tgz",
|
||||
"integrity": "sha512-h5VZanq2+P47jq3t0EnsZv800cg/ufOPC6JqvcyeDFJM99p58jHSODAjDuePo3PrZxd8hovMk7zusU5lOHgjvQ==",
|
||||
"requires": {
|
||||
"@nuxtjs/axios": "^5.9.5",
|
||||
"body-parser": "^1.19.0",
|
||||
"consola": "^2.11.3",
|
||||
"cookie": "^0.4.0",
|
||||
"is-https": "^1.0.0",
|
||||
"js-cookie": "^2.2.1",
|
||||
"lodash": "^4.17.15",
|
||||
"nanoid": "^2.1.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"nanoid": {
|
||||
"version": "2.1.11",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
|
||||
"integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@nuxtjs/axios": {
|
||||
"version": "5.12.2",
|
||||
"resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.12.2.tgz",
|
||||
@ -7069,6 +7091,11 @@
|
||||
"is-extglob": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"is-https": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-https/-/is-https-1.0.0.tgz",
|
||||
"integrity": "sha512-1adLLwZT9XEXjzhQhZxd75uxf0l+xI9uTSFaZeSESjL3E1eXSPpO+u5RcgqtzeZ1KCaNvtEwZSTO2P4U5erVqQ=="
|
||||
},
|
||||
"is-nan": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.0.tgz",
|
||||
@ -7247,6 +7274,11 @@
|
||||
"integrity": "sha512-fiUvdfCaAXoQTHdKMgTvg6IkecXDcVz6V5rlftUTclF9IKBjMizvSdQaCl/z/6TApDeby5NL+axYou3i0mu1Pg==",
|
||||
"dev": true
|
||||
},
|
||||
"js-cookie": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
|
||||
"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"lint": "npm run lint:js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/auth": "^4.9.1",
|
||||
"@nuxtjs/axios": "^5.12.2",
|
||||
"nuxt": "^2.14.5",
|
||||
"vue-multiselect": "^2.1.6"
|
||||
|
||||
161
pages/index.vue
Normal file
161
pages/index.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<header class="columns">
|
||||
<img class="logo" src="~/assets/images/logo.svg" alt="logo" />
|
||||
<div class="links">
|
||||
<nuxt-link to="/" no-prefetch>Home</nuxt-link>
|
||||
<nuxt-link to="/mods" no-prefetch>Mods</nuxt-link>
|
||||
<nuxt-link to="/modpacks" no-prefetch>Packs</nuxt-link>
|
||||
<nuxt-link to="/about" no-prefetch>About</nuxt-link>
|
||||
</div>
|
||||
</header>
|
||||
<div class="main-hero columns">
|
||||
<div class="main-left">
|
||||
<h1 class="typewriter">{{ currentText }}</h1>
|
||||
<h1>modding platform</h1>
|
||||
</div>
|
||||
<div class="main-right columns">
|
||||
<img class="char" src="~/assets/images/logo.svg" alt="logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="slanted-hero"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
layout: 'none',
|
||||
data() {
|
||||
return {
|
||||
currentText: 'Open source',
|
||||
texts: ['Open source', 'Easy to use', 'Developer focused', 'API Based'],
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
document.documentElement.setAttribute('data-theme', 'light')
|
||||
|
||||
this.startNext(0)
|
||||
},
|
||||
methods: {
|
||||
startNext(i) {
|
||||
const startIndex = i % this.texts.length
|
||||
|
||||
this.typeWriter(this.texts[startIndex], 0, () => {
|
||||
this.startNext(startIndex + 1)
|
||||
})
|
||||
},
|
||||
typeWriter(text, i, callback) {
|
||||
if (!text || i >= text.length) {
|
||||
setTimeout(callback, 1000 + Math.random() * 500)
|
||||
return
|
||||
}
|
||||
|
||||
this.currentText = text.substring(0, i + 1)
|
||||
setTimeout(
|
||||
() => this.typeWriter(text, i + 1, callback),
|
||||
150 + Math.random() * 50
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
header {
|
||||
width: 100%;
|
||||
|
||||
.logo {
|
||||
margin: 25px 50px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin: auto 0;
|
||||
|
||||
a {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
margin: 0 25px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-grey-1);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
&.nuxt-link-active {
|
||||
border-bottom: 3px var(--color-brand) solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-hero {
|
||||
height: 600px;
|
||||
|
||||
.main-left {
|
||||
width: 50%;
|
||||
padding-top: 75px;
|
||||
padding-left: 100px;
|
||||
|
||||
.typewriter {
|
||||
display: inline-block;
|
||||
color: var(--color-brand);
|
||||
border-right: 0.15em solid var(--color-brand);
|
||||
animation: caret 1s steps(1) infinite;
|
||||
|
||||
@keyframes caret {
|
||||
50% {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
.main-right {
|
||||
width: 50%;
|
||||
padding-left: 20%;
|
||||
|
||||
.char {
|
||||
image-rendering: pixelated;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slanted-hero {
|
||||
background: var(--color-brand);
|
||||
height: 500px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
background: inherit;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 50%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
transform: skewY(5deg);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
transform: skewY(-5deg);
|
||||
transform-origin: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -54,7 +54,7 @@
|
||||
</section>
|
||||
<div class="results column-grow-4">
|
||||
<SearchResult
|
||||
v-for="result in results"
|
||||
v-for="(result, index) in results"
|
||||
:id="result.mod_id"
|
||||
:key="result.mod_id"
|
||||
:author="result.author"
|
||||
@ -68,6 +68,7 @@
|
||||
:author-url="result.author_url"
|
||||
:page-url="result.page_url"
|
||||
:categories="result.categories"
|
||||
:is-ad="index % 5"
|
||||
/>
|
||||
</div>
|
||||
<section v-if="pages.length > 1" class="search-bottom">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user