responsive website

docs/main-site/src/App.vue

@@ -1,33 +1,11 @@
 <template>
-  <router-view v-slot="{ Component }" v-if="!isMobile">
+  <router-view v-slot="{ Component }" v-if="isMobile">
     <Navigation />
     <SideBar v-if="$route.name === 'documentation'" />
     <transition :name="transition" mode="out-in">
       <component :is="Component" :key="$route.name" />
     </transition>
   </router-view>
-
-  <router-view v-else>
-    <section class="responsive flex-column-center-center">
-      <h1 class="sub-title">Pages are <span class="green bold">not</span> responsive yet :(</h1>
-      <p class="content">
-        The pages are not responsive yet. Please view this site on a desktop or laptop for now. we
-        are working on it. Thank you for your patience.
-      </p>
-      <p class="content green">
-        We are looking for contributors to help us with this. If you are interested, please check
-        out project's github repo and create a pull request. Thank you.
-      </p>
-      <a
-        href="https://github.com/MAGGIx1404/Textify-js"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="bg-link"
-      >
-        Go to Github
-      </a>
-    </section>
-  </router-view>
 </template>
 
 <script>

docs/main-site/src/assets/styles/base/_base.scss

@@ -16,7 +16,7 @@ html {
   -webkit-font-smoothing: antialiased;
 
   @media only screen and (max-width: 812px) {
-    font-size: calc(100vw / 375 * 10) !important;
+    font-size: calc(100vw / 812 * 10) !important;
   }
 }
 

docs/main-site/src/assets/styles/pages/_example.scss

@@ -24,6 +24,7 @@
 
     .top-content {
       text-align: center;
+      padding: 0 5rem;
     }
 
     .container {
@@ -32,10 +33,18 @@
       row-gap: 4rem;
       margin-top: 5rem;
 
+      @media only screen and (max-width: 812px) {
+        flex-direction: column;
+      }
+
       .animationbox-wrapper {
         width: 49%;
         height: 40rem;
 
+        @media only screen and (max-width: 812px) {
+          width: 100%;
+        }
+
         .animation-box {
           width: 100%;
           height: 100%;
@@ -48,6 +57,10 @@
 
           &.content-animation-box {
             padding: 10rem;
+
+            @media only screen and (max-width: 812px) {
+              padding: 5rem;
+            }
           }
 
           .code-btn {

docs/main-site/src/assets/styles/pages/_home.scss

@@ -38,6 +38,11 @@
         margin-top: 5rem;
         align-items: stretch;
 
+        @media only screen and (max-width: 812px) {
+          flex-direction: column;
+          gap: 2rem;
+        }
+
         li {
           flex: 0 0 24%;
           max-width: 24%;
@@ -48,6 +53,10 @@
           border-radius: 10px;
           padding: 4rem;
 
+          @media only screen and (max-width: 812px) {
+            max-width: 100%;
+          }
+
           p {
             margin-top: 2rem;
           }

docs/main-site/src/assets/styles/shared/_texts.scss

@@ -4,6 +4,10 @@
   line-height: 1.2;
   letter-spacing: 0.5px;
 
+  @media only screen and (max-width: 812px) {
+    font-size: 6rem;
+  }
+
   //   title animation
   .char {
     &::after {