chore: improve responsivness

app/components/AppFooter.vue

@@ -3,13 +3,10 @@ const appConfig = useAppConfig()
 
 onMounted(() => {
   const protectedEmail = document.getElementById('protected-email')
-  const protectedPhone = document.getElementById('protected-phone')
 
   if(protectedEmail)
     protectedEmail.innerHTML = 'moc.' + 'liamg' + '@' + 'dramloc.' + 'ettelrual';
 
-  if(protectedPhone)
-    protectedPhone.textContent = atob('MDYgMDEgOTMgNzUgODc=');
 })
 </script>
 
@@ -19,9 +16,8 @@ onMounted(() => {
       <img src="~/assets/images/brand-mobile.svg" :alt="appConfig.title"></img>
       <address>
         Laurette Colmard<br>
-        <span id="protected-email" class="protected"></span><br>
         29 rue Colonel Bougault, 38100 Grenoble (FR)<br>
-        <span id="protected-phone"></span>
+        <span id="protected-email" class="protected"></span>
       </address>
     </div>
   </footer>
@@ -42,17 +38,77 @@ footer {
 .wrapper {
   display: flex;
   align-items: flex-end;
-  gap: 2rem;
+  gap: 1.5rem;
   padding: 1.5rem 0;
 }
 
 address {
-  font-weight: 500;
-  font-size: 0.75rem;
-  line-height: 0.75rem;
+  font-size: 0.65rem;
+  line-height: 12px;
 }
 
 img {
   height: 64px;
 }
+
+@media (min-width: 768px) {
+  .wrapper {
+    gap: 3rem;
+  }
+
+  img {
+    height: 104px;
+  }
+
+  address {
+    font-size: 0.75rem;
+    line-height: 14px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .wrapper {
+    gap: 8rem;
+  }
+
+  img {
+    height: 120px;
+  }
+
+  address {
+    font-size: 0.95rem;
+    line-height: 15px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .wrapper {
+    gap: 20rem;
+  }
+
+  img {
+    height: 146px;
+  }
+
+  address {
+    font-size: 1rem;
+    line-height: 20px;
+  }
+}
+
+@media (min-width: 1920px) {
+  .wrapper {
+    gap: 28rem;
+  }
+
+  img {
+    height: 155px;
+  }
+
+
+  address {
+    font-size: 1.15rem;
+    line-height: 22px;
+  }
+}
 </style>

app/components/AppHeader.vue

@@ -12,7 +12,7 @@ const { isScrolled } = useScroll(scrollThreshold.value)
 </script>
 
 <template>
-  <header class="app-header">
+  <header class="app-header" id="top">
     <img class="brand-logo" src="~/assets/images/brand-logo.svg" :alt="`${appConfig.title} - Logo`" />
     <div>
       <img class="brand" src="~/assets/images/brand-mobile.svg" :alt="appConfig.title" />
@@ -24,16 +24,14 @@ const { isScrolled } = useScroll(scrollThreshold.value)
   </header>
   <header class="app-header--sticky" v-if="isScrolled">
     <img src="~/assets/images/brand-desktop.svg" :alt="appConfig.title" />
-
     <nav>
-      <!-- <NuxtLink v-if="isLargeScreen" to="#top">↓ Back on top</NuxtLink> -->
       <NuxtLink to="#about">
         <img class="arrow-icon" src="~/assets/icons/arrow-down-black.svg" alt="" />
         About
       </NuxtLink>
-      <NuxtLink v-if="isLargeScreen" to="#contact">
-        <img class="arrow-icon" src="~/assets/icons/arrow-down-black.svg" alt="" />
-        Contact
+      <NuxtLink v-if="isLargeScreen" to="#top">
+        <img class="arrow-icon" src="~/assets/icons/arrow-up-black.svg" alt="" />
+        Back on top
       </NuxtLink>
     </nav>
   </header>
@@ -104,7 +102,11 @@ nav {
 }
 
 a {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
   color: inherit;
+  font-size: 0.75rem;
 }
 
 p {
@@ -122,6 +124,12 @@ p {
     bottom: 3rem;
   }
 
+   .app-header > div > div {
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+   }
+
   .brand {
     width: 332px;
   }
@@ -134,6 +142,10 @@ p {
     font-size: 1.4rem;
     line-height: inherit;
   }
+
+  a {
+    font-size: 0.9rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -155,11 +167,11 @@ p {
   }
 
   a {
-    font-size: 1.2rem;
+    font-size: 1.15rem;
   }
 
   p {
-    font-size: 1.65rem;
+    font-size: 1.75rem;
   }
 }
 
@@ -172,8 +184,12 @@ p {
     width: 688px;
   }
 
+   a {
+    font-size: 1.35rem;
+  }
+
   p {
-    font-size: 2rem;
+    font-size: 2.4rem;
   }
 }
 

app/components/VProject.vue

@@ -66,6 +66,11 @@ article {
   gap: 1rem;
 }
 
+header > div,
+h2 {
+  font-size: 0.75rem;
+}
+
 h2 {
   padding: 0.5rem 0rem;
   display: flex;
@@ -88,6 +93,7 @@ h2 button {
   margin-left: auto;
   background: transparent;
   border: none;
+  cursor: pointer;
 }
 
 h2 button img {
@@ -99,7 +105,7 @@ h2 button img {
   margin-bottom: 1rem;
 }
 
-article header > div {
+header > div {
   padding-left: 1.25rem;
 }
 
@@ -122,11 +128,44 @@ header {
   font-family: 'Bazaar', sans-serif;
   background: transparent;
   color: #FFFFFF;
-  border-radius: 10px;
-  border: 2px solid var(--primary-color);
-  padding: 0.25rem 0.5rem;
-  font-size: 1rem;
-  margin-top: 0.5rem;
+  border-radius: 16px;
+  border: 0.5px solid var(--primary-color);
+  padding: 0.3rem 0.4rem;
+  font-size: 1.25rem;
+  margin-top: 0.85rem;
   transform: rotate(-2.6deg);
+  line-height: 1.25rem;
 }
+
+@media (min-width: 768px) {
+  h2,
+  header > div {
+    font-size: 1rem;
+  }
+
+  .trigger-additional {
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+    border-radius: 20px;
+  }
+}
+
+@media (min-width: 1024px) {
+  h2,
+  header > div {
+    font-size: 1.15rem;
+  }
+
+  h2 button img {
+    width: 14px;
+  }
+
+  .trigger-additional {
+    font-size: 1.8rem;
+    line-height: 1.8rem;
+    padding: 0.4rem 0.5rem;
+    border-radius: 24px;
+  }
+}
+
 </style>