💾 Archived View for mozz.us › journal › 2020-03-03.gmi captured on 2021-12-03 at 14:04:38. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2020-09-24)
-=-=-=-=-=-=-
Published 2020-03-03
Another spec change, another site update...
I made pass through all of my hosted gemini documents and updated the text formatting. Overall, it wasn't too hard this time around.
Here are some examples of pages that highlight the strength of the new format
gemini://mozz.us/diagnostics/2020-01-08/notes.gmi
gemini://mozz.us/files/aaatutorial.gmi
gemini://mozz.us/journal/2019-08-20_documents_and_directories.gmi
I also tweaked the layout of my homepage a bit. The goal is to emphasize original content, and de-emphasize random documents and tech demos.
I also updated my Gemini-HTTP proxy to render the new document format. It was surprisingly fun to work out how to implement the CSS while remaining faithful to the gemini specification.
Here's a quick outline of what I came up with. Setting the "white-space: pre-wrap" property for <p> elements preserves line breaks, while still wrapping long lines using a proportional font. Setting the margin to 0 removes any extra whitespace around elements like headers. I also lowered the font sizes for headers to be a bit less dramatic.
CSS
.gemini > * { margin: 0; } .gemini > p { white-space: pre-wrap; }
HTML
<div class="gemini"> <h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <ul><li>Bullet point</li></ul> <pre> Preformatted text blocks will preserve hard line breaks. </pre> <p> Any other text will be placed inside of a paragraph element with a proportional font. </p> </div>
Here's a test file that I used to validate the document rendering: