🔧 Some small-screen fixes

Author: Schneegans

src/components/Hero.astro

@@ -81,7 +81,8 @@ import CherryBlossoms from './CherryBlossoms.astro';
     background-image: url(../assets/kando-logo-postfix-light.svg);
   }
 
-  .tagline {
+  .hero > img {
+    max-width: 500px;
   }
 
   @media (min-width: 50rem) {

src/components/ShowCaseGridItem.astro

@@ -31,24 +31,20 @@ const { type, href } = Astro.props;
     padding: 2rem 2rem;
     margin-top: 0;
     position: relative;
-    text-decoration: none !important;
     color: var(--sl-white);
     transition:
       color 0.3s ease,
       transform 0.3s ease;
 
-    mask-image: url('../assets/image-mask.jpg');
-    mask-mode: luminance;
-    mask-size: 100% 100%;
-
     &:hover {
       transform: scale(1.03);
     }
 
     &.feature {
       align-items: center;
       text-align: center;
-      width: calc(200px + 10vw);
+      width: calc(300px + 5vw);
+      text-decoration: none;
 
       .icon {
         font-size: 2rem;
@@ -90,21 +86,6 @@ const { type, href } = Astro.props;
       text-align: center;
       width: calc(100px + 10vw);
 
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-
-        background-color: var(--sl-color-accent-low);
-        border-radius: 3rem;
-
-        opacity: 0.4;
-      }
-
       &:hover {
         color: var(--sl-color-accent-high);
       }
@@ -125,4 +106,10 @@ const { type, href } = Astro.props;
       }
     }
   }
+
+  @media (max-width: 30rem) {
+    .grid-item {
+      width: 90vw !important;
+    }
+  }
 </style>

src/components/ShowCaseItem.astro

@@ -30,7 +30,7 @@ const { type } = Astro.props;
 
 <style>
   .show-case-item {
-    margin-top: 5rem !important;
+    margin-top: 7em;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -65,7 +65,6 @@ const { type } = Astro.props;
 
   @media (min-width: 50rem) {
     .show-case-item {
-      margin-top: 10rem !important;
       gap: 5vw;
       flex-direction: row;
     }

src/content/docs/index.mdx

@@ -17,7 +17,7 @@ hero:
     - text: Read the Docs
       link: /intro/
       icon: right-arrow
-    - text: Download from GitHub
+    - text: Download on GitHub
       link: https://github.com/kando-menu/kando/releases
       icon: external
       variant: minimal
@@ -51,14 +51,9 @@ import achievements from '../../assets/achievement-screen.png';
 
 <ShowCase>
 
-<ShowCaseItem  type="centered">
-  <div slot="description">
-    <img style="width: 160px; margin: 0 auto;" src={icon.src} />
-  </div>
-</ShowCaseItem>
-
 <ShowCaseItem type="centered">
-  <div slot="title" style="text-align: center; margin-top: -7rem;">
+  <div slot="title" style="text-align: center">
+    <img style="width: 3em; margin: 0 auto 1em auto" src={icon.src} />
     Master your workflow with <span class="sakura-font">Kando</span>.
   </div>
   <div slot="description" style="margin: 0 10% 10% 10%">
@@ -124,7 +119,7 @@ import achievements from '../../assets/achievement-screen.png';
 </ShowCaseItem>
 
 <ShowCaseItem type="fullwidth">
-  <div slot="description" style="margin: -7rem auto 0 auto; max-width: 2000px">
+  <div slot="description" style="margin: -3em auto 0 auto; max-width: 2000px">
     <ShowCaseGrid>
       <ShowCaseGridItem type="feature">
         <Icon slot="icon" name="solar:rocket-bold-duotone" />
@@ -216,10 +211,12 @@ import achievements from '../../assets/achievement-screen.png';
       centeredSlides: true,
       slideToClickedSlide: true,
       slidesPerView: "auto",
+      initialSlide: 1,
       coverflowEffect: {
         rotate: 0,
-        stretch: 300,
-        depth: 1000,
+        stretch: 0,
+        depth: 800,
+        modifier:2,
         slideShadows: false,
       },
       pagination: {