Merge branch 'main' into massive-relayout

# Conflicts:
#	assets/styles/root/050_ruby_controls.css
#	layouts/partials/ruby_controls.html
This commit is contained in:
Eryn Wells 2023-10-14 15:00:00 -07:00
commit d45ad449a5
12 changed files with 269 additions and 70 deletions

View file

@ -1,35 +1,25 @@
@layer root {
#ruby-controls {
align-items: baseline;
display: flex;
padding: calc(var(--body-item-spacing) / 2);
body:has(ruby-switch[value=none]) rt {
display: none;
}
body:has(#ruby-controls > input[value=NONE]:checked) rt { 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;
}
/* When ruby-controls is set to hidden, hide the ruby base and only show the <rt> */
body:has(#ruby-controls > input[value=HIDDEN]:checked) ruby > span { display: none; }
body:has(#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(#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]:not(:last-child) {
margin-inline-end: 0.5rem;
}
fieldset#ruby-controls label:not(:last-child) {
margin-inline-end: 2rem;
}
rt { transition: color 0.3s; }
ruby:hover rt { transition: color 0.3s; }
}