├── README.md ├── assets ├── yuan-shan.css └── yuan-shan │ └── 寒蝉锦书宋.otf ├── pic └── 远山YuanShan.png └── 测试文档.md /README.md: -------------------------------------------------------------------------------- 1 | # 远山YuanShan主题 2 | 3 | ## 1 主题简介 / Intruction 4 | 5 | - 远山是一款灵感来源于只此青绿，以中国传统颜色**青色**为主色系的typora主题 6 | - 字体使用充满古风韵味的**寒蝉锦书宋**，使其与整个主题风格更加匹配 7 | - YuanShan is a Typora theme inspired by *Poetic Dance: The Journey of a Legendary Landscape Painting*, based on the traditional Chinese color cyan 8 | - The font uses a special Simsun full of ancient charm to make it more in line with the overall theme style 9 | 10 | ## 2 主题预览 / Review 11 | 12 | ![](https://github.com/GRAVITYELSW/Typro-theme-YuanShan/blob/master/pic/%E8%BF%9C%E5%B1%B1YuanShan.png) 13 | ## 3 注意事项 / Attention 14 | 15 | + 目前只做了简单的修改，没有修改和添加任何功能 16 | + 目前只在Windows系统下经过测试，无法保证在Mac和Linux下的效果 17 | 18 | ## 4 使用方法 / Usage 19 | 20 | 1. 拉取本仓库 21 | 2. 将assets文件夹中的内容复制到typora主题文件夹下 22 | 3. 在typora中切换主题为`Yuan Shan` 23 | 24 | （家人们才发现typora拼成typroa了啊啊啊啊啊啊啊啊啊我真的尴尬不是家人们官网也这样挂着我真的啊啊啊啊啊啊啊啊） 25 | -------------------------------------------------------------------------------- /assets/yuan-shan.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --side-bar-bg-color: #bdcbd2; 3 | --control-text-color: #777; 4 | } 5 | 6 | @font-face { 7 | font-family: 'HanChanJinShuSong'; 8 | src: url("./yuan-shan/寒蝉锦书宋.otf"); 9 | } 10 | 11 | html { 12 | font-size: 16px; 13 | } 14 | 15 | body { 16 | font-family: "HanChanJinShuSong", Helvetica, Arial, sans-serif; 17 | color: rgb(51, 51, 51); 18 | line-height: 1.6; 19 | } 20 | 21 | #write { 22 | max-width: 860px; 23 | margin: 0 auto; 24 | padding: 30px; 25 | padding-bottom: 100px; 26 | color: #547689; 27 | } 28 | 29 | @media only screen and (min-width: 1400px) { 30 | #write { 31 | max-width: 1024px; 32 | } 33 | } 34 | 35 | @media only screen and (min-width: 1800px) { 36 | #write { 37 | max-width: 1200px; 38 | } 39 | } 40 | 41 | #write > ul:first-child, 42 | #write > ol:first-child{ 43 | margin-top: 30px; 44 | } 45 | 46 | a { 47 | color: #5aa4ae; 48 | } 49 | h1, 50 | h2, 51 | h3, 52 | h4, 53 | h5, 54 | h6 { 55 | position: relative; 56 | margin-top: 1rem; 57 | margin-bottom: 1rem; 58 | font-weight: bold; 59 | line-height: 1.4; 60 | cursor: text; 61 | } 62 | h1:hover a.anchor, 63 | h2:hover a.anchor, 64 | h3:hover a.anchor, 65 | h4:hover a.anchor, 66 | h5:hover a.anchor, 67 | h6:hover a.anchor { 68 | text-decoration: none; 69 | } 70 | h1 tt, 71 | h1 code { 72 | font-size: inherit; 73 | } 74 | h2 tt, 75 | h2 code { 76 | font-size: inherit; 77 | } 78 | h3 tt, 79 | h3 code { 80 | font-size: inherit; 81 | } 82 | h4 tt, 83 | h4 code { 84 | font-size: inherit; 85 | } 86 | h5 tt, 87 | h5 code { 88 | font-size: inherit; 89 | } 90 | h6 tt, 91 | h6 code { 92 | font-size: inherit; 93 | } 94 | h1 { 95 | font-size: 2.4em; 96 | line-height: 1.2; 97 | color: #206864; 98 | border-bottom: 1px solid #eee; 99 | text-align: center; 100 | } 101 | h2 { 102 | font-size: 1.75em; 103 | line-height: 1.225; 104 | color: #1c8d6c; 105 | border-bottom: 1px solid #eee; 106 | } 107 | 108 | /*@media print { 109 | .typora-export h1, 110 | .typora-export h2 { 111 | border-bottom: none; 112 | padding-bottom: initial; 113 | } 114 | 115 | .typora-export h1::after, 116 | .typora-export h2::after { 117 | content: ""; 118 | display: block; 119 | height: 100px; 120 | margin-top: -96px; 121 | border-top: 1px solid #eee; 122 | } 123 | }*/ 124 | 125 | h3 { 126 | font-size: 1.5em; 127 | line-height: 1.43; 128 | color: #3d8e86; 129 | } 130 | h4 { 131 | font-size: 1.25em; 132 | color: #5da39d; 133 | } 134 | h5 { 135 | font-size: 1em; 136 | color: #88bfb8; 137 | } 138 | h6 { 139 | font-size: 1em; 140 | color: #87c0ca; 141 | } 142 | p, 143 | blockquote, 144 | ul, 145 | ol, 146 | dl, 147 | table{ 148 | margin: 0.8em 0; 149 | } 150 | 151 | mark { 152 | background: #c6e6e8; 153 | color: #547689; 154 | } 155 | li>ol, 156 | li>ul { 157 | margin: 0 0; 158 | } 159 | hr { 160 | height: 2px; 161 | padding: 0; 162 | margin: 16px 0; 163 | background-color: #e7e7e7; 164 | border: 0 none; 165 | overflow: hidden; 166 | box-sizing: content-box; 167 | } 168 | 169 | li p.first { 170 | display: inline-block; 171 | } 172 | ul, 173 | ol { 174 | padding-left: 30px; 175 | } 176 | ul:first-child, 177 | ol:first-child { 178 | margin-top: 0; 179 | } 180 | ul:last-child, 181 | ol:last-child { 182 | margin-bottom: 0; 183 | } 184 | blockquote { 185 | border-left: 4px solid #c6d7db; 186 | padding: 0 15px; 187 | color: #94a9b8; 188 | } 189 | blockquote blockquote { 190 | padding-right: 0; 191 | } 192 | table { 193 | padding: 0; 194 | word-break: initial; 195 | } 196 | table tr { 197 | border-top: 1px solid #dfe2e5; 198 | margin: 0; 199 | padding: 0; 200 | } 201 | table tr:nth-child(2n), 202 | thead { 203 | background-color: #f8f8f8; 204 | } 205 | table tr th { 206 | font-weight: bold; 207 | border: 1px solid #dfe2e5; 208 | border-bottom: 0; 209 | margin: 0; 210 | padding: 6px 13px; 211 | } 212 | table tr td { 213 | border: 1px solid #dfe2e5; 214 | margin: 0; 215 | padding: 6px 13px; 216 | } 217 | table tr th:first-child, 218 | table tr td:first-child { 219 | margin-top: 0; 220 | } 221 | table tr th:last-child, 222 | table tr td:last-child { 223 | margin-bottom: 0; 224 | } 225 | 226 | .CodeMirror-lines { 227 | padding-left: 4px; 228 | } 229 | 230 | .code-tooltip { 231 | box-shadow: 0 1px 1px 0 rgba(0,28,36,.3); 232 | border-top: 1px solid #eef2f2; 233 | } 234 | 235 | .md-fences, 236 | code, 237 | tt { 238 | border: 1px solid #e7eaed; 239 | background-color: #f8f8f8; 240 | border-radius: 3px; 241 | padding: 0; 242 | padding: 2px 4px 0px 4px; 243 | font-size: 0.9em; 244 | } 245 | 246 | code { 247 | color: #108b96; 248 | background-color: #f3f4f4; 249 | padding: 0 2px 0 2px; 250 | } 251 | 252 | .md-fences { 253 | margin-bottom: 15px; 254 | margin-top: 15px; 255 | padding-top: 8px; 256 | padding-bottom: 6px; 257 | } 258 | 259 | 260 | .md-task-list-item > input { 261 | margin-left: -1.3em; 262 | } 263 | 264 | @media print { 265 | html { 266 | font-size: 13px; 267 | } 268 | table, 269 | pre { 270 | page-break-inside: avoid; 271 | } 272 | pre { 273 | word-wrap: break-word; 274 | } 275 | } 276 | 277 | .md-fences { 278 | background-color: #f8f8f8; 279 | } 280 | #write pre.md-meta-block { 281 | padding: 1rem; 282 | font-size: 85%; 283 | line-height: 1.45; 284 | background-color: #f7f7f7; 285 | border: 0; 286 | border-radius: 3px; 287 | color: #777777; 288 | margin-top: 0 !important; 289 | } 290 | 291 | .mathjax-block>.code-tooltip { 292 | bottom: .375rem; 293 | } 294 | 295 | .md-mathjax-midline { 296 | background: #fafafa; 297 | } 298 | 299 | #write>h3.md-focus:before{ 300 | left: -1.5625rem; 301 | top: .375rem; 302 | } 303 | #write>h4.md-focus:before{ 304 | left: -1.5625rem; 305 | top: .285714286rem; 306 | } 307 | #write>h5.md-focus:before{ 308 | left: -1.5625rem; 309 | top: .285714286rem; 310 | } 311 | #write>h6.md-focus:before{ 312 | left: -1.5625rem; 313 | top: .285714286rem; 314 | } 315 | .md-image>.md-meta { 316 | /*border: 1px solid #ddd;*/ 317 | border-radius: 3px; 318 | padding: 2px 0px 0px 4px; 319 | font-size: 0.9em; 320 | color: inherit; 321 | } 322 | 323 | .md-tag { 324 | color: #a7a7a7; 325 | opacity: 1; 326 | } 327 | 328 | .md-toc { 329 | margin-top:20px; 330 | padding-bottom:20px; 331 | } 332 | 333 | .sidebar-tabs { 334 | border-bottom: none; 335 | } 336 | 337 | #typora-quick-open { 338 | border: 1px solid #ddd; 339 | background-color: #f8f8f8; 340 | } 341 | 342 | #typora-quick-open-item { 343 | background-color: #FAFAFA; 344 | border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee; 345 | border-style: solid; 346 | border-width: 1px; 347 | } 348 | 349 | /** focus mode */ 350 | .on-focus-mode blockquote { 351 | border-left-color: rgba(85, 85, 85, 0.12); 352 | } 353 | 354 | header, .context-menu, .megamenu-content, footer{ 355 | font-family: "Segoe UI", "Arial", sans-serif; 356 | } 357 | 358 | .file-node-content:hover .file-node-icon, 359 | .file-node-content:hover .file-node-open-state{ 360 | visibility: visible; 361 | } 362 | 363 | .mac-seamless-mode #typora-sidebar { 364 | background-color: #bdcbd2; 365 | background-color: var(--side-bar-bg-color); 366 | } 367 | 368 | .md-lang { 369 | color: #b4654d; 370 | } 371 | 372 | .html-for-mac .context-menu { 373 | --item-hover-bg-color: #E6F0FE; 374 | } 375 | 376 | #md-notification .btn { 377 | border: 0; 378 | } 379 | 380 | .dropdown-menu .divider { 381 | border-color: #e5e5e5; 382 | } 383 | 384 | .ty-preferences .window-content { 385 | background-color: #fafafa; 386 | } 387 | 388 | .ty-preferences .nav-group-item.active { 389 | color: white; 390 | background: #999; 391 | } 392 | -------------------------------------------------------------------------------- /assets/yuan-shan/寒蝉锦书宋.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GRAVITYELSW/Typro-theme-YuanShan/875582fc2f286e763d9837bd01ac89a84b9b2a20/assets/yuan-shan/寒蝉锦书宋.otf -------------------------------------------------------------------------------- /pic/远山YuanShan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GRAVITYELSW/Typro-theme-YuanShan/875582fc2f286e763d9837bd01ac89a84b9b2a20/pic/远山YuanShan.png -------------------------------------------------------------------------------- /测试文档.md: -------------------------------------------------------------------------------- 1 | [TOC] 2 | 3 | 4 | 5 | # 远山 YuanShan 6 | 7 | ## h2标题(h1 title) 8 | 9 | ### h3标题(h3 title) 10 | 11 | #### h4标题(h4 title) 12 | 13 | ##### h5标题(h5 title) 14 | 15 | ###### h6标题(h6 title) 16 | 17 | 18 | 19 | > 区块引用(block quote) 20 | 21 | 22 | 23 | 赤壁赋 - Strike the moon's reflection 24 | 25 | ​ 壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。 26 | 27 | ​ 于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。 28 | 29 | 30 | 31 | 代码块`code` 32 | 33 | 高亮==highlight== 34 | 35 | 粗体**bold** 36 | 37 | 斜体*italic* --------------------------------------------------------------------------------