4 files changed, 81 insertions, 23 deletions

diff --git a/free-software.md b/free-software.md
deleted file mode 100644
index 178740a..0000000
--- a/free-software.md
+++ /dev/null
@@ -1,21 +0,0 @@
-title: Free software
-author: The GNU Assembly
----
-
-# What’s “free software”?
-
-The GNU Assembly produces _free software_, also referred to as “_libre_
-software”, “liberating software”, or “open source” — but that last one
-fails to convey the main idea, that the goal is freedom.  Software
-is “free” if it _respects its user’s freedom_, namely the following four
-essential freedoms:
-
-  1. The freedom to run the program as the user wishes, for any purpose.
-  2. The freedom to study how the program works and to change it to suit
-     their needs.
-  3. The freedom to redistribute it.
-  4. The freedom to distribute copies of modified versions.
-
-These criteria were spelled out by Richard M. Stallman in the 1980s.
-The defense of the freedom of computer users is at the core of the
-[Social Contract](/en/documents/social-contract) of the GNU Assembly.
diff --git a/free-software.sxml b/free-software.sxml
new file mode 100644
index 0000000..e09afbc
--- /dev/null
+++ b/free-software.sxml
@@ -0,0 +1,35 @@
+`((title . "Free software")
+  (author . "The GNU Assembly")
+  (content
+   (h1 "What’s “free software”?")
+
+   (p "The GNU Assembly produces " (em "free software")
+      " — also referred to as “" (em "libre") " software”, “liberating
+software”, or "
+      (a (@ (aria-describedby "footnote-label")
+            (href "#open-source")) "“open source”")
+      ".  "
+      "Software is “free” if it " (em "respects its user’s
+freedom") ", namely the following four essential freedoms:")
+
+   (ol
+    (li "The freedom to run the program as the user wishes, for any
+purpose.")
+    (li "The freedom to study how the program works and to change it
+to suit their needs.")
+    (li "The freedom to redistribute it.")
+    (li "The freedom to distribute copies of modified versions."))
+   (p "These criteria were spelled out by Richard M. Stallman in the
+1980s.  The defense of the freedom of computer users is at the core of
+the " (a (@ (href "/en/documents/social-contract")) "Social
+Contract") " of the GNU Assembly.")
+
+   (div
+    (@ (id "footnote-labels"))
+    (h2 "Footnotes")
+    (ol
+     (li (@ (id "open-source"))
+         "The term “open source” fails to convey the main idea: that
+the goal is freedom.")))))
+
+
diff --git a/haunt.scm b/haunt.scm
index bcf5b02..b808aeb 100644
--- a/haunt.scm
+++ b/haunt.scm
@@ -172,8 +172,8 @@ representation."
                        "roles.md")
         (markdown-page "/en/documents/governance/index.html"
                        "governance.md")
-        (markdown-page "/en/documents/free-software/index.html"
-                       "free-software.md")
+        (sxml-page "/en/documents/free-software/index.html"
+                   "free-software.sxml")
         (markdown-page "/en/documents/code-of-conduct/index.html"
                        "code-of-conduct.md")
         (markdown-page "/en/documents/social-contract/index.html"
diff --git a/static/css/main.css b/static/css/main.css
index 6e5650d..c363b0b 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -329,6 +329,10 @@ audio, video, .full-width {
     max-width: 100%;
 }
 
+article {
+  counter-reset: footnotes;
+}
+
 article ul {
     padding-left: 0;
         list-style-type: none;
@@ -430,5 +434,45 @@ ul.members li.person + li.person {
     margin-left: 1em;
 }
 
+a[aria-describedby="footnote-label"] {
+  counter-increment: footnotes;
+  text-decoration: none;
+  color: inherit;
+  cursor: default;
+  outline: none;
+  border: none;
+}
+
+a[aria-describedby="footnote-label"]::after {
+  content: counter(footnotes);
+  vertical-align: super;
+  font-size: 0.8em;
+  margin-left: 2px;
+  color: #118ab2;
+  cursor: pointer;
+}
+
+a[aria-describedby="footnote-label"]:focus::after {
+  outline: thin dotted;
+  outline-offset: 2px;
+}
+
+#footnote-labels {
+    font-size: small;
+    margin-top: 4em;
+    border-top: 1px dotted #aaa;
+    padding-top: 1em;
+}
+#footnote-labels ol {
+    margin: 0;
+    padding: 0;
+}
+#footnote-labels h2 {
+    display: none;
+}
+#footnote-labels :target {
+  background: yellow;
+}
+
 #footer-box a { color: #333333; border-width: 1px; }
 #footer-box a:visited { color: #333333; }