Improve styling of the example/s graphics API callout (#1918)

Author: doup

sass/components/_callout.scss

@@ -1,6 +1,6 @@
 .callout {
   margin-block: 32px;
-  padding: 16px;
+  padding: 12px 16px;
   border-radius: 4px;
   background-color: var(--callout-bg-color);
   border-top: 4px solid var(--callout-accent-color);
@@ -14,6 +14,10 @@
     margin-bottom: 0;
   }
 
+  &--plain {
+    border-top: 0;
+  }
+
   &,
   &--info {
     --callout-accent-color: #5944e0;

sass/components/_example.scss

@@ -4,16 +4,15 @@
   &__header {
     display: grid;
     gap: 8px;
-    margin: 16px 0 8px;
+    margin: 16px 0 16px;
     align-items: baseline;
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
       "title title"
-      "back  github"
-    ;
+      "back  github";
 
     @media #{$bp-tablet-portrait-up} {
-      margin: 24px 0 8px;
+      margin: 32px 0 16px;
       grid-template-areas: "back title github";
       grid-template-columns: 150px 1fr 150px;
     }
@@ -51,4 +50,10 @@
   &__code-tabs {
     margin-top: 16px;
   }
+
+  &__callout {
+    margin-top: 2px;
+    margin-block: 4px 16px !important;
+    font-size: 1rem !important;
+  }
 }

templates/example-webgpu.html

@@ -2,8 +2,9 @@
 
 {% block examples_url %}/examples-webgpu{% endblock examples_url %}
 {% block wasm_base_url %}https://bevy-webgpu-examples.pages.dev{% endblock wasm_base_url %}
-{% block intro %}
-<h2 class="warning">Support Warning</h2>
+{% block callout_modifier %}warning{% endblock callout_modifier %}
+{% block callout %}
+<strong>Support Warning.</strong>
 WebGPU is currently only supported on Chrome starting with version 113, and only on desktop.
-If they don't work on your configuration, you can check the WebGL2 examples <a href="/examples">here</a>.
+If the example doesn't work on your configuration, you can check the WebGL2 example <a href="{{ page.path | replace(from="/examples-webgpu/", to="/examples/") }}">here</a>.
 {% endblock intro %}

templates/example.html

@@ -2,7 +2,8 @@
 
 {% block examples_url %}/examples{% endblock examples_url %}
 {% block wasm_base_url %}https://bevy-webgl2-examples.pages.dev{% endblock wasm_base_url %}
-{% block intro %}
+{% block callout_modifier %}info{% endblock callout_modifier %}
+{% block callout %}
 This example is running in WebGL2 and should work in most browsers.
-You can check the WebGPU examples <a href="/examples-webgpu">here</a>.
+You can check the WebGPU example <a href="{{ page.path | replace(from="/examples/", to="/examples-webgpu/") }}">here</a>.
 {% endblock intro %}

templates/examples-webgpu.html

@@ -4,7 +4,11 @@
 These examples demonstrate how to use Bevy's features in a minimal, easy to understand way.
 Click an example below to run it in your browser (using WASM + WebGPU) and view the source code.
 You can also view these examples (and others) in the <a href="https://github.com/bevyengine/bevy/tree/main/examples#examples">Bevy repo</a>.
-<h2 class="warning">Support Warning</h2>
-WebGPU is currently only supported on Chrome starting with version 113, and only on desktop.
-If they don't work on your configuration, you can check the WebGL2 examples <a href="/examples">here</a>.
+<aside class="callout callout--warning">
+  <h3 class="warning">Support Warning</h3>
+  <p>
+    WebGPU is currently only supported on Chrome starting with version 113, and only on desktop.
+    If they don't work on your configuration, you can check the WebGL2 examples <a href="/examples">here</a>.
+  </p>
+</aside>
 {% endblock intro %}

templates/examples.html

@@ -4,5 +4,7 @@
 These examples demonstrate how to use Bevy's features in a minimal, easy to understand way.
 Click an example below to run it in your browser (using WASM + WebGL) and view the source code.
 You can also view these examples (and others) in the <a href="https://github.com/bevyengine/bevy/tree/latest/examples#examples">Bevy repo</a>.
-<p>If you would like to try WASM + WebGPU, you can explore our <a href="/examples-webgpu">live WebGPU examples</a> page.</p>
+<aside class="callout callout--info">
+  <p>If you would like to try WASM + WebGPU, you can explore our <a href="/examples-webgpu">live WebGPU examples</a> page.</p>
+</aside>
 {% endblock intro %}

templates/layouts/example.html

@@ -12,10 +12,6 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
         <i class="icon icon--github"></i> View in GitHub
       </a>
     </div>
-    <div class="assets-intro media-content">
-      {% block intro %}{% endblock intro %}
-    </div>
-    <br />
     <div class="example__canvas bevy-instance">
       <div class="bevy-instance__progress-status" data-progress-status>
         <div class="bevy-instance__progress-file" data-progress-file></div>
@@ -24,6 +20,9 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
         </div>
       </div>
       <canvas class="bevy-instance__canvas" id="bevy" width="1280" height="720"></canvas>
+      <aside class="example__callout media-content callout callout--plain callout--{% block callout_modifier %}{% endblock callout_modifier %}">
+        {% block callout %}{% endblock callout %}
+      </aside>
     </div>
 
     <div class="example__code-tabs tabs">