list.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. .section-card {
  2. border-radius: var(--card-border-radius);
  3. background-color: var(--card-background);
  4. padding: var(--small-card-padding);
  5. box-shadow: var(--shadow-l1);
  6. display: flex;
  7. align-items: center;
  8. gap: 20px;
  9. --separation: 15px;
  10. .section-term {
  11. font-size: 2.2rem;
  12. margin: 0;
  13. color: var(--card-text-color-main);
  14. }
  15. .section-description {
  16. font-weight: normal;
  17. color: var(--card-text-color-secondary);
  18. font-size: 1.6rem;
  19. margin: 0;
  20. }
  21. .section-details {
  22. flex-grow: 1;
  23. display: flex;
  24. flex-direction: column;
  25. gap: 8px;
  26. }
  27. .section-image {
  28. img {
  29. width: 60px;
  30. height: 60px;
  31. }
  32. }
  33. .section-count {
  34. color: var(--card-text-color-tertiary);
  35. font-size: 1.4rem;
  36. margin: 0;
  37. font-weight: bold;
  38. text-transform: uppercase;
  39. }
  40. }
  41. .subsection-list {
  42. overflow-x: auto;
  43. .article-list--tile {
  44. display: flex;
  45. padding-bottom: 15px;
  46. article {
  47. width: 250px;
  48. height: 150px;
  49. margin-right: 20px;
  50. flex-shrink: 0;
  51. .article-title {
  52. margin: 0;
  53. font-size: 1.8rem;
  54. }
  55. .article-details {
  56. padding: 20px;
  57. }
  58. }
  59. }
  60. }