mirror of
https://github.com/LeCoupa/awesome-cheatsheets.git
synced 2025-11-08 22:11:35 +00:00
build(packages): add pug and sass loader + normalize.css
This commit is contained in:
Julien
@@ -1,80 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="VueToNuxtLogo">
|
|
||||||
<div class="Triangle Triangle--two"/>
|
|
||||||
<div class="Triangle Triangle--one"/>
|
|
||||||
<div class="Triangle Triangle--three"/>
|
|
||||||
<div class="Triangle Triangle--four"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.VueToNuxtLogo {
|
|
||||||
display: inline-block;
|
|
||||||
animation: turn 2s linear forwards 1s;
|
|
||||||
transform: rotateX(180deg);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 180px;
|
|
||||||
width: 245px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Triangle {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Triangle--one {
|
|
||||||
border-left: 105px solid transparent;
|
|
||||||
border-right: 105px solid transparent;
|
|
||||||
border-bottom: 180px solid #41B883;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Triangle--two {
|
|
||||||
top: 30px;
|
|
||||||
left: 35px;
|
|
||||||
animation: goright 0.5s linear forwards 3.5s;
|
|
||||||
border-left: 87.5px solid transparent;
|
|
||||||
border-right: 87.5px solid transparent;
|
|
||||||
border-bottom: 150px solid #3B8070;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Triangle--three {
|
|
||||||
top: 60px;
|
|
||||||
left: 35px;
|
|
||||||
animation: goright 0.5s linear forwards 3.5s;
|
|
||||||
border-left: 70px solid transparent;
|
|
||||||
border-right: 70px solid transparent;
|
|
||||||
border-bottom: 120px solid #35495E;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Triangle--four {
|
|
||||||
top: 120px;
|
|
||||||
left: 70px;
|
|
||||||
animation: godown 0.5s linear forwards 3s;
|
|
||||||
border-left: 35px solid transparent;
|
|
||||||
border-right: 35px solid transparent;
|
|
||||||
border-bottom: 60px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes turn {
|
|
||||||
100% {
|
|
||||||
transform: rotateX(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes godown {
|
|
||||||
100% {
|
|
||||||
top: 180px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes goright {
|
|
||||||
100% {
|
|
||||||
left: 70px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@@ -1,39 +1,30 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
/*
|
|
||||||
** Headers of the page
|
|
||||||
*/
|
|
||||||
head: {
|
head: {
|
||||||
title: 'awesome-cheatsheets',
|
title: "Awesome Cheatsheets",
|
||||||
meta: [
|
meta: [
|
||||||
{ charset: 'utf-8' },
|
{ charset: "utf-8" },
|
||||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
{ name: "viewport", content: "width=device-width, initial-scale=1" },
|
||||||
{ hid: 'description', name: 'description', content: 'Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.' }
|
{
|
||||||
|
hid: "description",
|
||||||
|
name: "description",
|
||||||
|
content:
|
||||||
|
"Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file."
|
||||||
|
}
|
||||||
],
|
],
|
||||||
link: [
|
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
|
||||||
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
/*
|
loading: { color: "#3B8070" },
|
||||||
** Customize the progress bar color
|
|
||||||
*/
|
|
||||||
loading: { color: '#3B8070' },
|
|
||||||
/*
|
|
||||||
** Build configuration
|
|
||||||
*/
|
|
||||||
build: {
|
build: {
|
||||||
/*
|
extend(config, { isDev, isClient }) {
|
||||||
** Run ESLint on save
|
|
||||||
*/
|
|
||||||
extend (config, { isDev, isClient }) {
|
|
||||||
if (isDev && isClient) {
|
if (isDev && 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)/
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
css: ["normalize.css/normalize.css"]
|
||||||
|
};
|
||||||
|
|||||||
1385
package-lock.json
generated
1385
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -13,6 +13,7 @@
|
|||||||
"precommit": "npm run lint"
|
"precommit": "npm run lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"normalize.css": "^8.0.0",
|
||||||
"nuxt": "^1.0.0"
|
"nuxt": "^1.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -20,6 +21,10 @@
|
|||||||
"eslint": "^4.15.0",
|
"eslint": "^4.15.0",
|
||||||
"eslint-friendly-formatter": "^3.0.0",
|
"eslint-friendly-formatter": "^3.0.0",
|
||||||
"eslint-loader": "^1.7.1",
|
"eslint-loader": "^1.7.1",
|
||||||
"eslint-plugin-vue": "^4.0.0"
|
"eslint-plugin-vue": "^4.0.0",
|
||||||
|
"node-sass": "^4.9.3",
|
||||||
|
"pug": "^2.0.3",
|
||||||
|
"pug-plain-loader": "^1.0.0",
|
||||||
|
"sass-loader": "^7.1.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,65 +1,21 @@
|
|||||||
<template>
|
<!-- *************************************************************************
|
||||||
<section class="container">
|
TEMPLATE
|
||||||
<div>
|
************************************************************************* -->
|
||||||
<app-logo/>
|
|
||||||
<h1 class="title">
|
<template lang="pug">
|
||||||
awesome-cheatsheets
|
|
||||||
</h1>
|
|
||||||
<h2 class="subtitle">
|
|
||||||
Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
|
|
||||||
</h2>
|
|
||||||
<div class="links">
|
|
||||||
<a
|
|
||||||
href="https://nuxtjs.org/"
|
|
||||||
target="_blank"
|
|
||||||
class="button--green">Documentation</a>
|
|
||||||
<a
|
|
||||||
href="https://github.com/nuxt/nuxt.js"
|
|
||||||
target="_blank"
|
|
||||||
class="button--grey">GitHub</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<!-- *************************************************************************
|
||||||
import AppLogo from '~/components/AppLogo.vue'
|
SCRIPT
|
||||||
|
************************************************************************* -->
|
||||||
|
|
||||||
export default {
|
<script>
|
||||||
components: {
|
export default {};
|
||||||
AppLogo
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<!-- *************************************************************************
|
||||||
.container {
|
STYLE
|
||||||
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; /* 1 */
|
|
||||||
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>
|
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
||||||
|
|||||||
Reference in New Issue
Block a user