add about

This commit is contained in:
nate smith 2024-03-17 11:24:39 -07:00
parent ee8d9d0e31
commit 649a8b3dd1
2 changed files with 31 additions and 1 deletions

View File

@ -250,6 +250,26 @@ class SourceText extends HTMLDivElement {
} }
} }
class AboutToggler extends HTMLAnchorElement {
constructor() {
super();
this.hide = true;
this.style.cursor = "pointer";
}
connectedCallback() {
this.innerText = "about";
this.addEventListener("click", (e) => {
if (this.hide) {
$("#about").style.display = "block";
} else {
$("#about").style.display = "none";
}
this.hide = !this.hide;
});
}
}
class ThemeToggler extends HTMLAnchorElement { class ThemeToggler extends HTMLAnchorElement {
constructor() { constructor() {
super(); super();
@ -385,6 +405,7 @@ class PoemSaver extends HTMLFormElement {
const reorder = new CustomEvent("reorder", {bubbles: true}); const reorder = new CustomEvent("reorder", {bubbles: true});
const edited = new CustomEvent("edited", {bubbles: true}); const edited = new CustomEvent("edited", {bubbles: true});
customElements.define("about-toggler", AboutToggler, { extends: "a" });
customElements.define("poem-saver", PoemSaver, { extends: "form" }); customElements.define("poem-saver", PoemSaver, { extends: "form" });
customElements.define("theme-toggler", ThemeToggler, { extends: "a" }); customElements.define("theme-toggler", ThemeToggler, { extends: "a" });
customElements.define("source-text", SourceText, { extends: "div" }); customElements.define("source-text", SourceText, { extends: "div" });

View File

@ -24,6 +24,12 @@ body {
padding: 5px padding: 5px
} }
#about {
background-color: grey;
display: none;
color: black;
}
h1 { h1 {
background-color: black; background-color: black;
} }
@ -112,9 +118,12 @@ a {
<h1 style="display:block;margin:0">Trunkless</h1> <h1 style="display:block;margin:0">Trunkless</h1>
<p style="margin-top:0;font-size:80%"> <p style="margin-top:0;font-size:80%">
<a href="/about">about</a> <a is="about-toggler"></a>
<a is="theme-toggler"></a> <a is="theme-toggler"></a>
</p> </p>
<p id="about">
HELLO. THIS IS A <a href="https://github.com/vilmibm/trunkless">SOFT WARE</a> FOR MAKING <a href="https://en.wikipedia.org/wiki/Cut-up_technique">CUT-UP POETRY</a>. THERE ARE 467,014,991 POSSIBLE LINES YOU MAY SEE. ALL OF THE LINES ARE FROM THE ENGLISH CORPUS OF <a href="https://gutenberg.org">PROJECT GUTERNBERG</a>. SOME MAY BE OBJECTIONABLE AND I'M SORRY. THE AUTHOR OF THIS SOFT WARE IS <a href="https://tilde.town/~vilmibm">~VILMIBM</a>.
</p>
<div class="controls"> <div class="controls">
<button is="poem-resetter"></button> <button is="poem-resetter"></button>