Added strong fish favicon and cleaned up the stylesheet

main
Mike Lynch 2024-12-01 12:34:57 +11:00
parent 1491341b64
commit c89ff1e839
4 changed files with 43 additions and 9 deletions

View File

@ -2,19 +2,19 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="./strong_fish.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Damned Fort | NaNoGenMo 2024</title> <title>Damned Fort | NaNoGenMo 2024</title>
</head> </head>
<body> <body>
<div id="header"> <div id="header">
<h1>Damned Fort - NaNoGenMo 2024</h1>
<p class="subtitle">A rearrangement of <a href="https://www.gutenberg.org/ebooks/22472">Charles Fort's <i>The Book of the Damned</i></a> using <a href="https://compromise.cool/">compromise</a> | by <a href="https://mikelynch.org">Mike Lynch</a> | <a href="https://git.tilde.town/bombinans/damned-fort">Source</a></p>
</div> </div>
<div id="controls"> <div id="frame">
<input id="nextPage" type="button" value="Next" />
</div>
<div id="page"></div> <div id="page"></div>
<div id="controls">
<div id="colophon"> <input id="nextPage" type="button" value="more" />
</div> </div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -56,7 +56,7 @@ async function main() {
const next = document.getElementById("nextPage"); const next = document.getElementById("nextPage");
next.addEventListener("click", (e) => { next_ctrl(); }); next.addEventListener("click", (e) => { next_ctrl(); });
next_ctrl();
} }

View File

@ -1,5 +1,5 @@
:root { :root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: Times New Roman, serif;
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;
@ -13,10 +13,29 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
#header {
padding: 2em;
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 100%;
}
#frame { #frame {
position: absolute;
top: 80px;
left: 0;
width: 75%;
padding: 2em; padding: 2em;
} }
#controls {
}
a { a {
font-weight: 500; font-weight: 500;
@ -36,10 +55,18 @@ body {
} }
h1 { h1 {
font-size: 3.2em; font-size: 100%;
line-height: 1.1; line-height: 1.1;
} }
.subtitle {
font-size: 80%;
}
#colophon {
font-size: 80%;
}
#app { #app {
max-width: 1280px; max-width: 1280px;
margin: 0 auto; margin: 0 auto;