Merge branch 'master' of bitbucket.org:FsInformatikDortmund/infoscreen

css/design.css

 @viewport {
-   width: device-width;
-   user-zoom:fixed;
+  width: device-width;
+  user-zoom: fixed;
 }
-
 body {
-	margin: 0px;
-	background: #0a0a0a;
-	font-family: Arial;
-	overflow:hidden;
+  margin: 0px;
+  background: #0a0a0a;
+  font-family: Arial;
+  overflow: hidden;
 }
-
 [data-container=panel] {
-	background-color: rgba(8, 8, 8, 0.68);
-	border: solid 1px #252525;
-	box-shadow: 0px 2px 1px #000000;
-	padding: 6px;
-/*	margin: 5px;*/
-	float:left;
-	box-sizing: border-box;
-	height:100%;
-	width:100%;
-	overflow: hidden;
+  background-color: rgba(8, 8, 8, 0.68);
+  border: solid 1px #252525;
+  box-shadow: 0px 2px 1px #000000;
+  padding: 6px;
+  /*	margin: 5px;*/
+  float: left;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
 }
-
 [data-container=panelContainer] {
-	float: left;
+  float: left;
   width: 100%;
   height: 100%;
   /*padding: 4px;*/
-	padding: 0.2vw;
+  padding: 0.2vw;
   box-sizing: border-box;
 }
-
 [data-container=split] {
-	box-sizing: border-box;
-/*	display: flex;
+  box-sizing: border-box;
+  /*	display: flex;
 	flex-direction: column;*/
-	height:100%;
-	width:100%;
-	float: left;
+  height: 100%;
+  width: 100%;
+  float: left;
 }
-
 [data-container=main] {
-	height:100%;
-	width:100%;
-	position:absolute;
-
-	box-sizing: border-box;
-		padding: 0.2vw;
-    background: radial-gradient(black 15%, transparent 15%) 0 0, radial-gradient(black 15%, transparent 15%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, 
-transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
-    background-size: 16px 16px;
-    background-color: #171717;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  box-sizing: border-box;
+  padding: 0.2vw;
+  background: radial-gradient(black 15%, transparent 15%) 0 0, radial-gradient(black 15%, transparent 15%) 12px 12px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 12px 13px;
+  background-size: 36px 36px;
+  background-color: #171717;
 }
-

css/design.less

+@dotdist: 12px;
+
+@viewport {
+   width: device-width;
+   user-zoom:fixed;
+}
+
+body {
+	margin: 0px;
+	background: #0a0a0a;
+	font-family: Arial;
+	overflow:hidden;
+}
+
+[data-container=panel] {
+	background-color: rgba(8, 8, 8, 0.68);
+	border: solid 1px #252525;
+	box-shadow: 0px 2px 1px #000000;
+	padding: 6px;
+/*	margin: 5px;*/
+	float:left;
+	box-sizing: border-box;
+	height:100%;
+	width:100%;
+	overflow: hidden;
+}
+
+[data-container=panelContainer] {
+	float: left;
+  width: 100%;
+  height: 100%;
+  /*padding: 4px;*/
+	padding: 0.2vw;
+  box-sizing: border-box;
+}
+
+[data-container=split] {
+	box-sizing: border-box;
+/*	display: flex;
+	flex-direction: column;*/
+	height:100%;
+	width:100%;
+	float: left;
+}
+
+[data-container=main] {
+	height:100%;
+	width:100%;
+	position:absolute;
+
+	box-sizing: border-box;
+		padding: 0.2vw;
+    background: radial-gradient(black 15%, transparent 15%) 0 0, radial-gradient(black 15%, transparent 15%) @dotdist @dotdist, radial-gradient(rgba(255,255,255,.1) 
+15%, 
+transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) @dotdist @dotdist+1;
+    background-size: @dotdist*3 @dotdist*3;
+    background-color: #171717;
+}
+