refactor: update notes theme css

getgridea · May 13, 2019 · 668a1f7 · 668a1f7
1 parent fc31142
commit 668a1f7
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 32 deletions.
diff --git a/public/default-files/themes/notes/assets/styles/components/home.less b/public/default-files/themes/notes/assets/styles/components/home.less
@@ -2,14 +2,14 @@
   flex: 1;
   .post {
     padding-bottom: 32px;
-    
+
     .post-title {
       font-size: 28px;
       text-align: center;
       padding: 24px 0;
       font-weight: 600;
     }
-  
+
     .post-info {
       text-align: center;
       font-size: 12px;
@@ -54,11 +54,15 @@
         }
       }
       code {
-        padding: 0 3px;
-        margin: 0 2px;
-        background: rgba(195,195,195,0.41);
-        font-size: 0.9em;
-        border-radius: 2px;
+        font-family: monospace;
+        font-size: inherit;
+        background-color: rgba(0,0,0,.06);
+        padding: 0 2px;
+        border: 1px solid rgba(0,0,0,.08);
+        border-radius: 2px 2px;
+        line-height: initial;
+        word-wrap: break-word;
+        text-indent: 0;
       }
     }
   }

diff --git a/public/default-files/themes/notes/assets/styles/components/post.less b/public/default-files/themes/notes/assets/styles/components/post.less
@@ -9,28 +9,28 @@
       margin-bottom: 24px;
       border-radius: 2px;
     }
-  
+
     .post-title {
       font-size: 32px;
       text-align: center;
       padding: 24px;
       font-weight: 600;
     }
-  
+
     .post-info {
       text-align: center;
       font-size: 12px;
       padding-bottom: 24px;
-  
+
       .post-time {
         color: @dark-gray;
       }
-  
+
       .post-tag {
-        padding: 8px 16px;
+        padding: 8px 8px;
       }
     }
-  
+
     .post-content {
       a {
         color: @main-color;
@@ -47,25 +47,28 @@
         border-radius: 2px;
         margin: 24px auto;
       }
-  
+
       p {
         line-height: 1.725;
         margin-bottom: 24px;
         font-size: 16px;
-        letter-spacing: 1.0382;
+        letter-spacing: .05em;
       }
-      
+
       p, li {
         code {
-          padding: 0 3px;
-          margin: 0 2px;
-          background: rgba(195,195,195,0.41);
-          font-size: 0.9em;
-          border-radius: 2px;
-          display: inline-block;
+          font-family: monospace;
+          font-size: inherit;
+          background-color: rgba(0,0,0,.06);
+          padding: 0 2px;
+          border: 1px solid rgba(0,0,0,.08);
+          border-radius: 2px 2px;
+          line-height: initial;
+          word-wrap: break-word;
+          text-indent: 0;
         }
       }
-  
+
       pre {
         margin-bottom: 24px;
         code {
@@ -100,7 +103,7 @@
         border: 1px solid #dfe2e5;
         padding: .6em 1em;
       }
-    
+
       ul, ol {
         padding-left: 24px;
         line-height: 1.725;

diff --git a/public/default-files/themes/notes/assets/styles/components/tags.less b/public/default-files/themes/notes/assets/styles/components/tags.less
@@ -4,7 +4,7 @@
   .tag {
     display: inline-block;
     padding: 4px 8px;
-    margin-right: 8px;
+    margin: 0 8px 8px 0;
     background: #d1dbe0;
   }
-}
+}
diff --git a/public/default-files/themes/notes/assets/styles/main.less b/public/default-files/themes/notes/assets/styles/main.less
@@ -20,7 +20,7 @@ body {
   font-size: 16px;
   color: #333;
   // background: #f3f7f9;
-  letter-spacing: 1.0382;
+  letter-spacing: .05em;
 }
 a {
   color: #333;

diff --git a/public/default-files/themes/notes/templates/post.ejs b/public/default-files/themes/notes/templates/post.ejs
@@ -6,7 +6,7 @@
     <div class="main">
       <div class="main-content">
         <%- include('./includes/header') %>
-      
+
         <div class="post-detail">
           <article class="post">
             <h2 class="post-title">
@@ -17,7 +17,7 @@
                 · <%= post.dateFormat %> ·
               </time>
               <% post.tags.forEach(function(tag) { %>
-                <a href="<%= tag.link %>" class="post-tags">
+                <a href="<%= tag.link %>" class="post-tag">
                   # <%= tag.name %>
                 </a>
               <% }); %>
@@ -31,7 +31,7 @@
             </div>
           </article>
         </div>
-    
+
         <% if (post.nextPost && !post.hideInList) { %>
           <div class="next-post">
             <div class="next">下一篇</div>
@@ -40,7 +40,7 @@
                 <%= post.nextPost.title %>
               </h3>
             </a>
-          </div>  
+          </div>
         <% } %>
 
         <% if (typeof commentSetting !== 'undefined' && commentSetting.showComment) { %>
@@ -52,7 +52,7 @@
             <%- include('./includes/disqus') %>
           <% } %>
         <% } %>
-    
+
         <%- include('./includes/footer') %>
       </div>
     </div>