fix: responsivity adjustments

AloisSeckar · Feb 24, 2024 · 2de4948 · 2de4948
1 parent c1a1c27
commit 2de4948
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/components/TheFooter.vue b/components/TheFooter.vue
@@ -9,10 +9,12 @@
     <span v-else>
       {{ author }}
     </span>
-    powered by
-    <NuxtLink to="https://nuxt.com/">
-      Nuxt3
-    </NuxtLink>
+    <span class="hidden min-[575px]:inline">
+      powered by
+      <NuxtLink to="https://nuxt.com/">
+        Nuxt3
+      </NuxtLink>
+    </span>
     |
     <span class="pl-1 text-xs">
       <NuxtLink to="/admin">

diff --git a/components/TheMenu.vue b/components/TheMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="px-4 py-1 bg-navy text-lg text-silver text-center space-x-8">
-    <NuxtLink to="/">
+    <NuxtLink to="/" class="">
       <BaseIcon icon="home" size="1.5rem" :css-class="menuIcon" /> {{ $t('menu.index') }}
     </NuxtLink>
     <NuxtLink to="/articles">
@@ -9,7 +9,7 @@
     <NuxtLink to="/galleries">
       <BaseIcon icon="image" size="1.125rem" :css-class="menuIcon" /> {{ $t('menu.galleries') }}
     </NuxtLink>
-    <NuxtLink to="/timeline">
+    <NuxtLink to="/timeline" class="text-nowrap">
       <BaseIcon icon="timeline" size="1.125rem" :css-class="menuIcon" /> {{ $t('menu.timeline') }}
     </NuxtLink>
     <NuxtLink to="/books">

diff --git a/components/item/Book.vue b/components/item/Book.vue
@@ -3,7 +3,7 @@
     <div class="hidden sm:inline-block sm:w-32 p-2">
       <BaseThumb :name="item.name" :image="item.thumb" :link="item.url" />
     </div>
-    <div class="flex-1 p-2 pl-4">
+    <div class="flex-1 p-2 sm:pl-4">
       <div>
         <a :href="item.url" :title="item.name">
           <strong>{{ item.name }}</strong>

diff --git a/components/item/Link.vue b/components/item/Link.vue
@@ -3,7 +3,7 @@
     <div class="hidden sm:inline-block sm:w-44 p-2">
       <BaseThumb :name="item.name" :image="item.thumb" :link="item.url" landscape />
     </div>
-    <div class="flex-1 p-2 pl-4">
+    <div class="flex-1 p-2 sm:pl-4">
       <div>
         <a :href="item.url" :title="item.url">
           <strong>{{ item.name }}</strong>