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

View file

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

View file

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

View file

@ -3,8 +3,8 @@
/* ----------------------------------------------------------- */ /* ----------------------------------------------------------- */
body { body {
background-color: #fff; background: var(--color-tertiary) url("/img/dotgrid.png");
color: var(--color-dark-text); color: var(--color-light-text);
font-family: var(--fontstack); 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 { :root {
--color-primary: #3498db; --color-primary: #dd28d3;
--color-secondary: #1abc9c; --color-secondary: #8420a7;
--color-tertiary: #34495e; --color-tertiary: #212045;
--color-info: #2185d0; --color-info: #2185d0;
} }
@ -17,7 +17,7 @@
:root { :root {
--color-light-text: #fcfcfc; --color-light-text: #fcfcfc;
--color-dark-text: #000; --color-dark-text: var(--color-tertiary);
} }
/* links /* links

View file

@ -42,6 +42,7 @@
/* == helpers */ /* == helpers */
/* ----------------------------------------------------------- */ /* ----------------------------------------------------------- */
@import "6-helpers/_alignment.css";
@import "6-helpers/_spacing.css"; @import "6-helpers/_spacing.css";
@import "6-helpers/_width.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...
// }
}
}