replace style.js with a CSS trick

This commit is contained in:
mivinci 2023-03-14 18:00:05 +08:00
parent 0d89810486
commit f935dbc74f
4 changed files with 3 additions and 13 deletions

View file

@ -69,10 +69,10 @@ $heading: (h1, 2.25, 800), (h2, 2, 700), (h3, 1.75, 600), (h4, 1.5, 600),
.md ul input[type="checkbox"] { .md ul input[type="checkbox"] {
margin: 0; margin: 0;
margin-right: 7px; margin-right: 5px;
} }
.md .ul-checkbox { .md ul:has(input) {
list-style: none; list-style: none;
padding-inline-start: 8px; padding-inline-start: 8px;
} }

View file

@ -1,8 +1,6 @@
import { setup_theme_switch } from "./theme" import { setup_theme_switch } from "./theme"
import { fix_checkbox_list_style } from "./style"
import { setup_selectable } from './selectable' import { setup_selectable } from './selectable'
setup_theme_switch('theme-switch') setup_theme_switch('theme-switch')
setup_selectable() setup_selectable()
fix_checkbox_list_style('.md ul')

View file

@ -1,8 +0,0 @@
/** @param {string} selectors */
export function fix_checkbox_list_style(selectors) {
document.querySelectorAll(selectors).forEach(v => {
if (/<li><input .+>.+<\/li>/.test(v.innerHTML)) {
v.classList.add('ul-checkbox');
}
});
}

View file

@ -10,7 +10,7 @@
<ul class="flex items-center font-medium <ul class="flex items-center font-medium
whitespace-nowrap overflow-x-auto overflow-y-hidden"> whitespace-nowrap overflow-x-auto overflow-y-hidden">
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<li class="ml-1 mr-1"><a href="{{ .Identifier | relLangURL }}">{{ T .Identifier | default .Name }}</a></li> <li class="ml-2 mr-2"><a href="{{ .Identifier | relLangURL }}">{{ T .Identifier | default .Name }}</a></li>
{{ end }} {{ end }}
</ul> </ul>
<ul class="flex item-center text-sm font-bold"> <ul class="flex item-center text-sm font-bold">