Compare commits
7
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 cedric
|
09fef8f590
|
||
|
cedric
|
711244235f
|
||
|
cedric
|
a1e39b88bf
|
||
|
cedric
|
929cb46d4c
|
||
|
cedric
|
ffb2eedccb
|
||
|
cedric
|
58dd9297e0
|
||
|
cedric
|
37121763a9 |
@@ -1,3 +1,5 @@
|
||||
const cdn = require("./src/_data/cdn.json");
|
||||
|
||||
module.exports = function(eleventyConfig) {
|
||||
// Locale-aware content: `t` resolves to the content bundle for the page's locale (fr by default)
|
||||
eleventyConfig.addGlobalData("eleventyComputed", {
|
||||
@@ -5,6 +7,12 @@ module.exports = function(eleventyConfig) {
|
||||
t: (data) => data.i18n[data.locale || "fr"]
|
||||
});
|
||||
|
||||
// Serve local images through the BunnyCDN pull zone; leaves external URLs untouched
|
||||
eleventyConfig.addFilter("cdn", (path) => {
|
||||
if (typeof path !== "string" || !path.startsWith("/")) return path;
|
||||
return cdn.url + path;
|
||||
});
|
||||
|
||||
// Copy assets folders to output
|
||||
eleventyConfig.addPassthroughCopy("src/assets");
|
||||
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"url": "https://organisationka.b-cdn.net"
|
||||
}
|
||||
@@ -1,12 +1,18 @@
|
||||
[
|
||||
{ "text": "Solutions", "url": "#solutions" },
|
||||
{ "text": "Our projects", "url": "#projets" },
|
||||
{ "text": "DJANGOKAM", "url": "#djangokam" },
|
||||
{ "text": "Services", "url": "#hebergement" },
|
||||
{ "text": "Our work", "url": "#clients" },
|
||||
{ "text": "Our instances", "url": "#services-libres" },
|
||||
{ "text": "FAQ", "url": "#faq" },
|
||||
{ "text": "Donate", "url": "#dons" },
|
||||
{ "text": "Contact", "url": "#contact" },
|
||||
{ "text": "Solutions", "url": "/en/#solutions" },
|
||||
{ "text": "Our projects", "url": "/en/#projets" },
|
||||
{ "text": "DJANGOKAM", "url": "/en/#djangokam" },
|
||||
{ "text": "Services", "url": "/en/#hebergement" },
|
||||
{ "text": "Donate", "url": "/en/#dons" },
|
||||
{
|
||||
"text": "Resources",
|
||||
"children": [
|
||||
{ "text": "Our work", "url": "/en/#clients" },
|
||||
{ "text": "Our instances", "url": "/en/#services-libres" },
|
||||
{ "text": "FAQ", "url": "/en/#faq" },
|
||||
{ "text": "Press", "url": "/en/press/" },
|
||||
{ "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
|
||||
]
|
||||
},
|
||||
{ "text": "Contact", "url": "/en/#contact" }
|
||||
]
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"title": "Press",
|
||||
"title_accent": "& Media",
|
||||
"lede": "Press resources for DJANGOKAM, the first Caribbean AI artist, produced by ORGANISATION KA INTERNATIONALE (OKI). HD visuals and listening links, ready to use for newsrooms and radio programmers.",
|
||||
"facts_title": "The essentials",
|
||||
"facts": [
|
||||
{ "label": "Artist", "value": "DJANGOKAM, the first Caribbean AI artist, joined by NYYOKA in duets" },
|
||||
{ "label": "Producer", "value": "ORGANISATION KA INTERNATIONALE (OKI), a cultural association based in Basse-Terre, Guadeloupe" },
|
||||
{ "label": "Discography", "value": "12 releases available on every platform, listed on MusicBrainz" },
|
||||
{ "label": "Official videos", "value": "\"I Want You Girl\" and \"Ish Mwen KUTE\"" },
|
||||
{ "label": "Language", "value": "Sings in KA, a language known as \"Creole\", with lyrics and translations on PAWÒL-NU" }
|
||||
],
|
||||
"visuals_title": "HD visuals",
|
||||
"visuals_intro": "Free to use for editorial coverage of DJANGOKAM. Click a cover for a preview, or download the high-resolution PDF.",
|
||||
"visuals": [
|
||||
{ "image": "/assets/images/djangokam-she-told-me.webp", "caption": "\"She Told Me (Fanm-la di mwen)\" — DJANGOKAM x NYYOKA", "pdf": "DJANGOKAM_She_Told_Me_HD.pdf" },
|
||||
{ "image": "/assets/images/djangokam-i-want-you-girl.webp", "caption": "\"I Want You Girl\"", "pdf": "DJANGOKAM_I_Want_You_Girl_HD.pdf" },
|
||||
{ "image": "/assets/images/djangokam-ish-mwen-kute.jpg", "caption": "\"Ish Mwen KUTE\"", "pdf": "DJANGOKAM_Ish_Mwen_Kute_HD.pdf" }
|
||||
],
|
||||
"visual_pdf_label": "HD PDF",
|
||||
"visuals_pdf_label": "Download all 3 HD visuals (PDF)",
|
||||
"visuals_pdf_file": "DJANGOKAM_Visuels_HD.pdf",
|
||||
"links_title": "Listen & watch",
|
||||
"links": [
|
||||
{ "text": "Listen on PAWÒL-NU (lyrics & translations)", "url": "https://pawol.nu" },
|
||||
{ "text": "DJANGOKAM on every platform", "url": "https://djangokam.pawol.nu" },
|
||||
{ "text": "NYYOKA on every platform", "url": "https://nyyoka.pawol.nu" },
|
||||
{ "text": "Videos on GADE (PeerTube, sovereign hosting)", "url": "https://gade.o-k-i.net" }
|
||||
],
|
||||
"contact_title": "Press contact",
|
||||
"contact_text": "Localised press kit, additional visuals, broadcast WAV or interview requests: get in touch, we reply quickly.",
|
||||
"contact_email": "kontak@o-k-i.net"
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
"message_cle": "DJANGOKAM n'est pas simplement un artiste virtuel. Il est le premier projet musical porté par ORGANISATION KA INTERNATIONALE (OKI), une association culturelle guadeloupéenne qui explore les possibilités offertes par l'intelligence artificielle pour promouvoir les langues dites « créoles », les cultures et la création artistique Caribéennes. À travers ce projet, OKI démontre que les technologies émergentes peuvent être mises au service du patrimoine culturel plutôt que de s'y opposer.",
|
||||
"histoire": [
|
||||
"DJANGOKAM est né il y a 29 ans à Wanakaera - le nom que les Kalinas, premiers habitants de l'île, donnaient à ce qu'on appelle aujourd'hui la Martinique. Il porte le reggae, le zouk et le konpa de scène en scène, jusqu'à la K-pop qu'il chante en coréen. La langue de son cœur est le KA, celle qu'on appelle à tort « créole » ; son arme, la musique. Ses scènes préférées : Wanakaera et Karukera, l'île de son grand-père - la Guadeloupe.",
|
||||
"À ses côtés, NYYOKA, artiste IA Caribéenne du même collectif, mène le même combat depuis la mer - en solo ou en duo, comme sur le single « She Told Me (Fanm-la di mwen) »."
|
||||
"À ses côtés, NYYOKA, artiste IA Caribéenne du même collectif, mène le même combat - en solo ou en duo, comme sur le single « She Told Me (Fanm-la di mwen) »."
|
||||
],
|
||||
"duo": {
|
||||
"image": "/assets/images/djangokam-she-told-me.webp",
|
||||
|
||||
@@ -1,12 +1,18 @@
|
||||
[
|
||||
{ "text": "Solutions", "url": "#solutions" },
|
||||
{ "text": "Nos projets", "url": "#projets" },
|
||||
{ "text": "DJANGOKAM", "url": "#djangokam" },
|
||||
{ "text": "Services", "url": "#hebergement" },
|
||||
{ "text": "Réalisations", "url": "#clients" },
|
||||
{ "text": "Nos instances", "url": "#services-libres" },
|
||||
{ "text": "FAQ", "url": "#faq" },
|
||||
{ "text": "Dons", "url": "#dons" },
|
||||
{ "text": "Contact", "url": "#contact" },
|
||||
{ "text": "Solutions", "url": "/#solutions" },
|
||||
{ "text": "Nos projets", "url": "/#projets" },
|
||||
{ "text": "DJANGOKAM", "url": "/#djangokam" },
|
||||
{ "text": "Services", "url": "/#hebergement" },
|
||||
{ "text": "Dons", "url": "/#dons" },
|
||||
{
|
||||
"text": "Ressources",
|
||||
"children": [
|
||||
{ "text": "Réalisations", "url": "/#clients" },
|
||||
{ "text": "Nos instances", "url": "/#services-libres" },
|
||||
{ "text": "FAQ", "url": "/#faq" },
|
||||
{ "text": "Presse", "url": "/presse/" },
|
||||
{ "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
|
||||
]
|
||||
},
|
||||
{ "text": "Contact", "url": "/#contact" }
|
||||
]
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"title": "Presse",
|
||||
"title_accent": "& Médias",
|
||||
"lede": "Ressources presse pour DJANGOKAM, le premier artiste IA caribéen produit par ORGANISATION KA INTERNATIONALE (OKI). Visuels HD et liens d'écoute, prêts à l'emploi pour les rédactions et programmateurs radio.",
|
||||
"facts_title": "L'essentiel",
|
||||
"facts": [
|
||||
{ "label": "Artiste", "value": "DJANGOKAM, premier artiste IA caribéen, porté par NYYOKA en duo" },
|
||||
{ "label": "Producteur", "value": "ORGANISATION KA INTERNATIONALE (OKI), association culturelle basée à Basse-Terre, Guadeloupe" },
|
||||
{ "label": "Discographie", "value": "12 sorties disponibles sur toutes les plateformes, référencées sur MusicBrainz" },
|
||||
{ "label": "Clips officiels", "value": "\"I Want You Girl\" et \"Ish Mwen KUTE\"" },
|
||||
{ "label": "Langue", "value": "Chante en KA, langue dite « créole », avec paroles et traductions sur PAWÒL-NU" }
|
||||
],
|
||||
"visuals_title": "Visuels HD",
|
||||
"visuals_intro": "Libres de droits pour un usage rédactionnel autour de DJANGOKAM. Cliquez sur une pochette pour l'aperçu, ou téléchargez le PDF haute résolution.",
|
||||
"visuals": [
|
||||
{ "image": "/assets/images/djangokam-she-told-me.webp", "caption": "« She Told Me (Fanm-la di mwen) » — DJANGOKAM x NYYOKA", "pdf": "DJANGOKAM_She_Told_Me_HD.pdf" },
|
||||
{ "image": "/assets/images/djangokam-i-want-you-girl.webp", "caption": "« I Want You Girl »", "pdf": "DJANGOKAM_I_Want_You_Girl_HD.pdf" },
|
||||
{ "image": "/assets/images/djangokam-ish-mwen-kute.jpg", "caption": "« Ish Mwen KUTE »", "pdf": "DJANGOKAM_Ish_Mwen_Kute_HD.pdf" }
|
||||
],
|
||||
"visual_pdf_label": "PDF HD",
|
||||
"visuals_pdf_label": "Télécharger les 3 visuels HD (PDF)",
|
||||
"visuals_pdf_file": "DJANGOKAM_Visuels_HD.pdf",
|
||||
"links_title": "Écoute & visionnage",
|
||||
"links": [
|
||||
{ "text": "Écouter sur PAWÒL-NU (paroles & traductions)", "url": "https://pawol.nu" },
|
||||
{ "text": "DJANGOKAM sur toutes les plateformes", "url": "https://djangokam.pawol.nu" },
|
||||
{ "text": "NYYOKA sur toutes les plateformes", "url": "https://nyyoka.pawol.nu" },
|
||||
{ "text": "Vidéos sur GADE (PeerTube, hébergement souverain)", "url": "https://gade.o-k-i.net" }
|
||||
],
|
||||
"contact_title": "Contact presse",
|
||||
"contact_text": "Dossier de presse localisé, visuels complémentaires, WAV broadcast ou proposition d'interview : contactez-nous, nous répondons rapidement.",
|
||||
"contact_email": "kontak@o-k-i.net"
|
||||
}
|
||||
@@ -23,7 +23,7 @@
|
||||
<meta property="og:url" content="https://o-k-i.net{{ page.url or '/' }}">
|
||||
<meta property="og:title" content="{% if title %}{{ title }}{% else %}{{ t.site.name }} - {{ t.site.og_tagline }}{% endif %}">
|
||||
<meta property="og:description" content="{{ description or t.site.description }}">
|
||||
<meta property="og:image" content="https://o-k-i.net/assets/images/logo-512x512.png">
|
||||
<meta property="og:image" content="{{ '/assets/images/logo-512x512.png' | cdn }}">
|
||||
<meta property="og:image:width" content="512">
|
||||
<meta property="og:image:height" content="512">
|
||||
<meta property="og:image:alt" content="Logo {{ t.site.name }}">
|
||||
@@ -35,13 +35,13 @@
|
||||
<meta name="twitter:url" content="https://o-k-i.net{{ page.url or '/' }}">
|
||||
<meta name="twitter:title" content="{% if title %}{{ title }}{% else %}{{ t.site.name }} - {{ t.site.og_tagline }}{% endif %}">
|
||||
<meta name="twitter:description" content="{{ description or t.site.description }}">
|
||||
<meta name="twitter:image" content="https://o-k-i.net/assets/images/logo-512x512.png">
|
||||
<meta name="twitter:image" content="{{ '/assets/images/logo-512x512.png' | cdn }}">
|
||||
<meta name="twitter:image:alt" content="Logo {{ t.site.name }}">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="512x512" href="/assets/images/logo-512x512.png">
|
||||
<link rel="apple-touch-icon" href="/assets/images/logo-512x512.png">
|
||||
<link rel="icon" type="image/x-icon" href="{{ '/assets/images/favicon.ico' | cdn }}">
|
||||
<link rel="icon" type="image/png" sizes="512x512" href="{{ '/assets/images/logo-512x512.png' | cdn }}">
|
||||
<link rel="apple-touch-icon" href="{{ '/assets/images/logo-512x512.png' | cdn }}">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
@@ -59,7 +59,7 @@
|
||||
"name": "{{ t.site.name }}",
|
||||
"alternateName": "{{ t.site.shortName }}",
|
||||
"url": "https://o-k-i.net",
|
||||
"logo": "https://o-k-i.net/assets/images/logo-512x512.png",
|
||||
"logo": "{{ '/assets/images/logo-512x512.png' | cdn }}",
|
||||
"description": "{{ t.site.description }}",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<h2>{{ t.djangokam.titre }} <span class="accent-text">{{ t.djangokam.titreAccent }}</span></h2>
|
||||
<p class="section-subtitle">{{ t.djangokam.accroche }}</p>
|
||||
|
||||
<img src="/assets/images/djangokam-portrait.webp" alt="Portrait officiel de DJANGOKAM" class="djangokam-portrait" width="512" height="512" loading="lazy">
|
||||
<img src="{{ '/assets/images/djangokam-portrait.webp' | cdn }}" alt="Portrait officiel de DJANGOKAM" class="djangokam-portrait" width="512" height="512" loading="lazy">
|
||||
|
||||
<blockquote class="djangokam-highlight">
|
||||
{{ t.djangokam.message_cle }}
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
<figure class="djangokam-duo">
|
||||
<a href="{{ t.djangokam.duo.url }}" target="_blank" rel="noopener noreferrer">
|
||||
<img src="{{ t.djangokam.duo.image }}" alt="{{ t.djangokam.duo.alt }}" loading="lazy">
|
||||
<img src="{{ t.djangokam.duo.image | cdn }}" alt="{{ t.djangokam.duo.alt }}" loading="lazy">
|
||||
<figcaption>{{ t.djangokam.duo.legende }}</figcaption>
|
||||
</a>
|
||||
</figure>
|
||||
@@ -39,7 +39,7 @@
|
||||
{% for clip in t.djangokam.clips %}
|
||||
<figure class="djangokam-clip">
|
||||
<a href="{{ clip.url }}" target="_blank" rel="noopener noreferrer">
|
||||
<img src="{{ clip.image }}" alt="{{ clip.alt }}" loading="lazy">
|
||||
<img src="{{ clip.image | cdn }}" alt="{{ clip.alt }}" loading="lazy">
|
||||
<figcaption>{{ clip.titre }}</figcaption>
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
@@ -1,16 +1,33 @@
|
||||
<nav>
|
||||
<div class="nav-container">
|
||||
<a href="/" class="logo">
|
||||
<img src="/assets/images/logo-512x512.png" alt="{{ t.site.shortName }} Logo" class="logo-image">
|
||||
<img src="{{ '/assets/images/logo-512x512.png' | cdn }}" alt="{{ t.site.shortName }} Logo" class="logo-image">
|
||||
<span>{{ t.site.shortName }}</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
{% for item in t.navigation %}
|
||||
{% if item.children %}
|
||||
<li class="has-dropdown">
|
||||
<button type="button" class="nav-dropdown-trigger" aria-haspopup="true" aria-expanded="false">
|
||||
{{ item.text }} <span class="dropdown-caret">▾</span>
|
||||
</button>
|
||||
<ul class="nav-dropdown">
|
||||
{% for child in item.children %}
|
||||
<li>
|
||||
<a href="{{ child.url }}"{% if child.external %} target="_blank"{% endif %}>
|
||||
{{ child.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<a href="{{ item.url }}"{% if item.external %} target="_blank"{% endif %}>
|
||||
{{ item.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% if locale == 'en' %}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
{% for partner in t.partners.items %}
|
||||
<a href="{{ partner.url }}" target="_blank" rel="noopener noreferrer" class="partner-card">
|
||||
<div class="partner-logo-container">
|
||||
<img src="{{ partner.logo }}" alt="Logo {{ partner.name }}" class="partner-logo">
|
||||
<img src="{{ partner.logo | cdn }}" alt="Logo {{ partner.name }}" class="partner-logo">
|
||||
</div>
|
||||
<h3>{{ partner.name }}</h3>
|
||||
<p class="partner-description">{{ partner.description }}</p>
|
||||
|
||||
+257
-1
@@ -298,6 +298,72 @@ html.light-theme .theme-icon-light {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Nav dropdown ("Ressources") */
|
||||
.has-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-dropdown-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
color: var(--blanc-creme);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-dropdown-trigger:hover {
|
||||
color: var(--or-oki);
|
||||
}
|
||||
|
||||
.dropdown-caret {
|
||||
font-size: 0.7em;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 1rem;
|
||||
min-width: 200px;
|
||||
list-style: none;
|
||||
background: var(--noir-oki);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.4rem 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-6px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||||
}
|
||||
|
||||
.has-dropdown:hover .nav-dropdown,
|
||||
.has-dropdown.open .nav-dropdown,
|
||||
.nav-dropdown-trigger:focus-visible + .nav-dropdown {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.has-dropdown:hover .dropdown-caret,
|
||||
.has-dropdown.open .dropdown-caret {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.nav-dropdown a {
|
||||
display: block;
|
||||
padding: 0.55rem 1.1rem;
|
||||
white-space: nowrap;
|
||||
font-size: 0.9rem;
|
||||
color: var(--blanc-creme);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
padding: 9rem 2rem 5rem;
|
||||
@@ -316,7 +382,7 @@ html.light-theme .theme-icon-light {
|
||||
right: -5%;
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
background: url('/assets/images/logo-512x512.png') center / contain no-repeat;
|
||||
background: url('https://organisationka.b-cdn.net/assets/images/logo-512x512.png') center / contain no-repeat;
|
||||
opacity: 0.05;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1360,6 +1426,31 @@ input[type="number"]:focus {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-dropdown-trigger {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dropdown-caret {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: static;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
margin: 0.25rem 0 0.5rem 1rem;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-dropdown a {
|
||||
padding: 0.4rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
@@ -1908,3 +1999,168 @@ input[type="number"]:focus {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* Press page */
|
||||
.press-hero {
|
||||
padding: 9rem 2rem 3rem;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.press-hero h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.press-lede {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.6;
|
||||
opacity: 0.85;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.press-facts {
|
||||
padding: 4rem 2rem;
|
||||
background: var(--noir-profond);
|
||||
}
|
||||
|
||||
.press-facts h2,
|
||||
.press-visuals h2,
|
||||
.press-links h2,
|
||||
.press-contact h2 {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.press-facts-list {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.press-fact {
|
||||
display: grid;
|
||||
grid-template-columns: 160px 1fr;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.press-fact-label {
|
||||
color: var(--or-oki);
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.press-visuals {
|
||||
padding: 4rem 2rem;
|
||||
background: var(--noir-profond);
|
||||
}
|
||||
|
||||
.press-visuals-intro {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto 2.5rem;
|
||||
opacity: 0.85;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.press-visual-grid {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.press-visual a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.press-visual img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.press-visual-caption {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.75;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.press-visual-pdf-link {
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
font-family: var(--font-body);
|
||||
text-decoration: none;
|
||||
color: var(--or-oki);
|
||||
border-bottom: 1px solid currentColor;
|
||||
}
|
||||
|
||||
.press-visuals-pdf {
|
||||
text-align: center;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.press-links {
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.press-links-list {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.press-links-list a {
|
||||
display: block;
|
||||
color: var(--blanc-creme);
|
||||
text-decoration: none;
|
||||
padding: 0.9rem 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid var(--line);
|
||||
border-left: 4px solid var(--vert-oki);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-body);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.press-links-list a:hover {
|
||||
border-color: var(--vert-oki);
|
||||
}
|
||||
|
||||
.press-contact {
|
||||
padding: 4rem 2rem 6rem;
|
||||
text-align: center;
|
||||
background: var(--noir-profond);
|
||||
}
|
||||
|
||||
.press-contact-text {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 1.5rem;
|
||||
opacity: 0.85;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.press-fact {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
+37
-4
@@ -69,12 +69,14 @@
|
||||
themeToggle?.addEventListener('click', toggleTheme);
|
||||
})();
|
||||
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
// Smooth scrolling (uniquement pour les ancres de la page courante)
|
||||
document.querySelectorAll('a[href*="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
const url = new URL(this.href, window.location.href);
|
||||
if (url.pathname !== window.location.pathname || !url.hash) return;
|
||||
const target = document.querySelector(url.hash);
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
@@ -130,6 +132,37 @@ document.addEventListener('click', (e) => {
|
||||
}
|
||||
});
|
||||
|
||||
// Close mobile menu after clicking a nav link
|
||||
navLinks?.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
if (menuOpen) {
|
||||
menuOpen = false;
|
||||
navLinks.style.display = 'none';
|
||||
menuToggle.children[0].style.transform = '';
|
||||
menuToggle.children[1].style.opacity = '1';
|
||||
menuToggle.children[2].style.transform = '';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Nav dropdown ("Ressources") toggle for touch/keyboard
|
||||
document.querySelectorAll('.nav-dropdown-trigger').forEach(trigger => {
|
||||
trigger.addEventListener('click', () => {
|
||||
const item = trigger.closest('.has-dropdown');
|
||||
const isOpen = item.classList.toggle('open');
|
||||
trigger.setAttribute('aria-expanded', isOpen);
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
document.querySelectorAll('.has-dropdown.open').forEach(item => {
|
||||
if (!item.contains(e.target)) {
|
||||
item.classList.remove('open');
|
||||
item.querySelector('.nav-dropdown-trigger')?.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Scroll animations
|
||||
const observerOptions = {
|
||||
threshold: 0.15,
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,64 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
title: Press
|
||||
description: Press resources for DJANGOKAM, the first Caribbean AI artist produced by ORGANISATION KA INTERNATIONALE (OKI) — HD visuals and listening links.
|
||||
---
|
||||
|
||||
<section class="press-hero">
|
||||
<h1>{{ t.press.title }} <span class="accent-text">{{ t.press.title_accent }}</span></h1>
|
||||
<p class="press-lede">{{ t.press.lede }}</p>
|
||||
</section>
|
||||
|
||||
<section class="press-facts">
|
||||
<div class="section-container">
|
||||
<h2>{{ t.press.facts_title }}</h2>
|
||||
<div class="press-facts-list">
|
||||
{% for fact in t.press.facts %}
|
||||
<div class="press-fact">
|
||||
<span class="press-fact-label">{{ fact.label }}</span>
|
||||
<span>{{ fact.value }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="press-visuals">
|
||||
<div class="section-container">
|
||||
<h2>{{ t.press.visuals_title }}</h2>
|
||||
<p class="press-visuals-intro">{{ t.press.visuals_intro }}</p>
|
||||
<div class="press-visual-grid">
|
||||
{% for visual in t.press.visuals %}
|
||||
<div class="press-visual">
|
||||
<a href="{{ visual.image | cdn }}" target="_blank" rel="noopener noreferrer">
|
||||
<img src="{{ visual.image | cdn }}" alt="{{ visual.caption }}" loading="lazy">
|
||||
<span class="press-visual-caption">{{ visual.caption }}</span>
|
||||
</a>
|
||||
<a href="{{ ('/assets/press/' + visual.pdf) | cdn }}" class="press-visual-pdf-link">{{ t.press.visual_pdf_label }}</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="press-visuals-pdf">
|
||||
<a href="{{ ('/assets/press/' + t.press.visuals_pdf_file) | cdn }}" class="btn btn-primary">{{ t.press.visuals_pdf_label }} →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="press-links">
|
||||
<div class="section-container">
|
||||
<h2>{{ t.press.links_title }}</h2>
|
||||
<div class="press-links-list">
|
||||
{% for link in t.press.links %}
|
||||
<a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.text }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="press-contact">
|
||||
<div class="section-container">
|
||||
<h2>{{ t.press.contact_title }}</h2>
|
||||
<p class="press-contact-text">{{ t.press.contact_text }}</p>
|
||||
<a href="mailto:{{ t.press.contact_email }}" class="btn btn-primary">{{ t.press.contact_email }}</a>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
title: Presse
|
||||
description: Ressources presse pour DJANGOKAM, premier artiste IA caribéen produit par ORGANISATION KA INTERNATIONALE (OKI) — visuels HD et liens d'écoute.
|
||||
---
|
||||
|
||||
<section class="press-hero">
|
||||
<h1>{{ t.press.title }} <span class="accent-text">{{ t.press.title_accent }}</span></h1>
|
||||
<p class="press-lede">{{ t.press.lede }}</p>
|
||||
</section>
|
||||
|
||||
<section class="press-facts">
|
||||
<div class="section-container">
|
||||
<h2>{{ t.press.facts_title }}</h2>
|
||||
<div class="press-facts-list">
|
||||
{% for fact in t.press.facts %}
|
||||
<div class="press-fact">
|
||||
<span class="press-fact-label">{{ fact.label }}</span>
|
||||
<span>{{ fact.value }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="press-visuals">
|
||||
<div class="section-container">
|
||||
<h2>{{ t.press.visuals_title }}</h2>
|
||||
<p class="press-visuals-intro">{{ t.press.visuals_intro }}</p>
|
||||
<div class="press-visual-grid">
|
||||
{% for visual in t.press.visuals %}
|
||||
<div class="press-visual">
|
||||
<a href="{{ visual.image | cdn }}" target="_blank" rel="noopener noreferrer">
|
||||
<img src="{{ visual.image | cdn }}" alt="{{ visual.caption }}" loading="lazy">
|
||||
<span class="press-visual-caption">{{ visual.caption }}</span>
|
||||
</a>
|
||||
<a href="{{ ('/assets/press/' + visual.pdf) | cdn }}" class="press-visual-pdf-link">{{ t.press.visual_pdf_label }}</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="press-visuals-pdf">
|
||||
<a href="{{ ('/assets/press/' + t.press.visuals_pdf_file) | cdn }}" class="btn btn-primary">{{ t.press.visuals_pdf_label }} →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="press-links">
|
||||
<div class="section-container">
|
||||
<h2>{{ t.press.links_title }}</h2>
|
||||
<div class="press-links-list">
|
||||
{% for link in t.press.links %}
|
||||
<a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.text }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="press-contact">
|
||||
<div class="section-container">
|
||||
<h2>{{ t.press.contact_title }}</h2>
|
||||
<p class="press-contact-text">{{ t.press.contact_text }}</p>
|
||||
<a href="mailto:{{ t.press.contact_email }}" class="btn btn-primary">{{ t.press.contact_email }}</a>
|
||||
</div>
|
||||
</section>
|
||||
@@ -12,6 +12,18 @@
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://o-k-i.net/presse/</loc>
|
||||
<lastmod>2026-07-06</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.5</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://o-k-i.net/en/press/</loc>
|
||||
<lastmod>2026-07-06</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.5</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://o-k-i.net/mentions-legales/</loc>
|
||||
<lastmod>2025-01-05</lastmod>
|
||||
|
||||
Reference in New Issue
Block a user