license and more text

2025-12-29 18:49:50 -08:00 · 2024-08-25 20:32:46 +02:00
parent 350aadcb35
commit 5947bf9df9
5 changed files with 104 additions and 36 deletions
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright 2024 Oskar Wickström
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/index.css
+++ b/index.css
@@ -156,7 +156,7 @@ table tbody tr:first-child > * {


 th {
-  font-weight: 600;
+  font-weight: 700;
 }
 .width-min {
  width: 0%;
@@ -165,8 +165,11 @@ th {
  width: 100%;
 }

-header {
-  padding: 0;
+.header {
+  margin-bottom: calc(var(--line-height) * 2);
+}
+.header tr td:last-child {
+  text-align: right;
 }

 p {
@@ -218,6 +221,19 @@ ul {
  list-style-type: square;
  padding: 0 0 0 2ch;
 }
+ol {
+  list-style-type: none;
+  counter-reset: item;
+  padding: 0;
+}
+ol ol {
+  padding: 0 0 0 3ch;
+}
+ol li:before { 
+  content: counters(item, ".") ". ";
+  counter-increment: item;
+  font-weight: 600;
+}

 li {
  margin: 0;
@@ -250,6 +266,21 @@ input, button, textarea {
  -webkit-appearance: none;
 }

+input[type=checkbox] {
+  display: inline-grid;
+  place-content: center;
+  vertical-align: middle;
+  width: 2ch;
+  height: var(--line-height);
+  cursor: pointer;
+}
+input[type=checkbox]:checked:before {
+  content: "";
+  width: 1ch;
+  height: calc(var(--line-height) / 2);
+  background: var(--text-color);
+}
+
 button:focus, input:focus {
  --border-thickness: 3px;
  outline: none;
@@ -373,9 +404,6 @@ label input {
  background: rgba(255, 0, 0, 0.1);
 }

-.debug-toggle {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: var(--line-height) 2ch;
+.debug-toggle-label {
+  text-align: right;
 }
--- a/index.js
+++ b/index.js
@@ -52,7 +52,7 @@ function checkOffsets() {
  const config = { childList: true, subtree: true };

  const callback = () => {
-    const elements = document.querySelectorAll("body :not(.debug-grid)");
+    const elements = document.querySelectorAll("body :not(.debug-grid, .debug-toggle)");
    for (const element of elements) {
      const offset = element.offsetTop % 10;
      if(element.offsetParent == document.body && offset > 0) {
@@ -70,9 +70,9 @@ function checkOffsets() {
  observer.observe(targetNode, config);
 }

-window.addEventListener("load", checkOffsets);
-
-const debugButton = document.querySelector(".debug-toggle");
-debugButton.addEventListener("click", () => {
-  document.body.classList.toggle("debug");
-});
+const debugToggle = document.querySelector(".debug-toggle");
+function onDebugToggle() {
+  document.body.classList.toggle("debug", debugToggle.checked);
+}
+debugToggle.addEventListener("change", onDebugToggle);
+onDebugToggle();
--- a/index.md
+++ b/index.md
@@ -1,9 +1,11 @@
 ---
 title: The Monospace Web
+subtitle: A minimalist design exploration
 author: Oskar Wickström
-date: August 2024
+date: 2024-08-30
 lang: en
 toc-title: Contents
+version: v0.1.0
 ---

 ## Introduction
@@ -28,21 +30,34 @@ I might update it over time with improvements and support for more standard elem

 ## The Basics

-Look at this lovely horizontal break:
+Regular old semantic HTML should render nicely. 
+This document uses a few extra classes here and there, but mostly it's just markup.
+
+Look at this horizontal break:

 <hr>

-Or a plain old bulleted list:
+Lovely.
+
+## Lists
+
+This is a plain old bulleted list:

 * Banana
 * Paper boat
 * Cucumber
 * Rocket

-## Trees
+Ordered lists look pretty much as you'd expect:
+
+1. Goals
+1. Motivations
+    1. Intrinsic
+    1. Extrinsic
+1. Second-order effects

 It's nice to visualize trees.
-This is a regular unordered list with a _tree_ class:
+This is a regular unordered list with a `tree` class:

 <ul class="tree">
 <li>
@@ -129,7 +144,7 @@ Here are six grids with increasing cell count:
 <div class="grid"><input readonly value="1" /><input readonly value="2" /><input readonly value="3" /><input readonly value="4" /><input readonly value="5" /></div>
 <div class="grid"><input readonly value="1" /><input readonly value="2" /><input readonly value="3" /><input readonly value="4" /><input readonly value="5" /><input readonly value="6" /></div>

-If you want one cell to fill the remainder, set `flex-grow: 1;` for that particular cell.
+If we want one cell to fill the remainder, we set `flex-grow: 1;` for that particular cell.

 <div class="grid"><input readonly value="1" /><input readonly value="2" /><input readonly value="3!" style="flex-grow: 1;" /><input readonly value="4" /><input readonly value="5" /><input readonly value="6" /></div>

@@ -196,3 +211,15 @@ Media objects are supported, like images and video:
 ![[The Center of the Web (1914), Wikimedia](https://en.wikisource.org/wiki/Page:The_Center_of_the_Web_(1914).webm/11)](https://upload.wikimedia.org/wikipedia/commons/e/e0/The_Center_of_the_Web_%281914%29.webm)

 They extend to the width of the page, and add appropriate padding in the bottom to maintain the monospace grid.
+
+## Discussion
+
+That's it for now.
+I've very much enjoyed making this, pushing my CSS chops and having a lot of fun with the design.
+If you like it or even decide to use it, please [let me know](https://x.com/owickstrom).
+
+Join the discussion in any of the following threads:
+
+* X/Twitter
+* Lobsters
+* Hacker News
--- a/template.html
+++ b/template.html
@@ -34,26 +34,33 @@ $endif$
 $for(include-before)$
 $include-before$
 $endfor$
-$if(title)$
-<header>
-<h1 class="title">$title$</h1>
-$if(subtitle)$
-<p class="subtitle">$subtitle$</p>
-$endif$
-$for(author)$
-<p class="author"><cite>$author$</cite></p>
-$endfor$
-$if(date)$
-<p class="date">$date$</p>
-$endif$
+<table class="header">
+  <tr>
+    <td colspan="2" rowspan="2" class="width-auto">
+      <h1 class="title">$title$</h1>
+      <span class="subtitle">$subtitle$</span>
+    </td>
+    <th>Version</th>
+    <td class="width-min">$version$</td>
+  </tr>
+  <tr>
+    <th>Updated:</th>
+    <td class="width-min">$date$</td>
+  </tr>
+  <tr>
+    <th class="width-min">Author</th>
+    <td class="width-auto"><cite>$author$</cite></td>
+    <th class="width-min">License</th>
+    <td>MIT</td>
+  </tr>
+</table>
+<label class="debug-toggle-label"><input type="checkbox" class="debug-toggle" /> Debug mode</label>
 $if(abstract)$
 <div class="abstract">
 <div class="abstract-title">$abstract-title$</div>
 $abstract$
 </div>
 $endif$
-</header>
-$endif$
 $if(toc)$
 <nav id="$idprefix$TOC" role="doc-toc">
 $if(toc-title)$
@@ -67,7 +74,6 @@ $for(include-after)$
 $include-after$
 $endfor$
  <div class="debug-grid"></div>
-  <button class="debug-toggle">Debug</button>
  <script src="index.js"></script>
 </body>
 </html>