Changeset 14083

Timestamp:

09/26/2024 08:13:17 AM (14 hours ago)

Author:

adamwood

Message:

Make 2024: Update block element styles

Adjust padding and borders on sticky, private, resolved, unresolved posts and block quotes, to fix consistency issues on desktop and mobile.

See ​https://github.com/WordPress/wordpress.org/issues/363

Location:

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

Files:

• style.css (modified) (5 diffs)
• theme.json (modified) (1 diff)

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

@@ -935 +935 @@
 
 @media screen and (max-width: 640px) {
-    article.post .o2-post,
+    article.post .o2-post:not(.sticky .o2-post):not(.state-resolved .o2-post):not(.state-unresolved .o2-post),
     article#post-new .o2-post,
     article.page .o2-post {
@@ -943 +943 @@
 }
 
-.o2-post {
+.o2-post:not(.state-resolved .o2-post):not(.state-unresolved .o2-post):not(.sticky .o2-post) {
     border-top: 1px solid var(--wp--custom--color--border);
     margin-top: 40px;
+}
+
+article.post[class*="state-"].status-private .o2-post {
+    border: none;
 }
 
@@ -1121 +1125 @@
  * Resolved/unresolved
  */
+
 article.state-resolved,
 article.state-unresolved {
-    border-top: 0;
+    margin-top: 40px;
+}
+
+article.state-resolved .o2-post,
+article.state-unresolved .o2-post {
+    padding-top: 40px;
+}
+
+article.state-resolved:not(.status-private),
+article.state-unresolved:not(.status-private) {
+    border: 1px solid var(--wp--custom--color--border);
+    border-left-width: 0;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+
+/* Adjust to align with border */
+article.state-resolved:not(.status-private):before,
+article.state-unresolved:not(.status-private):before {
+    top: -1px;
+    height: calc(100% + 2px);
+}
+
+@media (max-width: 876px) {
+    .state-resolved,
+    .state-unresolved {
+        border-top: unset;
+    }
 }
 
@@ -1165 +1197 @@
  */
 article.status-private,
-article.status-private .comment.alt {
+article.status-private .comment.alt,
+article.status-private .comment.alt .comment.alt {
     background: #fef0f0;
 }
 
 .post.status-private .o2-post {
-    padding-top: 3em;
+    padding-top: 40px;
     position: relative;
 }
@@ -1178 +1211 @@
     font-family: dashicons;
     position: absolute;
-    top: -2px;
-    right: 45px;
-    color: #fff;
-    font-size: 18px;
-    padding: 13px 5px 0px;
+    top: 45px;
+    right: 60px;
+    font-size: var(--wp--preset--font-size--small);
+    padding: 4px;
     background: #dc3232;
+    border-radius: 2px;
+    line-height: 14px;
+    color: var(--wp--preset--color--white);
 }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe-2024/theme.json

@@ -184 +184 @@
                     "margin": {
                         "bottom": "var(--wp--style--block-gap)"
+                    },
+                    "padding": {
+                        "top": "var(--wp--custom--margin--horizontal)",
+                        "right": "var(--wp--custom--margin--horizontal)",
+                        "bottom": "var(--wp--custom--margin--horizontal)"
                     }
                 }