web: start gui

4 files changed, 111 insertions, 6 deletions

diff --git a/web/src/css/app.less b/web/src/css/app.less
index de89b6c6..0a25a90c 100644
--- a/web/src/css/app.less
+++ b/web/src/css/app.less
@@ -1,8 +1,12 @@
-.certinstall {
-	
+// www.paulirish.com/2012/box-sizing-border-box-ftw/
+html {
+  box-sizing: border-box;
 }
 
-@color: white;
-body {
-  background-color: @color;
-}
\ No newline at end of file
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+@import (less) "layout.less";
+@import (less) "header.less";
+@import (less) "footer.less";
\ No newline at end of file
diff --git a/web/src/css/footer.less b/web/src/css/footer.less
new file mode 100644
index 00000000..1aa75827
--- /dev/null
+++ b/web/src/css/footer.less
@@ -0,0 +1,3 @@
+footer {
+  padding: 0 10px;
+}
\ No newline at end of file
diff --git a/web/src/css/header.less b/web/src/css/header.less
new file mode 100644
index 00000000..998c0612
--- /dev/null
+++ b/web/src/css/header.less
@@ -0,0 +1,62 @@
+header {
+
+  background-color: white;
+
+  .title-bar {
+    line-height: 25px;
+    text-align: center;
+  }
+
+  @separator-color: lighten(grey, 15%);
+
+  nav {
+
+    border-bottom: solid @separator-color 1px;
+
+    a {
+      display: inline-block;
+      padding: 3px 14px;
+      margin: 0 2px -1px;
+      border: solid transparent 1px;
+      //text-transform: uppercase;
+      //font-family: Lato;
+
+      &.active {
+        border-color: @separator-color;
+        border-bottom-color: white;
+      }
+      &:hover {
+        /*
+        @preview: lightgrey;
+        border-top-color: @preview;
+        border-left-color: @preview;
+        border-right-color: @preview;
+        */
+        text-decoration: none;
+      }
+      &.special {
+        @special-color: #396cad;
+        color: white;
+        background-color: @special-color;
+        border-bottom-color: @special-color;
+        &:hover {
+          background-color: lighten(@special-color, 10%);
+        }
+      }
+    }
+
+    &:before {
+      content: " ";
+    }
+
+    &:after {
+      clear: both;
+    }
+
+  }
+
+  .menu {
+    height: 100px;
+    border-bottom: solid @separator-color 1px;
+  }
+}
\ No newline at end of file
diff --git a/web/src/css/layout.less b/web/src/css/layout.less
new file mode 100644
index 00000000..e1f22249
--- /dev/null
+++ b/web/src/css/layout.less
@@ -0,0 +1,36 @@
+html, body, #container {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+header, footer {
+  display: block;
+}
+
+@headerheight: 153px;
+@footerheight: 25px;
+
+#container {
+  //Set padding on container so that #main can take 100% height
+  //If we don't do it, the scrollbars will be too large.
+  padding: @headerheight 0 @footerheight;
+}
+
+header {
+  height: @headerheight;
+  //Substract #container padding
+  margin-top: -@headerheight;
+}
+
+#main {
+  height: 100%;
+  display: block;
+  overflow-y: auto;
+}
+
+footer {
+  //This starts at the beginning of the #container padding, all fine.
+  height: @footerheight;
+  line-height: @footerheight;
+}