feat: continue style experiments

components/main/MainContent.vue

@@ -14,7 +14,7 @@ defineProps<{
       pt="[env(safe-area-inset-top,0)]"
       border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
     >
-      <div flex justify-between px5 py2>
+      <div :class="{ 'xl:hidden': !back }" flex justify-between px5 py2>
         <div flex gap-3 items-center overflow-hidden py2>
           <NuxtLink
             v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0

components/nav/NavSide.vue

@@ -7,6 +7,9 @@ const { notifications } = useNotifications()
 
 <template>
   <nav sm:px3 sm:py4 flex="~ col gap2" text-size-base leading-normal md:text-lg>
+    <SearchWidget lg:ms-1 lg:me-5 mb-5 hidden xl:block />
+    <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" xl:hidden :command="command" mb-5 />
+
     <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
     <NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command">
       <template #icon>
@@ -20,7 +23,7 @@ const { notifications } = useNotifications()
     </NavSideItem>
 
     <!-- Use Search for small screens once the right sidebar is collapsed -->
-    <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" xl:hidden :command="command" />
+    <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" sm:hidden :command="command" />
     <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" :command="command" />
 
     <NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " :command="command" />

components/nav/NavTitle.vue

@@ -7,8 +7,8 @@ const { env } = buildInfo
 <template>
   <!-- Use external to force refresh page and jump to top of timeline -->
   <NuxtLink
-    flex items-end gap-2
+    flex items-end gap-4
-    py2 px-2 xl:px-3
+    py2 px-5
     text-2xl
     focus-visible:ring="2 current"
     to="/"

components/publish/PublishButton.vue

@@ -10,8 +10,8 @@ const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.v
     xl="w-auto h-auto"
     rounded-3
     cursor-pointer disabled:pointer-events-none
-    text-primary font-bold
+    text-primary
-    border-1 border-primary-light
+    border-1 border-primary
     :class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
     :disabled="disabled"
     @click="openPublishDialog()"

components/search/SearchWidget.vue

@@ -52,14 +52,13 @@ const activate = () => {
 </script>
 
 <template>
-  <div ref="el" relative px4 py2 group>
+  <div ref="el" relative group>
-    <div bg-base border="~ base" h10 rounded-3 flex="~ row" items-center relative focus-within:box-shadow-outline>
+    <div bg-base border="~ base" h10 px-3 rounded-3 flex="~ row" items-center relative focus-within:box-shadow-outline gap-3>
-      <div i-ri:search-2-line mx4 absolute pointer-events-none text-secondary mt="1px" class="rtl-flip" />
+      <div i-ri:search-2-line pointer-events-none text-secondary mt="1px" class="rtl-flip" />
       <input
         ref="input"
         v-model="query"
         h-full
-        ps-10
         rounded-3
         w-full
         bg-transparent

layouts/default.vue

@@ -7,12 +7,12 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
 <template>
   <div h-full :class="{ zen: isZenMode }">
     <main flex w-full mxa lg:max-w-80rem>
-      <aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end zen-hide" relative>
+      <aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
         <div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>
           <slot name="left">
-            <NavTitle mt4 mb2 lg:mx-3 />
+            <div flex="~ col" overflow-y-auto justify-between h-full max-w-full mt-5>
-            <div flex="~ col" overflow-y-auto justify-between h-full max-w-full>
+              <div flex flex-col gap-2>
-              <div flex flex-col>
+                <NavTitle />
                 <NavSide command />
                 <PublishButton ms5.5 mt4 xl:me8 xl:ms4 />
               </div>
@@ -52,7 +52,6 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
       <aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
         <div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
           <slot name="right">
-            <SearchWidget />
             <div flex-auto />
             <PwaPrompt />
             <NavFooter />

pages/home.vue

@@ -21,6 +21,6 @@ useHeadFixed({
       </NuxtLink>
     </template>
 
-    <TimelineHome v-if="isMastoInitialised" />
+    <TimelineHome v-if="isMastoInitialised" mt-4 />
   </MainContent>
 </template>