dark theme desing

This commit is contained in:
Tim Zieger 2020-04-21 14:41:48 +02:00
parent b4137cfc58
commit 910abe4b57
4 changed files with 27 additions and 37 deletions

View File

@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body style="margin:0px">
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>

View File

@ -3,7 +3,6 @@
<Header /> <Header />
<router-view /> <router-view />
<Footer /> <Footer />
</div> </div>
</template> </template>
@ -22,15 +21,18 @@ export default {
<style scoped> <style scoped>
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; /* font-family: Avenir, Helvetica, Arial, sans-serif; */
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background-color: #131313;
color: #2c3e50; color: #f1f1f1f1;
} }
#nav { #nav {
padding: 30px;
} }
#nav a { #nav a {

View File

@ -1,3 +1,4 @@
footer
<template> <template>
<div class="footer"> <div class="footer">
<h3>Links</h3> <h3>Links</h3>
@ -15,14 +16,15 @@ name: "Footer"
<style scoped> <style scoped>
.footer { .footer {
background: #333; background: #272727;
color: #fff; color: #f1f1f1f1;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
} }
.footer a { .footer a {
color: #fff; font-family: 'Montserrat', sans-serif;
color: #f1f1f1f1;
padding-right: 5px; padding-right: 5px;
text-decoration: none; text-decoration: none;
} }

View File

@ -1,56 +1,42 @@
<template> <template>
<div class="header"> <div class="header">
<div> <div>
<img alt="Vue logo" src="../../assets/logo.svg"> <img alt="Vue logo" src="../../assets/logo.svg">
</div> </div>
<div> <div>
<u><router-link to="/login">Login</router-link></u> <u><router-link to="/login">Login</router-link></u>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "Header" name: "Header"
} }
</script> </script>
<style scoped> <style scoped>
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: #333; background: #272727;
color: #fff; color: #f1f1f1f1;
padding: 10px; padding: 10px;
} }
.header a { .header a {
float: left; font-family: 'Montserrat', sans-serif;
color: #fff; color: #f1f1f1f1;
padding: 10px;
text-decoration: none; text-decoration: none;
} }
.header img { .header img {
float: left; float: left;
height: 50px; height: 60px;
width: auto; width: auto;
padding: 10px; padding: 5px;
} }
.header p {
margin-left: 50%;
}
</style> </style>