doortts doortts 2016-02-18
markdown: Sharping the markdown rendered pages
@6d3e0d68852e7eb3fd9fa90e67a7231f183a12a2
app/assets/stylesheets/less/_markdown.less
--- app/assets/stylesheets/less/_markdown.less
+++ app/assets/stylesheets/less/_markdown.less
@@ -1,16 +1,47 @@
 // readme style
+@font-face {
+  font-family: 'NanumBarunGothicWeb';
+  src: url('http://deview.kr/font/NanumBarunGothicWebLight.woff')  format('woff');
+}
+
+@font-face {
+  font-family: nbg;
+  font-style: normal;
+  font-weight: 400;
+  src: local('Nanum Barun Gothic Light'), local('Nanum Barun Gothic-Light'), local('NanumBarunGothicLight');
+  src: url(http://deview.kr/font/NanumBarunGothicWebLight.eot);
+  src: url(http://deview.kr/font/NanumBarunGothicWebLight.eot?#iefix) format('embedded-opentype'), local('※'), url(http://deview.kr/font/NanumBarunGothicWebLight.woff) format('woff')
+}
+
+@font-face {
+  font-family: av;
+  src: url(http://deview.kr/font/Avenir-Light.eot);
+  src: local('※'), url(http://deview.kr/font/Avenir-Light.woff) format('woff')
+}
+
 .markdown-wrap {
-  font-size: 14px;
+  font-size: 1.1em;
   clear: both;
-  overflow:auto;
+  overflow: auto;
+  font-family: 'SF UI DISPLAY', "Helvetica Neue", "Helvetica", "Arial", 'NanumGothic', "Apple SD Gothic Neo", "맑은 고딕", sans-serif;
 
   ul, ol {
+    padding: 5px 0 5px 2.5em;
     font-weight: normal;
-    margin-left: 0px;
+    margin-left: 0;
   }
 
-  ul > li > p {
+  li {
+    margin-bottom: 5px;
+  }
+  li > ul {
     margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
+  li > p {
+    margin-top: 0;
+    margin-bottom: 5px;
   }
 
   a {
@@ -53,7 +84,6 @@
 
   h2 {
     margin:1.2em 0 15px;
-    border-bottom:1px solid #ddd;
     font-size:1.7em;
     width: 95%;
     .anchor();
@@ -121,13 +151,12 @@
   }
 
   ul {
-     padding:0 0 0 20px;
      line-height:20px;
      list-style:disc;
   }
 
    li{
-     line-height:24px;
+     line-height: 1.6em;
   }
 
   ul ul, ol ul {
@@ -141,12 +170,12 @@
   
 
   ol{
-     padding:0 0 0 20px;
-     line-height:20px;
+     line-height: 1.6em;
      list-style:decimal;
   }
 
   pre {
+    font-size: 1em;
     background-color:#EFEFEF;
     padding: 10px;
     margin:10px 0;
@@ -154,7 +183,7 @@
     border: none;
 
     code {
-      marign : 0;
+      margin : 0;
       padding: 0;
       border : none;
     }
app/assets/stylesheets/less/_page.less
--- app/assets/stylesheets/less/_page.less
+++ app/assets/stylesheets/less/_page.less
@@ -2565,7 +2565,7 @@
         }
         .readme-body {
             padding: 25px;
-            font-size: 14px;
+            font-size: 1.2em;
         }
     }
 }
@@ -2892,7 +2892,7 @@
                 }
 
                 .comment-body {
-                    font-size: 13px;
+                    font-size: 1.05em;
                     padding:15px 20px;
                     :first-child {
                         margin-top: 0;
@@ -2958,7 +2958,7 @@
 
         .event {
             padding: 10px 0 10px 55px;
-            font-size: 14px;
+            font-size: 1em;
             line-height: 30px;
 
             .state {
@@ -3110,9 +3110,9 @@
 }
 
 div.markdown-preview {
-    font-size: 13px;
+    font-size: 1.1em;
     overflow-x:auto;
-    margin:0px;
+    margin: 0;
     vertical-align : middle;
     border:2px solid #ccc;
     .border-radius(0 0 3px 3px);
@@ -5188,7 +5188,7 @@
         .border-radius(0 0 3px 3px);
         width: 100%;
         resize:vertical !important;
-        font-size: 12px;
+        font-size: 1em;
     }
 }
 
app/assets/stylesheets/less/_reponsive.less
--- app/assets/stylesheets/less/_reponsive.less
+++ app/assets/stylesheets/less/_reponsive.less
@@ -1,4 +1,9 @@
 @media all and (max-width: 640px){
+    .markdown-wrap {
+        ul, ol {
+            padding: 0 0 0 1.5em !important;
+        }
+    }
     .post-list-wrap {
         .post-item {
             padding: 10px 0 !important;
app/assets/stylesheets/less/_variables.less
--- app/assets/stylesheets/less/_variables.less
+++ app/assets/stylesheets/less/_variables.less
@@ -9,7 +9,7 @@
 @base-webfont-path: "../images/webfont";
 
 // Typography
-@base-font-family:"Helvetica Neue", "Helvetica", "Arial", "나눔고딕", "NanumGothic", "NanumGothicOTF", "Apple SD Gothic Neo", "맑은 고딕", sans-serif;
+@base-font-family:"Helvetica Neue", "Helvetica", "Arial", "나눔고딕", "NanumGothic", "NanumGothic", "NanumGothicOTF", "Apple SD Gothic Neo", "맑은 고딕", sans-serif;
 @fixed-font-family: "Menlo", "Consolas", "Monaco", "Ubuntu Mono",  "source-code-pro", monospace;
 
 @base-font-size  : 13px;
app/views/common/markdown.scala.html
--- app/views/common/markdown.scala.html
+++ app/views/common/markdown.scala.html
@@ -34,15 +34,5 @@
     // Reusable markdown renderer
     yobi.Markdown.init(htOptions);
 
-    // Make first li font bold when multi-depth list is used
-    // Fix: In a technical reason duplicated codes are exists at _postMarkdownRender of
-    // yobi.Markdown.js
-    var ul = $(".markdown-wrap > ul");
-    ul.find("> li > ul").parent().closest('ul').css('font-weight', 'bold');  //ul > ul
-    ul.find("> li > ol").parent().closest('ul').css('font-weight', 'bold');  //ul > ol
-
-    var ol = $(".markdown-wrap > ol");
-    ol.find("> li > ul").parent().closest('ol').css('font-weight', 'bold');  //ol > ul
-    ol.find("> li > ol").parent().closest('ol').css('font-weight', 'bold');  //ol > ol
 });
 </script>
public/javascripts/common/yobi.Markdown.js
--- public/javascripts/common/yobi.Markdown.js
+++ public/javascripts/common/yobi.Markdown.js
@@ -93,7 +93,6 @@
             "data": {"body": sContentBody, "breaks": (welTarget.hasClass('readme-body') ? false : true)},
             "success": function(data){
                 welTarget.html(data);
-                _postMarkdownRender();
             }
         });
     }
@@ -110,6 +109,7 @@
         welTarget.html(sContentBody).removeClass('markdown-before');
     }
 
+    // Deprecated. so never call this method
     function _postMarkdownRender(){
         // Make first li font bold when multi-depth list is used
         var ul = $(".markdown-wrap > ul");
Add a comment
List