From 47ea2ccd590f42e29ded3bfc9d4d449d17aaca96 Mon Sep 17 00:00:00 2001
From: Orjan Ameye <orjan.ameye@hotmail.com>
Date: Thu, 29 Aug 2024 16:50:13 +0200
Subject: [PATCH] make gallary smaller

---
 docs/src/components/Gallery.vue      |  8 ++---
 docs/src/components/GalleryImage.vue | 49 ++++++++++------------------
 docs/src/tutorials/index.md          | 32 +++++++++---------
 3 files changed, 37 insertions(+), 52 deletions(-)

diff --git a/docs/src/components/Gallery.vue b/docs/src/components/Gallery.vue
index 60b75e3f..5cc6209e 100644
--- a/docs/src/components/Gallery.vue
+++ b/docs/src/components/Gallery.vue
@@ -19,20 +19,20 @@ defineProps<{
   text-align: center;
   font-size: 2em;
   letter-spacing: 1px;
-  padding: 40px;
+  padding: 5px;
   color: white;
 }
 
 .gallery-image {
-  padding: 20px;
+  padding: 5px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
 
 .gallery-image :deep(img) {
-  height: 350px;
-  width: 250px;
+  height: 190px;
+  width: 140px;
   transform: scale(1);
   transition: transform 0.4s ease;
 }
diff --git a/docs/src/components/GalleryImage.vue b/docs/src/components/GalleryImage.vue
index 49d1205b..956290e6 100644
--- a/docs/src/components/GalleryImage.vue
+++ b/docs/src/components/GalleryImage.vue
@@ -16,7 +16,7 @@ defineProps<Props>();
       <img :src="withBase(src)" height="150px" alt="">
       <div class="transparent-box1">
         <div class="caption">
-          <h2>{{ caption }}</h2>
+          <h3>{{ caption }}</h3>
         </div>
       </div>
       <div class="transparent-box2">
@@ -32,9 +32,9 @@ defineProps<Props>();
 .img-box {
   box-sizing: content-box;
   border-radius: 14px;
-  margin: 20px;
-  height: 350px;
-  width: 250px;
+  margin: 10px;
+  height: 190px;
+  width: 140px;
   overflow: hidden;
   display: inline-block;
   color: white;
@@ -43,15 +43,11 @@ defineProps<Props>();
   border: 2px solid var(--vp-c-bg-alt);
 }
 
-.img-box h2 {
-  border-top: 0;
-}
-
 .img-box img {
   height: 100%;
   width: 100%;
   object-fit: cover;
-  opacity: 0.3;
+  opacity: 0.4;
   transition: transform 0.3s ease, opacity 0.3s ease;
 }
 
@@ -73,36 +69,33 @@ defineProps<Props>();
   transition: transform 0.3s ease, opacity 0.3s ease;
 }
 
+.subcaption p {
+  line-height: 1.2;
+  text-align: left;
+  font-size: 10pt;
+}
+
 .transparent-box1 {
-  height: 250px;
-  width: 250px;
+  height: 125px;
+  width: 135px;
   background-color: transparent;
   position: absolute;
   top: 0;
   left: 0;
-  transition: background-color 0.3s ease;
 }
 
 .transparent-box2 {
-  height: 100px;
-  width: 250px;
+  height: 60px;
+  width: 135px;
   background-color: transparent;
   position: absolute;
-  top: 250px;
+  top: 160px;
   left: 0;
-  transition: background-color 0.3s ease;
 }
 
 .img-box:hover img {
   transform: scale(1.1);
-}
-
-.img-box:hover .transparent-box1 {
-  background-color: var(--vp-c-bg-alt);
-}
-
-.img-box:hover .transparent-box2 {
-  background-color: var(--vp-c-bg-alt);
+  opacity: 0;
 }
 
 .img-box:hover .caption {
@@ -120,14 +113,6 @@ defineProps<Props>();
   cursor: pointer;
 }
 
-.caption>p:nth-child(2) {
-  font-size: 0.8em;
-}
-
-.subcaption>p:nth-child(2) {
-  font-size: 0.8em;
-}
-
 .opacity-low {
   opacity: 0.85;
 }
diff --git a/docs/src/tutorials/index.md b/docs/src/tutorials/index.md
index 7e5e83be..29ca7756 100644
--- a/docs/src/tutorials/index.md
+++ b/docs/src/tutorials/index.md
@@ -5,34 +5,34 @@ import Gallery from "../components/Gallery.vue";
 
 const beginner = [
   {
-    href: "tutorials/simple_Duffing",
+    href: "simple_Duffing",
     src: "../assets/response_single.png",
-    caption: "Finding the steady states",
-    desc: "How to get started with Julia and HarmonicBalance for those who have never used Julia before."
+    caption: "Steady states",
+    desc: "How to get the steady states of the harmonic equations."
   },
   {
-    href: "tutorials/linear_response",
+    href: "parametron",
+    src: "../assets/2d_phase_diagram.png",
+    caption: "Classifying solutions",
+    desc: "Learn how to add different types of drives."
+  },
+  {
+    href: "linear_response",
     src: "../assets/nonlin_F_noise.png",
-    caption: "Compute the linear response",
+    caption: "Linear response",
     desc: "Learn how to compute the linear response of a steady state."
   },
   {
-    href: "tutorials/time_dependent",
+    href: "time_dependent",
     src: "../assets/evo_to_steady.png",
-    caption: "Evolve the stroboscopic system in time",
-    desc: "Learn how to investigate custom layers and train an RNN on time-series data."
+    caption: "Stroboscopic evolution",
+    desc: "Learn how to investigate stroboscopic time evolution."
   },
   {
-    href: "tutorials/limit_cycles",
+    href: "limit_cycles",
     src: "../assets/vdp_degenerate.png",
-    caption: "Find limit cycles",
+    caption: "Limit cycles",
     desc: "Learn how to find the limit cycles of your system."
-  },
-  {
-    href: "tutorials/parametron",
-    src: "../assets/2d_phase_diagram.png",
-    caption: "Adding parametric driving",
-    desc: "Learn how to add different types of drives."
   }
 ];