feat: add new theme style - serif

Makefile

@@ -8,16 +8,20 @@ TYPORA_TEMPLATE_DIR = templates/typora/
 VSCODE_TEMPLATE_DIR = templates/vscode/
 
 OBSIDIAN_FILES = styles/font.css $(OBSIDIAN_DIR)/.obsidian/snippets/lapiscv-font.css \
-                 styles/obsidian.css $(OBSIDIAN_DIR)/.obsidian/snippets/lapiscv-obsidian.css \
+                 styles/classic/obsidian.css $(OBSIDIAN_DIR)/.obsidian/snippets/lapiscv-obsidian.css \
                  styles/main.css $(OBSIDIAN_DIR)/.obsidian/snippets/lapiscv-main.css
 
-TYPORA_FILES = styles/typora.css $(TYPORA_DIR)/lapis-cv.css \
+TYPORA_FILES = styles/classic/typora.css $(TYPORA_DIR)/lapis-cv.css \
+			   styles/serif/typora.css $(TYPORA_DIR)/lapis-cv-serif.css \
 			   styles/main.css $(TYPORA_DIR)/lapis-cv/styles/main.css \
-			   styles/font.css $(TYPORA_DIR)/lapis-cv/styles/font.css
+			   styles/font.css $(TYPORA_DIR)/lapis-cv/styles/font.css \
+			   fonts $(TYPORA_DIR)/lapis-cv/fonts \
 
-VSCODE_FILES = styles/vscode.css $(VSCODE_DIR)/lapis-cv/styles/vscode.css \
+VSCODE_FILES = styles/classic/vscode.css $(VSCODE_DIR)/lapis-cv/styles/lapis-cv.css \
+			   styles/serif/vscode.css $(VSCODE_DIR)/lapis-cv/styles/lapis-cv-serif.css \
                styles/main.css $(VSCODE_DIR)/lapis-cv/styles/main.css \
-               styles/font.css $(VSCODE_DIR)/lapis-cv/styles/font.css
+               styles/font.css $(VSCODE_DIR)/lapis-cv/styles/font.css \
+			   fonts $(VSCODE_DIR)/lapis-cv/fonts
 
 all: obsidian typora vscode
 

README.md

@@ -11,50 +11,55 @@
      
     <img alt="Downloads" src="https://img.shields.io/github/downloads/BingyanStudio/LapisCV/total?style=flat-square&color=5e76c3">  
 </div><br>
+基于 Markdown 格式并支持 VSCode / Typora / Obsidian 三个主流 Markdown 编辑器，实时渲染即时编辑，使得编写简历时不再需要关心任何格式、排版或语法，只需专注简历内容本身。
 
-基于 Markdown 格式，易于编辑，所见即所得。风格简洁正式，支持多页，适用于大部分求职 / 求学场景。
-
-### 预览
-
-- 编辑页
+提供两种主题，风格简洁正式，支持多页，适用于大部分求职 / 求学场景。
 
 <div align="center">
 <div>
-<img src=".assets/screenshot-obsidian.png" width="90%" />
+<img src=".assets/screenshot-obsidian.png" width="75%" />
 </div>
 </div>
 
-- [PDF样例](https://raw.githubusercontent.com/BingyanStudio/LapisCV/main/.assets/preview.pdf)
 
-<br>
-<div align="center">
-<img width="80%" alt="Screenshot" src=".assets/preview.png">
-</div>
+### 预览
+
+提供两种主题，LapisCV 与 LapisCV Serif
+
+- LapisCV Serif：
+
+![image](https://github.com/user-attachments/assets/df89302d-be47-4c2c-b9fc-f41d8c9ad3fb)
+
+- LapisCV：
+
+![image](https://github.com/user-attachments/assets/f6d3da7b-c324-4061-9801-70532f983ccd)
 
 ### 安装与使用
 
 #### Typora
 
 1. 下载 [Release](https://github.com/BingyanStudio/LapisCV/releases/latest)，设置 Lapis Cv 作为主题：
-   
+
     1. 在 Typora 菜单中选择 偏好设置 (Preferences) -> 找到外观部分，点击“打开主题文件夹”按钮
     2. 将 lapis-cv.css 和 lapis-cv 文件夹复制到 Typora 的主题文件夹中
-    3. 重启 Typora，然后从主题列表中选择 Lapis Cv
-
-3. 打开模版文件 [template.md](typora/template.md) 进行内容编辑，文件 - 导出 - PDF 即可导出 PDF 文件。
+    3. 重启 Typora，然后从主题列表中选择 `Lapis Cv` / `Lapis Cv Serif`。
+2. 打开模版文件 [template.md](typora/template.md) 进行内容编辑，文件 - 导出 - PDF 即可导出 PDF 文件。
 
 #### VSCode
 
 1. 下载 [Release](https://github.com/BingyanStudio/LapisCV/releases/latest) 并解压。
 2. 在 VSCode 中打开该文件夹，并安装插件 [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)。
 3. 打开模版文件 [template.md](vscode/template.md) 进行内容编辑，右上角点击 Open Preview 图标可进行实时预览。右键选择 Markdown PDF - Export (pdf) 即可导出 PDF 文件。
+4. 切换主题：编辑 `.vscode/settings.json` 中 `"markdown.styles"` 最后一项，`lapis-cv.css`对应 LapisCV，`lapis-cv-serif.css` 对应 LapisCV Serif。
 
 需要注意，VSCode 中安装的其他插件可能会影响预览显示效果，若预览效果与生成 PDF 中效果不一致，请检查是否有插件影响。
 
 #### Obsidian
 
 下载 [Release](https://github.com/BingyanStudio/LapisCV/releases/latest)，将 `lapis-cv-obsidian` 目录作为 Vault 在 Obsidian 打开，编辑 template 并导出 PDF 文件即可。
 
+Obsidian 暂不支持 Serif 主题样式。
+
 ### 格式
 
 - 一级标题：姓名块
@@ -115,7 +120,7 @@
 
 其中页边距需要在 VSCode 设置中修改：
 
-- 直接修改 .vscode/settings.json 文件中的 markdown-pdf.margin 相关项。
+- 直接修改 `.vscode/settings.json` 文件中的 markdown-pdf.margin 相关项。
 
 - 另外的，还可以通过 GUI 进行修改：
 

styles/obsidian.css → styles/classic/obsidian.css

@@ -50,6 +50,7 @@ body {
 }
 
 .HyperMD-header.HyperMD-header-1.cm-line {
+    color: var(--text-normal);
     line-height: var(--h1-line-height);
     text-align: center;
     margin-block-start: 0 !important;
@@ -59,7 +60,7 @@ body {
 
 .HyperMD-header.HyperMD-header-2.cm-line {
     color: var(--color-accent);
-    border-bottom: 1px solid var(--color-accent);
+    border-bottom: 1px solid color-mix(in srgb, var(--color-accent), rgb(0 0 0 / 0) 60%);
     line-height: 1;
     padding: 1mm 0;
     margin-block-start: 2mm !important;
@@ -70,6 +71,7 @@ body {
 .HyperMD-header.HyperMD-header-5.cm-line,
 .HyperMD-header.HyperMD-header-4.cm-line,
 .HyperMD-header.HyperMD-header-3.cm-line {
+    color: var(--text-normal);
     padding-top: 0;
     margin-block-start: 0 !important;
     margin-block-end: 0 !important;
@@ -81,12 +83,14 @@ body {
 
 /* Avatar */
 
-.cm-line:has(img[alt="avatar"]) {
+.cm-line:has(.avatar, img[alt="avatar"]) {
     height: 0;
     text-align: center;
 }
 
 @media print {
+
+    .avatar,
     img[alt="avatar"] {
         position: absolute;
         top: 31mm;

styles/typora.css → styles/classic/typora.css

@@ -15,7 +15,7 @@
 
 @media screen {
     #write {
-        top: 10mm;
+        top: 10mm !important;
         max-width: 224mm;
         box-shadow: 0 0 4mm 0 #dae3eac9;
         padding-left: 20mm;
@@ -29,13 +29,17 @@
 }
 
 @media screen {
+
+    .avatar,
     img[alt="avatar"] {
         top: 1mm;
         right: 0;
     }
 }
 
 @media print {
+
+    .avatar,
     img[alt="avatar"] {
         top: 3mm;
         right: 0;

styles/vscode.css → styles/classic/vscode.css

@@ -3,46 +3,56 @@
  *   https://github.com/BingyanStudio/LapisCV
  */
 
-/* Global */
-
 @media screen {
     body {
-        color: unset !important;
         box-shadow: 0 0 4mm 0 #dae3eac9;
         padding-left: 20mm;
         padding-right: 20mm;
         padding-top: 13mm;
         padding-bottom: 22mm;
         margin: 8mm auto;
     }
-}
 
-/* Avatar */
-
-@media screen {
-    img[alt="avatar"] {
-        box-shadow: 0 0 0 3mm var(--vscode-editor-background);
+    p,
+    li,
+    h1,
+    h3,
+    h4,
+    h5,
+    h6,
+    blockquote,
+    blockquote a,
+    strong {
+        color: unset !important;
     }
-}
 
-@media print {
-    img[alt="avatar"] {
-        top: 18mm;
-        right: 6mm;
-    }
-}
-
-@media screen {
     code {
         background-color: unset !important;
         color: unset !important;
     }
+
+    .avatar,
+    img[alt="avatar"] {
+        box-shadow: 0 0 0 3mm var(--vscode-editor-background);
+    }
 }
 
-/* Block Quote */
+.avatar,
+img[alt="avatar"] {
+    top: -1mm;
+    right: -2mm;
+}
 
 blockquote {
     background: unset !important;
     border-left-width: unset;
     border-left-style: unset;
+}
+
+hr {
+    border: none;
+}
+
+h2 {
+    border-bottom: 1px solid #a2b6d4;
 }

styles/main.css

@@ -5,19 +5,12 @@
 
 /* Custom Config */
 
-:root, body {
+:root,
+body {
     --text-size: 10pt;
     --line-height: 1.8;
     --avatar-width: 29mm;
 
-    --color-accent: hsl(216,41%,48%);
-    --text-normal: #353a42;
-    --border-color: #dae3ea;
-    --h2-color: var(--color-accent);
-    --link-color: var(--color-accent);
-    --background-primary: #fff;
-    --code-background: var(--background-primary);
-
     --h1-size: 16pt;
     --h2-size: 12pt;
     --h3-size: 10.5pt;
@@ -26,13 +19,24 @@
     --h1-line-height: 1.5;
     --h2-line-height: 1;
     --h3-line-height: 1.8;
+
+    --text-normal: #353a42;
+    --color-accent: rgb(72, 112, 173);
+    --border-color: #dae3ea;
+    --background-primary: #fff;
+    --code-background: var(--background-primary);
+
+    --h1-color: var(--text-normal);
+    --h2-color: var(--color-accent);
+    --h3-color: var(--text-normal);
+    --h4-color: var(--text-normal);
+    --link-color: var(--color-accent);
 }
 
 /* Text */
 
 p,
 li {
-    text-align: justify;
     font-size: var(--text-size);
     line-height: var(--line-height);
     color: var(--text-normal);
@@ -48,6 +52,7 @@ h3 {
 
 h1 {
     font-size: var(--h1-size);
+    color: var(--h1-color);
     line-height: var(--h1-line-height);
     border-bottom: 0;
 }
@@ -60,7 +65,7 @@ blockquote p {
 h2 {
     color: var(--h2-color);
     font-size: var(--h2-size);
-    border-bottom: 1px solid var(--color-accent);
+    border-bottom: 1px solid color-mix(in srgb, var(--color-accent), rgb(0 0 0 / 0) 60%);
     margin-top: 2.4mm !important;
     margin-bottom: 1.9mm !important;
     line-height: var(--h2-line-height);
@@ -71,6 +76,7 @@ h3,
 h4,
 h5,
 h6 {
+    color: var(--h3-color);
     line-height: var(--h3-line-height);
     font-size: var(--h3-size);
 }
@@ -148,6 +154,7 @@ ol ::marker {
 
 /* Avatar */
 
+.avatar,
 img[alt="avatar"] {
     display: block;
     position: relative;
@@ -163,11 +170,14 @@ img[alt="avatar"] {
     border-radius: 50%;
     border: 2px solid var(--border-color);
     box-shadow: 0 0 0 3mm var(--background-primary);
+    margin: 0 0 0 3mm !important;
 }
 
-p:has(img[alt="avatar"]) {
+p:has(.avatar, img[alt="avatar"]) {
     height: 0;
     text-align: center;
+    padding: 0;
+    margin: 0;
 }
 
 /* Link */
@@ -189,8 +199,26 @@ code {
 
 /* Block Quote */
 
-blockquote {
+blockquote,
+blockquote * {
     line-height: 1.6;
+    padding: 0;
+}
+
+blockquote a {
+    color: var(--text-normal);
+}
+
+/* Custom Class */
+
+.entry-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.icon, span[alt="icon"]  {
+    color: var(--color-accent);
 }
 
 /* Horizontal Line */