chore: fix header

app/app.config.ts

@@ -1,4 +1,7 @@
 export default defineAppConfig({
+  metaTitle: 'La boite aux lettres - Laurette Colmard',
+  metaDesc:'Characters with character, by type designer Laurette Colmard.',
   title: 'La Boîte aux lettres',
-  description: "Characters with character, by type designer Laurette Colmard."
+  description: "Characters with character,",
+  description2: "by type designer Laurette Colmard."
 })

app/app.vue

@@ -22,4 +22,8 @@ a {
 html {
   scroll-behavior: smooth;
 }
+
+.arrow-icon {
+  width: 12px;
+}
 </style>

app/assets/icons/arrow-down-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 22.76 20 40 2.66 22.76 5.32 19.01 17.83 31.92 17.83 0 22.17 0 22.17 31.92 34.68 19.01 37.34 22.76"/>
+    </g>
+  </g>
+</svg>

app/assets/icons/arrow-down-white.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.10, SVG Export Plug-In . SVG Version: 1.2.0 Build 236)  -->
+  <g>
+    <g id="Calque_1">
+      <polygon class="cls-1" points="37.34 22.76 20 40 2.66 22.76 5.32 19.01 17.83 31.92 17.83 0 22.17 0 22.17 31.92 34.68 19.01 37.34 22.76"/>
+    </g>
+  </g>
+</svg>

app/assets/icons/cross-white.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.10, SVG Export Plug-In . SVG Version: 1.2.0 Build 236)  -->
+  <g>
+    <g id="Calque_1">
+      <polygon class="cls-1" points="40 17.73 22.46 17.73 22.46 0 17.54 0 17.54 17.73 0 17.73 0 22.27 17.54 22.27 17.54 40 22.46 40 22.46 22.27 40 22.27 40 17.73"/>
+    </g>
+  </g>
+</svg>

app/assets/icons/times-white.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.10, SVG Export Plug-In . SVG Version: 1.2.0 Build 236)  -->
+  <g>
+    <g id="Calque_1">
+      <polygon class="cls-1" points="38 5.44 34.56 2 20 16.56 5.44 2 2 5.44 16.56 20 2 34.56 5.44 38 20 23.44 34.56 38 38 34.56 23.44 20 38 5.44"/>
+    </g>
+  </g>
+</svg>

app/components/AppHeader.vue

@@ -14,16 +14,27 @@ const { isScrolled } = useScroll(scrollThreshold.value)
 <template>
   <header class="app-header">
     <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" />
+      <div>
         <p>{{ appConfig.description }}</p>
+        <p>{{ appConfig.description2 }}</p>
+      </div>
+    </div>
   </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">↓ About</NuxtLink>
+      <NuxtLink to="#about">
-      <NuxtLink v-if="isLargeScreen" to="#contact">↓ Contact</NuxtLink>
+        <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>
     </nav>
   </header>
 </template>
@@ -53,12 +64,18 @@ const { isScrolled } = useScroll(scrollThreshold.value)
   box-sizing: border-box;
 }
 
+.app-header > div {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 .app-header--sticky {
   position: fixed;
   top: 0;
   width: 100%;
   height: 34px;
-  padding: 0.75rem 2rem;
+  padding: 0.75rem 1rem;
   align-items: center;
   animation: slideDown 0.3s ease;
   z-index: 10;
@@ -87,7 +104,6 @@ nav {
 }
 
 a {
-  font-weight: 500;
   color: inherit;
 }
 
@@ -96,18 +112,82 @@ p {
   line-height: 1.5rem;
 }
 
+@media (min-width: 768px) {
+  .app-header {
+    height: 100vh;
+  }
+
+  .app-header > div {
+    position: absolute;
+    bottom: 3rem;
+  }
+
+  .brand {
+    width: 332px;
+  }
+
+  .brand-logo {
+    width: 168px;
+  }
+
+  p {
+    font-size: 1.4rem;
+    line-height: inherit;
+  }
+}
+
 @media (min-width: 1024px) {
   .app-header--sticky {
-    height: 114px;
+    height: 64px;
-    padding: 2.6rem 4rem;
+    padding: 1rem 4rem;
   }
 
   .app-header--sticky img {
-    height: 30px;
+    height: 24px;
+  }
+
+  .brand-logo {
+    width: 228px;
+  }
+
+  .brand {
+    width: 460px;
   }
 
   a {
-    font-size: 1.25rem;
+    font-size: 1.2rem;
+  }
+
+  p {
+    font-size: 1.65rem;
+  }
+}
+
+@media (min-width: 1536px) {
+  .brand-logo {
+    width: 340px;
+  }
+
+  .brand {
+    width: 688px;
+  }
+
+  p {
+    font-size: 2rem;
+  }
+}
+
+@media (min-width: 1920px) {
+  .brand-logo {
+    width: 447px;
+  }
+
+  .brand {
+    width: 892px;
+  }
+
+  p {
+    font-size: 3.2rem;
   }
 }
 </style>

app/components/VProject.vue

@@ -1,19 +1,39 @@
 <script setup lang="ts">
 import type { ProjectsCollectionItem } from '@nuxt/content';
 
-defineProps<{
+const props = defineProps<{
   project: ProjectsCollectionItem
 }>()
 
-const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+const isMediumScreen = useMediaQuery('(min-width: 768px)')
+const descToggled = ref<boolean>(false)
+
+const hasDescription = computed(() => {
+  return props.project.description && props.project.description.length > 0
+})
+
+function handleToggle() {
+  descToggled.value = !descToggled.value
+}
 </script>
 
 <template>
   <article class="project">
     <header>
-      <h2>↓ {{  project.title }}</h2>
+      <h2>
-      <p v-if="isLargeScreen">{{ project.description }}</p>
+        <img class="arrow-icon" src="~/assets/icons/arrow-down-white.svg" alt="" />
+        {{ project.title }}
+        <ClientOnly>
+          <button v-if="isMediumScreen && hasDescription" @click="handleToggle">
+            <img v-if="descToggled" src="~/assets/icons/times-white.svg" alt="" />
+            <img v-else src="~/assets/icons/cross-white.svg" alt="" />
+          </button>
+        </ClientOnly>
+      </h2>
+      <div>
+        <p v-if="descToggled">{{ project.description }}</p>
         <p v-else>{{ project.shortDescription }}</p>
+      </div>
     </header>
     <img :src="project.image" :alt="project.title" />
   </article>
@@ -29,9 +49,27 @@ article {
 
 h2 {
   padding: 0.5rem 0rem;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
 }
 
-img {
+h2 button {
+  margin-left: auto;
+  background: transparent;
+  border: none;
+}
+
+h2 button img {
+  width: 12px;
+}
+
+article > img {
   width: 100%;
+  margin-bottom: 1rem;
+}
+
+article header > div {
+  padding-left: 1.25rem;
 }
 </style>

app/pages/index.vue

@@ -27,8 +27,12 @@ useSeoMeta({
     </section>
     <section id="about" v-if="about">
       <article>
-        <h2>↓ {{ about.title }}</h2>
+        <h2>
+          <img class="arrow-icon" src="~/assets/icons/arrow-down-black.svg" alt="" />
+          {{ about.title }}
+        </h2>
         <p>{{ about.description }}</p>
+        <p>{{ about.description2 }}</p>
       </article>
     </section>
   </template>
@@ -54,9 +58,16 @@ useSeoMeta({
 #about article {
   border-top: 1px solid var(--secondary-color);
   border-bottom: 1px solid var(--secondary-color);
-  padding: 1rem 0;
+  padding: 0.5rem 0 1rem 0;
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  line-height: 20px;
+}
+
+article h2 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 </style>

content.config.ts

@@ -6,7 +6,7 @@ export default defineContentConfig({
       type: 'page',
       source: '*.md',
       schema: z.object({
-        
+        description2: z.string()
       })
     }),
     projects: defineCollection({
@@ -18,6 +18,9 @@ export default defineContentConfig({
         shortDescription: z.string(),
         description: z.string(),
         image: z.string(),
+        toggleUrl: z.string(),
+        toggleText: z.string(),
+        popupImage: z.string(),
         preview: z.string(),
         isDraft: z.boolean()
       })

content/about.md

@@ -1,4 +1,5 @@
 ---
 title: About
-description: I'm a freelance type designer based in Grenoble, France. I collaborate with type foundries and design agencies on custom and retail projects. My design approach is grounded in the traditional type education I received at école Estienne (Paris) and my everlasting enthusiasm for expressive and lively letterforms. Since 2021, I have worked with…Letters from Sweden, Colophon Foundry, Nova Type Foundry, Black[Foundry], Université Sorbonne-Nouvelle, Spy Studio, The Imageniers – among others.
+description: I'm a freelance type designer based in Grenoble, France. I collaborate with type foundries and design agencies on custom and retail projects. My design approach is grounded in the traditional type education I received at école Estienne (Paris) and my everlasting enthusiasm for expressive and lively letterforms.
+description2: Since 2021, I have worked with…Letters from Sweden, Colophon Foundry, Nova Type Foundry, Black[Foundry], Université Sorbonne-Nouvelle, Spy Studio, The Imageniers – among others.
 ---

content/projects/abbiocco.md

@@ -2,6 +2,6 @@
 order: 2
 title: Abbiocco
 shortDescription: Humanist sans serif typeface family. Soon available.
-description: ...
 image: /images/projects/abbiocco.svg
+toggleUrl: https://lettersfromsweden.se/font/bazaar
 ---

content/projects/grenette.md

@@ -2,6 +2,7 @@
 order: 3
 title: Grenette
 shortDescription: Characterful and versatile serif typeface family. Developed at Colophon Foundry.
-description: ...
 image: /images/projects/grenette.svg
+popupImage: /images/projects/grenette-popup.svg
+toggleText: See the board !
 ---

content/projects/ica-medis.md

@@ -2,6 +2,5 @@
 order: 4
 title: ICA Medis
 shortDescription: Medis Black and modular style for ICA Supermarket, Stockholm, Sweden. In collaboration with Hummingbirds The Hybrid Agency & Letters from Sweden.
-description: ...
 image: /images/projects/ica-medis.svg
 ---

content/projects/poolriders.md

@@ -2,6 +2,7 @@
 order: 5
 title: PoolRiders
 shortDescription: Lettering for a skateboard. Personal project.
-description: ...
 image: /images/projects/poolriders.svg
+popupImage: /images/projects/poolriders-popup.svg
+toggleText: See the board!
 ---