summaryrefslogtreecommitdiff
path: root/src/App.vue
diff options
context:
space:
mode:
authorgumi <git@gumi.ca>2019-07-13 14:51:35 -0400
committergumi <git@gumi.ca>2019-07-20 17:53:11 -0400
commitd9376169bc0d778381e5c4ff64ef9900d58ce219 (patch)
tree62b8e298f5fc7b6467d85424fd9db79c30f6a0dd /src/App.vue
parenta55d1feb915d5961d5aa0bca869210534cb9dc3e (diff)
downloadwebsite-d9376169bc0d778381e5c4ff64ef9900d58ce219.tar.gz
website-d9376169bc0d778381e5c4ff64ef9900d58ce219.tar.bz2
website-d9376169bc0d778381e5c4ff64ef9900d58ce219.tar.xz
website-d9376169bc0d778381e5c4ff64ef9900d58ce219.zip
scrap everything and start over with Vue
Diffstat (limited to 'src/App.vue')
-rw-r--r--src/App.vue99
1 files changed, 99 insertions, 0 deletions
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..219987a
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,99 @@
+<template>
+ <div id="app">
+ <Logo class="header"/>
+ <Navigation class="nav"/>
+ <router-view class="content"/>
+ <Copyright class="footer"/>
+ </div>
+</template>
+
+<style>
+/*
+ we might want to consider Normalize
+*/
+
+:root {
+ background: gray(95);
+}
+
+#app {
+ & > .nav {
+ grid-area: side;
+ }
+
+ & > .header {
+ grid-area: logo;
+ }
+
+ & > .content {
+ grid-area: page;
+ background: #E1D6CF;
+ padding: 15px 15px 30px 15px;
+ border-radius: 15px 15px 0 0;
+
+ & h1 {
+ margin: 20px 0 0 0 0;
+ font-weight: bold;
+ font-size: 1.3em;
+ border-bottom: 1px solid #9f9894;
+ color: gray(24);
+
+ &:nth-of-type(1n + 2) {
+ margin-top: 2em;
+ }
+ }
+ }
+
+ & > .footer {
+ grid-area: footer;
+ }
+
+ font-family: Helvetica, Arial, sans-serif;
+ color: #2c3e50;
+
+ width: 100%;
+ max-width: 1100px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-areas:
+ "logo"
+ "page"
+ "side"
+ "footer";
+}
+
+@media (min-width: 1100px) {
+ #app {
+ grid-column-gap: 0em;
+ grid-row-gap: 0px;
+ grid-template-columns: 2fr 4fr;
+ grid-template-areas:
+ "logo logo"
+ "page side"
+ "footer footer";
+
+ & > .content {
+ background: url(assets/page_footer.png) no-repeat left bottom #E1D6CF;
+ min-width: 890px;
+ padding-bottom: 200px;
+ border-radius: 15px 0 0 15px;
+ }
+ }
+}
+</style>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import Navigation from "@/components/Navigation.vue";
+import Logo from "@/components/Logo.vue";
+import Copyright from "@/components/Footer.vue";
+
+@Component({
+ components: {
+ Navigation,
+ Logo,
+ Copyright,
+ },
+})
+export default class AppV extends Vue {}
+</script>