14.1 #Text.collapsible-container Collapsible container
This is an adaptation of a the solution I found on StackOverflow.
A <input type="checkbox"> is used to control the state of the collapsible.
The <label> right after the <input> is styled as a link of color --theme-color.
If <label> contains exactly two children, then the first is shown when in collapsed state,
while the second is shown when in expanded state.
<label> has an ::after child showing a downward/upward guillemot glyph to signify that the
collapsible is expandable (i.e. collapsed) or collapsible (i.e. expanded).
The duration of the change of state is --collapsible-transition-time.
Note: because of reasons explained at the link above, it's unlikely that
the default --collapsible-transition-time will do well for any height of the
collapsed element, so it's probably best to set it directly in the HTML as an
inline style on a case by case basis.
Note: Do not remove the <div> right inside the .collapsible, as it is needed.
Text that follows…
…Moves to occupy the space left by the collapsible.
Markup
<div class="collapsible-widget" style="--collapsible-transition-time: 0.2s">
<input type="checkbox" value="" name="show more" id="collapsible-example-1"/>
<label for="collapsible-example-1"><span>Child of label 1/2</span><span>Child of label 2/2</span></label>
<div class="collapsible">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="collapsible-widget" style="--collapsible-transition-time: 0.2s">
<input type="checkbox" value="" name="show more" id="collapsible-example-2"/>
<label for="collapsible-example-2">
<span style="border: dashed;">These are</span>
<span style="border: dashed;">three children</span>
<span style="border: dashed;">of label</span></label>
<div class="collapsible">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="collapsible-widget" style="--collapsible-transition-time: 0.2s">
<input type="checkbox" value="" name="show more" id="collapsible-example-3"/>
<label for="collapsible-example-3"><span>Only child of label</span></label>
<div class="collapsible">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div>
<h1>Text that follows…</h1>
<p>…Moves to occupy the space left by the collapsible.
</div>css/modules/text/collapsible-container.css, line 1
14.2 #Text.fonts Gallery of font sizes
NOTE: There's something wrong with KSS which renders the
non-.handwriting <h1> (purposedly rendered in red) with the wrong
fond-size. Indeed, if I put the same markup in the actual page, it works
well, but here it seems like some spurious user agent stylesheet overrides the
rule font-size: 2em; that is set via the h1 selector with something else:
:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 {
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
}
:-webkit-any(article, aside, nav, section) h1 {
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
}
This is h1
This handwritten is h1
This is h2
This handwritten is h2
This is h3
This handwritten is h3
This is h4
This handwritten is h4
This is h5
This handwritten is h5
This is h6
This handwritten is h6
Markup
<style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
#kss-font-size-bug {
color: red;
}
</style>
<!-- REMOVE THE ID BELOW, WHICH IS JUST FOR THE PURPOSE OF THE COMMENT IN THE NOTE -->
<h1 id="kss-font-size-bug">This is h1</h1><h1 class="handwriting">This handwritten is h1</h1>
<h2>This is h2</h2><h2 class="handwriting">This handwritten is h2</h2>
<h3>This is h3</h3><h3 class="handwriting">This handwritten is h3</h3>
<h4>This is h4</h4><h4 class="handwriting">This handwritten is h4</h4>
<h5>This is h5</h5><h5 class="handwriting">This handwritten is h5</h5>
<h6>This is h6</h6><h6 class="handwriting">This handwritten is h6</h6>
<div>This is div</div><div class="handwriting">This handwritten is div</div>css/modules/text/fonts.css, line 1
14.3 #Text.list-items Good and bad items
Class to change the glyph of the items to ✓ or ✗.
- hello
- hello
- hello
Markup
<ul>
<li>hello</li>
<li class="good">hello</li>
<li class="bad">hello</li>
</ul>css/modules/text/lists.css, line 1