| /* Этот файл style.css по сути дублирует стили, находящиеся внутри тега style в index.html. | |
| Он нужен, если вы хотите иметь отдельный файл стилей. Убедитесь, что стили согласованы. | |
| */ | |
| /* Общие стили из вашего CSS, но с адаптивными улучшениями */ | |
| body { | |
| padding: 1rem; /* Уменьшил отступ для мобильных */ | |
| font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif; | |
| margin: 0; /* Убрал margin по умолчанию */ | |
| } | |
| h1 { | |
| font-size: 1.2rem; /* Уменьшил размер шрифта для мобильных */ | |
| margin-top: 0; | |
| } | |
| p { | |
| color: rgb(107, 114, 128); | |
| font-size: 0.9rem; /* Уменьшил размер шрифта для мобильных */ | |
| margin-bottom: 0.5rem; /* Уменьшил отступ для мобильных */ | |
| margin-top: 0.25rem; /* Уменьшил отступ для мобильных */ | |
| } | |
| .card { | |
| max-width: 100%; /* Занимает всю ширину на мобильных */ | |
| margin: 0 auto; | |
| padding: 0.5rem; /* Уменьшил отступ для мобильных */ | |
| border: 1px solid lightgray; | |
| border-radius: 0.5rem; /* Уменьшил радиус для мобильных */ | |
| } | |
| .card p:last-child { | |
| margin-bottom: 0; | |
| } | |
| /* Адаптивные стили */ | |
| @media (min-width: 640px) { /* Для экранов больше 640px */ | |
| body { | |
| padding: 2rem; | |
| } | |
| h1 { | |
| font-size: 1.6rem; | |
| } | |
| p { | |
| font-size: 1rem; | |
| } | |
| .card { | |
| max-width: 620px; | |
| padding: 1rem; | |
| border-radius: 1rem; | |
| } | |
| } | |