Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 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"
|
||||
}
|
||||
@@ -3,10 +3,16 @@
|
||||
{ "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": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
|
||||
{
|
||||
"text": "Resources",
|
||||
"children": [
|
||||
{ "text": "Our work", "url": "#clients" },
|
||||
{ "text": "Our instances", "url": "#services-libres" },
|
||||
{ "text": "FAQ", "url": "#faq" },
|
||||
{ "text": "Press", "url": "/en/press/" },
|
||||
{ "text": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
|
||||
]
|
||||
},
|
||||
{ "text": "Contact", "url": "#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"
|
||||
}
|
||||
@@ -3,10 +3,16 @@
|
||||
{ "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": "Labola", "url": "https://labola.o-k-i.net/", "external": true }
|
||||
{
|
||||
"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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -130,6 +130,24 @@ document.addEventListener('click', (e) => {
|
||||
}
|
||||
});
|
||||
|
||||
// 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