✨feat(细节修改): 行间距、字体、图表、背景图片等

nihaojob · Mar 16, 2021 · feca312 · feca312
1 parent a717204
commit feca312
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 32 deletions.
diff --git a/checkboxBg.png b/checkboxBg.png
diff --git a/checkboxSelectBg.png b/checkboxSelectBg.png
diff --git a/codeImg.png b/codeImg.png
diff --git a/demo.png b/demo.png
diff --git a/github-markdown.css b/github-markdown.css
@@ -2,21 +2,29 @@ body {
   font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, STHeiti, 华文细黑, sans-serif, "Apple Color Emoji";
   color: rgb(67, 67, 67);
   padding-bottom: 115px;
+  line-height: 45px;
   border-radius: 4px;
   background: #f0dab3 url(./bg.jpg);
+  font-size: 24px;
 }
 
 .markdown-body{
-  font-size: 23px;
   line-height: 45px;
   color: #645647;
   background: #fffcf6;
   border-top: 1px solid #fffcf6;
   padding-bottom: 115px;
   border-radius: 4px;
-  padding: 33px 19px 0 19px;;
+  padding: 100px 62px 150px 62px;
+  position: relative;
   box-shadow: 0 3px 8px rgb(69 18 10 / 40%);
 }
+
+
+.markdown-body p {
+  font-size: 24px;
+  line-height: 45px;
+}
 .markdown-body .octicon {
   display: inline-block;
   fill: currentColor;
@@ -218,6 +226,7 @@ body {
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
+  color: #645647;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -626,11 +635,21 @@ body {
 
 .markdown-body:after,
 .markdown-body:before {
-  display: table;
+  display: block;
   content: "";
+  position: absolute;
+  left: 23px;
+  right: 23px;
+  top: 33px;
+  bottom: 115px;
+  border: 2px solid #e9e5d9;
 }
 
 .markdown-body:after {
+  left: 28px;
+  right: 28px;
+  top: 38px;
+  bottom: 120px;
   clear: both;
 }
 
@@ -656,7 +675,7 @@ body {
 .markdown-body table,
 .markdown-body ul {
   margin-top: 0;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }
 
 .markdown-body hr {
@@ -714,7 +733,7 @@ body {
 .markdown-body h1,
 .markdown-body h2 {
   padding-bottom: .3em;
-  border-bottom: 1px solid #eaecef;
+  border-bottom: 1px solid #fff6f6;
 }
 
 .markdown-body h2 {
@@ -740,7 +759,7 @@ body {
 
 .markdown-body ol,
 .markdown-body ul {
-  padding-left: 2em;
+  padding-left: 0em;
 }
 
 .markdown-body ol ol,
@@ -753,6 +772,26 @@ body {
 
 .markdown-body li {
   word-wrap: break-all;
+  line-height: 45px;
+  color: #645647;
+  min-height: 45px;
+  text-indent: 18px;
+  position: relative;
+  list-style: none;
+  word-break: break-all;
+  font-size: 24px;
+}
+
+.markdown-body li:after {
+  content: '.';
+  width: 8px;
+  position: absolute;
+  top: 18px;
+  height: 8px;
+  background: #dfd6c5;
+  overflow: hidden;
+  left: 1px;
+  border-radius: 4px;
 }
 
 .markdown-body li>p {
@@ -807,8 +846,12 @@ body {
 
 .markdown-body img {
   max-width: 100%;
-  box-sizing: initial;
-  background-color: #fff;
+  box-sizing: border-box;
+  border: 1px #ebdfd5 solid;
+  padding: 9px;
+  position: relative;
+  margin-top: 20px;
+  background: #fff;
 }
 
 .markdown-body img[align=right] {
@@ -852,12 +895,14 @@ body {
 
 .markdown-body .highlight pre,
 .markdown-body pre {
-  padding: 16px;
   overflow: auto;
   font-size: 85%;
-  line-height: 1.45;
-  background-color: #fff7ec;
-  border-radius: 3px;
+  line-height: 1.4;
+  border: 1px #ebdfd5 solid;
+  padding: 16px;
+  font-size: 18px;
+  position: relative;
+  background: #fff;
 }
 
 .markdown-body pre code {
@@ -1008,12 +1053,41 @@ body {
   list-style-type: none;
 }
 
+.markdown-body .task-list-item::after{
+  display: none;
+}
 .markdown-body .task-list-item+.task-list-item {
   margin-top: 3px;
 }
 
 .markdown-body .task-list-item input {
   margin: 0 .2em .25em -1.6em;
+  width: 16px;
+  height: 16px;
   vertical-align: middle;
+  position: relative;
 }
+.markdown-body .task-list-item input::after{
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  background-image: url(./checkboxBg.png);
+  background-size: contain;
+}
+
+.markdown-body .task-list-item input:checked::after{
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  background-color: #fffcf6;
+  background-image: url(./checkboxSelectBg.png);
+  background-size: contain;
 }
diff --git a/index.html b/index.html
@@ -17,28 +17,33 @@
 	</head>
 	<body>
 		<article class="markdown-body">
-<h1><a id="user-content-github-markdown-css-demo" class="anchor" href="#github-markdown-css-demo" aria-hidden="true"><span class="octicon octicon-link"></span></a>GitHub Markdown CSS demo</h1>
+<h1><a id="user-content-github-markdown-css-demo" class="anchor" href="#github-markdown-css-demo" aria-hidden="true"><span class="octicon octicon-link"></span></a>GitHub Markdown CSS Smartisan</h1>
 
 <p><a name="user-content-headers"></a></p><a name="user-content-headers">
 
 </a><h2><a name="user-content-headers"></a><a id="user-content-headers" class="anchor" href="#headers" aria-hidden="true"><span class="octicon octicon-link"></span></a>Headers</h2>
 
-<pre lang="no-highlight"><code># H1
-## H2
-### H3
-#### H4
-##### H5
-###### H6
-
-Alternatively, for H1 and H2, an underline-ish style:
-
-Alt-H1
-======
+<blockquote>
+    <p>Skip a line and
+    indent the &gt;'s four spaces.</p>
+</blockquote>
+<div class="highlight highlight-js"><pre><span class="pl-k">var</span> gulp <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">'</span>gulp<span class="pl-pds">'</span></span>);
+    <span class="pl-k">var</span> myth <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">'</span>gulp-myth<span class="pl-pds">'</span></span>);
+    gulp.task(<span class="pl-s"><span class="pl-pds">'</span>default<span class="pl-pds">'</span></span>, <span class="pl-k">function</span> () {
+        <span class="pl-k">return</span> gulp.<span class="pl-c1">src</span>(<span class="pl-s"><span class="pl-pds">'</span>src/app.css<span class="pl-pds">'</span></span>)
+            .pipe(myth())
+            .pipe(gulp.dest(<span class="pl-s"><span class="pl-pds">'</span>dist<span class="pl-pds">'</span></span>));
+    });</pre>
+</div>
 
-Alt-H2
-------
-</code></pre>
+<ol>
+    <li>First ordered list item</li>
+    <li>Another item
+    <li>Unordered sub-list.</li>
+    <li>Actual numbers don't matter, just that it's a number</li>
+<ol>
 
+<img src="codeImg.png" alt="">
 <h1><a id="user-content-h1" class="anchor" href="#h1" aria-hidden="true"><span class="octicon octicon-link"></span></a>H1</h1>
 
 <h2><a id="user-content-h2" class="anchor" href="#h2" aria-hidden="true"><span class="octicon octicon-link"></span></a>H2</h2>
@@ -51,14 +56,30 @@ <h5><a id="user-content-h5" class="anchor" href="#h5" aria-hidden="true"><span c
 
 <h6><a id="user-content-h6" class="anchor" href="#h6" aria-hidden="true"><span class="octicon octicon-link"></span></a>H6</h6>
 
+
+<pre lang="no-highlight"><code># H1
+    ## H2
+    ### H3
+    #### H4
+    ##### H5
+    ###### H6
+
+    Alternatively, for H1 and H2, an underline-ish style:
+
+    Alt-H1
+    ======
+
+    Alt-H2
+    ------
+    </code></pre>
+
+
 <p>Alternatively, for H1 and H2, an underline-ish style:</p>
 
 <h1><a id="user-content-alt-h1" class="anchor" href="#alt-h1" aria-hidden="true"><span class="octicon octicon-link"></span></a>Alt-H1</h1>
 
 <h2><a id="user-content-alt-h2" class="anchor" href="#alt-h2" aria-hidden="true"><span class="octicon octicon-link"></span></a>Alt-H2</h2>
-
 <p><a name="user-content-headers"></a><a name="user-content-emphasis"></a></p><a name="user-content-emphasis">
-
 </a><h2><a name="user-content-emphasis"></a><a id="user-content-emphasis" class="anchor" href="#emphasis" aria-hidden="true"><span class="octicon octicon-link"></span></a>Emphasis</h2>
 
 <pre lang="no-highlight"><code>Emphasis, aka italics, with *asterisks* or _underscores_.
@@ -1849,6 +1870,6 @@ <h3 id="user-content-backslash"><a id="user-content-backslash-escapes" class="an
         .pipe(gulp.dest(<span class="pl-s"><span class="pl-pds">'</span>dist<span class="pl-pds">'</span></span>));
 });</pre></div>
 		</article>
-		<a href="https://github.com/sindresorhus/github-markdown-css"><img style="position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px;" src="http://aral.github.com/fork-me-on-github-retina-ribbons/[email protected]" alt="Fork me on GitHub"></a>
+		<a href="https://github.com/nihaojob/github-markdown-css-smartisan"><img style="position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px;" src="http://aral.github.com/fork-me-on-github-retina-ribbons/[email protected]" alt="Fork me on GitHub"></a>
 	</body>
 </html>
diff --git a/readme.md b/readme.md
@@ -1,11 +1,13 @@
 # github-markdown-css-smartisan
 
-> The minimal amount of CSS to replicate the GitHub Markdown style
+> 我喜欢锤子便签，于是就有了这个项目
 
-[<img src="https://cloud.githubusercontent.com/assets/170270/5219062/f22a978c-7685-11e4-8316-af25b6c89bc0.png" width="300">](http://sindresorhus.com/github-markdown-css)
+[<img src="https://nihaojob.github.io/github-markdown-css-smartisan/demo.png" width="300">](http://sindresorhus.com/github-markdown-css)
 
 ## [Demo](https://nihaojob.github.io/github-markdown-css-smartisan)
 
+[锤子便签样式](https://yun.smartisan.com/apps/note/md.html)
+
 ## Install
 
 Download [manually](https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css), from [CDNJS](https://cdnjs.com/libraries/github-markdown-css), or with npm: