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

Implement ruby controls!

Browse source
This commit is contained in:
Eryn Wells 2023-05-08 20:12:11 -07:00
parent a5f5909bef
commit 174e5bc784
4 changed files with 58 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

41
assets/styles/root.css
View file

@ -180,6 +180,24 @@ details {
width: 100%;
}
fieldset {
box-sizing: border-box;
border: 1px solid var(--separator-color);
padding: var(--body-item-spacing);
padding-top: calc(var(--body-item-spacing) / 10);
}
fieldset#ruby-controls {
}
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));
}
figure {
border-radius: 6px;
line-height: 1;
@ -608,6 +626,29 @@ ruby:hover rt {
}
}
body:has(fieldset#ruby-controls > input[value=NONE]:checked) rt {
display: none;
}
body:has(fieldset#ruby-controls > input[value=BOTH]:checked) rt {
}
body:has(fieldset#ruby-controls > input[value=ENGLISH]:checked) rt {
}
/* 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;
}
body:has(fieldset#ruby-controls > input[value=HIDDEN]:checked) 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 {
font-family: var(--font-family-heading);
font-weight: bold;
}
table {
border: 1px solid var(--separator-color);
border-collapse: collapse;