Adjust tests popups to appear in the main column

Author: ehuss

mdbook-spec/src/rules.rs

@@ -83,31 +83,34 @@ impl Spec {
         RULE_RE
             .replace_all(content, |caps: &Captures<'_>| {
                 let rule_id = &caps[1];
-                let mut test_html = String::new();
+                let mut test_link = String::new();
+                let mut test_popup = String::new();
                 if let Some(tests) = tests.get(rule_id) {
-                    test_html = format!(
-                        "<br><span class=\"popup-container\">\n\
+                    test_link = format!(
+                        "<br><div class=\"test-link\">\n\
                             <a href=\"javascript:void(0)\" onclick=\"spec_toggle_tests('{rule_id}');\">\
-                            <span>Tests</span></a>\n\
-                            <div id=\"tests-{rule_id}\" class=\"tests-popup popup-hidden\">\n\
-                            Tests with this rule:
+                            <span>Tests</span></a></div>\n");
+                    test_popup = format!(
+                        "<div id=\"tests-{rule_id}\" class=\"tests-popup popup-hidden\">\n\
+                            Tests with this rule:\n\
                             <ul>");
                     for test in tests {
                         writeln!(
-                            test_html,
+                            test_popup,
                             "<li><a href=\"https://github.com/rust-lang/rust/blob/{git_ref}/{test_path}\">{test_path}</a></li>",
                             test_path = test.path,
                         )
                         .unwrap();
                     }
 
-                    test_html.push_str("</ul></div></span>");
+                    test_popup.push_str("</ul></div>");
                 }
                 format!(
                     "<div class=\"rule\" id=\"r-{rule_id}\">\
-                     <a class=\"rule-link\" href=\"#r-{rule_id}\" title=\"{rule_id}\"><span>[{rule_id_broken}]<span/></a>\
-                     {test_html}\
-                     </div>\n",
+                        <a class=\"rule-link\" href=\"#r-{rule_id}\" title=\"{rule_id}\"><span>[{rule_id_broken}]</span/></a>\n\
+                        {test_link}\
+                     </div>\n\
+                     {test_popup}\n",
                      rule_id_broken = rule_id.replace(".", "<wbr>."),
                 )
             })

theme/reference.css

@@ -257,24 +257,32 @@ main > ul {
 
 /* Values for header margin-top and blockquote margin are taken from mdbook's general.css,
    values for header margin-bottom are taken from <https://www.w3schools.com/cssref/css_default_values.php> */
+:root {
+    /* 1.6 is body font-size */
+    --h2-margin-top: calc(1.5rem * 1.6 * 2.5 - 16px);
+    --h3-margin-top: calc(1.17rem * 1.6 * 2.5 - 16px);
+    --h4-margin-top: calc(1.00rem * 1.6 * 2 - 16px);
+    --h5-margin-top: calc(0.83rem * 1.6 * 2 - 16px);
+    --h6-margin-top: calc(0.67rem * 1.6 * 2 - 16px);
+}
 main > h2 {
-    margin-top: calc(2.5em - 16px);
+    margin-top: var(--h2-margin-top);
     margin-bottom: calc(0.83em - 16px);
 }
 main > h3 {
-    margin-top: calc(2.5em - 16px);
+    margin-top: var(--h3-margin-top);
     margin-bottom: calc(1em - 16px);
 }
 main > h4 {
-    margin-top: calc(2em - 16px);
+    margin-top: var(--h4-margin-top);
     margin-bottom: calc(1.33em - 16px);
 }
 main > h5 {
-    margin-top: calc(2em - 16px);
+    margin-top: var(--h5-margin-top);
     margin-bottom: calc(1.67em - 16px);
 }
 main > h6 {
-    margin-top: calc(2em - 16px);
+    margin-top: var(--h6-margin-top);
     margin-bottom: calc(2.33em - 16px);
 }
 main > blockquote {
@@ -303,7 +311,7 @@ main > .rule {
 }
 
 /* Test links */
-.rule .popup-container {
+.test-link {
     float: right;
     padding-right: 10px;
 }
@@ -317,51 +325,77 @@ main > .rule {
    navigate to it. This adds an indicator that the linked rule is the one that
    is "current", just like normal headers are in mdbook.
 */
-.rule:target a::before {
+.rule:target .rule-link::before {
     display: inline-block;
     content: "»";
     padding-right: 5px;
 }
 
 /* Dodge » from headings */
-.rule:has(+ h1:target),
-.rule:has(+ h2:target),
-.rule:has(+ h3:target),
-.rule:has(+ h4:target),
-.rule:has(+ h5:target),
-.rule:has(+ h6:target) {
+/* Note: Some rules have a .tests-popup in the way, so that's why this selects
+         either with or without. */
+.rule:has(+ h1:target, + .tests-popup + h1:target),
+.rule:has(+ h2:target, + .tests-popup + h2:target),
+.rule:has(+ h3:target, + .tests-popup + h3:target),
+.rule:has(+ h4:target, + .tests-popup + h4:target),
+.rule:has(+ h5:target, + .tests-popup + h5:target),
+.rule:has(+ h6:target, + .tests-popup + h6:target) {
     padding-right: 24px;
 }
 
+/* This positioning is to push the popup down over the header's top margin.
+   Ideally I would like the popup to show *below* the header, but I have no idea how to do that.
+*/
+.tests-popup:has(+ h2) {
+    position: relative;
+    top: calc(var(--h2-margin-top) + 10px);
+}
+.tests-popup:has(+ h3) {
+    position: relative;
+    top: calc(var(--h3-margin-top) + 10px);
+}
+.tests-popup:has(+ h4) {
+    position: relative;
+    top: calc(var(--h4-margin-top) + 10px);
+}
+.tests-popup:has(+ h5) {
+    position: relative;
+    top: calc(var(--h5-margin-top) + 10px);
+}
+.tests-popup:has(+ h6) {
+    position: relative;
+    top: calc(var(--h6-margin-top) + 10px);
+}
+
 /* Hide the rules if the width of the container is too small.
    The cutoff point is chosen semi-arbitrary, it felt that
    when `width < 14em`, there are too many breaks. */
 @container rule (width < 14em) {
     main > .rule a.rule-link span,
-    main > .rule .popup-container > a span {
+    .test-link > a span {
         display: none;
     }
 
     main > .rule > a.rule-link::before {
         content: "[*]";
     } 
 
-    main > .rule .popup-container > a::before {
+    .test-link > a::before {
         content: "[T]";
     } 
 }
 
 /* Align rules to various siblings */
-.rule:has(+ p),
-.rule:has(+ ul) {
+.rule:has(+ p, + .tests-popup + p),
+.rule:has(+ ul, + .tests-popup + ul) {
     margin-top: calc((1em - var(--font-size)) / var(--font-size-mult) / 2);
 }
 
-.rule:has(+ h1) {
+.rule:has(+ h1, + .tests-popup + h1) {
     align-self: center;
 }
 
-.rule:has(+ h2) {
+.rule:has(+ h2, + .tests-popup + h2) {
     /* multiplying by this turns h2's em into .rule's em*/
     --h2-em-mult: calc(
         (1 / var(--font-size-mult)) /* to main font size */
@@ -375,7 +409,7 @@ main > .rule {
         + (1em * var(--h2-em-mult) - 1em) / 2
     )
 }
-.rule:has(+ h3) {
+.rule:has(+ h3, + .tests-popup + h3) {
     /* multiplying by this turns h3's em into .rule's em*/
     --h3-em-mult: calc(
         (1 / var(--font-size-mult)) /* to main font size */
@@ -390,7 +424,7 @@ main > .rule {
     )
 }
 
-.rule:has(+ h4) {
+.rule:has(+ h4, + .tests-popup + h4) {
     /* multiplying by this turns h4's em into .rule's em*/
     --h4-em-mult: calc(
         (1 / var(--font-size-mult)) /* to main font size */
@@ -405,7 +439,7 @@ main > .rule {
     )
 }
 
-.rule:has(+ h5) {
+.rule:has(+ h5, + .tests-popup + h5) {
     /* multiplying by this turns h5's em into .rule's em*/
     --h5-em-mult: calc(
         (1 / var(--font-size-mult)) /* to main font size */
@@ -420,7 +454,7 @@ main > .rule {
     )
 }
 
-.rule:has(+ h6) {
+.rule:has(+ h6, + .tests-popup + h6) {
     /* multiplying by this turns h6's em into .rule's em*/
     --h6-em-mult: calc(
         (1 / var(--font-size-mult)) /* to main font size */