vilmibm/trunkless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bunch of cosmetic stuff

Browse Source
This commit is contained in:
nate smith 2024-08-17 15:03:26 -05:00
parent 09ed528252
commit 9023df0772
2 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
templates/index.tmpl
View File

@ -25,7 +25,7 @@ body {
}
#about {
background-color: grey;
background-color: white;
display: none;
color: black;
}
@ -130,11 +130,17 @@ a {
<div is="source-text" class="source"></div>
</template>
<h1 style="display:block;margin:0">Trunkless</h1>
<p style="margin-top:0;font-size:80%">
<a is="about-toggler"></a>
<a is="theme-toggler"></a>
</p>
<div style="display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); gap: 10px;">
<div style="grid-column: 1 / 3; grid-row: 1">
<h1 style="display:inline-block;margin:0">Trunkless</h1>
</div>
<div style="grid-column: 3; grid-row: 1; text-align: right; font-size:150%">
<span class="corner" style="background:white; padding-right:1em; padding-left:1em; padding-bottom: .5em">
<a style="font-weight: bold" is="about-toggler"></a>
<a class="bordered" style="border: 1px solid black; padding: 0 6px 0 6px" is="theme-toggler"></a>
</span>
</div>
</div>
<div id="about">
<p>
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 A VARIETY OF CORPORA TO CHOOSE FROM:
@ -151,7 +157,6 @@ a {
</p>
</div>
<div class="controls">
<button is="poem-resetter"></button>
<form method="GET" action="/" style="display:inline">
<label for="corpus-select">corpus:</label>
<select name="corpus" id="corpus-select">
@ -166,8 +171,12 @@ a {
</select>
<button type="submit">go</button>
</form>
<form is="poem-saver" style="border: 1px solid grey; display:inline; padding:4px;">
</div>
<div class="main">
<div style="margin-bottom: 5px">
<button is="poem-regenner">regenerate unpinned lines</button>
<button is="poem-resetter"></button>
<form is="poem-saver" style="border-right: 1px solid grey;border-bottom: 1px solid grey;border-left: 1px solid grey; display:inline; padding:4px;">
<button class="copy" type="submit">copy</button>
<button class="save" type="submit">save</button>
<input name="type" value="text" type="radio" checked />as text
@ -175,10 +184,6 @@ a {
<input name="sources" type="checkbox"/>include sources
</form>
</div>
<div class="main">
<div style="margin-bottom: 5px">
<button is="poem-regenner">regenerate unpinned lines</button>
</div>
<div is="poem-lines"></div>
<div>
<button is="line-adder" title="add new line">add new line</button>

11
web/assets/main.js
View File

@ -309,30 +309,39 @@ class ThemeToggler extends HTMLAnchorElement {
constructor() {
super();
this.addEventListener("click", this.click);
this.theme = "dark";
this.theme = "light";
this.innerText = "◑";
this.setAttribute("aria-hidden", "true");
this.style.cursor = "pointer";
}
click() {
// TODO this should all be done via class toggling my dude
if (this.theme == "light") {
this.theme = "dark";
$("body").style.backgroundColor = "black";
$("body").style.backgroundImage = 'url("/bg_dark.gif")';
$("body").style.color = "white";
$(".main").style.backgroundColor = "black";
$("#about").style.backgroundColor = "black";
$("#about").style.color = "white";
$("h1").style.backgroundColor = "black";
$(".controls form").style.backgroundColor = "black";
$(".corner").style.backgroundColor = "black";
$(".corner .bordered").style.border = "1px solid white";
$$("a").forEach((e) => { e.style.color = "white" });
} else {
this.theme = "light";
$("body").style.backgroundColor = "white";
$("body").style.backgroundImage = 'url("/bg_light.gif")';
$("body").style.color = "black";
$("#about").style.backgroundColor = "white";
$("#about").style.color = "black";
$(".main").style.backgroundColor = "white";
$(".controls form").style.backgroundColor = "white";
$("h1").style.backgroundColor = "white";
$(".corner").style.backgroundColor = "white";
$(".corner .bordered").style.border = "1px solid black";
$$("a").forEach((e) => { e.style.color = "black" });
}
}