chore(examples): improved looks

src/routes/examples/+page.svelte

@@ -18,35 +18,39 @@
 </svelte:head>
 
 <div class="row py-3">
-    <div class="col col-12">
-        <h2>
-            Lightbox without customized thumbnail
-        </h2>
-        <Lightbox description="Simple lightbox">
-            <img src="{base}/img/test1.png" alt="Simple lightbox">
-        </Lightbox>
-        <!--            <div class="row">-->
-        <!--                <div class="col d-flex">-->
-        <!--                </div>-->
-        <!--                <div class="col">-->
-        <!--                </div>-->
-        <!--            </div>-->
+    <div class="col col-12 col-md-6 flex-grow py-1">
+        <div class="row card m-4 p-4 shadow h-100">
+            <div class="col col-12">
+                <h2 class="text-center display-5">
+                    Standard lightbox
+                </h2>
+            </div>
+            <div class="col col-12 col-md-3 mx-auto text-white">
+                <Lightbox title="Simple lightbox">
+                    <img src="{base}/img/test4.jpg" alt="Simple lightbox">
+                </Lightbox>
+            </div>
+        </div>
     </div>
-</div>
-<div class="row py-3">
-    <div class="col col-12">
-        <h2>
-            Lightbox with customized thumbnail
-        </h2>
-        <Lightbox description="Lightbox without customized thumbnail" imagePreset="">
-            <img slot="thumbnail" src="{base}/img/test2.png" alt="Simple lightbox" class="img-fluid">
-            <img src="{base}/img/gallery/4.jpg" alt="Simple lightbox">
-        </Lightbox>
+    <div class="col col-12 col-md-6 flex-grow py-1">
+        <div class="row card m-4 p-4 shadow h-100">
+            <div class="col col-12">
+                <h2 class="text-center display-5">
+                    Lightbox with custom thumbnail
+                </h2>
+            </div>
+            <div class="col col-12 col-md-2 mx-auto">
+                <Lightbox description="Lightbox without customized thumbnail" imagePreset="">
+                    <img slot="thumbnail" src="{base}/img/cat.jpg" alt="Simple lightbox" class="img-fluid">
+                    <img src="{base}/img/dog.jpg" alt="Simple lightbox">
+                </Lightbox>
+            </div>
+        </div>
     </div>
 </div>
-<div class="row py-3">
-    <div class="col col-12">
-        <h2>
+<div class="row p-5 py-3">
+    <div class="col col-12 card shadow p-3">
+        <h2 class="text-center py-4 display-5">
             Gallery with thumbnail layout
         </h2>
         <LightboxGallery imagePreset="fullscreen">
@@ -91,19 +95,14 @@
         </LightboxGallery>
     </div>
 </div>
-<div class="row py-3">
-    <div class="col col-12">
+<div class="row p-5 py-3">
+    <div class="col col-12 card shadow">
         <div class="row">
-            <h3>
-                Gallery with single thumbnail with programmatic controll
-            </h3>
+            <h2 class="text-center py-3 display-5">
+                Gallery with single thumbnail with programmatic controller
+            </h2>
         </div>
         <div class="row">
-            <div class="col col-12">
-                <button on:click={() => galleryController.openImage(1)} class="btn btn-dark m-2">
-                    Open image 2 from gallery 2
-                </button>
-            </div>
         </div>
         <LightboxGallery title="Gallery with unified title" bind:programmaticController={galleryController}>
             <div slot="thumbnail">
@@ -112,9 +111,17 @@
                         <img src="{base}/img/test1.png" alt="Simple lightbox" class="img-fluid">
                     </GalleryThumbnail>
                     <div class="col">
+                        <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, culpa dicta eligendi fuga
+                        incidunt labore laudantium maiores, minus numquam soluta ullam voluptate, voluptates! Accusamus
+                        dolor, doloremque excepturi explicabo fugit tenetur.
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, culpa dicta eligendi fuga
                         incidunt labore laudantium maiores, minus numquam soluta ullam voluptate, voluptates! Accusamus
                         dolor, doloremque excepturi explicabo fugit tenetur.
+                        </p>
+                        <button on:click={() => galleryController.openImage(1)} class="btn btn-dark m-2">
+                          Open image 2 from gallery 2
+                        </button>
                     </div>
                 </div>
             </div>