Updates
This commit is contained in:
Sivan
parent
5b1d05b7a8
commit
c4b2af6adc
2 changed files with 86 additions and 15 deletions
65
index.css
65
index.css
|
|
@ -139,6 +139,71 @@ a {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.switch-list {
|
||||||
|
display: inline-flex;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list li {
|
||||||
|
margin-inline-end: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list label {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 24px;
|
||||||
|
padding: 0;
|
||||||
|
padding-inline-start: 10px;
|
||||||
|
padding-inline-end: 10px;
|
||||||
|
border: 1px solid #c2c2c2;
|
||||||
|
border-block-start-color: #c9c9c9;
|
||||||
|
border-block-end-color: #a6a6a6;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list label:active {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list li:first-child label {
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list li:last-child label {
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list input:checked + label {
|
||||||
|
z-index: 1;
|
||||||
|
border-color: #98989e;
|
||||||
|
border-block-start-color: #a5a5ab;
|
||||||
|
border-block-end-color: #7e7e84;
|
||||||
|
background-image: linear-gradient(to bottom, #b1b1b6, #929297);
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-list input:checked + label:active {
|
||||||
|
border-color: #65656b;
|
||||||
|
border-block-start-color: #808086;
|
||||||
|
border-block-end-color: #414147;
|
||||||
|
background-image: linear-gradient(to bottom, #919196, #57575c);
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
/** 演示区块 **/
|
/** 演示区块 **/
|
||||||
.demo__main {
|
.demo__main {
|
||||||
margin-block-start: 24px;
|
margin-block-start: 24px;
|
||||||
|
|
|
||||||
36
index.html
36
index.html
|
|
@ -11,7 +11,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main class="container">
|
<main class="container">
|
||||||
<article class="article heti heti--classic" data-bg-grid="grid-24">
|
<article class="article heti heti--classic">
|
||||||
<h1>赫蹏</h1>
|
<h1>赫蹏</h1>
|
||||||
<blockquote>古代称用以书写的小幅绢帛。后亦以借指纸。《汉书·外戚传下·孝成赵皇后》：<q>武（籍武 ）发篋中，有裹药二枚，赫蹏书。</q><u>颜师古</u>注：<q><u>邓展</u>曰：<q>赫音兄弟鬩墙之鬩。</q><u>应劭</u>曰：<q>赫蹏，薄小纸也。</q></q><u>宋</u> <u>赵彦卫</u> 《云麓漫钞》卷七：<q>《赵后传》所谓『赫蹏』者，注云<q>薄小纸</q>，然其寔亦縑帛。</q></blockquote>
|
<blockquote>古代称用以书写的小幅绢帛。后亦以借指纸。《汉书·外戚传下·孝成赵皇后》：<q>武（籍武 ）发篋中，有裹药二枚，赫蹏书。</q><u>颜师古</u>注：<q><u>邓展</u>曰：<q>赫音兄弟鬩墙之鬩。</q><u>应劭</u>曰：<q>赫蹏，薄小纸也。</q></q><u>宋</u> <u>赵彦卫</u> 《云麓漫钞》卷七：<q>《赵后传》所谓『赫蹏』者，注云<q>薄小纸</q>，然其寔亦縑帛。</q></blockquote>
|
||||||
|
|
||||||
|
|
@ -479,28 +479,34 @@
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<select id="J_switchFont">
|
<ul class="switch-list">
|
||||||
<option value="heti--classic" selected>传统</option>
|
<li><input type="radio" class="J_fontStack" value="heti--classic" name="font" id="font-classic" checked><label for="font-classic">传统</label></li>
|
||||||
<option value="heti--sans">黑体</option>
|
<li><input type="radio" class="J_fontStack" value="heti--sans" name="font" id="font-sans"><label for="font-sans">黑体</label></li>
|
||||||
<option value="heti--serif">宋体</option>
|
<li><input type="radio" class="J_fontStack" value="heti--serif" name="font" id="font-serif"><label for="font-serif">宋体</label></li>
|
||||||
</select>
|
</ul>
|
||||||
<select id="J_showGrid">
|
<ul class="switch-list">
|
||||||
<option value="grid-24" selected>显示网格（24px）</option>
|
<li><input type="radio" class="J_radioGrid" value="" name="grid" id="grid-disable" checked><label for="grid-disable">网格：关</label></li>
|
||||||
<option value="grid-12">显示网格（12px）</option>
|
<li><input type="radio" class="J_radioGrid" value="grid-24" name="grid" id="grid-24"><label for="grid-24">大</label></li>
|
||||||
<option value="">不显示网格</option>
|
<li><input type="radio" class="J_radioGrid" value="grid-12" name="grid" id="grid-12"><label for="grid-12">小</label></li>
|
||||||
</select>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const $$root = document.getElementsByTagName('article')[0]
|
const $$root = document.getElementsByTagName('article')[0]
|
||||||
|
|
||||||
document.getElementById('J_switchFont').onchange = function (e) {
|
function addEventListeners(nodeList, event, fn) {
|
||||||
$$root.className = ['article', 'heti', e.target.value].join(' ')
|
[].forEach.call(nodeList, function(elm) {
|
||||||
|
elm.addEventListener(event, fn, false)
|
||||||
|
}, false)
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('J_showGrid').onchange = function (e) {
|
addEventListeners(document.getElementsByClassName('J_fontStack'), 'change', function (e) {
|
||||||
|
$$root.className = ['article', 'heti', e.target.value].join(' ')
|
||||||
|
})
|
||||||
|
|
||||||
|
addEventListeners(document.getElementsByClassName('J_radioGrid'), 'change', function (e) {
|
||||||
$$root.setAttribute('data-bg-grid', e.target.value)
|
$$root.setAttribute('data-bg-grid', e.target.value)
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue