Implement math-toggles natively into the theme
Adding math toggles to articles now just got a lot simpler.
This commit is contained in:
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
|
@ -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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
|
11
default.hbs
11
default.hbs
|
@ -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}}
|
||||
|
|
Loading…
Reference in a new issue