Frontend: Basic framework
This commit is contained in:
Leon Etienne (ubuntu wsl)
parent
37cc321708
commit
1f13487fca
3
tubio-frontend-nuxt-app/assets/scss/main.scss
Normal file
3
tubio-frontend-nuxt-app/assets/scss/main.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.dontcry {
|
||||
color: #ffff;
|
||||
}
|
||||
70
tubio-frontend-nuxt-app/components/Layout/Background.vue
Normal file
70
tubio-frontend-nuxt-app/components/Layout/Background.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bgdrop"></div>
|
||||
<div class="bggatter__wrapper">
|
||||
<div class="bggatter" ref="bggatter" :style="cssVars"></div>
|
||||
</div>
|
||||
<div class="bgmask"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
offsetX: { type: Number, default: 0 },
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
cssVars() {
|
||||
return "transform: translateY(-" + this.offsetX / 2 + "px);";
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleScroll: function(e) {
|
||||
this.offsetX = window.scrollY;
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bgdrop {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: -10;
|
||||
background-color: theme("colors.purple-0");
|
||||
}
|
||||
|
||||
.bggatter {
|
||||
width: 100%;
|
||||
height: 1000000px;
|
||||
position: absolute;
|
||||
z-index: -9;
|
||||
mask-image: url("/images/tiles/grid.png");
|
||||
background-color: theme("colors.purple-1");
|
||||
|
||||
&__wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
z-index: -9;
|
||||
}
|
||||
}
|
||||
|
||||
.bgmask {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: -8;
|
||||
background-image: linear-gradient(#0000 50%, theme("colors.purple-0"));
|
||||
}
|
||||
</style>
|
||||
@ -1,29 +1,9 @@
|
||||
<template>
|
||||
<svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
|
||||
fill="#00C58E"
|
||||
/>
|
||||
<path
|
||||
d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
|
||||
fill="#108775"
|
||||
/>
|
||||
<path
|
||||
d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
|
||||
fill="#2F495E"
|
||||
/>
|
||||
</svg>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.NuxtLogo {
|
||||
animation: 1s appear;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
.testclas {
|
||||
color: theme("colors.black");
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,62 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<Background />
|
||||
<Nuxt />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
html {
|
||||
font-family:
|
||||
'Source Sans Pro',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif;
|
||||
font-size: 16px;
|
||||
word-spacing: 1px;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
<script>
|
||||
import Background from "~/components/Layout/Background";
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
Background,
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
.button--green {
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3b8070;
|
||||
color: #3b8070;
|
||||
text-decoration: none;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
|
||||
.button--green:hover {
|
||||
color: #fff;
|
||||
background-color: #3b8070;
|
||||
}
|
||||
|
||||
.button--grey {
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #35495e;
|
||||
color: #35495e;
|
||||
text-decoration: none;
|
||||
padding: 10px 30px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.button--grey:hover {
|
||||
color: #fff;
|
||||
background-color: #35495e;
|
||||
}
|
||||
<style lang="css" scoped>
|
||||
.dontcry {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,9 +2,15 @@ export default {
|
||||
// Target (https://go.nuxtjs.dev/config-target)
|
||||
target: 'static',
|
||||
|
||||
generate: {
|
||||
dir: "web"
|
||||
},
|
||||
|
||||
|
||||
|
||||
// Global page headers (https://go.nuxtjs.dev/config-head)
|
||||
head: {
|
||||
title: 'tubio-frontend-nuxt-app',
|
||||
title: 'Tubio - Video downloader',
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
||||
@ -16,7 +22,8 @@ export default {
|
||||
},
|
||||
|
||||
// Global CSS (https://go.nuxtjs.dev/config-css)
|
||||
css: [
|
||||
scss: [
|
||||
"~/assets/scss/main.scss"
|
||||
],
|
||||
|
||||
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
|
||||
|
||||
@ -13,7 +13,11 @@
|
||||
"dependencies": {
|
||||
"@nuxtjs/axios": "^5.12.2",
|
||||
"core-js": "^3.6.5",
|
||||
"nuxt": "^2.14.5"
|
||||
"node-sass": "^4.14.1",
|
||||
"nuxt": "^2.14.5",
|
||||
"sass": "^1.26.11",
|
||||
"sass-loader": "^10.0.2",
|
||||
"tailwind": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/stylelint-module": "^4.0.0",
|
||||
|
||||
@ -1,78 +1,17 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div>
|
||||
<Logo />
|
||||
<h1 class="title">
|
||||
tubio-frontend-nuxt-app
|
||||
</h1>
|
||||
<div class="links">
|
||||
<a
|
||||
href="https://nuxtjs.org/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="button--green"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/nuxt/nuxt.js"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="button--grey"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Sample `apply` at-rules with Tailwind CSS
|
||||
.container {
|
||||
@apply min-h-screen flex justify-center items-center text-center mx-auto;
|
||||
}
|
||||
*/
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family:
|
||||
'Quicksand',
|
||||
'Source Sans Pro',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
font-size: 100px;
|
||||
color: #35495e;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 300;
|
||||
font-size: 42px;
|
||||
color: #526488;
|
||||
word-spacing: 5px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.links {
|
||||
padding-top: 15px;
|
||||
<style lang="scss">
|
||||
.dontcry {
|
||||
// lol
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
tubio-frontend-nuxt-app/static/images/tiles/grid.png
Normal file
BIN
tubio-frontend-nuxt-app/static/images/tiles/grid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 527 B |
@ -4,5 +4,7 @@ module.exports = {
|
||||
],
|
||||
// add your custom config here
|
||||
// https://stylelint.io/user-guide/configuration
|
||||
rules: {}
|
||||
rules: {
|
||||
"indentation": 2
|
||||
}
|
||||
}
|
||||
|
||||
33
tubio-frontend-nuxt-app/tailwind.config.js
Normal file
33
tubio-frontend-nuxt-app/tailwind.config.js
Normal file
@ -0,0 +1,33 @@
|
||||
/*
|
||||
** TailwindCSS Configuration File
|
||||
**
|
||||
** Docs: https://tailwindcss.com/docs/configuration
|
||||
** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
|
||||
*/
|
||||
module.exports = {
|
||||
theme: {
|
||||
colors: {
|
||||
'black': '#000',
|
||||
'white': '#fff',
|
||||
|
||||
'purple-0': '#04254e',
|
||||
'purple-1': '#5954a4',
|
||||
'purple-2': '#8a54a2',
|
||||
'purple-3': '#8ad5eb',
|
||||
},
|
||||
|
||||
screens: {
|
||||
'sm': '660px',
|
||||
'md': '768px',
|
||||
'lg': '1024px',
|
||||
'xl': '1280px',
|
||||
'fhd': '1670px',
|
||||
'wqhd': '2480px',
|
||||
|
||||
'break-header': '950px',
|
||||
}
|
||||
},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user