Newer
Older
My-Portfolio / frontend / src / components / sections / Activity.module.css
  1. /* Container */
  2. .activity-container {
  3. margin: auto;
  4. padding: 1rem;
  5. position: relative;
  6. z-index: 10;
  7. overflow: visible;
  8. text-align: center;
  9. }
  10. /* Activity Card */
  11. .activity-card {
  12. padding: 1rem;
  13. border-radius: 10px;
  14. background: rgba(0, 0, 0, 0.85);
  15. box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  16. width: 100%;
  17. max-width: 1000px;
  18. min-height: 300px;
  19. max-height: 500px;
  20. overflow: hidden;
  21. display: flex;
  22. flex-direction: column;
  23. align-items: center;
  24. justify-content: space-between;
  25. }
  26. /* Activity Content */
  27. .activity-content {
  28. display: flex;
  29. flex-direction: column;
  30. align-items: center;
  31. justify-content: center;
  32. gap: 1.5rem;
  33. }
  34. /* Activity Logo */
  35. .activity-logo {
  36. width: 80px;
  37. height: 80px;
  38. flex-shrink: 0;
  39. margin-top: 0.5rem;
  40. }
  41. /* Activity Title */
  42. .activity-title {
  43. font-size: 1.25rem;
  44. font-weight: bold;
  45. margin-bottom: 0.5rem;
  46. text-align: center;
  47. word-break: break-word;
  48. }
  49. @media (min-width: 640px) {
  50. .activity-title {
  51. font-size: auto 2.5rem;
  52. }
  53. }
  54. /* Activity Details */
  55. .activity-details {
  56. font-size: 0.75rem;
  57. color: gray;
  58. text-align: center;
  59. margin-bottom: 0.5rem;
  60. }
  61. @media (min-width: 640px) {
  62. .activity-details {
  63. font-size: 1rem;
  64. }
  65. }
  66. /* Commit Link */
  67. .activity-link {
  68. font-size: 1.2rem;
  69. color: #3b82f6;
  70. text-decoration: none;
  71. margin-top: auto;
  72. }
  73. .activity-link:hover {
  74. text-decoration: underline;
  75. }
  76. /* Navigation Buttons */
  77. .activity-buttons {
  78. display: flex;
  79. flex-direction: row;
  80. justify-content: center;
  81. gap: 1rem;
  82. margin-top: 1rem;
  83. position: relative;
  84. z-index: 20;
  85. }
  86. .activity-button {
  87. padding: 0;
  88. width: 3.5rem;
  89. height: 3.5rem;
  90. border-radius: 50%;
  91. background: black;
  92. display: flex;
  93. align-items: center;
  94. justify-content: center;
  95. transition: background 0.3s ease-in-out;
  96. }
  97. .activity-button:hover {
  98. background: #f97316;
  99. }
  100. /* Button Icons */
  101. .activity-button img {
  102. width: 3rem;
  103. height: 3rem;
  104. }