Run lint:fix

This commit is contained in:
Sam Carlton 2020-09-15 19:20:16 -05:00
parent 5f8c8ba307
commit b7da76ec3a
6 changed files with 556 additions and 587 deletions

View file

@ -9,71 +9,71 @@
<style> <style>
.VueToNuxtLogo { .VueToNuxtLogo {
display: inline-block; display: inline-block;
animation: turn 2s linear forwards 1s; animation: turn 2s linear forwards 1s;
transform: rotateX(180deg); transform: rotateX(180deg);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 180px; height: 180px;
width: 245px; width: 245px;
} }
.Triangle { .Triangle {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 0; width: 0;
height: 0; height: 0;
} }
.Triangle--one { .Triangle--one {
border-left: 105px solid transparent; border-left: 105px solid transparent;
border-right: 105px solid transparent; border-right: 105px solid transparent;
border-bottom: 180px solid #41b883; border-bottom: 180px solid #41b883;
} }
.Triangle--two { .Triangle--two {
top: 30px; top: 30px;
left: 35px; left: 35px;
animation: goright 0.5s linear forwards 3.5s; animation: goright 0.5s linear forwards 3.5s;
border-left: 87.5px solid transparent; border-left: 87.5px solid transparent;
border-right: 87.5px solid transparent; border-right: 87.5px solid transparent;
border-bottom: 150px solid #3b8070; border-bottom: 150px solid #3b8070;
} }
.Triangle--three { .Triangle--three {
top: 60px; top: 60px;
left: 35px; left: 35px;
animation: goright 0.5s linear forwards 3.5s; animation: goright 0.5s linear forwards 3.5s;
border-left: 70px solid transparent; border-left: 70px solid transparent;
border-right: 70px solid transparent; border-right: 70px solid transparent;
border-bottom: 120px solid #35495e; border-bottom: 120px solid #35495e;
} }
.Triangle--four { .Triangle--four {
top: 120px; top: 120px;
left: 70px; left: 70px;
animation: godown 0.5s linear forwards 3s; animation: godown 0.5s linear forwards 3s;
border-left: 35px solid transparent; border-left: 35px solid transparent;
border-right: 35px solid transparent; border-right: 35px solid transparent;
border-bottom: 60px solid #fff; border-bottom: 60px solid #fff;
} }
@keyframes turn { @keyframes turn {
100% { 100% {
transform: rotateX(0deg); transform: rotateX(0deg);
} }
} }
@keyframes godown { @keyframes godown {
100% { 100% {
top: 180px; top: 180px;
} }
} }
@keyframes goright { @keyframes goright {
100% { 100% {
left: 70px; left: 70px;
} }
} }
</style> </style>

View file

@ -6,50 +6,50 @@
<style> <style>
html { html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
Roboto, 'Helvetica Neue', Arial, sans-serif; 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px; font-size: 16px;
word-spacing: 1px; word-spacing: 1px;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
box-sizing: border-box; box-sizing: border-box;
} }
*, *,
*:before, *:before,
*:after { *:after {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
} }
.button--green { .button--green {
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
border: 1px solid #3b8070; border: 1px solid #3b8070;
color: #3b8070; color: #3b8070;
text-decoration: none; text-decoration: none;
padding: 10px 30px; padding: 10px 30px;
} }
.button--green:hover { .button--green:hover {
color: #fff; color: #fff;
background-color: #3b8070; background-color: #3b8070;
} }
.button--grey { .button--grey {
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
border: 1px solid #35495e; border: 1px solid #35495e;
color: #35495e; color: #35495e;
text-decoration: none; text-decoration: none;
padding: 10px 30px; padding: 10px 30px;
margin-left: 15px; margin-left: 15px;
} }
.button--grey:hover { .button--grey:hover {
color: #fff; color: #fff;
background-color: #35495e; background-color: #35495e;
} }
</style> </style>

View file

@ -1,64 +1,66 @@
const pkg = require('./package') const pkg = require('./package')
module.exports = { module.exports = {
mode: 'universal', mode: 'universal',
target: 'static',
/* /*
** Headers of the page ** Headers of the page
*/ */
head: { head: {
title: pkg.name, title: pkg.name,
meta: [ meta: [
{ charset: 'utf-8' }, { charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, {
{ hid: 'description', name: 'description', content: pkg.description } name: 'viewport',
], content: 'width=device-width, initial-scale=1'
link: [ },
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } {
] hid: 'description',
}, name: 'description',
content: pkg.description
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
},
/* /*
** Customize the progress-bar color ** Customize the progress-bar color
*/ */
loading: { color: '#fff' }, loading: { color: '#fff' },
/* /*
** Global CSS ** Global CSS
*/ */
css: [ css: ['~/assets/css/tailwind.css'],
'~/assets/css/tailwind.css'
],
/* /*
** Plugins to load before mounting the App ** Plugins to load before mounting the App
*/ */
plugins: [ plugins: [],
],
/* /*
** Nuxt.js modules ** Nuxt.js modules
*/ */
modules: [ modules: [],
],
/* /*
** Build configuration ** Build configuration
*/ */
build: { build: {
/* /*
** You can extend webpack config here ** You can extend webpack config here
*/ */
extend(config, ctx) { extend(config, ctx) {
// Run ESLint on save // Run ESLint on save
if (ctx.isDev && ctx.isClient) { if (ctx.isDev && ctx.isClient) {
config.module.rules.push({ config.module.rules.push({
enforce: 'pre', enforce: 'pre',
test: /\.(js|vue)$/, test: /\.(js|vue)$/,
loader: 'eslint-loader', loader: 'eslint-loader',
exclude: /(node_modules)/ exclude: /(node_modules)/
}) })
} }
}
} }
}
} }

View file

@ -26,48 +26,47 @@
import Logo from '~/components/Logo.vue' import Logo from '~/components/Logo.vue'
export default { export default {
components: { components: {
Logo Logo
} }
} }
</script> </script>
<style> <style>
/* Sample `apply` at-rules with Tailwind CSS /* Sample `apply` at-rules with Tailwind CSS
.container { .container {
@apply min-h-screen flex justify-center items-center text-center mx-auto; @apply min-h-screen flex justify-center items-center text-center mx-auto;
} }
*/ */
.container { .container {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.title { .title {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, font-family: 'Quicksand', 'Source Sans Pro', -apple-system,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
display: block; sans-serif;
font-weight: 300; display: block;
font-size: 100px; font-weight: 300;
color: #35495e; font-size: 100px;
letter-spacing: 1px; color: #35495e;
letter-spacing: 1px;
} }
.subtitle { .subtitle {
font-weight: 300; font-weight: 300;
font-size: 42px; font-size: 42px;
color: #526488; color: #526488;
word-spacing: 5px; word-spacing: 5px;
padding-bottom: 15px; padding-bottom: 15px;
} }
.links { .links {
padding-top: 15px; padding-top: 15px;
} }
</style> </style>

View file

@ -2,8 +2,5 @@ const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js') const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = { module.exports = {
plugins: [ plugins: [require('tailwindcss')(tailwindJS), require('autoprefixer')]
require('tailwindcss')(tailwindJS),
require('autoprefixer')
]
} }

File diff suppressed because it is too large Load diff