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
.root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  font-size: min(4em, 15vw, 30vh);
}

.label {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
}
body[data-features~="dropshadow"] .label {
  text-shadow: 0 2px 0.15em rgb(0 0 0 / 0.5);
}

.label > [data-single]::first-letter {
  color: var(--fg-dim);
}

.date {
  font-size: 0.75em;
  gap: 0;
}

.separator {
  font-size: 0.6em;
}

.visuallyHidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  user-select: none;
  pointer-events: none;
  overflow: hidden;

  opacity: 0;
}
body[data-features~="show-visuallyhidden"] .visuallyHidden {
  opacity: 0.5;
}