Merge pull request #71 from LetyDoesStuff/add-padding-for-iphone-home…

…-bar Add bottom padding to iPhones with home bar
ronilaukkarinen · Aug 28, 2023 · 4f6f6b1 · 4f6f6b1
2 parents d7a66e6 + 64910ce
commit 4f6f6b1
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css
@@ -3386,6 +3386,29 @@ body.embed .button.logo-button:hover,
   }
 }
 
+/* Add bottom padding to the navigation panel
+   on iPhones with the portrait mode home bar */
+
+@media
+  /* iPhone XR and iPhone 11 */
+  screen and (device-width: 375px) and (device-height: 812px) and (min-resolution: 2dppx) and (orientation: portrait),
+  /* iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, and iPhone 14 */
+  screen and (device-width: 390px) and (device-height: 844px) and (min-resolution: 3dppx) and (orientation: portrait),
+  /* iPhone 14 Pro */
+  screen and (device-width: 393px) and (device-height: 852px) and (min-resolution: 3dppx) and (orientation: portrait),
+  /* iPhone XR and iPhone 11 */
+  screen and (device-width: 414px) and (device-height: 896px) and (min-resolution: 2dppx) and (orientation: portrait),
+  /* iPhone Xs Max and iPhone 11 Pro Max */
+  screen and (device-width: 414px) and (device-height: 896px) and (min-resolution: 3dppx) and (orientation: portrait),
+  /* iPhone 12 Pro Max, iPhone 13 Pro Max, and iPhone 14 Plus */
+  screen and (device-width: 428px) and (device-height: 926px) and (min-resolution: 3dppx) and (orientation: portrait),
+  /* iPhone 14 Pro Max */
+  screen and (device-width: 430px) and (device-height: 932px) and (min-resolution: 3dppx) and (orientation: portrait) {
+    .layout-multiple-columns .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
+      padding-bottom: 34px;
+    }
+}
+
 /* Retweet animation */
 /* stylelint-disable-next-line selector-not-notation */
 .layout-multiple-columns.no-reduce-motion .icon-button.active:not([aria-label="Unboost"]):not([aria-label="Peru tehostus"]) .fa-retweet {

diff --git a/layout-single-column.css b/layout-single-column.css
@@ -3347,6 +3347,29 @@ body.embed .button.logo-button:hover,
   }
 }
 
+/* Add bottom padding to the navigation panel
+   on iPhones with the portrait mode home bar */
+
+   @media
+   /* iPhone XR and iPhone 11 */
+   screen and (device-width: 375px) and (device-height: 812px) and (min-resolution: 2dppx) and (orientation: portrait),
+   /* iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, and iPhone 14 */
+   screen and (device-width: 390px) and (device-height: 844px) and (min-resolution: 3dppx) and (orientation: portrait),
+   /* iPhone 14 Pro */
+   screen and (device-width: 393px) and (device-height: 852px) and (min-resolution: 3dppx) and (orientation: portrait),
+   /* iPhone XR and iPhone 11 */
+   screen and (device-width: 414px) and (device-height: 896px) and (min-resolution: 2dppx) and (orientation: portrait),
+   /* iPhone Xs Max and iPhone 11 Pro Max */
+   screen and (device-width: 414px) and (device-height: 896px) and (min-resolution: 3dppx) and (orientation: portrait),
+   /* iPhone 12 Pro Max, iPhone 13 Pro Max, and iPhone 14 Plus */
+   screen and (device-width: 428px) and (device-height: 926px) and (min-resolution: 3dppx) and (orientation: portrait),
+   /* iPhone 14 Pro Max */
+   screen and (device-width: 430px) and (device-height: 932px) and (min-resolution: 3dppx) and (orientation: portrait) {
+     .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
+       padding-bottom: 34px;
+     }
+ }
+
 /* Retweet animation */
 /* stylelint-disable-next-line selector-not-notation */
 .layout-single-column.no-reduce-motion .icon-button.active:not([aria-label="Unboost"]):not([aria-label="Peru tehostus"]) .fa-retweet {