2017-08-10 23:14:45 +02:00
|
|
|
<template>
|
|
|
|
<div id="app">
|
2017-08-12 21:28:33 +02:00
|
|
|
<app-menu :menu="menu" />
|
2017-08-12 23:00:43 +02:00
|
|
|
<main>
|
2017-08-10 23:14:45 +02:00
|
|
|
<router-view></router-view>
|
|
|
|
</main>
|
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-12 21:28:33 +02:00
|
|
|
name: 'Eur-O-Mat',
|
|
|
|
|
|
|
|
components: {
|
|
|
|
'app-menu': Menu
|
|
|
|
},
|
|
|
|
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
menu: [
|
|
|
|
{ label: 'Startseite', route: { path: '/' } },
|
|
|
|
{ label: 'FAQ', route: { path: '/faq' } },
|
|
|
|
{ label: 'Presse', route: { path: '/presse' } },
|
|
|
|
{ label: 'Impressum', route: { path: '/impressum' } }
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
2017-08-10 23:14:45 +02:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
@import "~node_modules/normalize.css/normalize";
|
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
|
|
|
|
|
|
|
* {
|
|
|
|
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;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
2017-08-12 23:00:43 +02:00
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
margin: 0;
|
2017-08-10 23:14:45 +02:00
|
|
|
}
|
2017-08-10 23:47:40 +02:00
|
|
|
|
2017-08-12 21:28:33 +02:00
|
|
|
a {
|
2017-08-12 23:00:43 +02:00
|
|
|
color: $text-color-base;
|
|
|
|
&:hover {
|
|
|
|
color: $text-color-special;
|
|
|
|
}
|
2017-08-12 21:28:33 +02:00
|
|
|
}
|
|
|
|
|
2017-08-10 23:47:40 +02:00
|
|
|
button {
|
2017-08-12 21:28:33 +02:00
|
|
|
padding: 10px 20px;
|
|
|
|
background: $button-background;
|
|
|
|
color: $button-color;
|
2017-08-12 23:00:43 +02:00
|
|
|
border-radius: $border-radius;
|
|
|
|
border: 2px solid $button-background;
|
2017-08-12 21:28:33 +02:00
|
|
|
cursor: pointer;
|
2017-08-12 23:00:43 +02:00
|
|
|
position: relative;
|
|
|
|
transition: background 50ms, border-color 0.4s;
|
|
|
|
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
|
|
|
|
|
|
|
&::before,
|
|
|
|
&::after {
|
|
|
|
content: '';
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: -2px;
|
|
|
|
width: calc(100% + 4px);
|
|
|
|
height: 100%;
|
|
|
|
border-radius: $border-radius;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
background: $yellow;
|
|
|
|
border-radius: $border-radius;
|
|
|
|
opacity: 0;
|
|
|
|
z-index: -1;
|
|
|
|
transform: scale3d(0.7, 1, 1);
|
|
|
|
transition: transform 0.4s, opacity 0.4s;
|
|
|
|
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
background: $button-background;
|
|
|
|
z-index: -2;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: transparent;
|
|
|
|
border-color: $yellow;
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
opacity: 1;
|
|
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
}
|
|
|
|
}
|
2017-08-12 21:28:33 +02:00
|
|
|
|
|
|
|
&:active,
|
|
|
|
&:focus {
|
|
|
|
outline: none;
|
|
|
|
background: $yellow;
|
|
|
|
}
|
2017-08-12 23:00:43 +02:00
|
|
|
|
|
|
|
&.btn-txt {
|
|
|
|
background: transparent;
|
|
|
|
color: $text-color-base;
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
&::before, &::after {
|
|
|
|
content: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: $text-color-special;
|
|
|
|
}
|
|
|
|
}
|
2017-08-10 23:47:40 +02:00
|
|
|
}
|
|
|
|
|
2017-08-12 21:28:33 +02:00
|
|
|
#app {
|
2017-08-12 23:00:43 +02:00
|
|
|
max-width: 750px;
|
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;
|
|
|
|
margin-top: $base-gap * 3;
|
|
|
|
}
|
|
|
|
|
|
|
|
main {
|
|
|
|
background: transparentize($background-primary, .5);
|
|
|
|
width: 100%;
|
|
|
|
position: relative;
|
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.app-background {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
z-index: -1;
|
|
|
|
|
|
|
|
svg {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
transform: translate(-65%, -53%);
|
|
|
|
opacity: .2;
|
|
|
|
}
|
2017-08-10 23:47:40 +02:00
|
|
|
}
|
2017-08-10 23:14:45 +02:00
|
|
|
</style>
|