chore: improve responsivness

2026-01-18 18:57:30 +01:00
parent 628f16ef61
commit e6e1000caa
12 changed files with 286 additions and 31 deletions
--- a/app/app.vue
+++ b/app/app.vue
@@ -10,7 +10,7 @@
  --secondary-color: #000;
 }

-html, body, p, a, address, h2 {
+html, body, p, a, button, address, h2 {
  font-family: 'Abbiocco Beta', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }

@@ -18,6 +18,10 @@ a {
  text-decoration: none;
 }

+a:hover {
+  text-decoration: underline;
+}
+
 html {
  scroll-behavior: smooth;
 }
--- a/app/assets/icons/arrow-up-black.svg
+++ b/app/assets/icons/arrow-up-black.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <!-- Generator: Adobe Illustrator 28.7.10, SVG Export Plug-In . SVG Version: 1.2.0 Build 236)  -->
+  <g>
+    <g id="Calque_1">
+      <polygon points="37.34 17.24 20 0 2.66 17.24 5.32 20.99 17.83 8.08 17.83 40 22.17 40 22.17 8.08 34.68 20.99 37.34 17.24"/>
+    </g>
+  </g>
+</svg>
--- a/app/components/AppFooter.vue
+++ b/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>
--- a/app/components/AppHeader.vue
+++ b/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;
  }
 }

--- a/app/components/VProject.vue
+++ b/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>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -2,10 +2,20 @@
 const appConfig = useAppConfig()
 const route = useRoute()

+const PROJECTS_PER_PAGE = 7
+const displayCount = ref(PROJECTS_PER_PAGE)
+
 const { data: projects } = await useAsyncData(`projects-${route.path}`, async () => {
  return await queryCollection('projects').order('order', 'ASC').all()
 })

+const visibleProjects = computed(() => projects.value?.slice(0, displayCount.value) ?? [])
+const hasMoreProjects = computed(() => (projects.value?.length ?? 0) > displayCount.value)
+
+const loadMore = () => {
+  displayCount.value += PROJECTS_PER_PAGE
+}
+
 const { data: about } = await useAsyncData(`about-${route.path}`, async () => {
  return await queryCollection('content').path('/about').first()
 })
@@ -20,10 +30,14 @@ useSeoMeta({
  <template v-if="projects?.length">
    <section class="nuxt-content">
      <VProject
-        v-for="project in projects"
+        v-for="project in visibleProjects"
        :key="project.title"
        :project="project"
      />
+      <button v-if="hasMoreProjects" class="load-more" @click="loadMore">
+        <img class="arrow-icon" src="~/assets/icons/arrow-down-white.svg" alt="" />
+        See more projects
+      </button>
    </section>
    <section id="about" v-if="about">
      <article>
@@ -31,8 +45,10 @@ useSeoMeta({
          <img class="arrow-icon" src="~/assets/icons/arrow-down-black.svg" alt="" />
          {{ about.title }}
        </h2>
+        <div>
          <p>{{ about.description }}</p>
          <p>{{ about.description2 }}</p>
+        </div>
      </article>
    </section>
  </template>
@@ -48,6 +64,21 @@ useSeoMeta({
  padding: 1rem;
 }

+.load-more {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: none;
+  border: none;
+  color: var(--primary-color);
+  padding: 0;
+}
+
+.load-more:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 #about {
  padding: 0 1rem;
  margin-top: 1rem;
@@ -61,8 +92,13 @@ useSeoMeta({
  padding: 0.5rem 0 1rem 0;
  display: flex;
  flex-direction: column;
-  gap: 1rem;
-  line-height: 20px;
+  gap: 0.5rem;
+  line-height: 15px;
+}
+
+.load-more,
+#about article {
+  font-size: 0.75rem;
 }

 article h2 {
@@ -70,4 +106,59 @@ article h2 {
  align-items: center;
  gap: 0.5rem;
 }
+
+@media (min-width: 768px) {
+  #about {
+    margin-top: 2rem;
+  }
+
+  #about article {
+    padding-bottom: 2rem;
+  }
+
+  #about article > div {
+    margin-left: 33.333%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .load-more,
+  #about article {
+    font-size: 1rem;
+    line-height: 20px;
+  }
+}
+
+@media (min-width: 1024px) {
+  #about {
+    margin-top: 2.5rem;
+  }
+
+  #about article {
+    padding-bottom: 2.5rem;
+  }
+
+  #about article > div {
+    padding-right: 1rem;
+  }
+
+  .load-more,
+  #about article {
+    font-size: 1.15rem;
+    line-height: 22px;
+  }
+}
+
+@media (min-width: 1536px) {
+  #about article > div {
+    flex-direction: row;
+    gap: 2rem;
+    padding-right: 2rem;
+  }
+
+  #about article > div > p {
+    width: 50%;
+  }
+}
 </style>
--- a/content/projects/grenette.md
+++ b/content/projects/grenette.md
@@ -4,5 +4,5 @@ title: Grenette
 shortDescription: Characterful and versatile serif typeface family. Developed at Colophon Foundry.
 image: /images/projects/grenette.svg
 popupImage: /images/projects/grenette-popup.svg
-toggleText: See the board !
+toggleText: See the font in use!
 ---
--- a/content/projects/mock-project-1.md
+++ b/content/projects/mock-project-1.md
@@ -0,0 +1,8 @@
+---
+order: 6
+title: Mock Project 1
+shortDescription: This is a mock project for testing the load more feature.
+image: /images/projects/grenette.svg
+popupImage: /images/projects/grenette-popup.svg
+toggleText: See the board !
+---
--- a/content/projects/mock-project-2.md
+++ b/content/projects/mock-project-2.md
@@ -0,0 +1,8 @@
+---
+order: 7
+title: Mock Project 2
+shortDescription: This is a mock project for testing the load more feature.
+image: /images/projects/grenette.svg
+popupImage: /images/projects/grenette-popup.svg
+toggleText: See the board !
+---
--- a/content/projects/mock-project-3.md
+++ b/content/projects/mock-project-3.md
@@ -0,0 +1,8 @@
+---
+order: 8
+title: Mock Project 3
+shortDescription: This is a mock project for testing the load more feature.
+image: /images/projects/grenette.svg
+popupImage: /images/projects/grenette-popup.svg
+toggleText: See the board !
+---
--- a/content/projects/mock-project-4.md
+++ b/content/projects/mock-project-4.md
@@ -0,0 +1,8 @@
+---
+order: 9
+title: Mock Project 4
+shortDescription: This is a mock project for testing the load more feature.
+image: /images/projects/grenette.svg
+popupImage: /images/projects/grenette-popup.svg
+toggleText: See the board !
+---
--- a/content/projects/mock-project-5.md
+++ b/content/projects/mock-project-5.md
@@ -0,0 +1,8 @@
+---
+order: 10
+title: Mock Project 5
+shortDescription: This is a mock project for testing the load more feature.
+image: /images/projects/grenette.svg
+popupImage: /images/projects/grenette-popup.svg
+toggleText: See the board !
+---