diff options
| author | Galen Guyer <galen@galenguyer.com> | 2022-04-13 22:07:22 -0400 |
|---|---|---|
| committer | Galen Guyer <galen@galenguyer.com> | 2022-04-13 22:07:22 -0400 |
| commit | 003e957a77ddf0f3207b86ef6b8a2bdc718405ef (patch) | |
| tree | 8ea61079cfe5f8534943529d4a972137cd8d2233 | |
| parent | d4b9eb1c1af06e82d027bc1be26029d28165e17d (diff) | |
mobile css improvements
| -rw-r--r-- | src/App.css | 45 | ||||
| -rw-r--r-- | src/components/Card.css | 8 | ||||
| -rw-r--r-- | src/pages/Index.css | 6 |
3 files changed, 37 insertions, 22 deletions
diff --git a/src/App.css b/src/App.css index 50e39d9..f4846a6 100644 --- a/src/App.css +++ b/src/App.css @@ -1,37 +1,44 @@ .App { - text-align: center; - margin: auto; - max-width: 90vw; + text-align: center; + margin: auto; + max-width: 90vw; - position: relative; - min-height: 100vh; - display: flex; - flex-direction: column; + position: relative; + min-height: 100vh; + display: flex; + flex-direction: column; } .App h1 { - font-size: 2.4em; - margin: 18px 0px 8px 0px; + font-size: 2.4em; + margin: 18px 0px 8px 0px; } .Updated .Latest { - font-size: 1.3em; - margin: 0px; + font-size: 1.3em; + margin: 0px; } .Updated .Prior { - margin: 6px; - color: #666; + margin: 6px; + color: #666; } .App a { - text-decoration: none; - color: #000; + text-decoration: none; + color: #000; } .BlueLink { - color: #008 !important; + color: #008 !important; } footer { - margin-top: auto; - margin-bottom: 20px; -}
\ No newline at end of file + margin-top: auto; + margin-bottom: 20px; +} + +@media screen and (max-width: 600px) { + .App { + margin: auto; + max-width: 95vw; + } +} diff --git a/src/components/Card.css b/src/components/Card.css index 39c51c7..273e106 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -1,7 +1,9 @@ .cardLink { text-decoration: none; color: black; - margin: 24px; + margin: 12px 24px; + flex-basis: 100%; + max-width: 200px; } .Card { @@ -14,8 +16,8 @@ @media screen and (max-width: 600px) { .Card { - padding: 0px 20px; - margin: 18px; + padding: 0px 16px; + margin: 10px 0px; } } diff --git a/src/pages/Index.css b/src/pages/Index.css index 5476eb1..c134449 100644 --- a/src/pages/Index.css +++ b/src/pages/Index.css @@ -16,6 +16,12 @@ margin-top: 48px; } +@media screen and (max-width: 600px) { + .Section .Title { + margin-top: 12px; + } +} + .Cards { display: flex; justify-content: center; |