Add theme layout styles

content/content.js

@@ -1,13 +1,13 @@
 
 window.addEventListener('DOMContentLoaded', () => {
-  document.querySelector('body').classList.add('markdown-body') // github
+  var $ = document.querySelector.bind(document)
 
-  m.mount(document.querySelector('body'), {
+  m.mount($('body'), {
     controller: function () {
       var state = {
         theme: '',
         html: '',
-        markdown: document.querySelector('pre').innerText,
+        markdown: $('pre').innerText,
         raw: false,
         getURL: () => chrome.extension.getURL('/themes/' + state.theme + '.css')
       }
@@ -50,17 +50,40 @@ window.addEventListener('DOMContentLoaded', () => {
           if (!initialized) {
             Prism.highlightAll()
           }
+        },
+        updateStyles: (theme) => {
+          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 (state.theme === 'github') {
+            $('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')
+          }
         }
       }
     },
     view: (ctrl) => {
       var state = ctrl.state
+
       var dom = []
 
       if (state.raw) {
+        ctrl.updateStyles()
         dom.push(m('pre#markdown', state.markdown))
       }
       if (state.theme && !state.raw) {
+        ctrl.updateStyles()
         dom.push(m('link#theme [rel="stylesheet"] [type="text/css"]',
           {href: state.getURL()}))
       }

css/content.css

@@ -0,0 +1,49 @@
+
+/*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; }
+}
+
+/*github theme*/
+html.markdown-body-html {
+  min-width: 1020px;
+}
+body.markdown-body {
+  overflow: auto;
+
+  min-width: 200px;
+  max-width: 888px;
+
+  background-color: #fff;
+  border: 1px solid #ddd;
+
+  padding: 45px;
+  margin: 20px auto;
+}
+body.markdown-body #html>*:first-child {
+  margin-top: 0 !important;
+}
+body.markdown-body #html>*:last-child {
+  margin-bottom: 0 !important;
+}

manifest.json

@@ -50,6 +50,7 @@
         "*://gitlab.com/*"
       ],
       "css": [
+        "/css/content.css",
         "/css/prism.css"
       ],
       "js": [

themes/github.css

@@ -654,24 +654,3 @@
   position: relative;
   border-color: #4078c0;
 }
-
-/*markdown-viewer*/
-.markdown-body {
-  overflow: auto;
-
-  min-width: 200px;
-  max-width: 888px;
-
-  background-color: #fff;
-  border: 1px solid #ddd;
-  /*border-radius: 3px;*/
-
-  padding: 45px;
-  margin: 20px auto;
-}
-.markdown-body #html>*:first-child {
-  margin-top: 0 !important;
-}
-.markdown-body #html>*:last-child {
-  margin-bottom: 0 !important;
-}