put the page class on html element

customize.dist/src/less2/main.less

@@ -2,11 +2,11 @@
 	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-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"; }
-div#cp-main.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
-div#cp-main.cp-page-about { @import "./pages/page-about.less"; }
-div#cp-main.cp-page-privacy { @import "./pages/page-privacy.less"; }
-div#cp-main.cp-page-terms { @import "./pages/page-terms.less"; }
+body.cp-page-index { @import "./pages/page-index.less"; }
+body.cp-page-contact { @import "./pages/page-contact.less"; }
+body.cp-page-login { @import "./pages/page-login.less"; }
+body.cp-page-register { @import "./pages/page-register.less"; }
+body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
+body.cp-page-about { @import "./pages/page-about.less"; }
+body.cp-page-privacy { @import "./pages/page-privacy.less"; }
+body.cp-page-terms { @import "./pages/page-terms.less"; }

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

@@ -9,7 +9,7 @@
 
 @background_lighter: rgba(0,0,0,0.1);
 @background_darker: rgba(0,0,0,0.4);
-&#cp-main {
+#cp-main {
     color: #FFF;
     background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg');
     background-size: cover;

customize.dist/template.js

@@ -78,6 +78,15 @@ $(function () {
 
             return;
         }
+    } else {
+        // add class on info-pages
+        var css = location.pathname.replace(/(\/$|^\/|.html$)/gm, "")
+            .replace(/[^a-zA-Z]/gi, "-");
+        if (css === '')
+        {
+            css = 'index';
+        }
+        $('body').addClass('cp-page-' + css);
     }
 
     require([