_

skrub-data · Jul 30, 2024 · c5621dd · c5621dd
1 parent c19fa0d
commit c5621dd
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 13 deletions.
diff --git a/_includes/example-report.html b/_includes/example-report.html
@@ -16,7 +16,16 @@
 <body>
     {% include "nav.html" %}
 
-    {{ report | safe }}
-</body>
+        <main>
+            <div class="example-report-abstract flex">
+
+                <a href="https://skrub-data.org/"><img class="skrub" src="../skrub.svg"></a>
+                <a href="https://skrub-data.org/" class="table-report"><code>skrub.TableReport</code></a>
+            </div>
+            <div>
+                {{ report | safe }}
+            </div>
+        </main>
+    </body>
 
 </html>
diff --git a/_includes/examples-index.html b/_includes/examples-index.html
@@ -16,7 +16,7 @@
 <body>
     {% include "nav.html" %}
 
-    <main class="wrapper">
+    <main class="examples-index">
         <ul class="example-dataset-list">
             {% for report_name in report_names %}
             <li>

diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
 <body>
     {% include "nav.html" %}
     <main class="flow">
-        <h1><span class="from">from</span> <a href="https://skrub-data.org/"><img
+        <h1 class="banner"><span class="from">from</span> <a href="https://skrub-data.org/"><img
                     class="skrub" src="skrub.svg"></a> <span
                 class="import">import</span> <a
                 href="https://skrub-data.org/dev/reference/generated/skrub.TableReport.html#"

diff --git a/skrub-online-report.css b/skrub-online-report.css
@@ -388,20 +388,20 @@ label:has(:focus-visible),
 
 /* Title */
 
-h1 {
+h1.banner {
     font-family: monospace;
     margin-bottom: 4rem;
 }
 
-h1>* {
+h1.banner>* {
     display: inline-block;
 }
 
-h1>span {
+h1.banner>span {
     margin-top: 1.2rem;
 }
 
-h1 .table-report {
+h1.banner .table-report {
     color: var(--blue);
     font-size: max(1.5rem, min(4.5rem, 12vw));
     transform: rotate(-5deg);
@@ -410,20 +410,42 @@ h1 .table-report {
     text-decoration: none;
 }
 
-h1 .from {
+h1.banner .from {
     transform: translateY(0rem) rotate(-20deg);
     display: inline-block;
 }
 
-h1 .skrub {
+h1.banner .skrub {
     height: 6rem;
     transform: translateY(1rem);
 }
 
-h1 .import {
+h1.banner .import {
     transform: rotate(10deg);
 }
 
+/* Example report */
+
+.example-report-abstract {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-size: 1.2rem;
+}
+
+.example-report-abstract .skrub {
+    height: 4rem;
+}
+.example-report-abstract .table-report {
+    color: var(--blue);
+    font-size: 1.5rem;
+    text-underline-offset: 0.4em;
+    text-decoration-thickness: 2px;
+}
+
+.example-report-abstract .table-report:hover {
+    text-decoration-color: var(--orange);
+}
+
 /* Nav */
 
 nav > ul {
@@ -475,8 +497,8 @@ nav > ul > li > a {
     text-decoration-color: var(--orange);
 }
 
-.wrapper {
+.examples-index {
     padding-left: 2ch;
     padding-right: 2ch;
-    margin-top: 3rem;
+    margin-top: 2rem;
 }