選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

117 行
1.7KB

  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. }