logo

blog

My website can't be that messy, right? git clone https://anongit.hacktivis.me/git/blog.git/

css-cursors-demo.sh (1463B)

    

  1. #!/bin/sh
  3. CURSORS='
  4. auto
  5. default
  6. none
  7. context-menu
  8. help
  9. pointer
  10. progress
  11. wait
  12. cell
  13. crosshair
  14. text
  15. vertical-text
  16. alias
  17. copy
  18. move
  19. no-drop
  20. not-allowed
  21. grab
  22. grabbing
  23. e-resize
  24. n-resize
  25. ne-resize
  26. nw-resize
  27. s-resize
  28. se-resize
  29. sw-resize
  30. w-resize
  31. ew-resize
  32. ns-resize
  33. nesw-resize
  34. nwse-resize
  35. col-resize
  36. row-resize
  37. all-scroll
  38. zoom-in
  39. zoom-out'
  41. WORKDIR="$(dirname "$0")"
  43. (
  44. 	cat - <<EOF
  45. #cursors li:nth-child(odd)  { background-color: var(--ansi00); }
  46. #cursors li:nth-child(even) { background-color: var(--ansi00-hard); }
  47. #cursors li       { border: 1pt solid transparent; }
  48. #cursors li:hover { border: 1pt solid; }
  49. EOF
  50. 	for cur in ${CURSORS}; do
  51. 	printf '#cursors-%s { cursor: %s; }\n' "$cur" "$cur"
  52. 	done
  53. ) >| "${WORKDIR}/css-cursors-demo.css"
  55. (
  56. 	printf \
  57. '<!DOCTYPE html>
  58. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xi="http://www.w3.org/2001/XInclude" xml:lang="en" lang="en">
  59. 	<head>
  60. <!--#include file="/templates/head.shtml" -->
  61. 		<title>CSS cursors demo</title>
  62. 		<link rel="stylesheet" href="css-cursors-demo.css" />
  63. 	</head>
  64. 	<body>
  65. <!--#include file="/templates/en/nav.shtml" -->
  66. 		<main>
  67. 		<h1>CSS cursors demo</h1>
  68. 		<p>You can hover on each word to get it&quot;s corresponding cursor property</p>
  69. 		<ul id="cursors">
  70. '
  72. 	for cur in ${CURSORS}; do
  73. 		printf \
  74. '			<li id="cursors-%s">%s</li>
  75. ' "$cur" "$cur"
  76. 	done
  78. 	printf \
  79. '		</ul>
  80. 		</main>
  81. <!--#include file="/templates/en/footer.shtml" -->
  82. 	</body>
  83. </html>\n'
  84. ) >| "${WORKDIR}/css-cursors-demo.xhtml"