studio - stubbed in basic LMS styling to HTML displaygst

cms/static/css/tiny-mce.css

@@ -1,50 +1,88 @@
 body {
-    background-color: #fff;
-    font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
-    font-size: 16px;
-    line-height: 1.6;
-    color: #3c3c3c;
-    scrollbar-3dlight-color: #F0F0EE;
-    scrollbar-arrow-color: #676662;
-    scrollbar-base-color: #F0F0EE;
-    scrollbar-darkshadow-color: #DDDDDD;
-    scrollbar-face-color: #E0E0DD;
-    scrollbar-highlight-color: #F0F0EE;
-    scrollbar-shadow-color: #F0F0EE;
-    scrollbar-track-color: #F5F5F5;
+  background-color: #fff;
+  font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #3c3c3c;
+  scrollbar-3dlight-color: #F0F0EE;
+  scrollbar-arrow-color: #676662;
+  scrollbar-base-color: #F0F0EE;
+  scrollbar-darkshadow-color: #DDDDDD;
+  scrollbar-face-color: #E0E0DD;
+  scrollbar-highlight-color: #F0F0EE;
+  scrollbar-shadow-color: #F0F0EE;
+  scrollbar-track-color: #F5F5F5;
 }
 
-a {
-    color: #1d9dd9;
-    text-decoration: none;
-}
-
-p {
-    font-size: 16px;
-    line-height: 1.6;
+h1 {
+  color: #3c3c3c;
+  font-weight: normal;
+  font-size: 2em;
+  line-height: 1.4em;
+  letter-spacing: 1px;
 }
 
 h2 {
-    color: #646464;
-    font-size: 19px;
-    font-weight: 300;
-    letter-spacing: 1px;
-    margin-bottom: 15px;
-    text-transform: uppercase;
+  color: #646464;
+  font-weight: normal;
+  font-size: 1.2em;
+  line-height: 1.2em;
+  letter-spacing: 1px;
+  margin-bottom: 15px;
+  text-transform: uppercase;
+  -webkit-font-smoothing: antialiased;
 }
 
 h3 {
-    font-size: 19px;
-    font-weight: 400;
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+p {
+  margin-bottom: 1.416em;
+  font-size: 1em;
+  line-height: 1.6em !important;
+  color: $baseFontColor;
+}
+
+em, i {
+  font-style: italic;
+}
+
+strong, b {
+  font-style: bold;
+}
+
+p + p, ul + p, ol + p {
+  margin-top: 20px;
+}
+
+ol, ul {
+  margin: 1em 0;
+  padding: 0 0 0 1em;
+}
+
+ol li, ul li {
+  margin-bottom: 0.708em;
+}
+
+ol {
+  list-style: decimal outside none;
+}
+
+ul {
+  list-style: disc outside none;
+}
+
+a, a:link, a:visited, a:hover, a:active {
+  color: #1d9dd9;
+} 
+
+img {
+  max-width: 100%;
 }
 
 code {
-    margin: 0 2px;
-    padding: 0px 5px;
-    border-radius: 3px;
-    border: 1px solid #eaeaea;
-    white-space: nowrap;
-    font-family: Monaco, monospace;
-    font-size: 14px;
-    background-color: #f8f8f8;
+  font-family: monospace, serif;
+  background: none;
 }

cms/static/sass/_unit.scss

@@ -554,3 +554,81 @@ body.unit {
     }
   }
 }
+
+// HTML component display: 
+.xmodule_HtmlModule {
+  line-height: 1.4em;
+
+  h1 {
+    color: $baseFontColor;
+    font: normal 2em/1.4em $sans-serif;
+    letter-spacing: 1px;
+  }
+
+  h2 {
+    color: #646464;
+    font: normal 1.2em/1.2em $sans-serif;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+    text-transform: uppercase;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  h3 {
+    font-size: 1.2em;
+    font-weight: 600;
+  }
+
+  p {
+    margin-bottom: 1.416em;
+    font-size: 1em;
+    line-height: 1.6em !important;
+    color: $baseFontColor;
+  }
+
+  em, i {
+    font-style: italic;
+  }
+
+  strong, b {
+    font-style: bold;
+  }
+
+  p + p, ul + p, ol + p {
+    margin-top: 20px;
+  }
+
+  ol, ul {
+    margin: 1em 0;
+    padding: 0 0 0 1em;
+    color: $baseFontColor;
+
+    li {
+      margin-bottom: 0.708em;
+    }
+  }
+
+  ol {
+    list-style: decimal outside none;
+  }
+
+  ul {
+    list-style: disc outside none;
+  }
+
+  a {
+    &:link, &:visited, &:hover, &:active {
+      color: #1d9dd9;
+    } 
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  code {
+    color: $baseFontColor;
+    font-family: monospace, serif;
+    background: none;
+  }
+}

common/lib/xmodule/xmodule/css/html/display.scss

@@ -0,0 +1,4 @@
+// HTML component display: 
+.xmodule_HtmlModule {
+
+}

common/lib/xmodule/xmodule/css/html/edit.scss

@@ -1,3 +1,4 @@
+// HTML component editor: 
 .html-editor {
   @include clearfix();
 

common/lib/xmodule/xmodule/html_module.py

@@ -25,7 +25,8 @@ class HtmlModule(XModule):
                     ]
          }
     js_module_name = "HTMLModule"
-    
+    css = {'scss': [resource_string(__name__, 'css/html/display.scss')]}
+
     def get_html(self):
         return self.html