Changeset 11064

Timestamp:

06/25/2021 11:06:17 PM (5 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;
         }
 }