feat(vitrine): proposition « Cahier pop » (néo-galet / fanzine)
- Syne + IBM Plex Mono, bordures épaisses, ombres décalées - Accueil type polaroid + stickers + bandeau sombre - Nav sticky, menu mobile, pied de page assorti - Pages intérieures dans cadre blanc contrasté Made-with: Cursor
This commit is contained in:
@@ -3,40 +3,26 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
|
||||
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
<meta name="keywords" content="{{ if .Keywords }}{{ delimit .Keywords ", " }}{{ else }}{{ .Site.Params.keywords }}{{ end }}">
|
||||
<meta name="author" content="{{ .Site.Params.author | default .Site.Title }}">
|
||||
|
||||
<!-- Prevent indexing of staging site -->
|
||||
{{ if eq .Site.BaseURL "https://staging.ptits-pas.fr/" }}
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
{{ end }}
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
|
||||
<meta property="og:url" content="{{ .Permalink }}">
|
||||
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
||||
<meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
<meta property="og:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
|
||||
<meta property="og:locale" content="fr_FR">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:url" content="{{ .Permalink }}">
|
||||
<meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
||||
<meta property="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
<meta property="twitter:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="{{ .Permalink }}">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
|
||||
<!-- JSON-LD structured data for Google -->
|
||||
<link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | relURL }}">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
@@ -57,16 +43,12 @@
|
||||
{{ end }}
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="{{ `/css/style.css` | relURL }}">
|
||||
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-65J8GVLCRH"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-65J8GVLCRH', {
|
||||
'anonymize_ip': true,
|
||||
'allow_google_signals': false,
|
||||
@@ -75,19 +57,31 @@
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
<body class="theme-cahier-pop">
|
||||
<a class="skip-link" href="#contenu-principal">Aller au contenu</a>
|
||||
<header class="cp-header">
|
||||
<div class="cp-header__inner">
|
||||
<a class="cp-logo" href="{{ "/" | relURL }}">P'titsPas</a>
|
||||
<nav class="cp-nav" id="cp-nav" aria-label="Navigation principale">
|
||||
<button type="button" class="cp-nav-toggle" id="cp-nav-toggle" aria-expanded="false" aria-controls="cp-nav-panel" aria-label="Ouvrir le menu">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="cp-nav-panel" id="cp-nav-panel">
|
||||
<ul class="cp-nav-list">
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<main id="contenu-principal" class="cp-main">
|
||||
{{ block "main" . }}{{ .Content }}{{ end }}
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
<script src="{{ `/js/site.js` | relURL }}" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
<div class="cp-page">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
{{ define "main" }}
|
||||
<article class="content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
{{ end }}
|
||||
<div class="cp-page">
|
||||
<article class="content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
{{ define "main" }}
|
||||
<div class="cp-home">
|
||||
<section class="cp-hero">
|
||||
<figure class="cp-polaroid">
|
||||
<img src="{{ (.Params.hero_image | default "/images/page_login_4.1.png") | relURL }}" alt="{{ .Params.hero_image_alt | default "Illustration P'titsPas" }}" width="900" height="560" fetchpriority="high">
|
||||
</figure>
|
||||
<div class="cp-hero-copy">
|
||||
<p class="cp-tagline">{{ .Params.hero_tagline | default "Service public numérique — petite enfance" }}</p>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</div>
|
||||
</section>
|
||||
<div class="cp-zine-grid">
|
||||
<div class="cp-panel cp-panel--mint">
|
||||
{{ with .Params.intro_md }}{{ . | markdownify }}{{ end }}
|
||||
</div>
|
||||
<div class="cp-panel">
|
||||
<div class="cp-stickers" aria-label="Engagements">
|
||||
{{ range .Params.ethics }}
|
||||
<div class="cp-sticker"><strong>{{ .title }}</strong>{{ .detail }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cp-band">
|
||||
{{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
|
||||
</div>
|
||||
<section class="cp-cta" aria-labelledby="cp-cta-title">
|
||||
<h2 id="cp-cta-title">{{ .Params.cta_title | default "Passer à l'action" }}</h2>
|
||||
<div>
|
||||
<a class="cp-btn" href="{{ "fonctionnalites" | relURL }}">Fonctionnalités</a>
|
||||
<a class="cp-btn" href="{{ "contact" | relURL }}">Demander une démo</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -1,11 +1,8 @@
|
||||
<footer style="background-color: #f8f9fa; padding: 20px 0; text-align: center; border-top: 1px solid #e7e7e7; margin-top: 40px;">
|
||||
<div class="container">
|
||||
<p>© {{ now.Year }} P'titsPas - Tous droits réservés.</p>
|
||||
<p>
|
||||
<a href="/mentions-legales/" style="margin-right: 15px; text-decoration: none; color: #007bff;">Mentions Légales</a>
|
||||
<a href="/politique-de-confidentialite/" style="margin-right: 15px; text-decoration: none; color: #007bff;">Politique de Confidentialité</a>
|
||||
<a href="/technique/" style="text-decoration: none; color: #007bff;">Données Techniques</a>
|
||||
</p>
|
||||
<!-- Vous pouvez ajouter ici d'autres informations ou liens si nécessaire -->
|
||||
</div>
|
||||
</footer>
|
||||
<footer class="cp-footer">
|
||||
<p>© {{ now.Year }} P'titsPas</p>
|
||||
<nav aria-label="Liens de pied de page">
|
||||
<a href="{{ "mentions-legales" | relURL }}">Mentions légales</a>
|
||||
<a href="{{ "politique-de-confidentialite" | relURL }}">Confidentialité</a>
|
||||
<a href="{{ "technique" | relURL }}">Données techniques</a>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user