1. Top
  2. ef.js
  3. Files
  4. examples
  5. clock
  6. index.html
ef.js

Declarative DOM helper experiment

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83 
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Clock sample | ef.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="module" defer src="./main.ts"></script>
    <!-- For third party licenses, see ./third-party.txt -->
    <style>
      :root {
        --fg-default: 0deg 0% 5%;
        --bg-default: 0deg 0% 100%;

        --fg: hsl(var(--theme-fg, var(--fg-default)));
        --fg-dim: hsl(var(--theme-fg, var(--fg-default)) / 0.65);
        --bg: hsl(var(--theme-bg, var(--bg-default)));

        font-family: "JetBrains Mono", monospace;
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --fg-default: hsl(0deg 0% 100%);
          --bg-default: hsl(0deg 0% 5%);
        }
      }

      @supports (color: oklch(0% 0 0deg)) {
        :root {
          --color-red: 35% 0.7 0deg;
          --color-dark-red: 20% 0.2 0deg;
          --color-blue: 43% 0.7 220deg;
          --color-dark-blue: 8% 0.15 220deg;
          --color-green: 40% 0.75 150deg;
          --color-dark-green: 20% 0.15 150deg;
          --color-yellow: 80% 0.7 110deg;
          --color-dark-yellow: 40% 0.2 110deg;
          --color-black: 0% 0 0deg;
          --color-mostly-black: 10% 0 0deg;
          --color-white: 100% 0 0deg;
          --color-mostly-white: 95% 0 0deg;

          --fg-default: var(--color-mostly-black);
          --bg-default: var(--color-mostly-white);

          --fg: oklch(var(--theme-fg, var(--fg-default)));
          --fg-dim: oklch(var(--theme-fg, var(--fg-default)) / 0.65);
          --bg: oklch(var(--theme-bg, var(--bg-default)));
        }

        @media (prefers-color-scheme: dark) {
          :root {
            --fg-default: var(--color-white);
            --bg-default: var(--color-mostly-black);
          }
        }
      }

      * {
        font: inherit;
        margin: 0;
        padding: 0;
      }

      body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: stretch;
        align-items: stretch;

        background-color: var(--bg);
        color: var(--fg);
        overflow: hidden;
      }
    </style>
    <meta name="theme-color" content="var(--bg)" />
  </head>
  <body></body>
</html>