Implement math-toggles natively into the theme

Adding math toggles to articles now just got a lot simpler.
This commit is contained in:
Badri Sunderarajan 2021-11-15 12:45:31 +05:30
parent 69b42a05bc
commit 1d7dc0ad38
4 changed files with 161 additions and 2 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -138,6 +138,154 @@ html.dark-mode .tile-menu .tile {
border-color: var(--color-darkgrey);
}
/* 3.2 Mathboxes: for math/math-free toggling
/* ---------------------------------------------------------- */
.mathful-infobox {
padding: 2em;
margin-bottom: 1em;
background-color: color-mod(var(--color-lightgrey) l(+10%));
}
.mathful-global-toggle {
position: relative;
width: 120px;
margin: 40px auto;
}
.mathful-global-toggle .well { /* the label */
cursor: pointer;
display: block;
background: color-mod(var(--color-wash) l(+10%));
height: 40px;
border-radius: 20px;
cursor: pointer;
}
.mathful-global-toggle .toggle ~ .emoji-label:after {
content: "full math";
display: block;
text-align: center;
margin-top: 0.5em;
}
.mathful-global-toggle .toggle:checked ~ .emoji-label:after {
content: "math free";
}
.mathful-global-toggle .toggle { /* the checkbox */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
visibility: hidden;
background: transparent;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 100;
}
/* "off" */
.mathful-global-toggle .toggle ~ .emoji:before {
content: "👩🏽‍🏫";
position: absolute;
left: 0;
top: -15px;
font-size: 80px;
z-index: 1;
transition: 0.2s;
cursor: pointer;
font-style: normal;
}
/* "on" */
.mathful-global-toggle .toggle:checked ~ .emoji:before {
content: "👩🏽‍🎨";
left: 100%;
margin-left: -1em;
}
/* the actual mathboxes */
.mathful {
width: 100%;
}
.mathful .math-toggle {
height: 2em;
width: 100%;
z-index: 100;
position: absolute;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
left: 0;
border: none;
background: none;
}
.mathful .math-toggle + .emoji-wrapper {
position: absolute;
height: 0;
width: 0;
}
.mathful .math-toggle + .emoji-wrapper .emoji:before {
content: "👩🏽‍🏫";
}
.mathful input[type="checkbox"]:checked + .emoji-wrapper .emoji:before {
content: "👩🏽‍🎨";
}
/* margins for toggle box on small screens */
.mathful .math-positive,
.mathful .math-negative {
text-indent: 1.6em;
}
@media (min-width: 500px) {
.mathful .math-toggle + .emoji-wrapper .emoji:before {
position: relative;
float: right;
margin-right: 0;
}
.mathful .math-positive,
.mathful .math-negative {
text-indent: 0.5em;
}
}
@media (min-width: 650px) {
.mathful .math-toggle + .emoji-wrapper .emoji:before {
margin-right: 0.5em;
}
.mathful .math-positive,
.mathful .math-negative {
text-indent: 0.2em;
}
}
@media (min-width: 800px) {
.mathful .math-toggle + .emoji-wrapper .emoji:before {
margin-right: 1em;
font-size: 1.6em;
}
.mathful .math-positive,
.mathful .math-negative {
text-indent: 0;
}
}
.mathful input[type="checkbox"]:checked ~ .math-positive {
display: none;
}
.mathful input[type="checkbox"]:not(:checked) ~ .math-negative {
display: none;
}
/* 4. Site Header
/* ---------------------------------------------------------- */

View file

@ -118,6 +118,17 @@ $(document).ready(function () {
$(".gh-content").fitVids();
});
</script>
<script type="text/javascript">
/**
* toggleMathfulness: a function to toggle between "math-free"
* and "mathful" elements on the page. This is a global toggle
* that sets all math-toggle checkboxes to the specified value.
*/
function toggleMathfulness(element) {
// apply current state to all elements
Array.from(document.getElementsByClassName('math-toggle')).forEach((e)=>{e.checked = element.checked})
}
</script>
{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}
{{ghost_foot}}