diff --git a/src/app/page.css b/src/app/page.css index 94ba3eb..98aaad9 100644 --- a/src/app/page.css +++ b/src/app/page.css @@ -171,6 +171,11 @@ body { gap: 15px; + @media (orientation: portrait) { + gap: 10px; + justify-content: center; + } + flex-wrap: wrap; margin-bottom: 15px; @@ -183,6 +188,10 @@ body { align-items: center; padding: 0 30px; + + @media (orientation: portrait) { + padding: 0 20px; + } } .presentation-experience { @@ -217,6 +226,10 @@ body { align-items: flex-start; justify-content: center; + @media (orientation: portrait) { + align-items: center; + } + gap: 10px; } diff --git a/src/components/github-rating/index.css b/src/components/github-rating/index.css index 61247f4..d0bded3 100644 --- a/src/components/github-rating/index.css +++ b/src/components/github-rating/index.css @@ -34,6 +34,17 @@ display: flex; gap: 5px; + + @media (orientation: portrait) { + font-size: 0.8em; + } +} + +@media (orientation: portrait) { + .github-rating-stats > div:last-child > p { + font-size: 0.8em; + } + } .github-mark { @@ -72,6 +83,10 @@ font-size: 1.8em; position: relative; + + @media (orientation: portrait) { + font-size: 1.4em; + } } .github-status > h2::before { diff --git a/src/components/spotify-status/index.css b/src/components/spotify-status/index.css index 687f159..463fb8c 100644 --- a/src/components/spotify-status/index.css +++ b/src/components/spotify-status/index.css @@ -13,6 +13,11 @@ height: 130px; width: 130px; + + @media (orientation: portrait) { + height: 110px; + width: 110px; + } } .spotify-box-song > div > img { @@ -58,6 +63,10 @@ position: relative; width: fit-content; + + @media (orientation: portrait) { + font-size: 1.3em; + } } .song-title::before { @@ -86,6 +95,10 @@ font-size: 0.8em; color: #b4b4b4; + + @media (orientation: portrait) { + font-size: 0.7em; + } } .spotify-song-artist { @@ -110,6 +123,10 @@ font-size: 0.8em; text-align: right; + + @media (orientation: portrait) { + font-size: 0.7em; + } } .spotify-box-controls {