diff --git a/assets/scripts/ruby_switch.js b/assets/scripts/ruby_switch.js index af48857..4556eb7 100644 --- a/assets/scripts/ruby_switch.js +++ b/assets/scripts/ruby_switch.js @@ -1,3 +1,5 @@ +// Eryn Wells + 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: "a", 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); } diff --git a/assets/styles/root/050_ruby_controls.css b/assets/styles/root/050_ruby_controls.css index 60965f9..c8f4b9a 100644 --- a/assets/styles/root/050_ruby_controls.css +++ b/assets/styles/root/050_ruby_controls.css @@ -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 */ - 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 . */ + 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; } } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 9ef4747..b137185 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -30,6 +30,11 @@ {{ block "scripts" . }}{{ end }} {{- with partial "resources/site_js.html" . -}} - + + {{ end }} + {{ if .HasShortcode "ruby" }} + {{ with partial "resources/script.html" "ruby_switch" }} + + {{ end }} {{ end }} diff --git a/layouts/partials/resources/script.html b/layouts/partials/resources/script.html new file mode 100644 index 0000000..e61b09b --- /dev/null +++ b/layouts/partials/resources/script.html @@ -0,0 +1,2 @@ +{{ $script := resources.Get (printf "scripts/%s.js" .) | fingerprint "md5" }} +{{ return $script }} diff --git a/layouts/partials/ruby_controls.html b/layouts/partials/ruby_controls.html index bdb75f6..bd89f4b 100644 --- a/layouts/partials/ruby_controls.html +++ b/layouts/partials/ruby_controls.html @@ -1,13 +1,5 @@ {{ if .HasShortcode "ruby" -}} {{- end }}