update: 更改默认样式的排版

Change-Id: Id4757a62c3a04237054dae5a4c74a34f95f25e3a
imageslr · May 18, 2021 · 568c040 · 568c040
1 parent 448e3b7
commit 568c040
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 25 deletions.
diff --git a/scripts/gallery/utils.js b/scripts/gallery/utils.js
@@ -5,7 +5,6 @@ const postcss = require("postcss");
 const cssnano = require("cssnano");
 const { rollup } = require("rollup");
 const virtual = require("@rollup/plugin-virtual");
-const themes = require("../../static/js/themes");
 const pkg = require('../../package.json');
 const _ = require("lodash")
 const prefixer = require('postcss-prefix-selector')
@@ -14,6 +13,8 @@ const toRootPrefix = "../../";
 const fromRoot = (pathFromRoot) => toRootPrefix + pathFromRoot;
 const filePath = (file) => path.join(__dirname, `${file}`);
 
+const themes = require(fromRoot("src/themes/config"));
+
 const buildScss= async ({ distPath, minify }) => {
   fs.ensureDirSync(filePath(distPath + "/js"))
 

diff --git a/static/js/themes.js → src/themes/config.js b/static/js/themes.js → src/themes/config.js
diff --git a/src/themes/core/base.scss b/src/themes/core/base.scss
@@ -1,5 +1,13 @@
 @import "prism.scss";
 
+/*
+ * 包含 markdown 的常见元素，各个属性通过 scss 变量控制；
+ * 增加了一些 CSS Reset 代码；
+ * 默认值使用 chrome 的默认样式，见 variables/default.scss。
+ */
+
+// html、body 标签适用于 MWeb（html 中只包含 markdown 内容）
+// 在用于 jujin 等网站时，需要转为 .markdown-body
 html {
   font-family: $font-family;
   font-size: $font-size;

diff --git a/src/themes/variables/default.scss b/src/themes/variables/default.scss
@@ -1,6 +1,8 @@
 /*
  * Default theme
  * 这个文件只应该包含变量
+ * 取值参考 chrome user agent stylesheet：
+ * https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/html.css
  */
 
 /* color */
@@ -52,30 +54,24 @@ $md-body-mg-v: 0px;
 $md-body-pd-h: 3.2rem;
 $md-body-pd-v: 1.6rem;
 
-$h1-mg-v: 0.67em;
-$h1-mg-t: $h1-mg-v;
-$h1-mg-b: $h1-mg-v;
-$h2-mg-v: 0.83em;
-$h2-mg-t: $h2-mg-v;
-$h2-mg-b: $h2-mg-v;
-$h3-mg-v: 1em;
-$h3-mg-t: $h3-mg-v;
-$h3-mg-b: $h3-mg-v;
-$h4-mg-v: 1.33em;
-$h4-mg-t: $h4-mg-v;
-$h4-mg-b: $h4-mg-v;
-$h5-mg-v: 1.67em;
-$h5-mg-t: $h5-mg-v;
-$h5-mg-b: $h5-mg-v;
-$h6-mg-v: 2.33em;
-$h6-mg-t: $h6-mg-v;
-$h6-mg-b: $h6-mg-v;
-$block-mg-t: 1em;
-$block-mg-b: 1em;
-$th-pd-v: 1px;
-$th-pd-h: 1px;
-$td-pd-v: 1px;
-$td-pd-h: 1px;
+$block-mg-t: 0.75em;
+$block-mg-b: 0.75em;
+$h1-mg-t: 2 * $block-mg-t;
+$h1-mg-b: $block-mg-b;
+$h2-mg-t: 2 * $block-mg-t;
+$h2-mg-b: $block-mg-b;
+$h3-mg-t: 2 * $block-mg-t;
+$h3-mg-b: $block-mg-b;
+$h4-mg-t: 2 * $block-mg-t;
+$h4-mg-b: $block-mg-b;
+$h5-mg-t: 2 * $block-mg-t;
+$h5-mg-b: $block-mg-b;
+$h6-mg-t: 2 * $block-mg-t;
+$h6-mg-b: $block-mg-b;
+$th-pd-v: 2px;
+$th-pd-h: 4px;
+$td-pd-v: 2px;
+$td-pd-h: 4px;
 $li-mg-t: .25em;
 
 /* elememts */