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();
-

{{ caption }}

+

{{ caption }}

@@ -32,9 +32,9 @@ defineProps(); .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(); 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(); 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(); 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." } ];