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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-block-start: 24px;
|
||||
|
|
|
|||
36
index.html
36
index.html
|
|
@ -11,7 +11,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<article class="article heti heti--classic" data-bg-grid="grid-24">
|
||||
<article class="article heti heti--classic">
|
||||
<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>
|
||||
|
||||
|
|
@ -479,28 +479,34 @@
|
|||
</main>
|
||||
|
||||
<div class="panel">
|
||||
<select id="J_switchFont">
|
||||
<option value="heti--classic" selected>传统</option>
|
||||
<option value="heti--sans">黑体</option>
|
||||
<option value="heti--serif">宋体</option>
|
||||
</select>
|
||||
<select id="J_showGrid">
|
||||
<option value="grid-24" selected>显示网格（24px）</option>
|
||||
<option value="grid-12">显示网格（12px）</option>
|
||||
<option value="">不显示网格</option>
|
||||
</select>
|
||||
<ul class="switch-list">
|
||||
<li><input type="radio" class="J_fontStack" value="heti--classic" name="font" id="font-classic" checked><label for="font-classic">传统</label></li>
|
||||
<li><input type="radio" class="J_fontStack" value="heti--sans" name="font" id="font-sans"><label for="font-sans">黑体</label></li>
|
||||
<li><input type="radio" class="J_fontStack" value="heti--serif" name="font" id="font-serif"><label for="font-serif">宋体</label></li>
|
||||
</ul>
|
||||
<ul class="switch-list">
|
||||
<li><input type="radio" class="J_radioGrid" value="" name="grid" id="grid-disable" checked><label for="grid-disable">网格：关</label></li>
|
||||
<li><input type="radio" class="J_radioGrid" value="grid-24" name="grid" id="grid-24"><label for="grid-24">大</label></li>
|
||||
<li><input type="radio" class="J_radioGrid" value="grid-12" name="grid" id="grid-12"><label for="grid-12">小</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const $$root = document.getElementsByTagName('article')[0]
|
||||
|
||||
document.getElementById('J_switchFont').onchange = function (e) {
|
||||
$$root.className = ['article', 'heti', e.target.value].join(' ')
|
||||
function addEventListeners(nodeList, event, fn) {
|
||||
[].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)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue