wazolab/la-boite-aux-lettres
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix header

Browse Source
This commit is contained in:
Noé Viricel
2026-01-17 02:27:23 +01:00
parent deaa601efd
commit 65b8f4816a
15 changed files with 223 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/app.config.ts
View File

@@ -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."
})

4
app/app.vue
View File

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

9
app/assets/icons/arrow-down-black.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 395 B

16
app/assets/icons/arrow-down-white.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

16
app/assets/icons/cross-white.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 517 B

16
app/assets/icons/times-white.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 500 B

100
app/components/AppHeader.vue
View File

@@ -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`" />
<img class="brand" src="~/assets/images/brand-mobile.svg" :alt="appConfig.title" />
<p>{{ appConfig.description }}</p>
<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 v-if="isLargeScreen" to="#contact">↓ Contact</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>
</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;
padding: 2.6rem 4rem;
height: 64px;
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>

50
app/components/VProject.vue
View File

@@ -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>
<p v-if="isLargeScreen">{{ project.description }}</p>
<p v-else>{{ project.shortDescription }}</p>
<h2>
<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>

15
app/pages/index.vue
View File

@@ -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>