Valentin Le Moign
59dfbe4155
App Nuxt 3 + Nuxt UI qui lit les projets du CMS Grav et compose des portfolios A3 paysage exportés en PDF (gabarit book_v3) : composeur WYSIWYG, templates cover/toc/projet/grille/page libre, pipeline Playwright + Ghostscript, gel du contenu à la génération, partage public opt-in. Dépôt autonome : Dockerfile (base Playwright + Ghostscript + ffmpeg + rsync) inclus. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
60 lines
3.1 KiB
Vue
60 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
// Couverture du portfolio — reprend l'accueil du site figureslibres.cc
|
|
// (docs/portfolios-examples/screenshot-site-figures-libres.png) : la phrase
|
|
// d'intro seule, bloc centré à 65 % de large, chaque keyword dans sa fonte
|
|
// (sans soulignement, contrairement au site), flèche vers le bas. Rien d'autre.
|
|
import type { Background } from '~~/types'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
title: string // utilisé pour les métadonnées PDF, pas affiché
|
|
subtitle?: string
|
|
recipient?: string
|
|
background: Background
|
|
bandColor?: string // filet couleur en bas (définit aussi celui du sommaire)
|
|
renderMode?: 'preview' | 'print'
|
|
}>(),
|
|
{ renderMode: 'preview' },
|
|
)
|
|
|
|
// Le site affiche l'intro sur fond gris clair : « Blanc » rend le gris charte.
|
|
const pageStyle = computed(() => {
|
|
const s = backgroundStyle(props.background)
|
|
if (props.background.mode === 'white') s.backgroundColor = FL_BASE
|
|
return s
|
|
})
|
|
|
|
const strip = computed(() => props.bandColor || FL_INK)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fl-page" :style="pageStyle">
|
|
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
|
<!-- Phrase d'intro du site (pages/01.home) — Lato, keywords dans les
|
|
fontes d'« utilité » du thème Grav, non soulignés -->
|
|
<p class="w-[65%]" :style="{ fontFamily: 'Lato, sans-serif', fontSize: '54px', lineHeight: '1.35' }">
|
|
<span class="font-bold" style="font-family: 'Syne', sans-serif">Figures Libres</span>
|
|
est un collectif de design graphique et interactif porteur de messages d'utilité
|
|
<span class="fl-font-publique">publique</span>,
|
|
<span class="fl-font-sociale">sociale</span> et
|
|
<span class="fl-font-culturelle">culturelle</span>
|
|
qui œuvre sur logiciels libres.
|
|
</p>
|
|
|
|
<!-- Flèche vers le bas (theme://images/pictos/arrow-down.svg) -->
|
|
<svg viewBox="0 0 24 30" :style="{ width: '60px', height: '54px', marginTop: '90px' }" aria-hidden="true">
|
|
<g transform="rotate(90,11,12.999996)">
|
|
<path
|
|
d="m 16.681932,5.2684395 0.08629,0.091376 5.042819,6.0548205 v 0 l 0.06362,0.100098 v 0 l 0.06561,0.144066 v 0 l 0.0389,0.137168 v 0 l 0.01717,0.117449 v 0 L 22,12 v 0 l -0.0025,0.07061 v 0 l -0.01594,0.12126 v 0 l -0.02359,0.09573 -0.0317,0.08965 v 0 l -0.06326,0.128377 v 0 l -0.09484,0.134549 -5,6 c -0.353564,0.424277 -0.984128,0.481601 -1.408405,0.128037 C 14.968124,18.441846 14.889154,17.879455 15.15741,17.46116 L 15.231779,17.359816 18.864,12.999975 3,13 C 2.4477153,13 2,12.552285 2,12 2,11.487164 2.3860402,11.064493 2.8833789,11.006728 L 3,11 18.864,10.999975 15.231779,6.6401844 c -0.353564,-0.4242769 -0.29624,-1.0548416 0.128037,-1.4084057 0.39164,-0.3263668 0.959052,-0.3026278 1.322116,0.036661 z"
|
|
fill="currentColor"
|
|
fill-rule="nonzero"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Filet couleur pleine largeur en bas -->
|
|
<div class="absolute inset-x-0 bottom-0" :style="{ height: 'var(--fl-strip)', backgroundColor: strip }" />
|
|
</div>
|
|
</template>
|