Changeset 11064

Timestamp:

06/25/2021 11:06:17 PM (3 years ago)

Author:

coffee2code

Message:

Breathe: Improve responsive handling and spacing around elements at top of handbook pages.

• Improve breakpoint handling of site name
• Prevent overlap of handbook name and post action dropdown at narrow viewports
• Maintain padding to left of handbook name at narrow viewports
• Improve spacing around handbook name, breadcrumbs, and post title to account for long handbook name and/or post name

Props jatindevani, coffee2code.
Fixes #5442.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/style.css (modified) (5 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/style.css

@@ -171 +171 @@
 }
 
-@media (max-width: 500px) {
+@media (max-width: 510px) {
     .site-header .site-title {
-        max-width: 334px;
         margin-top: 4px;
     }
@@ -1066 +1065 @@
 @media(max-width: 876px) {
     .handbook-name-container {
+        padding-left: 22px;
+        padding-right: 36px;
         width: 100%;
         margin-left: 0;
@@ -1160 +1161 @@
     left: 280px;
     font-size: 1.25rem;
+    padding-right: 34px;
 }
 
@@ -1179 +1181 @@
 }
 
-@media (max-width: 875px) {
+@media (max-width: 876px) {
     .handbook-breadcrumbs {
         top: 3rem;
@@ -1190 +1192 @@
 
     .single-handbook .handbook-name-container ~ .handbook-breadcrumbs {
-        top: 5rem;
+        top: 6rem;
     }
 
     .single-handbook .handbook-name-container ~ .handbook-breadcrumbs ~ #primary {
-        padding-top: 10rem;
+        padding-top: 14rem;
     }
 }