Update content containers

content/content.js

@@ -71,17 +71,19 @@ function mount () {
       var dom = []
 
       if (state.raw) {
-        updateStyles()
         dom.push(m('pre#markdown', {oncreate: oncreate.markdown}, state.markdown))
       }
       if (state.theme && !state.raw) {
-        updateStyles()
         dom.push(m('link#theme [rel="stylesheet"] [type="text/css"]', {
           href: state.getURL()
         }))
       }
       if (state.html && !state.raw) {
-        dom.push(m('#html', {oncreate: oncreate.html}, m.trust(state.html)))
+        dom.push(
+          m('#html', {oncreate: oncreate.html,
+            class: /github(-dark)?/.test(state.theme) ? 'markdown-body' : 'markdown-theme'},
+            m.trust(state.html))
+        )
       }
 
       return (dom.length ? dom : m('div'))
@@ -114,24 +116,3 @@ else {
     window.addEventListener('load', scroll)
   }
 }
-
-function updateStyles () {
-  if (state.raw) {
-    $('html').classList.remove('markdown-theme-html')
-    $('body').classList.remove('markdown-theme')
-    $('html').classList.remove('markdown-body-html')
-    $('body').classList.remove('markdown-body')
-  }
-  else if (/github(-dark)?/.test(state.theme)) {
-    $('html').classList.remove('markdown-theme-html')
-    $('body').classList.remove('markdown-theme')
-    $('html').classList.add('markdown-body-html')
-    $('body').classList.add('markdown-body')
-  }
-  else {
-    $('html').classList.remove('markdown-body-html')
-    $('body').classList.remove('markdown-body')
-    $('html').classList.add('markdown-theme-html')
-    $('body').classList.add('markdown-theme')
-  }
-}

css/content.css

@@ -1,38 +1,15 @@
 
-/*all themes*/
-html.markdown-theme-html {
-  width: auto !important;
-  max-width: 100% !important;
-  padding: 0 !important;
-  margin: 0 !important;
-}
-body.markdown-theme {
-  max-width: 100% !important;
-  padding: 20px !important;
-  margin: auto !important;
-}
-
-@media (max-width: 767px) {
-  body.markdown-theme { width: auto !important; }
-}
-@media (min-width: 768px) and (max-width: 992px) {
-  body.markdown-theme { width: 713px !important; }
-}
-@media (min-width: 992px) and (max-width: 1200px) {
-  body.markdown-theme { width: 937px !important; }
-}
-@media (min-width: 1200px) {
-  body.markdown-theme { width: 1145px !important; }
+/*global*/
+html, body {
+  padding: 0 !important; margin: 0 !important;
+  width: auto !important; max-width: 100% !important;
 }
 
 /*github theme*/
-html.markdown-body-html {
-  min-width: 1020px;
-}
-body.markdown-body {
+.markdown-body {
   overflow: auto;
 
-  min-width: 200px;
+  min-width: 888px;
   max-width: 888px;
 
   background-color: #fff;
@@ -41,12 +18,31 @@ body.markdown-body {
   padding: 45px;
   margin: 20px auto;
 }
-body.markdown-body #html>*:first-child {
+.markdown-body #html>*:first-child {
   margin-top: 0 !important;
 }
-body.markdown-body #html>*:last-child {
+.markdown-body #html>*:last-child {
   margin-bottom: 0 !important;
 }
-body.markdown-body img {
+.markdown-body img {
   background-color: transparent;
 }
+
+/*all other themes*/
+.markdown-theme {
+  max-width: 100% !important;
+  padding: 20px !important;
+  margin: auto !important;
+}
+@media (max-width: 767px) {
+  .markdown-theme { width: auto !important; }
+}
+@media (min-width: 768px) and (max-width: 992px) {
+  .markdown-theme { width: 713px !important; }
+}
+@media (min-width: 992px) and (max-width: 1200px) {
+  .markdown-theme { width: 937px !important; }
+}
+@media (min-width: 1200px) {
+  .markdown-theme { width: 1145px !important; }
+}