style: Setup to basic style

This commit is contained in:
Tixie 2019-03-09 02:23:48 +01:00
parent 1b90ac5b4a
commit 161be77909
11 changed files with 70 additions and 60 deletions

BIN
public/img/dotgrid.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 B

View file

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>souvenir</title>
<title>Souvenir ∴ Capture few seconds as a gif for souvenir</title>
</head>
<body>
<noscript>

View file

@ -1,6 +1,6 @@
{
"name": "souvenir",
"short_name": "souvenir",
"name": "Souvenir",
"short_name": "Souvenir",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",
@ -15,6 +15,6 @@
],
"start_url": "./index.html",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#4DBA87"
"background_color": "#212045",
"theme_color": "#8420a7"
}

View file

@ -1,18 +1,13 @@
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<div class="container">
<h1 class="txtcenter">Souvenir</h1>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
name: 'souvenir',
}
</script>

View file

@ -3,8 +3,8 @@
/* ----------------------------------------------------------- */
body {
background-color: #fff;
color: var(--color-dark-text);
background: var(--color-tertiary) url("/img/dotgrid.png");
color: var(--color-light-text);
font-family: var(--fontstack);
}

View file

@ -0,0 +1,38 @@
/* ----------------------------------------------------------- */
/* == alignment */
/* ----------------------------------------------------------- */
/* block
-------------------------------------------------------------- */
.center {
margin-right: auto;
margin-left: auto;
}
/* text/inline
-------------------------------------------------------------- */
.txtright {
text-align: right;
}
.txtcenter {
text-align: center;
}
.txtleft {
text-align: left;
}
.vtop {
vertical-align: top;
}
.vbottom {
vertical-align: bottom;
}
.vmiddle {
vertical-align: middle;
}

View file

@ -6,9 +6,9 @@
-------------------------------------------------------------- */
:root {
--color-primary: #3498db;
--color-secondary: #1abc9c;
--color-tertiary: #34495e;
--color-primary: #dd28d3;
--color-secondary: #8420a7;
--color-tertiary: #212045;
--color-info: #2185d0;
}
@ -17,7 +17,7 @@
:root {
--color-light-text: #fcfcfc;
--color-dark-text: #000;
--color-dark-text: var(--color-tertiary);
}
/* links

View file

@ -42,6 +42,7 @@
/* == helpers */
/* ----------------------------------------------------------- */
@import "6-helpers/_alignment.css";
@import "6-helpers/_spacing.css";
@import "6-helpers/_width.css";

0
src/components/.gitkeep Normal file
View file

View file

@ -1,41 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>

17
vue.config.js Normal file
View file

@ -0,0 +1,17 @@
module.exports = {
pwa: {
name: 'Souvenir',
themeColor: '#8420a7',
msTileColor: '#212045',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black'
// // configure the workbox plugin
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {
// // swSrc is required in InjectManifest mode.
// swSrc: 'dev/sw.js',
// // ...other Workbox options...
// }
}
}