fix: media orientation portrait :nerd:

stifskere · May 16, 2024 · 250543f · 250543f
1 parent 29ce70b
commit 250543f
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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 {