From 8bea5fd5089db40788f28c8678985e28d7026d58 Mon Sep 17 00:00:00 2001
From: David Kaufmann <astra@ionic.at>
Date: Wed, 15 Jul 2015 03:51:46 +0200
Subject: [PATCH] add styles

---
 funcs.php |  5 ++--
 style.css | 83 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 2 deletions(-)

diff --git a/funcs.php b/funcs.php
index 9331705..b58749e 100644
--- a/funcs.php
+++ b/funcs.php
@@ -120,10 +120,11 @@ function html_linkbox($current = "") {
 		'calendar' => "Kalender",
 		'stats' => "Stats"
 	);
-	$out = "<h1>Anmeldesystem</h1>";
+	$out = '<div id="menu" class="align-center"><h1>Anmeldesystem</h1><ul class="menulist">';
 	foreach ($items as $file => $name) {
 		$activeitem = ($current === $file) ? ' menuactive' : '';
 		$out .= '<li class="menuitem'.$activeitem.'"><a href="./'.$file.'.php">'.$name.'</a></li>';
 	}
-	return '<ul class="menu">'.$out.'</ul>';
+	$out .= '</ul></div>';
+	return $out;
 }
diff --git a/style.css b/style.css
index e69de29..8263f5e 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,83 @@
+/*@import url(http://fonts.googleapis.com/css?family=Open+Sans);*/
+#menu,
+#menu ul,
+#menu ul li,
+#menu ul li a {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  list-style: none;
+  line-height: 1;
+  display: block;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+#menu:after,
+#menu > ul:after {
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+#menu {
+  width: auto;
+/*  font-family: 'Open Sans', sans-serif;*/
+  line-height: 1;
+  background: #ffffff;
+}
+#menu > ul > li {
+  float: left;
+}
+#menu.align-center > ul {
+  font-size: 0;
+  text-align: center;
+}
+#menu.align-center > ul > li {
+  display: inline-block;
+  float: none;
+}
+#menu > ul > li > a {
+  padding: 20px;
+  font-size: 12px;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #000000;
+  -webkit-transition: color .2s ease;
+  -moz-transition: color .2s ease;
+  -ms-transition: color .2s ease;
+  -o-transition: color .2s ease;
+  transition: color .2s ease;
+}
+#menu > ul > li:hover > a,
+#menu > ul > li.active > a {
+  color: #009ae1;
+}
+@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
+  #menu {
+    width: 100%;
+  }
+  #menu ul {
+    width: 100%;
+    display: none;
+  }
+  #menu.align-center > ul {
+    text-align: left;
+  }
+  #menu ul li {
+    width: 100%;
+    height: auto;
+    border-top: 1px solid rgba(120, 120, 120, 0.15);
+  }
+  #menu ul li a {
+    width: 100%;
+  }
+  #menu > ul > li,
+  #menu.align-center > ul > li {
+    float: none;
+    display: block;
+  }
+}
-- 
2.43.0