docs tmp rendering fallingletters (#880)

- **place title + tag above demo on mobile**
- **adjust horizontal spacing**
- **cp logo for inline use + favicon**

Author: NiloCK

docs/.vitepress/config.mts

@@ -51,7 +51,7 @@ export default defineConfig({
       // { text: 'Home', link: '/' },
       // { text: 'Examples', link: '/markdown-examples' }
     ],
-    logo: './logo.svg',
+    logo: '/logo.svg',
 
     sidebar: [
       {

docs/.vitepress/theme/components/CustomVPHero.vue

@@ -114,7 +114,7 @@ const showStudySession = true;
 .main {
   position: relative;
   z-index: 10;
-  order: 2;
+  order: 1; /* Text comes first on mobile */
   flex-grow: 1;
   flex-shrink: 0;
 }
@@ -132,7 +132,7 @@ const showStudySession = true;
 @media (min-width: 960px) {
   .main {
     order: 1;
-    width: calc(55%); /* Adjusted to give more space to study session */
+    width: calc(45%); /* Give more space to study session */
   }
 
   .VPHero.has-study-session .main {
@@ -259,40 +259,42 @@ const showStudySession = true;
 
 /* Study Session Styles - replaces image styles */
 .study-session {
-  order: 1;
-  margin: -76px -24px -48px;
+  order: 2; /* Place below text on mobile */
+  margin: 2rem -24px 0; /* Add top margin, remove negative margins that cause overlay */
 }
 
 @media (min-width: 640px) {
   .study-session {
-    margin: -108px -24px -48px;
+    margin: 2rem -24px 0; /* Keep positive margin on tablet */
   }
 }
 
 @media (min-width: 960px) {
   .study-session {
     flex-grow: 1;
-    order: 2;
+    order: 2; /* Keep on right side on desktop */
     margin: 0;
     min-height: 400px;
-    width: calc(45%);
+    width: calc(55%);
   }
 }
 
 .study-session-container {
   position: relative;
   margin: 0 auto;
-  width: 320px;
-  height: 320px;
+  width: 100%;
+  max-width: 400px;
+  min-height: 280px; /* Reduced height for mobile */
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 1rem; /* Add padding to prevent edge clipping */
 }
 
 @media (min-width: 640px) {
   .study-session-container {
-    width: 392px;
-    height: 392px;
+    max-width: 450px;
+    min-height: 320px;
   }
 }
 
@@ -301,6 +303,7 @@ const showStudySession = true;
     width: 100%;
     height: 100%;
     min-height: 400px;
+    padding: 0; /* Remove padding on desktop */
   }
 }
 
@@ -311,10 +314,17 @@ const showStudySession = true;
   border-radius: 12px;
   padding: 2rem;
   width: 100%;
-  max-width: 400px;
+  max-width: 400px; /* Limit on mobile */
   text-align: center;
 }
 
+@media (min-width: 960px) {
+  .study-placeholder {
+    max-width: none; /* Remove width limit on desktop */
+    width: 100%; /* Take full available space */
+  }
+}
+
 .study-placeholder h3 {
   margin: 0 0 1rem 0;
   color: var(--vp-c-text-1);