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

stylin

Browse Source
This commit is contained in:
nate smith 2024-02-19 22:47:37 -08:00
parent 1fc367ad71
commit 4dbb32ed0f
6 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -4,3 +4,6 @@ cmd/ingest/gutingest
cmd/phraser/phraser cmd/phraser/phraser
cmd/gutcontent/gutcontent cmd/gutcontent/gutcontent
*.swp *.swp
node_modules
package.json
package-lock.json

BIN
assets/bg_dark.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
assets/bg_light.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

12
assets/main.js
View File

@ -191,7 +191,6 @@ class PoemLine extends HTMLDivElement {
} }
get source() { get source() {
console.log(this.querySelector("span.linetext"));
return this.querySelector("span.linetext").dataset.source; return this.querySelector("span.linetext").dataset.source;
} }
@ -284,7 +283,6 @@ class SourceText extends HTMLParagraphElement {
const fullGutID = source.Name.split(" ", 2)[0]; const fullGutID = source.Name.split(" ", 2)[0];
const sourceName = source.Name.slice(source.Name.indexOf(' ')); const sourceName = source.Name.slice(source.Name.indexOf(' '));
const gutID = fullGutID.match(/^pg(.+).txt$/)[1]; const gutID = fullGutID.match(/^pg(.+).txt$/)[1];
console.log(fullGutID, sourceName, gutID);
const url = `https://www.gutenberg.org/cache/epub/${gutID}/pg${gutID}.txt`; const url = `https://www.gutenberg.org/cache/epub/${gutID}/pg${gutID}.txt`;
this.innerHTML = ` this.innerHTML = `
<span>${sourceName}</span> (<a href="${url}">${fullGutID}</a>)` <span>${sourceName}</span> (<a href="${url}">${fullGutID}</a>)`
@ -298,7 +296,7 @@ class ThemeToggler extends HTMLAnchorElement {
constructor() { constructor() {
super(); super();
this.addEventListener("click", this.click); this.addEventListener("click", this.click);
this.theme = "light"; this.theme = "dark";
this.innerText = "◑"; this.innerText = "◑";
this.setAttribute("aria-hidden", "true"); this.setAttribute("aria-hidden", "true");
this.style.cursor = "pointer"; this.style.cursor = "pointer";
@ -306,14 +304,18 @@ class ThemeToggler extends HTMLAnchorElement {
click() { click() {
if (this.theme == "light") { if (this.theme == "light") {
this.theme = "dark"; this.theme = "dark";
$("body").style.background = "black"; $("body").style.backgroundColor = "black";
$("body").style.backgroundImage = 'url("/bg_dark.gif")';
$("body").style.color = "white"; $("body").style.color = "white";
$$("a").forEach((e) => { e.style.color = "white" }); $$("a").forEach((e) => { e.style.color = "white" });
$$("span.linetext").forEach((e) => { e.style.backgroundColor = "black" });
} else { } else {
this.theme = "light"; this.theme = "light";
$("body").style.background = "white"; $("body").style.backgroundColor = "white";
$("body").style.backgroundImage = 'url("/bg_light.gif")';
$("body").style.color = "black"; $("body").style.color = "black";
$$("a").forEach((e) => { e.style.color = "black" }); $$("a").forEach((e) => { e.style.color = "black" });
$$("span.linetext").forEach((e) => { e.style.backgroundColor = "white" });
} }
} }
} }

2
main.go
View File

@ -48,6 +48,8 @@ func main() {
r.LoadHTMLFiles("templates/index.tmpl") r.LoadHTMLFiles("templates/index.tmpl")
r.StaticFile("/cutive.ttf", "./assets/cutive.ttf") r.StaticFile("/cutive.ttf", "./assets/cutive.ttf")
r.StaticFile("/favicon.ico", "./assets/favicon.ico") r.StaticFile("/favicon.ico", "./assets/favicon.ico")
r.StaticFile("/bg_light.gif", "./assets/bg_light.gif")
r.StaticFile("/bg_dark.gif", "./assets/bg_dark.gif")
r.StaticFile("/main.js", "./assets/main.js") r.StaticFile("/main.js", "./assets/main.js")
randMax := big.NewInt(maxID) randMax := big.NewInt(maxID)

9
templates/index.tmpl
View File

@ -11,15 +11,22 @@
body { body {
font-family: "cutive", monospace; font-family: "cutive", monospace;
font-size:125%; font-size:125%;
background-color: black;
color: white;
background-image: url("/bg_dark.gif");
} }
a { a {
color: black; color: white;
} }
div.line:not(.unpinned) > .linetext { div.line:not(.unpinned) > .linetext {
font-weight: bold; font-weight: bold;
} }
span.linetext {
background-color: black;
}
</style> </style>
</head> </head>
<body> <body>