2017-08-10 23:14:45 +02:00
|
|
|
<template>
|
|
|
|
<div id="app">
|
2017-08-20 22:52:51 +02:00
|
|
|
<aside class="menu">
|
|
|
|
<router-link :to="{ path: '/' }">
|
|
|
|
<img class="menu-logo" :src="euromatLogo" width="140" height="140" />
|
|
|
|
</router-link>
|
|
|
|
<app-menu
|
|
|
|
:main="topMenu"
|
|
|
|
:sub="subMenu"
|
|
|
|
:languages="languages"
|
|
|
|
:socialMedia="socialMedia" />
|
|
|
|
</aside>
|
|
|
|
|
2017-08-12 23:00:43 +02:00
|
|
|
<main>
|
2017-08-10 23:14:45 +02:00
|
|
|
<router-view></router-view>
|
|
|
|
</main>
|
2017-08-20 22:52:51 +02:00
|
|
|
|
2017-08-12 23:00:43 +02:00
|
|
|
<div class="app-background">
|
|
|
|
<svgicon
|
|
|
|
name="european-stars"
|
|
|
|
width="10em"
|
|
|
|
height="10em"
|
|
|
|
scale="4"
|
|
|
|
color="black" />
|
|
|
|
</div>
|
2017-08-10 23:14:45 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2017-08-12 21:28:33 +02:00
|
|
|
import Menu from '@/components/menu'
|
2017-08-12 23:00:43 +02:00
|
|
|
import '@/assets/icons/european-stars'
|
|
|
|
|
2017-08-10 23:14:45 +02:00
|
|
|
export default {
|
2017-08-15 22:25:25 +02:00
|
|
|
name: 'App',
|
2017-08-12 21:28:33 +02:00
|
|
|
|
|
|
|
components: {
|
|
|
|
'app-menu': Menu
|
|
|
|
},
|
|
|
|
|
2017-08-13 14:03:38 +02:00
|
|
|
i18n: {
|
|
|
|
messages: {
|
|
|
|
de: {
|
2017-08-15 20:26:34 +02:00
|
|
|
topMenu: {
|
2017-08-13 14:03:38 +02:00
|
|
|
index: 'Startseite',
|
2017-08-15 20:26:34 +02:00
|
|
|
about: 'Über uns',
|
2017-08-13 14:03:38 +02:00
|
|
|
faq: 'FAQ',
|
2017-08-15 20:26:34 +02:00
|
|
|
press: 'Presse'
|
|
|
|
},
|
|
|
|
subMenu: {
|
|
|
|
imprint: 'Impressum',
|
|
|
|
privacy: 'Datenschutz'
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
en: {
|
2017-08-15 20:26:34 +02:00
|
|
|
topMenu: {
|
2017-08-13 14:03:38 +02:00
|
|
|
index: 'Main page',
|
2017-08-15 20:26:34 +02:00
|
|
|
about: 'About us',
|
2017-08-13 14:03:38 +02:00
|
|
|
faq: 'FAQ',
|
2017-08-15 20:26:34 +02:00
|
|
|
press: 'Press'
|
|
|
|
},
|
|
|
|
subMenu: {
|
|
|
|
imprint: 'Imprint',
|
|
|
|
privacy: 'Data privacy'
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-08-12 21:28:33 +02:00
|
|
|
data () {
|
|
|
|
return {
|
2017-08-20 22:52:51 +02:00
|
|
|
euromatLogo: require('@/assets/svg/euromat-logo.svg'),
|
2017-08-13 14:03:38 +02:00
|
|
|
languages: [
|
|
|
|
{ label: '🇩🇪', locale: 'de' },
|
|
|
|
{ label: '🇬🇧', locale: 'en' }
|
2017-08-16 22:48:38 +02:00
|
|
|
],
|
|
|
|
socialMedia: [
|
|
|
|
{ label: 'Twitter' },
|
|
|
|
{ label: 'Facebook' },
|
|
|
|
{ label: 'Clipboard' }
|
2017-08-13 14:03:38 +02:00
|
|
|
]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
2017-08-15 22:59:50 +02:00
|
|
|
isGermanLocale () {
|
|
|
|
return this.$i18n.locale === 'de'
|
|
|
|
},
|
2017-08-15 20:26:34 +02:00
|
|
|
topMenu () {
|
2017-08-13 14:03:38 +02:00
|
|
|
return [
|
2017-08-15 22:59:50 +02:00
|
|
|
{
|
|
|
|
label: this.$t('topMenu.index'),
|
|
|
|
route: { path: '/' }
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: this.$t('topMenu.about'),
|
|
|
|
route: { path: this.isGermanLocale ? '/über-uns' : '/about-us' }
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: this.$t('topMenu.faq'),
|
|
|
|
route: { path: '/faq' }
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: this.$t('topMenu.press'),
|
|
|
|
route: { path: this.isGermanLocale ? '/presse' : '/press' }
|
|
|
|
}
|
2017-08-15 20:26:34 +02:00
|
|
|
]
|
|
|
|
},
|
|
|
|
subMenu () {
|
|
|
|
return [
|
2017-08-15 22:59:50 +02:00
|
|
|
{
|
|
|
|
label: this.$t('subMenu.imprint'),
|
|
|
|
route: { path: this.isGermanLocale ? '/impressum' : '/imprint' }
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: this.$t('subMenu.privacy'),
|
|
|
|
route: { path: this.isGermanLocale ? '/datenschutz' : '/privacy' }
|
|
|
|
}
|
2017-08-12 21:28:33 +02:00
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
2017-08-10 23:14:45 +02:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
@import "~node_modules/normalize.css/normalize";
|
2017-08-13 14:03:38 +02:00
|
|
|
@import "~styles/buttons";
|
2017-08-12 21:28:33 +02:00
|
|
|
@import "~styles/colors";
|
2017-08-12 23:00:43 +02:00
|
|
|
@import "~styles/layout";
|
2017-08-10 23:14:45 +02:00
|
|
|
|
2017-08-13 15:44:03 +02:00
|
|
|
$app-width: 850px;
|
|
|
|
|
2017-08-10 23:14:45 +02:00
|
|
|
* {
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
2017-08-10 23:47:40 +02:00
|
|
|
html,
|
2017-08-10 23:14:45 +02:00
|
|
|
body {
|
2017-08-10 23:47:40 +02:00
|
|
|
width: 100vw;
|
|
|
|
height: 100vh;
|
2017-08-12 21:28:33 +02:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
2017-08-12 23:00:43 +02:00
|
|
|
align-items: flex-start;
|
2017-08-10 23:14:45 +02:00
|
|
|
}
|
|
|
|
|
2017-08-10 23:47:40 +02:00
|
|
|
body {
|
2017-08-12 21:28:33 +02:00
|
|
|
background: $background-primary;
|
|
|
|
color: $text-color-base;
|
2017-08-10 23:14:45 +02:00
|
|
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
2017-08-13 15:44:03 +02:00
|
|
|
font-size: 16px;
|
2017-08-10 23:14:45 +02:00
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
2017-08-13 15:44:03 +02:00
|
|
|
overflow-x: hidden;
|
2017-08-12 23:00:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
margin: 0;
|
2017-08-10 23:14:45 +02:00
|
|
|
}
|
2017-08-10 23:47:40 +02:00
|
|
|
|
2017-08-16 22:48:38 +02:00
|
|
|
p {
|
|
|
|
line-height: 150%;
|
|
|
|
}
|
|
|
|
|
2017-08-12 21:28:33 +02:00
|
|
|
a {
|
2017-08-12 23:00:43 +02:00
|
|
|
color: $text-color-base;
|
2017-08-13 18:26:20 +02:00
|
|
|
|
2017-08-12 23:00:43 +02:00
|
|
|
&:hover {
|
|
|
|
color: $text-color-special;
|
|
|
|
}
|
2017-08-12 21:28:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#app {
|
2017-08-13 15:44:03 +02:00
|
|
|
max-width: $app-width;
|
2017-08-12 21:28:33 +02:00
|
|
|
width: 95vw;
|
2017-08-12 23:00:43 +02:00
|
|
|
display: flex;
|
|
|
|
align-items: flex-start;
|
|
|
|
position: relative;
|
2017-08-13 15:44:03 +02:00
|
|
|
margin: $base-gap * 3 0;
|
2017-08-20 22:52:51 +02:00
|
|
|
|
|
|
|
aside {
|
|
|
|
margin-right: $base-gap * 2;
|
|
|
|
position: relative;
|
|
|
|
flex: 0 0 140px;
|
|
|
|
}
|
|
|
|
|
|
|
|
main {
|
|
|
|
background: transparentize($background-primary, 0.5);
|
|
|
|
width: 100%;
|
|
|
|
position: relative;
|
|
|
|
z-index: 1;
|
|
|
|
}
|
2017-08-12 23:00:43 +02:00
|
|
|
}
|
|
|
|
|
2017-08-20 22:52:51 +02:00
|
|
|
.menu-logo {
|
|
|
|
margin-bottom: $small-gap;
|
2017-08-12 23:00:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.app-background {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
z-index: -1;
|
|
|
|
|
|
|
|
svg {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
transform: translate(-65%, -53%);
|
2017-08-13 18:26:20 +02:00
|
|
|
opacity: 0.2;
|
2017-08-12 23:00:43 +02:00
|
|
|
}
|
2017-08-10 23:47:40 +02:00
|
|
|
}
|
2017-08-10 23:14:45 +02:00
|
|
|
</style>
|