Parcourir la source

Website and menu style

The website will be dark for now, since its nicer to develop it then.
The menu got a small style fix, it looked horrible.
Ecconia il y a 7 ans
Parent
commit
af1a66fb8b
1 fichiers modifiés avec 60 ajouts et 8 suppressions
  1. 60 8
      src/App.vue

+ 60 - 8
src/App.vue

@@ -2,14 +2,66 @@
 	<div id="app">
 		<p>WIP website, for further information ask Ecconia in the discord.</p>
 		<h2>Possibly new website for the RedstoneServer</h2>
-		<h4>Router-Menu:</h4>
-		<ul>
-			<li><router-link to="/">Startpage</router-link></li>
-			<li><router-link to="/applications">Applications</router-link></li>
-			<li><router-link to="/devblog">Development Blog</router-link></li>
-		</ul>
-		<router-view/>
-		<br>
+		<div class="menu">
+			<h4>Menu:</h4>
+			<ul>
+				<router-link to="/"><li>Startpage</li></router-link>
+				<router-link to="/applications"><li>Applications</li></router-link>
+				<router-link to="/devblog"><li>Development Blog</li></router-link>
+			</ul>
+		</div>
+		<div class="content">
+			<router-view/>
+		</div>
 		<router-link to="/impressum">Impressum</router-link>
 	</div>
 </template>
+
+<style>
+	body {
+		font-family: sans-serif;
+		background-color: #111;
+		color: #aaa;
+		margin: 0;
+	}
+
+	.menu h4 {
+		margin: 0;
+		padding: 0.2em 0.4em 0.2em 0.4em;
+	}
+
+	.menu {
+		background-color: #222;
+		display: inline-block;
+	}
+
+	.menu ul {
+		margin: 0;
+		list-style-type: none;
+		padding: 0;
+	}
+
+	.menu li {
+		color: #aaa;
+		padding: 0.4em 0.8em 0.4em 0.8em;
+		border-top: solid 1px;
+	}
+
+	.menu a {
+		text-decoration: none;
+	}
+
+	.content {
+		margin-left: 8px;
+		margin-right: 8px;
+	}
+
+	body a:link {
+		color: #ddd;
+	}
+
+	body a:visited {
+		color: #666;
+	}
+
+</style>