Merge pull request #1 from TouhouWorks/Responsive_Design

Responsive design realised
TouhouWorks · Oct 17, 2024 · a5b64f6 · a5b64f6
2 parents 5525b13 + 6c06eb2
commit a5b64f6
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 23 deletions.
diff --git a/.vitepress/theme/components/HomePage.vue b/.vitepress/theme/components/HomePage.vue
@@ -5,7 +5,7 @@
   <div class="content">
     <div class="content-container">
       <main class="main">
-        <div class="vp-doc" mt-10 flex flex-col items-center>
+        <div class="vp-doc" mt-1 flex flex-col items-center>
           <h2 id="meet-the-team" font-normal op50 p="t-10 b-2" />
           <div w-full p-10 />
         </div>

diff --git a/.vitepress/theme/components/MyVPHero.vue b/.vitepress/theme/components/MyVPHero.vue
@@ -25,7 +25,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 
 <template>
   <div class="VPHero" :class="{ 'has-image': image || heroImageSlotExists }">
-    <div class="container">
+    <div class="Mycontainer">
       <div v-if="image || heroImageSlotExists" class="image">
         <div class="image-container">
           <div class="image-bg" />
@@ -71,17 +71,37 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
   top: 10%;
 }
-.container {
-  display: block;
+
+@media (min-width: 641px) and (max-width: 860px) {
+  .VPHero {
+  margin-top: (var(--vp-nav-height)) + var(--vp-layout-top-height, 0px);
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 24px;
+  top: 10%;
+}
+}
+
+@media (max-width: 640px) {
+  .VPHero {
+  margin-top: (var(--vp-nav-height)) ;
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 24px;
+  top: 10%;
+}
+}
+
+
+.Mycontainer {
+  display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
-  max-width: 800px;
+  max-width: 860px;
 
   margin: 0 auto;
 }
 
 .main {
   position: relative;
+  justify-content: center;
   z-index: 10;
   order: 2;
   flex-grow: 1;
@@ -111,6 +131,19 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   }
 }
 
+@media (min-width: 640px) and (max-width: 860px){
+  .main {
+    padding-left: 0%;
+    margin-top: 8%;
+  }
+}
+@media (max-width: 640px){
+  .main {
+    padding-right: 5%;
+    margin-top: 3%;
+  }
+}
+
 .name,
 .text {
   max-width: 392px;
@@ -152,7 +185,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 .tagline {
   position: relative;
   padding-top: 8px;
-  max-width: auto - 312px;
+  max-width: auto - 256px;
   line-height: 28px;
   font-size: 18px;
   font-weight: 500;
@@ -166,8 +199,10 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 
 @media (min-width: 860px) {
   .tagline {
-    padding-left: 16%;
+    left: -9%;
+    padding-left: 22%;
     line-height: 36px;
+    max-width: auto;
     font-size: 24px;
   }
 
@@ -176,9 +211,10 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   }
 }
 
-@media (min-width: 640px) {
+@media (min-width: 640px) and (max-width: 860px){
   .tagline {
-    left: -7%;
+    
+    left: -10%;
     padding-top: 12px;
     max-width: auto;
     line-height: 32px;
@@ -191,21 +227,22 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 @media (max-width: 639px) {
   .tagline
   {
-    left: -8%;
+    
+    left: -6%;
   }
 }
 
 .action{
-  margin-left: 6px;
-
+  margin-left: 5%;
+ 
 }
 
 .actions {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   margin: -6px;
-  margin-left: -9px;
+  margin-left: 0vw;
   padding-top: 24px;
 
 }
@@ -214,27 +251,29 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   justify-content: center;
 }
 
-@media (max-width: 639px) {
+@media (min-width: 860px) {
   .actions {
-    left: -8%;
+    margin-left: -30%;
+    padding-top: 32px;
   }
 }
 
-@media (min-width: 640px) {
+@media ( min-width: 640px) and (max-width: 860px) {
   .actions {
-    justify-content: flex-start;
-    left: -10%;
-    padding-top: 32px;
+    margin-left: -20%;
+    left: -8%;
   }
 }
 
-@media (min-width: 860px) {
+@media (max-width: 640px) {
   .actions {
-    left: -17.5%;
+    justify-content: flex-start;
+    left: -10%;
     padding-top: 32px;
   }
 }
 
+
 .image-container {
   position: relative;
   margin: 0 auto;
@@ -294,8 +333,8 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   top: 50%;
   /*rtl:ignore*/
   left: 50%;
-  max-width: 192px;
-  max-height: 192px;
+  max-width: 356px;
+  max-height: 356px;
   /*rtl:ignore*/
   transform: translate(-50%, -50%);
 }

diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -36,6 +36,8 @@ import AppContainer from './components/AppContainer.vue'
 import AboutNolebase from './components/AboutNolebase.vue'
 import DocFooter from './components/DocFooter.vue'
 import HomePage from './components/HomePage.vue'
+import MyVPHero from './components/MyVPHero.vue'
+
 import Share from './components/Share.vue'
 import TocList from './components/TocList.vue'
 
@@ -84,6 +86,7 @@ const ExtendedTheme: Theme = {
     app.component('Share', Share)
     app.component('TocList', TocList)
     app.component('AppContainer', AppContainer)
+    app.component('MyVPHero', MyVPHero)
     app.component('NolebaseUnlazyImg', NolebaseUnlazyImg)
 
     app.provide(NolebaseEnhancedReadabilitiesInjectionKey, {