feat: style experiments

components/nav/NavSideItem.vue

@@ -58,11 +58,11 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
     <CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
       <div
         flex items-center gap4
-        w-fit rounded-full
+        w-fit rounded-3
         px2 py2 mx3 sm:mxa
-        xl="mx0 px5"
+        xl="ml0 mr5 px5 w-auto"
         transition-100
-        group-hover:bg-active group-focus-visible:ring="2 current"
+        group-hover="bg-active" group-focus-visible:ring="2 current"
       >
         <slot name="icon">
           <div :class="icon" text-xl />

components/nav/NavTitle.vue

@@ -8,11 +8,9 @@ const { env } = buildInfo
   <!-- Use external to force refresh page and jump to top of timeline -->
   <NuxtLink
     flex items-end gap-2
-    w-fit
     py2 px-2 xl:px-3
-    text-2xl hover:bg-active
+    text-2xl
     focus-visible:ring="2 current"
-    rounded-full
     to="/"
     external
   >

components/publish/PublishButton.vue

@@ -7,11 +7,11 @@ const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.v
   <button
     flex="~ gap2 center"
     w-9 h-9 py2
-    xl="w-auto h-auto py-4"
-    rounded-full
+    xl="w-auto h-auto"
+    rounded-3
     cursor-pointer disabled:pointer-events-none
     text-primary font-bold
-    border-1 border-primary
+    border-1 border-primary-light
     :class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
     :disabled="disabled"
     @click="openPublishDialog()"

components/publish/PublishWidget.vue

@@ -343,7 +343,7 @@ defineExpose({
         </PublishVisibilityPicker>
 
         <button
-          btn-solid rounded-full text-sm w-full md:w-fit
+          btn-solid rounded-3 text-sm w-full md:w-fit
           :disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status)"
           @click="publish"
         >

components/search/SearchWidget.vue

@@ -53,14 +53,14 @@ const activate = () => {
 
 <template>
   <div ref="el" relative px4 py2 group>
-    <div bg-base border="~ base" h10 rounded-full flex="~ row" items-center relative focus-within:box-shadow-outline>
+    <div bg-base border="~ base" h10 rounded-3 flex="~ row" items-center relative focus-within:box-shadow-outline>
       <div i-ri:search-2-line mx4 absolute pointer-events-none text-secondary mt="1px" class="rtl-flip" />
       <input
         ref="input"
         v-model="query"
         h-full
         ps-10
-        rounded-full
+        rounded-3
         w-full
         bg-transparent
         outline="focus:none"
@@ -75,7 +75,7 @@ const activate = () => {
     </div>
     <!-- Results -->
     <div p4 left-0 top-10 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
-      <div w-full bg-base border="~ base" rounded max-h-100 overflow-auto py2>
+      <div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
         <span v-if="query.length === 0" block text-center text-sm text-secondary>
           {{ t('search.search_desc') }}
         </span>

components/status/StatusCard.vue

@@ -90,13 +90,14 @@ const isDM = $computed(() => status.visibility === 'direct')
     ref="el"
     relative flex flex-col gap-1 pl-3 pr-4 pt-1
     class="pb-1.5"
-    :class="{ 'hover:bg-active': hover, 'border-t border-base': newer && !directReply }"
+    :class="{ 'hover:bg-active': hover }"
     tabindex="0"
     focus:outline-none focus-visible:ring="2 primary"
     :lang="status.language ?? undefined"
     @click="onclick"
     @keydown.enter="onclick"
   >
+    <div v-if="newer && !directReply" w-auto h-1px bg-border />
     <div flex justify-between>
       <slot name="meta">
         <div v-if="rebloggedBy && !collapseRebloggedBy" relative text-secondary ws-nowrap flex="~" items-center pt1 pb0.5 px-1px bg-base>
@@ -125,7 +126,7 @@ const isDM = $computed(() => status.visibility === 'direct')
           </NuxtLink>
         </AccountHoverWrapper>
         <div v-if="connectReply" w-full h-full flex justify-center>
-          <div h-full class="w-2.5px" bg-border />
+          <div class="w-2.5px" bg-primary-light />
         </div>
       </div>
       <div flex="~ col 1" min-w-0>

error.vue

@@ -35,7 +35,7 @@ const reload = async () => {
   <NuxtLayout>
     <MainContent>
       <template #title>
-        <span text-lg font-bold>Error</span>
+        <span timeline-title-style>Error</span>
       </template>
       <slot>
         <form p5 grid gap-y-4 @submit="reload">

layouts/default.vue

@@ -14,7 +14,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
             <div flex="~ col" overflow-y-auto justify-between h-full max-w-full>
               <div flex flex-col>
                 <NavSide command />
-                <PublishButton m="y5 xa" xl:m="r5 l3" xl:rtl-m="l5 r3" />
+                <PublishButton ms5.5 mt4 xl:me8 xl:ms4 />
               </div>
               <div v-if="isMastoInitialised" flex flex-col>
                 <UserSignInEntry v-if="!currentUser" sm:hidden />
@@ -24,7 +24,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
                     <div v-else flex="~" items-center justify-between>
                       <NuxtLink
                         hidden xl:block
-                        rounded-full text-start w-full
+                        rounded-3 text-primary text-start w-full
                         hover:bg-active cursor-pointer transition-100
                         :to="getAccountRoute(currentUser.account)"
                       >
@@ -40,7 +40,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
           </slot>
         </div>
       </aside>
-      <div w-full min-h-screen :class="wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px md:shrink-0'" sm:border-l sm:border-r border-base>
+      <div w-full min-h-screen :class="wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px md:shrink-0'" border-base>
         <div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
           <slot />
         </div>
@@ -50,7 +50,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
         </div>
       </div>
       <aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
-        <div sticky top-0 h-screen flex="~ col" py3>
+        <div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
           <slot name="right">
             <SearchWidget />
             <div flex-auto />

pages/[[server]]/@[account]/index.vue

@@ -21,7 +21,7 @@ onReactivated(() => {
 <template>
   <MainContent back>
     <template #title>
-      <ContentRich text-lg font-bold :content="account ? getDisplayName(account) : t('nav.profile')" />
+      <ContentRich timeline-title-style :content="account ? getDisplayName(account) : t('nav.profile')" />
     </template>
 
     <template v-if="pending" />

pages/[[server]]/explore.vue

@@ -28,7 +28,7 @@ const tabs = $computed(() => [
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold flex items-center gap-2 cursor-pointer @click="$scrollToTop">
+      <span timeline-title-style flex items-center gap-2 cursor-pointer @click="$scrollToTop">
         <div i-ri:hashtag />
         <span>{{ t('nav.explore') }}</span>
       </span>

pages/[[server]]/public/index.vue

@@ -11,7 +11,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/public" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/public" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:group-2-line />
         <span>{{ t('title.federated_timeline') }}</span>
       </NuxtLink>

pages/[[server]]/public/local.vue

@@ -10,7 +10,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/public/local" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/public/local" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:group-2-line />
         <span>{{ t('title.local_timeline') }}</span>
       </NuxtLink>

pages/blocks.vue

@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent back>
     <template #title>
-      <span text-lg font-bold>{{ $t('nav.blocked_users') }}</span>
+      <span timeline-title-style>{{ $t('nav.blocked_users') }}</span>
     </template>
 
     <TimelineBlocks v-if="isMastoInitialised" />

pages/bookmarks.vue

@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/bookmarks" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/bookmarks" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:bookmark-line />
         <span>{{ t('nav.bookmarks') }}</span>
       </NuxtLink>

pages/conversations.vue

@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/conversations" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/conversations" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:at-line />
         <span>{{ t('nav.conversations') }}</span>
       </NuxtLink>

pages/domain_blocks.vue

@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent back>
     <template #title>
-      <span text-lg font-bold>{{ $t('nav.blocked_domains') }}</span>
+      <span timeline-title-style>{{ $t('nav.blocked_domains') }}</span>
     </template>
 
     <TimelineDomainBlocks v-if="isMastoInitialised" />

pages/favourites.vue

@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/favourites" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/favourites" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:heart-3-line />
         <span>{{ t('nav.favourites') }}</span>
       </NuxtLink>

pages/home.vue

@@ -15,7 +15,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/home" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/home" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:home-5-line />
         <span>{{ $t('nav.home') }}</span>
       </NuxtLink>

pages/mutes.vue

@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent back>
     <template #title>
-      <span text-lg font-bold>{{ $t('nav.muted_users') }}</span>
+      <span timeline-title-style>{{ $t('nav.muted_users') }}</span>
     </template>
 
     <TimelineMutes v-if="isMastoInitialised" />

pages/notifications.vue

@@ -28,7 +28,7 @@ onActivated(() => {
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/notifications" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/notifications" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:notification-4-line />
         <span>{{ t('nav.notifications') }}</span>
       </NuxtLink>

pages/pinned.vue

@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/public/pinned" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/public/pinned" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:pushpin-line />
         <span>{{ t('account.pinned') }}</span>
       </NuxtLink>

pages/search.vue

@@ -10,7 +10,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/search" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/search" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:search-line class="rtl-flip" />
         <span>{{ $t('nav.search') }}</span>
       </NuxtLink>

pages/settings.vue

@@ -20,7 +20,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
       <div border="e base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
         <MainContent>
           <template #title>
-            <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+            <div timeline-title-style flex items-center gap-2 @click="$scrollToTop">
               <div i-ri:settings-3-line />
               <span>{{ $t('nav.settings') }}</span>
             </div>

unocss.config.ts

@@ -22,6 +22,7 @@ export default defineConfig({
       'bg-base': 'bg-$c-bg-base',
       'bg-border': 'bg-$c-border',
       'bg-active': 'bg-$c-bg-active',
+      'bg-primary-light': 'bg-$c-primary-light',
       'bg-code': 'bg-$c-bg-code',
       'bg-fade': 'bg-$c-bg-fade',
 
@@ -55,6 +56,8 @@ export default defineConfig({
       'flex-v-center': 'items-center',
       'flex-h-center': 'justify-center',
       'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--2px bg-transparent rounded-lg z--1 transition-colors duration-250) hover:after:(bg-active)',
+
+      'timeline-title-style': 'text-primary text-lg font-bold',
     },
   ],
   presets: [