feat: added @mob

Author: Sarmaged

Diff for: layouts/main.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="@tab:d:f:y vh:min">
+  <div class="@tab:d:f:y @mob:d:f:y vh:min">
     <div class="pos:a t r z:1 ta:r pt:lg pr:lg"><c-social /></div>
-    <div class="pos:a w h grow:1 y:c @tab:pos:r"><nuxt /></div>
-    <div class="pos:a b w z:1 @tab:pos:r"><c-footer /></div>
+    <div class="pos:a w h grow:1 y:c @tab:pos:r @mob:pos:r"><nuxt /></div>
+    <div class="pos:a b w z:1 @tab:pos:r @mob:pos:r"><c-footer /></div>
   </div>
 </template>
 

Diff for: pages/index.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="sf-var-violet sf-var-skyblue content d:f m:a h y:i $grow:1 $basis:0 ta:c">
-    <div class="cols:2 ta:l @tab:d:f:y @tab:ta:c">
-      <div class="col @tab:col:2 ta:c @dsk:hide">
+    <div class="cols:2 ta:l @tab:d:f:y @tab:ta:c @mob:d:f:y @mob:ta:c">
+      <div class="col ta:c @dsk:hide @tab:col:2 @mob:col:2">
         <picture class="pos:r d:ib">
           <img class="obj-fit:contain" src="/images/main.svg" alt="">
         </picture>
       </div>
-      <main class="col @tab:col:2">
+      <main class="col @tab:col:2 @mob:col:2">
         <div class="px:md">
           <h1 class="sf-c-txt-violet:50">Style-Forge</h1>
           <p class="fz:h3">CSS Framework</p>
           <p>Themes, utilities, colors, form validation, flexbox, and grid for creating responsive websites</p>
           <a class="sf-button bd:c:ii radius:md mt:lg px:md sf-c-txt-violet">Documentation</a>
         </div>
       </main>
-      <div class="col:1 @tab:col:2 ta:c @tab:hide">
+      <div class="col:1 ta:c @tab:col:2 @tab:hide @mob:col:2 @mob:hide">
         <picture class="pos:r d:ib">
           <img class="obj-fit:contain" src="/images/main.svg" alt="">
         </picture>