2017-08-10 23:14:45 +02:00
|
|
|
<template>
|
|
|
|
<div id="app">
|
2017-08-22 23:01:17 +02:00
|
|
|
<header class="app-header">
|
2017-08-20 22:52:51 +02:00
|
|
|
<router-link :to="{ path: '/' }">
|
2017-08-25 23:04:02 +02:00
|
|
|
<img class="header-logo" :src="euromatLogo" width="90" height="90" />
|
2017-08-20 22:52:51 +02:00
|
|
|
</router-link>
|
2017-08-22 23:01:17 +02:00
|
|
|
|
|
|
|
<app-menu :main="topMenu" :languages="languages" />
|
|
|
|
</header>
|
2017-08-20 22:52:51 +02:00
|
|
|
|
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-22 23:01:17 +02:00
|
|
|
<footer>
|
2017-08-26 02:03:31 +02:00
|
|
|
<app-footer :menu="subMenu" :social="socialMedia" />
|
2017-08-22 23:01:17 +02:00
|
|
|
</footer>
|
|
|
|
|
2017-08-12 23:00:43 +02:00
|
|
|
<div class="app-background">
|
|
|
|
<svgicon
|
|
|
|
name="european-stars"
|
|
|
|
width="10em"
|
|
|
|
height="10em"
|
2017-08-25 21:27:41 +02:00
|
|
|
scale="8"
|
|
|
|
color="#fee872" />
|
2017-08-12 23:00:43 +02:00
|
|
|
</div>
|
2017-08-10 23:14:45 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2017-08-25 23:15:29 +02:00
|
|
|
import AppMenu from '@/components/app-menu'
|
|
|
|
import AppFooter from '@/components/app-footer'
|
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: {
|
2017-08-25 23:15:29 +02:00
|
|
|
'app-menu': AppMenu,
|
|
|
|
'app-footer': AppFooter
|
2017-08-12 21:28:33 +02:00
|
|
|
},
|
|
|
|
|
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-26 02:19:47 +02:00
|
|
|
},
|
|
|
|
socialMedia: {
|
|
|
|
clipboard: 'In Zwischenablage kopiert'
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
en: {
|
2017-08-15 20:26:34 +02:00
|
|
|
topMenu: {
|
2017-08-21 23:22:33 +02:00
|
|
|
index: 'Landing 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-26 02:19:47 +02:00
|
|
|
},
|
|
|
|
socialMedia: {
|
|
|
|
clipboard: 'Copied to clipboard'
|
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: [
|
2017-08-25 21:27:41 +02:00
|
|
|
{ icon: require('@/assets/svg/flag-de.svg'), locale: 'de' },
|
|
|
|
{ icon: require('@/assets/svg/flag-uk.svg'), locale: 'en' }
|
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-26 02:19:47 +02:00
|
|
|
},
|
|
|
|
socialMedia () {
|
|
|
|
return [
|
|
|
|
{ label: 'twitter', icon: 'twitter', message: '' },
|
|
|
|
{ label: 'facebook', icon: 'facebook', message: '' },
|
|
|
|
{ label: 'clipboard', icon: 'clipboard', message: this.$t('socialMedia.clipboard') }
|
|
|
|
]
|
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-25 22:54:13 +02:00
|
|
|
@import "~styles/animations";
|
2017-08-21 21:57:31 +02:00
|
|
|
@import "~styles/fonts";
|
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-25 22:45:04 +02:00
|
|
|
$app-width: 930px;
|
2017-08-13 15:44:03 +02:00
|
|
|
|
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-25 22:45:04 +02:00
|
|
|
font-family: $fontHalisGR;
|
2017-08-21 21:57:31 +02:00
|
|
|
font-weight: normal;
|
2017-08-25 22:45:04 +02:00
|
|
|
font-size: $font-size-base;
|
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 {
|
2017-08-25 21:27:41 +02:00
|
|
|
font-size: $font-size-xlarge;
|
|
|
|
line-height: 110%;
|
|
|
|
font-weight: 600;
|
2017-08-25 22:45:04 +02:00
|
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
|
2017-08-12 23:00:43 +02:00
|
|
|
margin: 0;
|
2017-08-25 21:27:41 +02:00
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
font-size: $font-size-large;
|
|
|
|
}
|
2017-08-10 23:14:45 +02:00
|
|
|
}
|
2017-08-10 23:47:40 +02:00
|
|
|
|
2017-08-25 22:45:04 +02:00
|
|
|
h2 {
|
|
|
|
font-size: $font-size-large;
|
|
|
|
color: $text-color-secondary;
|
2017-08-25 23:28:07 +02:00
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
font-size: $font-size-large - 50%;
|
|
|
|
}
|
2017-08-25 22:45:04 +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-25 23:15:29 +02:00
|
|
|
text-decoration: none;
|
2017-08-25 22:54:13 +02:00
|
|
|
transition: color 150ms $easeInOutQuint;
|
2017-08-13 18:26:20 +02:00
|
|
|
|
2017-08-26 00:45:59 +02:00
|
|
|
&:not(.btn):hover {
|
2017-08-12 23:00:43 +02:00
|
|
|
color: $text-color-special;
|
|
|
|
}
|
2017-08-12 21:28:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#app {
|
2017-08-22 23:01:17 +02:00
|
|
|
width: 100vw;
|
2017-08-12 23:00:43 +02:00
|
|
|
display: flex;
|
2017-08-22 23:01:17 +02:00
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2017-08-12 23:00:43 +02:00
|
|
|
position: relative;
|
2017-08-20 22:52:51 +02:00
|
|
|
|
2017-08-26 02:03:31 +02:00
|
|
|
header {
|
2017-08-22 23:01:17 +02:00
|
|
|
width: 100%;
|
|
|
|
}
|
2017-08-12 23:00:43 +02:00
|
|
|
}
|
|
|
|
|
2017-08-22 23:01:17 +02:00
|
|
|
.app-header {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
2017-08-25 21:27:41 +02:00
|
|
|
align-items: flex-start;
|
|
|
|
padding: $base-gap $small-gap 0 $base-gap;
|
2017-08-25 23:28:07 +02:00
|
|
|
margin-bottom: $base-gap;
|
2017-08-25 23:04:02 +02:00
|
|
|
|
|
|
|
@media (max-width: 650px) {
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
padding: $small-gap - 5;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.header-logo {
|
|
|
|
@media (max-width: 650px) {
|
|
|
|
margin-bottom: $small-gap;
|
|
|
|
}
|
2017-08-12 23:00:43 +02:00
|
|
|
}
|
|
|
|
|
2017-08-25 23:28:07 +02:00
|
|
|
main {
|
|
|
|
width: 100%;
|
|
|
|
max-width: $app-width;
|
|
|
|
padding: 0 $small-gap;
|
|
|
|
position: relative;
|
|
|
|
z-index: 1;
|
|
|
|
margin-bottom: $base-gap * 3;
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
margin-bottom: $base-gap;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-25 23:15:29 +02:00
|
|
|
footer {
|
|
|
|
position: fixed;
|
2017-08-26 00:18:00 +02:00
|
|
|
z-index: 2;
|
2017-08-25 23:15:29 +02:00
|
|
|
bottom: 0;
|
2017-08-26 02:03:31 +02:00
|
|
|
right: 0;
|
2017-08-25 23:15:29 +02:00
|
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
position: static;
|
|
|
|
justify-content: center;
|
|
|
|
margin-top: $base-gap;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-12 23:00:43 +02:00
|
|
|
.app-background {
|
2017-08-25 22:45:04 +02:00
|
|
|
display: none;
|
2017-08-12 23:00:43 +02:00
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
z-index: -1;
|
|
|
|
|
|
|
|
svg {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
transform: translate(-65%, -53%);
|
|
|
|
}
|
2017-08-10 23:47:40 +02:00
|
|
|
}
|
2017-08-10 23:14:45 +02:00
|
|
|
</style>
|