Documentation/example gallery: Handle tutorials

- Add the tutorial title to the example data struct and sort them to the
  front.
- The examples under a module which are tutorials are organized
  under separate subtitles under the module name.
- Change the grid layout for the examples and add a hover effect to
  the grid.

Pick-to: 6.8
Task-number: PYSIDE-1106
Change-Id: I4196667404b9ff27851c2dad198b22c673de9bf9
Reviewed-by: Cristian Maureira-Fredes <[email protected]>
Reviewed-by: Friedemann Kleint <[email protected]>

1 files changed, 23 insertions, 0 deletions

diff --git a/sources/pyside6/doc/_static/css/qt_style.css b/sources/pyside6/doc/_static/css/qt_style.css
index d2bd5ab5b..a1a8da415 100644
--- a/sources/pyside6/doc/_static/css/qt_style.css
+++ b/sources/pyside6/doc/_static/css/qt_style.css
@@ -119,3 +119,26 @@ article[role="main"] section[id^="pyside6-"] dl dt span.pre {
     padding: 5px;
     border-radius: 5px;
 }
+
+.tutorial-subtitle {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+section#examples .sd-card {
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+section#examples .sd-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 8px rgba(27, 31, 35, 0.12), 0 12px 48px rgba(27, 31, 35, 0.24);
+}
+
+section#examples .sd-card-title {
+  font-size: 1.25em;
+  font-weight: bold;
+}
+
+section#examples .sd-card-body{
+  font-size: 0.9em;
+}