Fix up some less for supporting the info-pages

customize.dist/pages.js

@@ -129,9 +129,12 @@ define([
     };
 
     Pages['/contact.html'] = function () {
-        return h('div#main_other', [
-            h('center', h('h1', Msg.contact)),
-            setHTML(h('p'), Msg.main_about_p2)
+        return h('div#cp-main.cp-page-contact', [
+            infopageTopbar(),
+            h('div.container.cp-container', [
+                h('center', h('h1', Msg.contact)),
+                setHTML(h('p'), Msg.main_about_p2)
+            ])
         ]);
     };
 

customize.dist/src/less2/main.less

@@ -2,4 +2,7 @@
 	font-family: Neuropolitical;
 	src: url(./customize/fonts/neuropolitical.ttf)
 }
-div#cp-main.cp-page-index { @import "./pages/page-index.less"; }
+div#cp-main.cp-page-index { @import "./pages/page-index.less"; }
+div#cp-main.cp-page-contact { @import "./pages/page-contact.less"; }
+div#cp-main.cp-page-login { @import "./pages/page-login.less"; }
+div#cp-main.cp-page-register { @import "./pages/page-register.less"; }

customize.dist/src/less2/pages/page-contact.less

@@ -0,0 +1,168 @@
+@import (once) "../include/infopages.less";
+@import (once) "../include/colortheme.less";
+
+
+.infopages_main();
+.infopages_topbar();
+
+&#cp-main {
+
+}
+/*
+.cp-right {
+	.cp-register-btn {
+		padding: 0.5em 1em 0.7em 1em;
+		border: 2px solid #fff;
+		&:hover {
+			transform: scale(1.05);
+		}
+	}
+	.cp-login-btn {
+		color: #fff;
+		margin-left: 0.6em;
+		padding: 0.5em 1em 0.7em 1em;
+		&:hover {
+			transform: scale(1.05);
+		}
+	} 
+}
+
+.cp-title {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 1.5em;
+    img {
+        height: 20vh;
+        margin-bottom: 1.5em;
+    }
+    margin-left: 0;
+    h1 {
+        font-family: "Neuropolitical";
+        //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif;
+        //font-family: "Raleway";
+        font-size: 45px;
+    }
+    p {
+        //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+        font-size: 21px;
+        //font-style: italic;
+    }
+}
+.cp-topbar { 
+    position: absolute;
+    button:focus {
+        outline: none;
+    }
+    .navbar-toggler-left {
+        top: -0.59rem;
+    }
+    .cp-left {
+        .fa-bars {
+            font-size: 1.6rem;
+        }
+    }
+}
+@callout-padding: 15px;
+a:hover {
+    text-decoration: none
+}
+.bs-callout {
+    display: flex;
+    align-items: stretch;
+    margin: 25px 0;
+    background:rgba(255,255,255,0.6);
+    color: black;
+    transition: all .1s ease-in-out;
+    box-sizing: border-box;
+    height: 5em;
+    position: relative;
+    a {
+        color: black;
+        &:hover { text-decoration-line: none; }
+    }
+    div {
+        @media only screen and (min-device-width: 576px) and (max-device-width: 767px) {
+            left: 4.5em !important;
+        }
+    }
+}
+h4 {
+    margin: 0;
+}
+.cp-callout-more-moremsg,.cp-callout-more-lessmsg {
+    transform: none !important;
+}
+.bs-callout div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    position: absolute;
+    left: 5em;
+}
+.bs-callout+.bs-callout {
+    margin-top: -5px;
+}
+
+.bs-callout:hover {
+    //color: white;
+    transform: scale(1.05);
+    cursor: pointer; 
+}
+.bs-callout:hover .fa {
+    //width: 100%;
+}
+.bs-callout:hover.cp-callout-more {
+        transform: none !important;
+}
+.bs-callout .fa {
+    display: flex;
+    align-items: center;
+    font-size: 2em;
+    padding-left: 0.57em;
+    width: 2em;
+    transition: width 0.1s;
+    color: #fff;
+}
+.cp-callout-pad .fa { background-color: @colortheme_pad-bg; }
+.cp-callout-code .fa { background-color: @colortheme_code-bg; }
+.cp-callout-slide .fa { background-color: @colortheme_slide-bg; }
+.cp-callout-poll .fa { background-color: @colortheme_poll-bg; }
+.cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; }
+.cp-callout-recent .fa { background-color: @colortheme_drive-bg; }
+.cp-hidden { display: none !important; }
+.cp-callout-more {
+    width: auto;
+    display: inline-block;
+    align-content: center;
+    height: 2em;
+    border-radius: 1em;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    background: none;
+    width: 100%;
+    div {
+        .infopages_link();
+        color: #fff;
+        .fa {
+            font-size: inherit;
+            padding: 0;
+            width: 1em;
+            padding-left: 5px;
+        }
+    }
+}
+.navbar-inverse .navbar-toggler {
+    border-color: transparent;
+}
+@media (min-width: 576px) and (max-width: 767px) {
+    .container {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left {
+        left: 5px;
+    }
+}*/

customize.dist/src/less2/pages/page-index.less

@@ -1,5 +1,3 @@
-//@import (once) "./variables.less";
-
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme.less";
 

customize.dist/template.js

@@ -177,12 +177,7 @@ $(function () {
         'less!/customize/src/less2/main.less',
         'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     ], function () {
-        if (pathname === '/') {
-            // TODO(cjd): This is a hack because the template system doesn't make it easy.
-            $body.append($main);
-            return;
-        }
-        $body.append($topbar).append($main).append($footer);
+        $body.append($main);
 
         if (/^\/user\//.test(pathname)) {
             require([ '/user/main.js'], function () {});