utility.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. .flexi {
  2. display: flex;
  3. gap: clamp(20px, 5vw, 35px);
  4. flex-wrap: wrap;
  5. /* justify-content: space-evenly; */
  6. /* justify-content: center; */
  7. justify-content: flex-start;
  8. align-items: center;
  9. }
  10. /* .flexi:not(:has(>*:nth-child(3))) {
  11. justify-content: center;
  12. }
  13. @media (min-width: 40rem) {
  14. .flexi:has(>*:nth-child(3)) {
  15. justify-content: center;
  16. }
  17. } */
  18. .flow > *:where(:not(:first-child)) {
  19. margin-block-start: var(--flow-space, 1em);
  20. }
  21. .hidden {
  22. display:none !important;
  23. }
  24. .hide-small {
  25. @media (max-width: 30em) {
  26. display: none !important;
  27. }
  28. }
  29. .hide-medium {
  30. @media (max-width: 50em) {
  31. display: none !important;
  32. }
  33. }
  34. .sr-only {
  35. position: absolute;
  36. width: 1px;
  37. height: 1px;
  38. padding: 0;
  39. margin: -1px;
  40. overflow: hidden;
  41. clip: rect(0, 0, 0, 0);
  42. white-space: nowrap;
  43. border: 0;
  44. }
  45. .border-top {
  46. /* border-top: solid 1px --clr-blue-desaturated-500; */
  47. border-top: solid 1px hsl(var(--clr-primary-hsl)/.25);
  48. padding-block-start: 2.5rem;
  49. margin-block-start: 2rem;
  50. margin-block-start: 6rem;
  51. }
  52. .margin-top {
  53. margin-block-start: 3rem;
  54. }
  55. .d-block {
  56. display: blok;
  57. }