eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Integrate <ruby-switch> into the templates

Browse source
This commit is contained in:
Eryn Wells 2023-10-14 14:55:54 -07:00
parent abb85f701d
commit 8022a8f84a
5 changed files with 25 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

9
assets/scripts/ruby_switch.js
View file

@ -1,3 +1,5 @@
// Eryn Wells <eryn@erynwells.me>
class RubySwitch extends HTMLElement {
static controlSizeInPixels = 32;
static thumbTransitionDuration = 0.1;
@ -11,7 +13,7 @@ class RubySwitch extends HTMLElement {
{
id: "ruby-switch-both",
value: "both",
label: "あa",
label: "<ruby>あ<rt>a</rt></ruby>",
default: true
},
{
@ -94,6 +96,9 @@ class RubySwitch extends HTMLElement {
z-index: 2;
text-align: center;
}
#ruby-switch-both {
}
`;
}
@ -140,7 +145,7 @@ class RubySwitch extends HTMLElement {
}, { capture: true });
const label = document.createElement("b");
label.textContent = desc.label;
label.innerHTML = desc.label;
control.appendChild(label);
}

22
assets/styles/root/050_ruby_controls.css
View file

@ -1,29 +1,25 @@
@layer root {
body:has(fieldset#ruby-controls > input[value=NONE]:checked) rt { display: none; }
body:has(ruby-switch[value=none]) rt {
display: none;
}
/* When ruby-controls is set to hidden, hide the ruby base and only show the <rt> */
body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) ruby > span { display: none; }
/* When the ruby switch is set to "hidden", hide the ruby base and only show the <rt>. */
body:has(ruby-switch[value=hidden]) ruby > span {
display: none;
}
body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) rt {
body:has(ruby-switch[value=hidden]) rt {
color: inherit;
display: inline;
font-size: inherit;
white-space: inherit;
}
body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt {
body:has(ruby-switch[value=hidden]) :is(h1, h2, h3, h4, h5, h6) rt {
font-family: var(--font-family-heading);
font-weight: bold;
}
fieldset#ruby-controls input[type=radio] {
margin-inline-end: calc(var(--body-item-spacing) / 6);
}
fieldset#ruby-controls label {
margin-inline-end: calc(var(--body-item-spacing));
}
rt { transition: color 0.3s; }
ruby:hover rt { transition: color 0.3s; }
}