androiddrew
/
vue_tachyons
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Making it pretty

Browse Source
master
androiddrew 7 years ago
parent 3c231cb1e1
commit 9b4f52b2c9
5 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File

5
.eslintrc
Unescape Escape View File

@ -3,5 +3,8 @@
"extends": [
"plugin:vue/essential",
"@vue/airbnb"
]
],
"rules": {
max-len: ["error", { "code": 200 }]
},
}

1
public/index.html
Unescape Escape View File

@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<link rel="stylesheet" href="https://yarnpkg.com/en/package/normalize.css">
<title>vue_tachyons</title>
</head>
<body class="bg-light-gray-30">

19
src/App.vue
Unescape Escape View File

@ -1,8 +1,8 @@
<template>
<div id="app">
<nav-bar>
<router-link class="link dim white f5 f4-l dib mr3 mr4-l" to="/">Home</router-link>
<router-link class="link dim white f5 f4-l dib mr3 mr4-l" to="/about">About</router-link>
<router-link class="dim white f5 f4-l dib mr3 mr4-l no-underline" to="/">Home</router-link>
<router-link class="dim white f5 f4-l dib mr3 mr4-l no-underline" to="/about">About</router-link>
</nav-bar>
<transition name="slide-fade">
<router-view/>
@ -50,4 +50,19 @@ export default {
transform: translateX(10px);
opacity: 0;
}
.bg-grad-blue {
background-image: linear-gradient(-208deg, #86C3D0 0%, #4E90A3 66%);
}
.bg-grad-green {
background-image: linear-gradient(to top right,#41b782,#86d169);
}
*:focus {
outline-style:none;
box-shadow:none;
border-color:transparent;
}
</style>

8
src/components/NavBar.vue
Unescape Escape View File

@ -1,9 +1,10 @@
<template>
<nav class="db dt-l w-100 border-box pa2 ph5-l bg-green">
<nav class="db dt-l w-100 border-box pa2 ph5-l bg-grad-blue">
<a class="db dtc-l v-mid mid-gray link dim w-100 w-25-l tc tl-l mb1 mb0-l" href="/" title="Home">
<img src="http://tachyons.io/img/logo.jpg" class="dib w3 h3 br-100" alt="Site Name">
</a>
<div class="db dtc-l v-mid w-100 w-75-l tc tr-l">
<input type="search" placeholder="Search..." class="f4 mr4 pv2 ph3 w-30 br1 bn di-ns dn dn-m">
<slot></slot>
</div>
</nav>
@ -13,3 +14,8 @@ export default {
name: 'nav-bar',
};
</script>
<style lang="scss">
</style>

10
src/views/About.vue
Unescape Escape View File

@ -1,5 +1,15 @@
<template>
<div class="about">
<h1>This is an about page</h1>
<button @click="raiseAlert" class="ph3-ns pv2-ns pa2 f4-ns f5 white b bg-grad-green bn br-pill dim">Press me</button>
</div>
</template>
<script type="text/javascript">
export default {
methods: {
raiseAlert() {
console.log('YOU PRESSED THE BUTTON!');
},
},
};
</script>

Write Preview
Loading…
Cancel
Save