The serverless API for our final software engineering project.

Home.module.css 1.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. .container {
  2. padding: 0 2rem;
  3. }
  4. .main {
  5. min-height: 100vh;
  6. padding: 4rem 0;
  7. flex: 1;
  8. display: flex;
  9. flex-direction: column;
  10. justify-content: center;
  11. align-items: center;
  12. }
  13. .footer {
  14. display: flex;
  15. flex: 1;
  16. padding: 2rem 0;
  17. border-top: 1px solid #eaeaea;
  18. justify-content: center;
  19. align-items: center;
  20. }
  21. .footer a {
  22. display: flex;
  23. justify-content: center;
  24. align-items: center;
  25. flex-grow: 1;
  26. }
  27. .title a {
  28. color: #0070f3;
  29. text-decoration: none;
  30. }
  31. .title a:hover,
  32. .title a:focus,
  33. .title a:active {
  34. text-decoration: underline;
  35. }
  36. .title {
  37. margin: 0;
  38. line-height: 1.15;
  39. font-size: 4rem;
  40. }
  41. .title,
  42. .description {
  43. text-align: center;
  44. }
  45. .description {
  46. margin: 4rem 0;
  47. line-height: 1.5;
  48. font-size: 1.5rem;
  49. }
  50. .code {
  51. background: #fafafa;
  52. border-radius: 5px;
  53. padding: 0.75rem;
  54. font-size: 1.1rem;
  55. font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
  56. Bitstream Vera Sans Mono, Courier New, monospace;
  57. }
  58. .grid {
  59. display: flex;
  60. align-items: center;
  61. justify-content: center;
  62. flex-wrap: wrap;
  63. max-width: 800px;
  64. }
  65. .card {
  66. margin: 1rem;
  67. padding: 1.5rem;
  68. text-align: left;
  69. color: inherit;
  70. text-decoration: none;
  71. border: 1px solid #eaeaea;
  72. border-radius: 10px;
  73. transition: color 0.15s ease, border-color 0.15s ease;
  74. max-width: 300px;
  75. }
  76. .card:hover,
  77. .card:focus,
  78. .card:active {
  79. color: #0070f3;
  80. border-color: #0070f3;
  81. }
  82. .card h2 {
  83. margin: 0 0 1rem 0;
  84. font-size: 1.5rem;
  85. }
  86. .card p {
  87. margin: 0;
  88. font-size: 1.25rem;
  89. line-height: 1.5;
  90. }
  91. .logo {
  92. height: 1em;
  93. margin-left: 0.5rem;
  94. }
  95. @media (max-width: 600px) {
  96. .grid {
  97. width: 100%;
  98. flex-direction: column;
  99. }
  100. }
  101. @media (prefers-color-scheme: dark) {
  102. .card,
  103. .footer {
  104. border-color: #222;
  105. }
  106. .code {
  107. background: #111;
  108. }
  109. .logo img {
  110. filter: invert(1);
  111. }
  112. }