The following is the code used for opacity functionality.1 It is also described in chapter four (4.3.3).
This is the code for the buttons:
<div class="toggle-buttons">
<button id="opaqueBtn" class="toggle-button">Opaque</button>
<button id="transparentBtn" class="toggle-button">Transparent</button>
<button id="partiallyOpaqueBtn" class="toggle-button">Partially Opaque</button></div>
This is the code for images, each level is defined and uses a uniquely generated image:
<img id=“[filename]” class="opaque" src="/diss/assets/items/[filename]_opaque.jpg" style="max-width:60%;height:auto;">
<img id="[filename]" class="transparent" src="/diss/assets/items/[filename].jpg" style="max-width:60%;height:auto;">
<img id="[filename]" class="partially-opaque" src="/diss/assets/items/[filename]_partial.jpg" style="max-width:60%;height:auto;">
The following code is used for the text opacity functions. For partial lines:
<span class="partial-lines”>[content]</span>
For fully opaque text:
<span class="opaque-lines”>[content]</span>
The fully opaque lines will always be crossed out with partial lines, so using the fully opaque function will usually have the partial lines span class nested inside:
<span class="partial-lines"><span class="opaque-lines”>[content]</span></span>
This code was developed by Kalani Craig. ↩
Sean Purcell,2023 - 2025. Community-Archive Jekyll Theme by Kalani Craig is licensed under CC BY-NC-SA 4.0 Framework: Foundation 6.