Changeset 11901 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

Timestamp:

05/31/2022 09:34:24 PM (18 months ago)

Author:

iandunn

Message:

Developer: Use modern clearfix to restore heading anchor image.

Using overflow: auto as a clearfix prevented the .toc-heading a Dashicon from showing up on hover.

This also replaces the various padding-left values with a single value that works across all breakpoints, to ensure that there's enough room for the icon.

See ​https://github.com/WordPress/wporg-developer/issues/33

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss (modified) (8 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ -28 +28 @@
 
     #content, #content-area {
-        padding: 0 10px;
+        padding: 0 #{"max( 20px, 2% )"};
 
         .toc-heading {
@@ -300 +300 @@
     .site-content:after,
     .site-footer:before,
-    .site-footer:after {
+    .site-footer:after,
+    section:after {
         content: '';
         display: table;
@@ -309 +310 @@
     .comment-content:after,
     .site-content:after,
-    .site-footer:after {
+    .site-footer:after,
+    section:after {
         clear: both;
     }
@@ -506 +508 @@
      */
 
-    section {
-        overflow: auto;
-    }
-
-    section.error-404 {
-        overflow: visible;
-    }
     .home-landing .section {
         padding: 50px 0 10px;
@@ -2091 +2086 @@
                 border-left: none;
             }
-    
+
             &.menu-item-has-children > .expandable > a {
                 padding-right: 30px;
@@ -2358 +2353 @@
         width: 100%;
 
-        #content,
-        #content-area,
         .inner-wrap {
             max-width: 100%;
@@ -2369 +2362 @@
                 width: 100%;
             }
-        }
-        #content-area {
-            padding-left: 2%;
         }
 
@@ -2397 +2387 @@
             .sourcefile {
                 float: left;
-            }
-        }
-        #content-area {
-            @media (max-width: 43em) {
-                padding-left: 2%;
             }
         }