2 files changed, 142 insertions, 0 deletions
diff --git a/lib/css/debug.html b/lib/css/debug.html
new file mode 100644
index 0000000..8d4b997
--- /dev/null
+++ b/lib/css/debug.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<html>
+	
+	<head>
+
+		<title>CSS Debugger</title>
+
+		<meta charset="utf-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="xengineering.css" type="text/css">
+
+	</head>
+	
+	<body>
+
+		<div class="xmenu">
+			<a href="https://example.com">HOME</a>
+		</div>
+
+		<div class="xcontent">
+			<h1>Web Template</h1>
+			<button onclick="example_post()">Call JS Function</button>
+		</div>
+
+		<script src="js/example.js"></script>
+
+	</body>
+
+</html> 
+
diff --git a/lib/css/xengineering.css b/lib/css/xengineering.css
new file mode 100644
index 0000000..1e14b72
--- /dev/null
+++ b/lib/css/xengineering.css
@@ -0,0 +1,111 @@
+
+
+/*
+    web-template - A Template Project for dynamic Web Applications.
+
+    Copyright (C) 2020  xengineering
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+
+/*
+  General Stuff
+*/
+
+* {
+  box-sizing: border-box;  /* Include padding and border in the element's total width and height */
+}
+
+body {
+  margin: 0;  /* avoid ugly white margin */
+  font-family: Arial, Helvetica, sans-serif;  /* select a nice font */
+}
+
+.xmenu {
+  background-color: black;
+}
+
+.xcontent {
+  background-color: white;
+}
+
+.xmenu a {
+  color: lightgray;
+  text-decoration: none;  /* disable ugly underlined links */
+}
+
+/* How should the link behave if the mouse is over this item? */
+.xmenu a:hover {
+  background-color: lightgray;
+  color: black;
+}
+
+
+
+/*
+  Default Geometry / Geometry for Phones ('Mobile First Development')
+*/
+
+.xcontent {
+  padding-left: 20px;
+  padding-right: 20px;
+  text-align: justify;
+}
+
+.xmenu a {
+  display: block;
+  padding: 16px;
+  text-align: center;
+}
+
+
+
+/*
+  Geometry for Tablets
+*/
+
+@media only screen and (min-width: 600px) {
+  /* empty --> same rules as for phones */
+}
+
+
+
+/*
+  Geometry for Desktops
+*/
+
+@media only screen and (min-width: 768px) {
+
+  .xmenu {
+    height: 100%;
+    width: 200px;
+    position: fixed;  /* position fixed in top left corner (with offset) */
+    top: 0px;  /* disable the offset from top left corner */
+  }
+
+  .xmenu a {
+    text-align: left;
+  }
+
+  .xcontent {
+    margin-left: 200px;  /* transparent margin on the left for .xmenu */
+  }
+
+  .xcontent *{  /* everything inside the content container */
+    max-width: 960px;  /* maximum width on desktops should be 960 px */
+    margin-left: auto;  /* center it with margin */
+    margin-right: auto;  /* center it with margin */
+  }
+}