commit: 8d03cbdd10e10e66aa9d3ce257e28e441c8c6858
parent bcbfa169080c8ffb4fd246826ca872935a691a80
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date: Thu, 7 Aug 2025 16:38:38 +0200
notes/css-cursors-demo: use different background-shade between cursors, highlight hovered cursor
Diffstat:
4 files changed, 24 insertions(+), 7 deletions(-)
diff --git a/build.ninja b/build.ninja
@@ -72,3 +72,8 @@ build images/linux-audio-output-current.svg: dot images/linux-audio-output-curre
build css/index.css: colorscheme css/index.in.css
build css/mandoc.css: colorscheme css/mandoc.in.css
+
+rule sh
+ command = sh $in
+
+build notes/css-cursors-demo.xhtml notes/css-cursors-demo.css: sh notes/css-cursors-demo.sh
diff --git a/notes/css-cursors-demo.css b/notes/css-cursors-demo.css
@@ -1,3 +1,7 @@
+#cursors li:nth-child(odd) { background-color: var(--ansi00); }
+#cursors li:nth-child(even) { background-color: var(--ansi00-hard); }
+#cursors li { border: 1pt solid transparent; }
+#cursors li:hover { border: 1pt solid; }
#cursors-auto { cursor: auto; }
#cursors-default { cursor: default; }
#cursors-none { cursor: none; }
diff --git a/notes/css-cursors-demo.sh b/notes/css-cursors-demo.sh
@@ -40,12 +40,20 @@ zoom-out'
WORKDIR="$(dirname "$0")"
-for cur in ${CURSORS}; do
-printf '#cursors-%s { cursor: %s; }\n' "$cur" "$cur"
-done >| "${WORKDIR}/css-cursors-demo.css"
+(
+ cat - <<EOF
+#cursors li:nth-child(odd) { background-color: var(--ansi00); }
+#cursors li:nth-child(even) { background-color: var(--ansi00-hard); }
+#cursors li { border: 1pt solid transparent; }
+#cursors li:hover { border: 1pt solid; }
+EOF
+ for cur in ${CURSORS}; do
+ printf '#cursors-%s { cursor: %s; }\n' "$cur" "$cur"
+ done
+) >| "${WORKDIR}/css-cursors-demo.css"
(
-printf \
+ printf \
'<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xi="http://www.w3.org/2001/XInclude" xml:lang="en" lang="en">
<head>
@@ -58,7 +66,7 @@ printf \
<main>
<h1>CSS cursors demo</h1>
<p>You can hover on each word to get it"s corresponding cursor property</p>
- <ul>
+ <ul id="cursors">
'
for cur in ${CURSORS}; do
@@ -67,7 +75,7 @@ printf \
' "$cur" "$cur"
done
-printf \
+ printf \
' </ul>
</main>
<!--#include file="/templates/en/footer.shtml" -->
diff --git a/notes/css-cursors-demo.xhtml b/notes/css-cursors-demo.xhtml
@@ -10,7 +10,7 @@
<main>
<h1>CSS cursors demo</h1>
<p>You can hover on each word to get it"s corresponding cursor property</p>
- <ul>
+ <ul id="cursors">
<li id="cursors-auto">auto</li>
<li id="cursors-default">default</li>
<li id="cursors-none">none</li>
