Make it ✨responsive✨

package.json

@@ -4,7 +4,7 @@
 	"type": "module",
 	"private": true,
 	"scripts": {
-		"dev": "vite",
+		"dev": "vite --host",
 		"build": "vite build"
 	},
 	"devDependencies": {

src/App.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="fixed z-100 pointer-events-none -top-20 -left-20 bg-orange-800 rounded-full w-150 h-50 filter blur-250px opacity-60"/>
+  <div class="fixed z-101 inset-0 overflow-hidden pointer-events-none">
+    <div class="absolute lg:fixed -top-20 -left-20 bg-orange-800 rounded-full w-150 h-50 filter blur-250px opacity-40"/>
+  </div>
   <NavigationMenuWrapper>
-    <div class="relative p-10 pl-20 pt-15 flex-shrink-0 flex-grow-0">
+    <div class="relative p-10 pt-15 flex-shrink-0 flex-grow-0">
       <SuspenseRouterView/>
     </div>
   </NavigationMenuWrapper>

src/components/NavigationMenuWrapper.vue

@@ -1,29 +1,29 @@
 <template>
-	<nav class="w-70 fixed top-0 left-0 bottom-0 py-8 flex flex-col gap-3 border-r-solid border-1 border-gray-300 bg-gray-100">
-    <div class="font-serif font-400 text-3xl pl-7">
+	<nav class="w-full lg:w-70 fixed z-100 lg:top-0 left-0 bottom-0 lg:py-8 flex flex-col gap-3 <lg:border-t-solid lg:border-r-solid border-1 border-gray-300 bg-gray-100">
+    <div class="<lg:hidden font-serif font-400 text-3xl pl-7">
       Tea Inc.
     </div>
-		<ul class="list-none p-0 flex flex-col gap-2">
+		<ul class="list-none m-0 p-0 flex lg:flex-col <lg:justify-evenly gap-2">
 			<li v-for="item in items" :key="item.target">
 				<router-link
-					class="relative w-full py-2 pl-8 flex items-center gap-4 bg-orange-800 bg-opacity-0"
+					class="relative w-full <lg:px-3 py-2 lg:pl-8 flex <lg:flex-col items-center lg:gap-4 bg-orange-800 bg-opacity-0"
           :class="$style.item"
 					:to="item.target"
           :active-class="item.matchExact ? null : $style.active"
           :exact-active-class="item.matchExact ? $style.active : null"
 				>
-					<div class="text-3xl relative" :class="$style.icons" :style="{ top: item.icon.yOffset === undefined ? null : `${item.icon.yOffset}px` }">
+					<div class="text-2xl lg:text-3xl relative" :class="$style.icons" :style="{ top: item.icon.yOffset === undefined ? undefined : `${item.icon.yOffset}px` }">
             <component class="absolute inset-0 opacity-0" :is="item.icon.normal"/>
             <component class="duration-200" :is="item.icon.duotone"/>
           </div>
-					<div class="text-lg" :class="$style.label">
+					<div class="text-sm lg:text-lg text-center" :class="$style.label">
             {{ item.label }}
           </div>
 				</router-link>
 			</li>
 		</ul>
 	</nav>
-	<div class="pl-70">
+	<div class="lg:pl-80 pb-20">
 		<slot/>
 	</div>
 </template>
@@ -53,7 +53,7 @@
     }
 
     &.active {
-      @apply bg-opacity-15 border-r-solid border-2 border-orange-800;
+      @apply bg-opacity-15 lg:border-r-solid border-2 border-orange-800;
     }
   }
 

src/components/specific/ConfigurationForm.vue

@@ -20,7 +20,7 @@
       </p>
       <DurationInput v-model="data.feedbackTimeout" largest-unit="hours" :minimum="Temporal.Duration.from({ seconds: 10 })" :disabled="isLoading"/>
     </section>
-    <TextButton class="self-start max-w-full w-30" is-submit label="Save" :disabled="!isDirty || isLoading"/>
+    <TextButton class="lg:self-start max-w-full lg:w-30" is-submit label="Save" :disabled="!isDirty || isLoading"/>
   </form>
 </template>
 
@@ -29,7 +29,6 @@
 </style>
 
 <script setup lang="ts">
-  import FieldWrapper from "@/components/FieldWrapper.vue"
   import { Configuration, updateConfiguration } from "@/backend"
   import { computed, reactive, ref, toRaw } from "vue"
   import { cloneDeep, isEqual } from "lodash-es"

src/components/specific/TypeOfTeaForm.vue

@@ -1,12 +1,12 @@
 <template>
-  <form class="flex gap-4 w-full" @submit.prevent="onSubmit()">
+  <form class="flex gap-4 w-full <lg:flex-col" @submit.prevent="onSubmit()">
     <FieldWrapper class="flex-grow" label="Name" v-slot="{ inputId }">
       <TextualInput v-model="data.name" type="normal" :id="inputId" :disabled="isLoading"/>
     </FieldWrapper>
     <FieldWrapper label="Steeping time">
       <DurationInput v-model="data.steepingTime" largest-unit="minutes" :minimum="Temporal.Duration.from({ seconds: 10 })" :disabled="isLoading"/>
     </FieldWrapper>
-    <TextButton class="self-end" is-submit label="Save" :disabled="!isDirty || isLoading"/>
+    <TextButton class="lg:self-end" is-submit label="Save" :disabled="!isDirty || isLoading"/>
   </form>
 </template>
 

src/global.css

@@ -37,6 +37,7 @@ html, body, #app {
     color: hsl(0 0% 10%);
     min-height: 100vh;
     line-height: 1.5;
+    overscroll-behavior-y: none;
 }
 
 a {

uno.config.ts

@@ -20,7 +20,7 @@ export default defineConfig({
 		colors: {
 			dark: colors.dark,
 			light: colors.light,
-			gray: colors.warmGray,
+			gray: colors.stone,
 			orange: colors.orange,
 			background: "hsl(34, 100%, 99%)"
 		}