Skip to content

Commit 0967019

Browse files
committed
2022-12-28-更新 1.0.6 版本
1 parent 8d76396 commit 0967019

File tree

4 files changed

+31
-47
lines changed

4 files changed

+31
-47
lines changed

README.md

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,29 @@
11
# Untag CSS Style
22

3-
Untag CSS Style 是由于 [Untag](https://utgd.net) 提供的 CSS 样式文件。
3+
[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0) [![Untag](https://img.shields.io/badge/Website-Untag-ffd600)](https://utgd.net)
4+
5+
Untag CSS Style 是由 [Untag](https://utgd.net) 提供的 CSS 样式文件,对中文排版支持良好。
46

57
Untag 的主题色是亮黄色(#ffd600),希望这一抹靓丽的黄色,能够给你带来愉悦的阅读体验。
68

7-
## 使用
9+
## 预览
10+
11+
![整体样式](https://cdn.utgd.net/assets/uploads/2022/12/FG-282205-n.png)
12+
13+
![局部样式](https://cdn.utgd.net/assets/uploads/2022/12/FG-282206-C.png)
814

9-
本仓库中 [untag-style.css](./untag-style.css) 可以直接下载并使用在任意位置。
15+
## 下载
16+
17+
本仓库中 [Untag-Style.css](./Untag-Style.css) 可以直接下载并使用在任意位置。
18+
19+
## 使用
1020

1121
你需要在你的网页中引入这个 CSS 文件:
1222

1323
``` html
1424
<head>
1525
<!-- ... -->
16-
<link rel="stylesheet" href="../untag-style.css">
26+
<link rel="stylesheet" href="../Untag-Style.css">
1727
<!-- ... -->
1828
</head>
1929
```
@@ -33,7 +43,7 @@ Untag 的主题色是亮黄色(#ffd600),希望这一抹靓丽的黄色,
3343

3444
- 示例文件 index.html 是基于 [github-markdown-css 仓库](https://github.com/sindresorhus/github-markdown-css/edit/main/index.html) 中的 HTML 示例文档进行少量修改的版本。
3545

36-
- 部分参考了 Apple 阅读模式中的 CSS 样式。
46+
- 部分参考了 Apple 阅读模式的 CSS 样式。
3747

3848
## LICENSE
3949

Untag-Style.css

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@charset "utf-8";
22
/* Untag Style */
33
/* by YARINZ */
4-
/* Version : Untag-Style CSS v1.0.5 (2022-10-24) */
5-
/* Modified based on Apple Safari reading mode Style */
4+
/* WebSite: https://utgd.net */
5+
/* Github : https://github.com/UntagTeam/Untag-CSS-Style */
6+
/* Version : Untag-Style CSS v1.0.6 (2022-12-28) */
67

78
/* ===== 全局样式 ===== */
89

@@ -438,7 +439,8 @@
438439
}
439440

440441
/* 文内按钮 */
441-
selector .ut_button {
442+
443+
.ut_button {
442444
background-color: #dce7ef;
443445
color: #4e81ae;
444446
border: 2px solid #4e81ae;
@@ -447,16 +449,17 @@ selector .ut_button {
447449
cursor: pointer;
448450
transition: 0.5s;
449451
}
450-
selector .ut_button:hover {
452+
.ut_button:hover {
451453
background-color: #E6F0F5 !important;
452454
transition: 0.5s;
453455
}
454-
selector .ut_button:active {
456+
.ut_button:active {
455457
background-color: #A0B8CD !important;
456458
transition: 0.1s;
457459
}
458-
selector .ut_button_a{
460+
.ut_button_a{
459461
color: #4e81ae !important;
462+
/* 按钮中使用无衬线字体 */
460463
font-family: 'Source Han Sans',sans-serif !important;
461464
border-bottom: 0px !important;
462465
}
@@ -475,13 +478,11 @@ selector .ut_button_a{
475478

476479
.markdown-body #article * {
477480
/* Scale down anything larger than our view. Max-width maintains aspect ratios on images. */
478-
/* 缩小比我们的视野更大的东西。最大宽度可保持图像的宽高比。 */
479481
max-width: 100%;
480482
}
481483

482484
.markdown-body #article img {
483485
/* By default, images are centered on their own line. */
484-
/* 默认情况下,图像在它们自己的直线上居中。 */
485486
margin: 0.5em auto;
486487
display: block;
487488
height: auto;
@@ -543,7 +544,6 @@ figure,
543544
}
544545

545546
/* If the element immediately after an image is inline, it might bump up against the image. */
546-
/* 如果紧接图像后的元素是内联的,则它可能会碰到图像。 */
547547

548548
.markdown-body #article .auxiliary img+* {
549549
display: block;
@@ -580,7 +580,6 @@ figure,
580580
}
581581

582582
/* Collapse excess whitespace. */
583-
/* 折叠多余的空白。 */
584583

585584
.page p>p:empty,
586585
.page div>p:empty,

sample/sample_cn.html

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,13 @@
2525
<article class="markdown-body">
2626
<div class="col-xs-12 col-sm-12 col-md-9">
2727

28-
<h2 id="overview">总览<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#overview"
29-
style="font: 1em / 1 anchorjs-icons; padding-left: 0.375em;"></a></h2>
30-
28+
<h1 id="overview">中文示例<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#overview"
29+
style="font: 1em / 1 anchorjs-icons; padding-left: 0.375em;"></a></h1>
3130
<p>几乎所有 Markdown 应用程序都支持 John Gruber 原始设计文档中列出的 Markdown 基本语法。但是,Markdown 处理程序之间存在着细微的变化和差异,我们都会尽可能标记出来。</p>
32-
33-
<p><span class="ut_button"><a class="ut_button_a">Shortcuts 文章翻译下载链接</a></span></p>
34-
<p><span class="ut_button">测试</span></p>
35-
36-
<p>录制期间,右侧的编辑界面是全黑的,但只要左下角有持续读秒,就说明已经在正常录制了。注意单次录制的最长时间是 30 分钟。<span class="ut_button">测试</span>
37-
等你录制完屏幕后会有一个预览视频,点击“保存并编辑”,就会存到本地的下载目录中。格式是 webm 格式的,此时保存的文件是原分辨率保存。文件体积也并不算大。
38-
</p>
39-
31+
<p><span class="ut_button"><a class="ut_button_a">无衬线字体按钮</a></span></p>
32+
<p><span class="ut_button">按钮</span></p>
4033
<h2 id="headings">标题(Headings)<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon=""
4134
href="#headings" style="font: 1em / 1 anchorjs-icons; padding-left: 0.375em;"></a></h2>
42-
43-
<p>要创建标题,请在单词或短语前面添加井号 (<code class="language-plaintext highlighter-rouge">#</code>)
44-
。井号的数量代表了标题的级别。例如,添加三个井号即创建一个三级标题 (<code class="language-plaintext highlighter-rouge">&lt;h3&gt;</code>)
45-
(例如:<code class="language-plaintext highlighter-rouge">### My Header</code>)。</p>
46-
4735
<table class="table table-bordered">
4836
<thead class="thead-light">
4937
<tr>
@@ -1552,9 +1540,9 @@ <h4 id="将两部分组合在一起使用的示例">将两部分组合在一起
15521540
</div>
15531541
</div>
15541542

1555-
<p>Though it may point to interesting additional information, the URL as displayed really doesn’t add much
1556-
to the existing raw text other than making it harder to read. To fix that, you could format the URL like
1557-
this instead:</p>
1543+
<p>尽管它可能指向有趣的附加信息,但显示的URL实际上并没有添加太多信息
1544+
现有的原始文本,而不是使其更难阅读。要解决这个问题,您可以将URL格式化为
1545+
相反,这是:</p>
15581546

15591547
<div class="language-plaintext highlighter-rouge">
15601548
<div class="highlight">

sample/sample_en.html

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
66
<title>Untag Markdown CSS demo</title>
7-
<meta name="color-scheme" content="light dark">
87
<!-- 试用 Untag Style CSS -->
98
<link rel="stylesheet" href="../untag-style.css">
109
<!-- 试用 github-markdown CSS -->
@@ -17,18 +16,6 @@
1716
margin: 0 auto;
1817
padding: 45px;
1918
}
20-
21-
@media (prefers-color-scheme: dark) {
22-
body {
23-
background-color: #0d1117;
24-
}
25-
}
26-
</style>
27-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css">
28-
<style>
29-
.github-fork-ribbon:before {
30-
background-color: #121612;
31-
}
3219
</style>
3320
</head>
3421
<body>

0 commit comments

Comments
 (0)