sample.css 696 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. @import url('./common.css');
  2. h1 {
  3. color: hotpink;
  4. font-family: cursive;
  5. display: inline-block;
  6. position:sticky;
  7. top: 0;
  8. }
  9. canvas{
  10. width:50%;
  11. height:50%;
  12. align-items: center;
  13. border: 1px solid black;
  14. }
  15. @property --vw{
  16. syntax: '<length>';
  17. inherits:true;
  18. initial-value:100vw;
  19. }
  20. @property --vh{
  21. syntax: '<length>';
  22. inherits:true;
  23. initial-value:100vh;
  24. }
  25. :root{
  26. --w:tan(atan2(var(--vw),1px));
  27. --h:tan(atan2(var(--vh),1px));
  28. }
  29. body::before{
  30. content:counter(w) "x" counter(h);
  31. counter-reset: w var(--w) h var(--h);
  32. font-size:50px;
  33. position:fixed;
  34. inset:0;
  35. right:20px;
  36. top:20px;
  37. /* width:fit-content;
  38. height:fit-content; */
  39. margin:auto;
  40. }