make gallary smaller

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;
 }

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;
 }

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."
   }
 ];