Changeset 11901

Timestamp:

05/31/2022 09:34:24 PM (2 years 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

Location:

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

Files:

• functions.php (modified) (2 diffs)
• scss/main.scss (modified) (8 diffs)
• stylesheets/main.css (modified) (7 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/functions.php

@@ -348 +348 @@
     wp_enqueue_style( 'open-sans', '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600' );
     wp_enqueue_style( 'wporg-developer-style', get_stylesheet_uri(), array(), '4' );
-    wp_enqueue_style( 'wp-dev-sass-compiled', get_template_directory_uri() . '/stylesheets/main.css', array( 'wporg-developer-style' ), '20220217' );
+    wp_enqueue_style(
+        'wp-dev-sass-compiled',
+        get_template_directory_uri() . '/stylesheets/main.css',
+        array( 'wporg-developer-style' ),
+        filemtime( __DIR__ . '/stylesheets/main.css' )
+    );
     wp_enqueue_script( 'wporg-developer-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20181209', true );
     wp_enqueue_script( 'wporg-developer-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
@@ -409 +414 @@
     return $new_text;
 }
-

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%;
             }
         }

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

@@ -330 +330 @@
 
 .devhub-wrap #content, .devhub-wrap #content-area {
-  padding: 0 10px;
+  padding: 0 max( 20px, 2% );
 }
 
@@ -660 +660 @@
 .devhub-wrap .site-content:after,
 .devhub-wrap .site-footer:before,
-.devhub-wrap .site-footer:after {
+.devhub-wrap .site-footer:after,
+.devhub-wrap section:after {
   content: '';
   display: table;
@@ -669 +670 @@
 .devhub-wrap .comment-content:after,
 .devhub-wrap .site-content:after,
-.devhub-wrap .site-footer:after {
+.devhub-wrap .site-footer:after,
+.devhub-wrap section:after {
   clear: both;
 }
@@ -858 +860 @@
   text-decoration: none;
   color: #606060;
-}
-
-.devhub-wrap section {
-  overflow: auto;
-}
-
-.devhub-wrap section.error-404 {
-  overflow: visible;
 }
 
@@ -2780 +2774 @@
     width: 100%;
   }
-  .devhub-wrap #content,
-  .devhub-wrap #content-area,
   .devhub-wrap .inner-wrap {
     max-width: 100%;
@@ -2790 +2782 @@
     width: 100%;
   }
-  .devhub-wrap #content-area {
-    padding-left: 2%;
-  }
   .devhub-wrap.archive .meta, .devhub-wrap.search .meta {
     font-size: 100%;
@@ -2808 +2797 @@
   .devhub-wrap.archive .sourcefile, .devhub-wrap.search .sourcefile {
     float: left;
-  }
-}
-
-@media (min-width: 43em) and (max-width: 43em) {
-  .devhub-wrap #content-area {
-    padding-left: 2%;
   }
 }