diff --git a/build.js b/build.js
index 19beddf2bd67301f484c6a85775d5b7128b57db1..56588f3776a5ddbbf2c35fe8570f08d50d9da20a 100644
--- a/build.js
+++ b/build.js
@@ -185,7 +185,7 @@ function createPages(rootdir, destdir) {
page.write(getPageHtml(p, pageMeta));
if (fs.existsSync(`${fPath}/subpages`)) {
- createPages(`${fPath}/subpages`, targetDirPath)
+ createPages(`${fPath}/subpages`, targetDirPath);
}
}
@@ -211,44 +211,3 @@ function createPages(rootdir, destdir) {
}
createPages(`${curDir}/src/pages`, `${curDir}/public`);
-
-// const pages = fs.readdirSync(`${curDir}/src/pages`);
-
-// for (const p of pages) {
-// const fPath = `${curDir}/src/pages/${p}`;
-// const targetDirPath = `${curDir}/public/${p}`;
-
-// if (!fs.existsSync(targetDirPath)) {
-// fs.mkdirSync(targetDirPath);
-// }
-
-// const b = browserify();
-
-// b.add(fPath)
-// .bundle()
-// .pipe(fs.createWriteStream(`${targetDirPath}/${p}.js`));
-
-// const page = fs.createWriteStream(`${targetDirPath}/index.html`);
-// const pageMeta = JSON.parse(fs.readFileSync(`${fPath}/meta.json`, "utf-8"));
-// page.write(getPageHtml(p, pageMeta));
-// }
-
-// // If pages have been deleted in source, remove them in output directory too.
-// for (const dir of fs.readdirSync(`${curDir}/public`).filter(f => {
-// if (build_conf.protected_dirs.includes(f)) return false;
-// const stats = fs.statSync(`${curDir}/public/${f}`);
-// return stats.isDirectory();
-// })) {
-// if (!pages.includes(dir)) {
-// const dPath = `${curDir}/public/${dir}`;
-// try {
-// const nestedFiles = fs.readdirSync(dPath);
-// for (const nf of nestedFiles) {
-// fs.unlinkSync(`${dPath}/${nf}`);
-// }
-// fs.rmdirSync(dPath);
-// } catch (error) {
-// console.error(error);
-// }
-// }
-// }
diff --git a/data/nginx/app.conf b/data/nginx/app.conf
index e26671f42b15eae7d5e9c600563c57dbf4510d77..166ca0b4fe377ca5ffd74f5e96fe8584fd08c2a9 100644
--- a/data/nginx/app.conf
+++ b/data/nginx/app.conf
@@ -8,19 +8,19 @@ server {
root /var/www/certbot;
}
- location / {
- return 301 https://$host$request_uri;
- }
+ # location / {
+ # return 301 https://$host$request_uri;
+ # }
}
-server {
- server_name kuadrado-software.fr www.kuadrado-software.fr;
- listen 443 ssl;
- root /usr/share/nginx/html;
- index index.html index.htm;
- server_tokens off;
- ssl_certificate /etc/letsencrypt/live/kuadrado-software.fr/fullchain.pem;
- ssl_certificate_key /etc/letsencrypt/live/kuadrado-software.fr/privkey.pem;
- include /etc/letsencrypt/options-ssl-nginx.conf;
- ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
-}
\ No newline at end of file
+# server {
+# server_name kuadrado-software.fr www.kuadrado-software.fr;
+# listen 443 ssl;
+# root /usr/share/nginx/html;
+# index index.html index.htm;
+# server_tokens off;
+# ssl_certificate /etc/letsencrypt/live/kuadrado-software.fr/fullchain.pem;
+# ssl_certificate_key /etc/letsencrypt/live/kuadrado-software.fr/privkey.pem;
+# include /etc/letsencrypt/options-ssl-nginx.conf;
+# ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
+# }
\ No newline at end of file
diff --git a/public/assets/images/learning_theme_2d.png b/public/assets/images/learning_theme_2d.png
index 2877b0f54c612958690a5f7db96f1159755ea892..3419306cbd8556f14322d48520f1a6db31e2f1a0 100755
Binary files a/public/assets/images/learning_theme_2d.png and b/public/assets/images/learning_theme_2d.png differ
diff --git a/public/assets/images/learning_theme_coding.png b/public/assets/images/learning_theme_coding.png
index b2e86cb98c2b7553a2e021483a5097249aa92010..82efabc56b127ef43be662d012064b1c68786afb 100755
Binary files a/public/assets/images/learning_theme_coding.png and b/public/assets/images/learning_theme_coding.png differ
diff --git a/public/assets/images/learning_theme_math.png b/public/assets/images/learning_theme_math.png
index 4db8753f5879146b36d62c2e1d51098a255aa657..f57bbfcc7e79ac4fd7a756bbdd6fa5ee2f5882be 100755
Binary files a/public/assets/images/learning_theme_math.png and b/public/assets/images/learning_theme_math.png differ
diff --git a/public/assets/images/learning_theme_pc.png b/public/assets/images/learning_theme_pc.png
index 4a9f92981c7b457485736d04590719a5d8546c63..f0f7c7d4db71de8b67fcf0d989e2c8dc42252321 100755
Binary files a/public/assets/images/learning_theme_pc.png and b/public/assets/images/learning_theme_pc.png differ
diff --git a/public/education/education.js b/public/education/education.js
index 870d75b0c988bdd20d22b031194aaefe28de7a37..e7c82f11ee3f6c747359b20741612546cbe6fbce 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -121,113 +121,81 @@ module.exports = WebPage;
},{}],5:[function(require,module,exports){
"use strict";
-const { images_url } = require("../../../../constants");
+const { images_url } = require("../../../constants");
+const WebPage = require("../../lib/web-page");
-const GAMEDEV_THEMES = [
- {
- title: "Dessin et création 2D",
- image: "learning_theme_2d.png",
- details: [
- "Création de décors et de personnages",
- "Dessin sur ordinateur, pixel art, vectoriel",
- "Animations 2D",
- ],
- },
- {
- title: "Musique et sons",
- image: "learning_theme_sound.png",
- details: ["Logiciels de son et synthétiseurs", "Composition", "Prise de son", "Mixage"],
- },
- {
- title: "Écriture",
- image: "learning_theme_write.png",
- details: [
- "Écrire une histoire, construire une narration",
- "Imaginer des mondes et des personnages",
- ],
- },
- {
- title: "Conception",
- image: "learning_theme_conception.png",
- details: [
- "Concevoir les différents éléments qui composent le jeu",
- "Développer les mécanismes de gameplay",
- ],
- },
+const EDU_THEMES = [
+ // {
+ // title: "Création de jeux vidéo",
+ // description: "Conception, graphisme et animation, programmation, je vous accompagne dans la découverte des techniques pour créer un jeu vidéo de A à Z",
+ // image: "learning_theme_conception.png",
+ // pageUrl: "gamedev",
+ // },
{
title: "Programmation",
+ description: `<b>Franchissez le mur du code !</b><br />
+ Apprenez à programmer avec différents langages (Python, Javascript, C ...), pour du web, du logiciel, du jeu vidéo ou autre.`,
image: "learning_theme_coding.png",
- details: [
- "Apprendre pas à pas à coder avec différents langages de programmation",
- "Découvrir les bases du web en créant des mini-jeux en lignes",
- ],
+ // pageUrl: "coding",
},
{
- title: "Mathématiques",
- image: "learning_theme_math.png",
- comment:
- "<em>Créer un jeu vidéo c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</em>",
- details: [
- "Algorithmie",
- "Logique (algèbre booléen)",
- "Géométrie",
- "Trigonométrie",
- "Algèbre linéaire",
- "Repères 2D / 3D",
- "Vecteurs 2D / 3D",
- "Newton",
- "...",
- ],
+ title: "Dessin numérique et animation 2D",
+ description: `Apprenez à utiliser des logiciels libres de création graphique 2D et d'animation.<br />
+ Créez des personnages et des décors, menez votre projet de dessin animé, d'illustration ou de jeu vidéo.`,
+ image: "learning_theme_2d.png",
+ // pageUrl: "2d",
},
{
- title: "Travail d'équipe",
- image: "learning_theme_team.png",
- comment: `
- <em>
- Faire son jeu tout seul c'est bien mais ça peut être long !
- <br />Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.
- </em>`,
- details: ["Gestion de projet", "Méthodologie", "Communication"],
+ title: "Maths et physiques",
+ description: "Abordez les notions fondamentales de façon décontractée pour le plaisir de comprendre.",
+ image: "learning_theme_math.png",
+ // pageUrl: "math",
},
+ // {
+ // title: "Musique et sons électroniques",
+ // description: "Découvrez des logiciels libres de composition musicales, de synthèse sonore et de prise de son.",
+ // image: "learning_theme_sound.png",
+ // pageUrl: "sound",
+ // },
{
- title: "Logiciels libres, GNU/Linux",
- image: "learning_theme_linux.png",
- comment:
- "<em>Nous utilisons essentiellement des logiciels libres sur Linux.<br />C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</em>",
- details: ["Ubuntu / Debian", "GIMP", "LMMS", "Audacity", "Pencil2d", "..."],
- },
+ title: "Aide informatique générale",
+ description: "Perdu avec votre ordinateur ou votre smartphone, les logiciels, internet ? Je vous aide pas à pas à comprendre les fondamentaux et à utiliser sereinement la technologie.",
+ image: "learning_theme_pc.png",
+ // pageUrl: "popularization"
+ }
];
-class GameStudioClub {
+class EducationPage extends WebPage {
render() {
return {
- tag: "section",
+ tag: "div",
+ id: "education-page",
typeof: "EducationalOrganization",
contents: [
{
tag: "div",
- class: "title-banner game-banner",
- id: "game-studio-club", // anchor id
- contents: [{ tag: "h2", contents: "Game Studio Club", property: "name" }],
- },
- {
- tag: "div",
- class: "special-announcement",
+ class: "page-header logo-left",
contents: [
{
tag: "div",
- class: "page-contents-center",
+ class: "page-contents-center grid-wrapper",
contents: [
+ {
+ tag: "div",
+ class: "logo",
+ contents: [
+ {
+ tag: "img",
+ alt: "image brain",
+ src: `${images_url}brain.svg`,
+ },
+ ],
+ },
+ { tag: "h1", contents: "Pédagogie" },
{
tag: "p",
- contents: `
- <green>Mise à jour en préparation : </green><br />
- Le programme pédagogique va être amené à changer très prochainement, la durée des séances sera raccourcie à 1h30,
- les matières abordées dans le de développement de jeu seront proposées séparément (animation 2D, programmation,
- sons électroniques, maths / physique, etc.), et l'accès au nombre de séances hebdomadaire ne sera plus limité quelle
- que soit la durée de l'abonnement.<br />
- Vous pouvez d'ores et déjà tenir compte de ces changements pour une inscription prochaine ou une réinscription.
- `,
+ contents: `Animation d'ateliers informatiques accessibles à tous.
+ Programmation, graphisme 2D, jeux vidéo, vulgarisation, accompagnement de projet, etc.`,
},
],
},
@@ -235,604 +203,203 @@ class GameStudioClub {
},
{
tag: "div",
- class: "section-contents page-contents-center",
+ class: "title-banner",
+ },
+ {
+ tag: "section",
+ class: "bg-dark",
contents: [
{
tag: "div",
- class: "full-row",
+ class: "page-contents-center",
contents: [
{
- tag: "h3",
- class: "big",
- contents:
- "Apprendre à créer un <blue>jeu vidéo</blue> de A à Z",
- property: "headline",
- },
- {
- tag: "strong",
- contents:
- "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
- },
- {
- tag: "p",
- contents:
- "<em><b><blue>Aucun prérequis nécessaire</blue></b>. Pas besoin d'être fort en maths ou en informatique, le but est d'apprendre et se détendre !</em>",
+ tag: "ul",
+ class: "edu-themes",
+ contents: EDU_THEMES.map(theme => {
+ return {
+ tag: "li",
+ class: "edu-theme",
+ contents: [
+ { tag: "img", width: 250, height: 140, class: "pixelated", src: `${images_url}${theme.image}` },
+ { tag: "h3", contents: theme.title },
+ { tag: "p", contents: theme.description },
+ ]
+ }
+ })
},
- ],
+ ]
},
+ ]
+ },
+ {
+ tag: "section",
+ class: "practical-info",
+ contents: [
{
tag: "div",
- class: "practical-infos",
+ class: "page-contents-center",
contents: [
{
tag: "div",
- class: "info-item",
- property: "about",
+ class: "info-block",
contents: [
- { tag: "strong", contents: "Ça se passe où ?" },
+ { tag: "h3", class: "info-title", contents: "Pour qui ?" },
{
- tag: "span",
-
- contents:
- "Dans les locaux,<br/><em>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</em>",
- },
- ],
- },
- {
- tag: "div",
- class: "info-item",
- property: "about",
- contents: [
- { tag: "strong", contents: "Pour qui ?" },
- {
- tag: "span",
- contents: `Tout le monde à partir de <b><blue>12 ans</blue></b>.
- <br><br><b><blue>Ados</blue></b> et <b><blue>adultes</blue></b>.
- `,
- },
- ],
+ tag: "p",
+ class: "info-body",
+ contents: `Les ateliers sont accessibles aux adultes comme aux enfants, plutôt à partir de 12 ans.<br/>
+ Les séances ont lieu en groupes mixtes.
+ `
+ }
+ ]
},
{
tag: "div",
- class: "info-item",
- property: "about",
+ class: "info-block",
contents: [
+ { tag: "h3", class: "info-title", contents: "Où ça ?" },
{
- tag: "strong",
- contents: "Contact",
- },
- {
- tag: "a",
- href: "tel:+33475780872",
- contents: "04 75 78 08 72",
- property: "telephone",
- },
- {
- tag: "a",
- href: "mailto:contact@kuadrado-software.fr",
- contents: "contact@kuadrado-software.fr",
- property: "email",
- },
- ],
- },
- ],
- },
- {
- tag: "div",
- class: "list-wrapper",
- property: "hasPart",
- contents: [
- {
- tag: "ul",
- class: "learning-themes",
- contents: GAMEDEV_THEMES.map(li => {
- return {
- tag: "li",
- class: "learning-theme",
- typeof: "ListItem",
- contents: [
- {
- tag: "strong",
- class: "title",
- contents: li.title,
- property: "name",
- },
- {
- tag: "img",
- alt: `learning theme image ${li.title}`,
- src: `${images_url}${li.image}`,
- property: "image",
- },
- {
- tag: "div",
- class: "details",
- property: "description",
- contents: [
- li.comment && {
- tag: "div",
- class: "comment",
- contents: li.comment,
- },
- {
- tag: "ul",
- contents: li.details.map(d => {
- return {
- tag: "li",
- contents: d,
- };
- }),
- },
- ],
- },
- ],
- };
- }),
+ tag: "p",
+ class: "info-body",
+ contents: "Dans mon local professionnel : <br /><blue>32 rue Simon Vialet, passage du Cheminou, 07240 Vernoux en Vivarais.</blue>"
+ }
+ ]
},
- ],
- },
- {
- tag: "div",
- class: "infos-inscriptions full-row",
- property: "about",
- contents: [
{
tag: "div",
- class: "groups",
+ class: "info-block",
contents: [
- {
- tag: "h3",
- contents: "Groupes",
- },
+ { tag: "h3", class: "info-title", contents: "Quel matériel ?" },
{
tag: "p",
- contents:
- "Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
- },
- {
- tag: "div",
- class: "table-wrapper",
- contents: [
- {
- tag: "table",
- contents: [
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Mardi" },
- {
- tag: "td",
- contents: "16h - 19h",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Mercredi" },
- {
- tag: "td",
- contents: "14h - 17h",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Jeudi" },
- {
- tag: "td",
- contents: "16h - 19h",
- },
- ],
- },
- ],
- },
- ],
- },
- {
- tag: "p",
- contents: `
- Les séances sont accessibles sur des plages horaires de 3 heures,
- mais les participants peuvent arriver et repartir à l'heure qu'ils souhaitent,
- ils ne sont pas obligés de rester les 3 heures.
- <br><br>
- Le club est ouvert à toute personne à partir de <b><blue>12 ans</blue></b>,
- adolescent ou adulte, et les groupes sont aussi <b><blue>intergénérationnels</blue></b> que possible.
- `,
- },
- ],
+ class: "info-body",
+ contents: `Le matériel informatique est fourni sur place (ordinateurs et tablettes graphique)
+ mais il est possible d'amener le sien.
+ <br />Il est recommandé d'apporter au moins une clé USB pour faire ses sauvegardes.`
+ }
+ ]
},
{
tag: "div",
- class: "pricing",
+ class: "info-block",
contents: [
+ { tag: "h3", class: "info-title", contents: "Quand ?" },
{
- tag: "h3",
- contents: "Inscription, fonctionnement et tarifs",
- },
- {
- tag: "p",
- contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.<br /><br />
- Le matériel informatique (pc portable, souris, tablette graphique) est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
- `,
- },
- {
- tag: "div",
- class: "table-wrapper",
+ tag: "ul",
+ class: "info-body tabled",
contents: [
{
- tag: "table",
+ tag: "li",
contents: [
- {
- tag: "tr",
- contents: [
- {
- tag: "td",
- contents: "Abonnement 1 mois",
- },
- {
- tag: "td",
- contents: "(4 séances)",
- },
- {
- tag: "td",
- contents:
- "<b><blue>60€</blue></b>",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- {
- tag: "td",
- contents:
- "Abonnement 1 trimestre",
- },
- {
- tag: "td",
- contents: "(12 séances)",
- },
- {
- tag: "td",
- contents:
- "<b><blue>160€</blue></b>",
- },
- ],
- },
- ],
+ { tag: "span", contents: "Mardi" },
+ { tag: "span", contents: "16h - 18h" },
+ ]
},
- ],
- },
- {
- tag: "div",
- class: "documents",
- contents: [
{
- tag: "div",
- contents: "Télécharger la fiche d'inscription",
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Mercredi" },
+ { tag: "span", contents: "14h - 16h" },
+ ]
},
{
- tag: "div",
- class: "links",
+ tag: "li",
contents: [
- {
- tag: "a",
- class: "download-link",
- download: "fiche-inscription",
- href: "/assets/documents/fiche-inscription.pdf",
- contents: "PDF",
- },
- {
- tag: "a",
- class: "download-link",
- download: "fiche-inscription",
- href: "/assets/documents/fiche-inscription.odt",
- contents: "Libre Office",
- },
+ { tag: "span", contents: "Jeudi" },
+ { tag: "span", contents: "16h - 18h" },
]
+ },
+ {
+ tag: "li",
+ class: "fullwidth",
+ contents: "<em><blue>Ouvert de Septembre à Juin, sauf vacances scolaires ou fermetures exceptionnelles</blue></em>"
}
-
- ],
+ ]
},
- ],
+ ]
},
- ],
- },
- {
- tag: "div",
- class: "teacher",
- contents: [
-
{
tag: "div",
- class: "teacher-card",
+ class: "info-block",
contents: [
+ { tag: "h3", class: "info-title", contents: "Combien ça coûte ?" },
{
- tag: "h3",
- contents: "Animé par",
- },
- {
- tag: "div",
- class: "pic",
+ tag: "ul",
+ class: "info-body tabled",
contents: [
{
- tag: "img",
- src:
- "/assets/images/pijar_profile_lt_square.png",
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Inscription au mois" },
+ { tag: "span", contents: "50€" },
+ ]
},
- ],
- },
- {
- tag: "div",
- class: "infos-text",
- contents: [
{
- tag: "h4",
- contents: "Pierre Jarriges"
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Inscription à la séance" },
+ { tag: "span", contents: "15€" },
+ ]
},
{
- tag: "p",
- contents: "Développeur jeu vidéo, auteur BD, compositeur."
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Cours particuliers" },
+ { tag: "span", contents: "30€/h, sur place ou en visio. Horaires à définir." },
+ ]
}
]
}
- ],
- },
- ],
- },
- ],
- },
- ],
- };
- }
-}
-
-module.exports = GameStudioClub;
-
-},{"../../../../constants":2}],6:[function(require,module,exports){
-"use strict";
-
-const { images_url } = require("../../../../constants");
-
-const VULGARISATION_THEMES = [
- {
- title: "Qu'est-ce qui se passe dans mon ordinateur ?",
- image: "learning_theme_pc.png",
- details: [
- "Répondre aux questions sur l'informatique de tous les jours",
- "L'organisation des fichiers",
- "Le navigateur web et les logiciels usuels",
- "Le système d'exploitation",
- ],
- },
- {
- title: "GNU/Linux, le monde du libre",
- image: "learning_theme_linux.png",
- details: [
- "Apprendre à installer Linux",
- "Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
- ],
- },
- {
- title: "Comment fonctionne le web ?",
- image: "learning_theme_web.png",
- details: [
- "De quoi est fait le réseau internet ?",
- "Comment fonctionnent les différents services que nous utilisons ?",
- "Qu'est-ce qu'un cloud ?",
- ],
- },
- {
- title: "Le langages des machines",
- image: "learning_theme_coding.png",
- details: [
- "Qu'est-ce qu'un langage de programmation",
- "À quoi ça sert ?",
- "Les métiers du développement informatique",
- ],
- },
- {
- title: "Les coulisses du jeu vidéo",
- image: "learning_theme_2d.png",
- details: [
- "De quoi sont fait les jeux vidéos ?",
- "Quels sont les outils ?",
- "Les métiers du jeu vidéo",
- "Du pixelart à l'industrie lourde",
- "Qu'est-ce qu'un moteur de jeu ?",
- ],
- },
-];
-
-class Popularization {
- render() {
- return {
- tag: "section",
- typeof: "EducationalOrganization",
- contents: [
- {
- tag: "div",
- class: "title-banner popu-banner",
- id: "popularization", // anchor id
- contents: [
- { tag: "h2", contents: "Vulgarisation numérique", property: "name" },
- ],
- },
- {
- tag: "div",
- class: "section-contents page-contents-center",
- contents: [
- {
- tag: "div",
- class: "full-row",
- contents: [
- {
- tag: "h3",
- class: "big",
- contents: "<blue>S'approprier</blue> l'informatique",
- property: "headline",
+ ]
},
- {
- tag: "strong",
- contents:
- "Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
- property: "alternativeHeadline",
- },
- {
- tag: "p",
- contents:
- "<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
- property: "description",
- },
- ],
- },
- {
- tag: "div",
- class: "practical-infos",
- contents: [
{
tag: "div",
- class: "info-item",
+ class: "info-block",
contents: [
+ { tag: "h3", class: "info-title", contents: "Pour s'inscrire ou en savoir plus" },
{
- tag: "span",
- contents:
- "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un <b><blue>devis gratuit</blue></b>.",
- },
- ],
- },
- {
- tag: "div",
- class: "info-item",
- contents: [
- {
- tag: "strong",
- contents: "Contact",
- },
- {
- tag: "a",
- href: "tel:+33475780872",
- contents: "04 75 78 08 72",
- property: "telephone",
- },
- {
- tag: "a",
- href: "mailto:contact@kuadrado-software.fr",
- contents: "contact@kuadrado-software.fr",
- property: "email",
- },
- ],
- },
- ],
- },
- {
- tag: "div",
- class: "list-wrapper",
- contents: [
- {
- tag: "ul",
- class: "learning-themes",
- property: "hasPart",
- contents: VULGARISATION_THEMES.map(li => {
- return {
- tag: "li",
- typeof: "ListItem",
- class: "learning-theme " + li.class,
+ tag: "ul",
+ class: "info-body",
contents: [
{
- tag: "strong",
- class: "title",
- contents: li.title,
- property: "name",
- },
- {
- tag: "img",
- alt: `learning theme image ${li.title}`,
- src: `${images_url}${li.image}`,
- property: "image",
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Me contacter" },
+ {
+ tag: "a",
+ href: "mailto:contact@kuadrado-software.fr",
+ contents: "contact@kuadrado-software.fr",
+ }
+ ]
},
{
- tag: "div",
- class: "details",
- property: "description",
+ tag: "li",
contents: [
+ { tag: "span", contents: "" },
{
- tag: "div",
- class: "comment",
- contents: li.comment,
- },
- {
- tag: "ul",
- contents: li.details.map(d => {
- return {
- tag: "li",
- contents: d,
- };
- }),
+ tag: "a",
+ href: "tel:+33475780872",
+ contents: "04 75 78 08 72",
+ property: "telephone",
},
- ],
+ ]
},
- ],
- };
- }),
- },
- ],
- },
- ],
- },
- ],
- };
- }
-}
-
-module.exports = Popularization;
-
-},{"../../../../constants":2}],7:[function(require,module,exports){
-"use strict";
-
-const { images_url } = require("../../../constants");
-const WebPage = require("../../lib/web-page");
-const GameStudioClub = require("./components/game-studio-club");
-const Popularization = require("./components/popularization");
-
-class EducationPage extends WebPage {
+ {
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "ou passer directement me voir au local !" }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
- render() {
- return {
- tag: "div",
- id: "education-page",
- contents: [
- {
- tag: "div",
- class: "page-header logo-left",
- contents: [
- {
- tag: "div",
- class: "page-contents-center grid-wrapper",
- contents: [
- {
- tag: "div",
- class: "logo",
- contents: [
- {
- tag: "img",
- alt: "image brain",
- src: `${images_url}brain.svg`,
- },
- ],
- },
- { tag: "h1", contents: "Pédagogie" },
- {
- tag: "p",
- contents: `Animations autour de la création de jeux vidéos, vulgarisation numérique.`,
- },
- ],
- },
- ],
},
- new GameStudioClub().render(),
- new Popularization().render(),
],
};
}
@@ -840,15 +407,13 @@ class EducationPage extends WebPage {
module.exports = EducationPage;
-},{"../../../constants":2,"../../lib/web-page":4,"./components/game-studio-club":5,"./components/popularization":6}],8:[function(require,module,exports){
-"use strict";
-
+},{"../../../constants":2,"../../lib/web-page":4}],6:[function(require,module,exports){
"use strict";
const runPage = require("../../run-page");
const EducationPage = require("./education");
runPage(EducationPage);
-},{"../../run-page":9,"./education":7}],9:[function(require,module,exports){
+},{"../../run-page":7,"./education":5}],7:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -860,23 +425,21 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":3,"./template/template":11}],10:[function(require,module,exports){
+},{"./lib/object-html-renderer":3,"./template/template":9}],8:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
- ["/games/", "Jeux"],
- [
- "/education/",
- "Pédagogie",
- [
- // submenu
- ["/education/#game-studio-club", "Game Studio Club"],
- ["/education/#popularization", "Vulgarisation numérique"],
- ],
- ],
- ["/software-development/", "Software"],
+ { url: "/games/", text: "Jeux" },
+ {
+ url: "/education/",
+ text: "Pédagogie",
+ // submenu: [
+ // { url: "/gamedev", text: "Création de jeux vidéo" },
+ // ]
+ },
+ { url: "/software-development/", text: "Software" }
];
class NavBar {
@@ -926,13 +489,14 @@ class NavBar {
};
}
- renderMenu(menuItemsArray, isSubmenu = false) {
+ renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
- contents: menuItemsArray.map(link => {
- const [href, text, submenu] = link;
+ contents: menuItemsArray.map(item => {
+ const { url, text, submenu } = item;
+ const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
@@ -942,7 +506,7 @@ class NavBar {
href,
contents: text,
},
- ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
+ ].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
@@ -971,7 +535,7 @@ class NavBar {
module.exports = NavBar;
-},{"../../../constants":2}],11:[function(require,module,exports){
+},{"../../../constants":2}],9:[function(require,module,exports){
"use strict";
const { in_construction } = require("../../config");
@@ -1028,13 +592,12 @@ class Template {
},
{
tag: "span",
- contents:
- "<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
+ contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
- { tag: "strong", contents: "<blue>Nous contacter : </blue>" },
+ { tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
@@ -1082,4 +645,4 @@ class Template {
module.exports = Template;
-},{"../../config":1,"../../constants":2,"./components/navbar":10}]},{},[8]);
+},{"../../config":1,"../../constants":2,"./components/navbar":8}]},{},[6]);
diff --git a/public/education/gamedev/gamedev.js b/public/education/gamedev/gamedev.js
new file mode 100644
index 0000000000000000000000000000000000000000..3f699d870dd172ac3d42210ceec7bd42b6147d04
--- /dev/null
+++ b/public/education/gamedev/gamedev.js
@@ -0,0 +1,555 @@
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+function getServerUrl() {
+ return `${location.origin}${
+ location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : ""
+ }`;
+}
+
+module.exports = {
+ getServerUrl,
+ website_title: "Kuadrado website template",
+ build: {
+ protected_dirs: ["assets", "style", "articles"],
+ default_meta_keys: ["title", "description", "image", "open_graph", "json_ld"],
+ },
+};
+
+},{}],2:[function(require,module,exports){
+const { getServerUrl } = require("./config");
+
+module.exports = {
+ images_url: `${getServerUrl()}assets/images/`,
+ articles_url: `${getServerUrl()}articles/`,
+};
+
+},{"./config":1}],3:[function(require,module,exports){
+"use strict";
+
+module.exports = {
+ setRenderCycleRoot(renderCycleRoot) {
+ this.renderCycleRoot = renderCycleRoot;
+ },
+ objectToHtml: function objectToHtml(obj) {
+ const { tag } = obj;
+
+ const node = document.createElement(tag);
+ const excludeKeys = ["tag", "contents", "style_rules", "state"];
+
+ Object.keys(obj)
+ .filter(attr => !excludeKeys.includes(attr))
+ .forEach(attr => {
+ if (attr === "class") {
+ node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
+ } else {
+ node[attr] = obj[attr];
+ }
+ });
+ if (obj.contents && typeof obj.contents === "string") {
+ node.innerHTML = obj.contents;
+ } else {
+ obj.contents &&
+ obj.contents.length > 0 &&
+ obj.contents.forEach(el => {
+ switch (typeof el) {
+ case "string":
+ node.innerHTML = el;
+ break;
+ case "object":
+ node.appendChild(objectToHtml(el));
+ break;
+ }
+ });
+ }
+
+ if (obj.style_rules) {
+ Object.keys(obj.style_rules).forEach(rule => {
+ node.style[rule] = obj.style_rules[rule];
+ });
+ }
+
+ return node;
+ },
+ renderCycle: function () {
+ this.subRender(this.renderCycleRoot.render(), document.getElementsByTagName("main")[0], {
+ mode: "replace",
+ });
+ },
+ subRender(object, htmlNode, options = { mode: "append" }) {
+ const insert = this.objectToHtml(object);
+ switch (options.mode) {
+ case "append":
+ htmlNode.appendChild(insert);
+ break;
+ case "override":
+ htmlNode.innerHTML = "";
+ htmlNode.appendChild(insert);
+ break;
+ case "insert-before":
+ htmlNode.insertBefore(insert, htmlNode.childNodes[options.insertIndex]);
+ break;
+ case "adjacent":
+ /**
+ * options.insertLocation must be one of:
+ *
+ * afterbegin
+ * afterend
+ * beforebegin
+ * beforeend
+ */
+ htmlNode.insertAdjacentHTML(options.insertLocation, insert);
+ break;
+ case "replace":
+ htmlNode.parentNode.replaceChild(insert, htmlNode);
+ break;
+ case "remove":
+ htmlNode.remove();
+ break;
+ }
+ },
+};
+
+},{}],4:[function(require,module,exports){
+"use strict";
+
+class WebPage {
+ constructor(args) {
+ Object.assign(this, args);
+ }
+}
+
+module.exports = WebPage;
+},{}],5:[function(require,module,exports){
+"use strict";
+
+const { images_url } = require("../../../../../constants");
+const WebPage = require("../../../../lib/web-page");
+
+const GAMEDEV_THEMES = [
+ {
+ title: "Dessin et création 2D",
+ image: "learning_theme_2d.png",
+ details: [
+ "Création de décors et de personnages",
+ "Dessin sur ordinateur, pixel art, vectoriel",
+ "Animations 2D",
+ ],
+ },
+ {
+ title: "Musique et sons",
+ image: "learning_theme_sound.png",
+ details: ["Logiciels de son et synthétiseurs", "Composition", "Prise de son", "Mixage"],
+ },
+ {
+ title: "Écriture",
+ image: "learning_theme_write.png",
+ details: [
+ "Écrire une histoire, construire une narration",
+ "Imaginer des mondes et des personnages",
+ ],
+ },
+ {
+ title: "Conception",
+ image: "learning_theme_conception.png",
+ details: [
+ "Concevoir les différents éléments qui composent le jeu",
+ "Développer les mécanismes de gameplay",
+ ],
+ },
+ {
+ title: "Programmation",
+ image: "learning_theme_coding.png",
+ details: [
+ "Apprendre pas à pas à coder avec différents langages de programmation",
+ "Découvrir les bases du web en créant des mini-jeux en lignes",
+ ],
+ },
+ {
+ title: "Mathématiques",
+ image: "learning_theme_math.png",
+ comment:
+ "<em>Créer un jeu vidéo c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</em>",
+ details: [
+ "Algorithmie",
+ "Logique (algèbre booléen)",
+ "Géométrie",
+ "Trigonométrie",
+ "Algèbre linéaire",
+ "Repères 2D / 3D",
+ "Vecteurs 2D / 3D",
+ "Newton",
+ "...",
+ ],
+ },
+ {
+ title: "Travail d'équipe",
+ image: "learning_theme_team.png",
+ comment: `
+ <em>
+ Faire son jeu tout seul c'est bien mais ça peut être long !
+ <br />Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.
+ </em>`,
+ details: ["Gestion de projet", "Méthodologie", "Communication"],
+ },
+ {
+ title: "Logiciels libres, GNU/Linux",
+ image: "learning_theme_linux.png",
+ comment:
+ "<em>Nous utilisons essentiellement des logiciels libres sur Linux.<br />C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</em>",
+ details: ["Ubuntu / Debian", "GIMP", "LMMS", "Audacity", "Pencil2d", "..."],
+ },
+];
+
+class GameStudioClub {
+ render() {
+ return {
+ tag: "section",
+ typeof: "EducationalOrganization",
+ contents: [
+ {
+ tag: "div",
+ class: "title-banner game-banner",
+ contents: [{ tag: "h2", contents: "Game Studio Club", property: "name" }],
+ },
+ {
+ tag: "div",
+ class: "section-contents page-contents-center",
+ contents: [
+ {
+ tag: "div",
+ class: "full-row",
+ contents: [
+ {
+ tag: "h3",
+ class: "big",
+ contents:
+ "Apprendre à créer un <blue>jeu vidéo</blue> de A à Z",
+ property: "headline",
+ },
+ {
+ tag: "strong",
+ contents:
+ "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
+ },
+ {
+ tag: "p",
+ contents:
+ "<em><b><blue>Aucun prérequis nécessaire</blue></b>. Pas besoin d'être fort en maths ou en informatique, le but est d'apprendre et se détendre !</em>",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "list-wrapper",
+ property: "hasPart",
+ contents: [
+ {
+ tag: "ul",
+ class: "learning-themes",
+ contents: GAMEDEV_THEMES.map(li => {
+ return {
+ tag: "li",
+ class: "learning-theme",
+ typeof: "ListItem",
+ contents: [
+ {
+ tag: "strong",
+ class: "title",
+ contents: li.title,
+ property: "name",
+ },
+ {
+ tag: "img",
+ alt: `learning theme image ${li.title}`,
+ src: `${images_url}${li.image}`,
+ property: "image",
+ },
+ {
+ tag: "div",
+ class: "details",
+ property: "description",
+ contents: [
+ li.comment && {
+ tag: "div",
+ class: "comment",
+ contents: li.comment,
+ },
+ {
+ tag: "ul",
+ contents: li.details.map(d => {
+ return {
+ tag: "li",
+ contents: d,
+ };
+ }),
+ },
+ ],
+ },
+ ],
+ };
+ }),
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+
+class GamedevPage extends WebPage {
+
+ render() {
+ return {
+ tag: "div",
+ id: "game-studio-club-page",
+ contents: [
+ new GameStudioClub().render(),
+ ],
+ };
+ }
+}
+
+module.exports = GamedevPage;
+
+},{"../../../../../constants":2,"../../../../lib/web-page":4}],6:[function(require,module,exports){
+"use strict";
+
+const runPage = require("../../../../run-page");
+const GamedevPage = require("./gamedev-page");
+runPage(GamedevPage);
+
+},{"../../../../run-page":7,"./gamedev-page":5}],7:[function(require,module,exports){
+"use strict";
+
+const objectHtmlRenderer = require("./lib/object-html-renderer");
+const Template = require("./template/template");
+
+module.exports = function runPage(PageComponent) {
+ const template = new Template({ page: new PageComponent() });
+ objectHtmlRenderer.setRenderCycleRoot(template);
+ objectHtmlRenderer.renderCycle();
+};
+
+},{"./lib/object-html-renderer":3,"./template/template":9}],8:[function(require,module,exports){
+"use strict";
+
+const { images_url } = require("../../../constants");
+
+const NAV_MENU_ITEMS = [
+ { url: "/games/", text: "Jeux" },
+ {
+ url: "/education/",
+ text: "Pédagogie",
+ // submenu: [
+ // { url: "/gamedev", text: "Création de jeux vidéo" },
+ // ]
+ },
+ { url: "/software-development/", text: "Software" }
+];
+
+class NavBar {
+ constructor() {
+ this.initEventHandlers();
+ }
+
+ handleBurgerClick() {
+ document.getElementById("nav-menu-list").classList.toggle("responsive-show");
+ }
+
+ initEventHandlers() {
+ window.addEventListener("click", event => {
+ if (
+ event.target.id !== "nav-menu-list" &&
+ !event.target.classList.contains("burger") &&
+ !event.target.parentNode.classList.contains("burger")
+ ) {
+ document.getElementById("nav-menu-list").classList.remove("responsive-show");
+ }
+ });
+ }
+
+ renderHome() {
+ return {
+ tag: "div",
+ class: "home",
+ contents: [
+ {
+ tag: "a",
+ href: "/",
+ contents: [
+ {
+ tag: "img",
+ alt: "Logo Kuadrado",
+ src: `${images_url}logo_kuadrado.svg`,
+ },
+ {
+ tag: "img",
+ alt: "Kuadrado Software",
+ class: "logo-text",
+ src: `${images_url}logo_kuadrado_txt.svg`,
+ },
+ ],
+ },
+ ],
+ };
+ }
+
+ renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
+ return {
+ tag: "ul",
+ id: "nav-menu-list",
+ class: isSubmenu ? "submenu" : "",
+ contents: menuItemsArray.map(item => {
+ const { url, text, submenu } = item;
+ const href = `${parentUrl}${url}`;
+ return {
+ tag: "li",
+ class: !isSubmenu && window.location.pathname === href ? "active" : "",
+ contents: [
+ {
+ tag: "a",
+ href,
+ contents: text,
+ },
+ ].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
+ };
+ }),
+ };
+ }
+
+ renderResponsiveBurger() {
+ return {
+ tag: "div",
+ class: "burger",
+ onclick: this.handleBurgerClick.bind(this),
+ contents: [{ tag: "span", contents: "···" }],
+ };
+ }
+
+ render() {
+ return {
+ tag: "nav",
+ contents: [
+ this.renderHome(),
+ this.renderResponsiveBurger(),
+ this.renderMenu(NAV_MENU_ITEMS),
+ ],
+ };
+ }
+}
+
+module.exports = NavBar;
+
+},{"../../../constants":2}],9:[function(require,module,exports){
+"use strict";
+
+const { in_construction } = require("../../config");
+const { images_url } = require("../../constants");
+const NavBar = require("./components/navbar");
+
+class Template {
+ constructor(props) {
+ this.props = props;
+ }
+ render() {
+ return {
+ tag: "main",
+ contents: [
+ {
+ tag: "header",
+ contents: [new NavBar().render()],
+ },
+ in_construction && {
+ tag: "section",
+ class: "warning-banner",
+ contents: [
+ {
+ tag: "strong",
+ class: "page-contents-center",
+ contents: "Site en construction ...",
+ },
+ ],
+ },
+ {
+ tag: "section",
+ id: "page-container",
+ contents: [this.props.page.render()],
+ },
+ {
+ tag: "footer",
+ contents: [
+ {
+ tag: "div",
+ class: "logo",
+ contents: [
+ {
+ tag: "img",
+ alt: `logo Kuadrado`,
+ src: `${images_url}logo_kuadrado.svg`,
+ },
+ {
+ tag: "img",
+ class: "text-logo",
+ alt: "Kuadrado Software",
+ src: `${images_url}logo_kuadrado_txt.svg`,
+ },
+ ],
+ },
+ {
+ tag: "span",
+ contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
+ },
+ {
+ tag: "div",
+ contents: [
+ { tag: "strong", contents: "<blue>Contact : </blue>" },
+ {
+ tag: "a",
+ href: "mailto:contact@kuadrado-software.fr",
+ contents: "contact@kuadrado-software.fr",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "social",
+ contents: [
+ {
+ tag: "strong",
+ contents: "<blue>Sur les réseaux : </blue>",
+ },
+ {
+ tag: "a",
+ href: "https://www.linkedin.com/company/kuadrado-software",
+ target: "_blank",
+ contents: "in",
+ title: "Linkedin",
+ },
+ {
+ tag: "a",
+ href: "https://twitter.com/KuadradoSoft",
+ target: "_blank",
+ contents: "t",
+ title: "Twitter",
+ style_rules: { fontFamily: "serif" },
+ },
+ ],
+ },
+ {
+ tag: "span",
+ contents: `Copyright © ${new Date()
+ .getFullYear()} Kuadrado Software |
+ Toutes les images du site ont été réalisées par mes soins et peuvent être réutilisées pour un usage personnel.`,
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+module.exports = Template;
+
+},{"../../config":1,"../../constants":2,"./components/navbar":8}]},{},[6]);
diff --git a/public/education/gamedev/index.html b/public/education/gamedev/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..4ae9e1f17b52a02f5586c12f4ec9737f5032c061
--- /dev/null
+++ b/public/education/gamedev/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="fr" prefix="og: https://ogp.me/ns#">
+ <head>
+ <meta charset="utf-8" />
+ <title>Kuadrado Software | Game Studio Club</title>
+ <meta name="description" content="Apprendre à créer un jeu vidéo de A à Z"/>
+ <meta name="author" content="Kuadrado Software" />
+ <meta name="image" content="https://kuadrado-software.fr/assets/images/brain.png"/>
+
+ <!-- Open Graph Protocol meta data -->
+ <meta property="og:title" content="Kuadrado Software | Game Studio Club"/>
+ <meta property="og:description" content="Apprendre à créer un jeu vidéo de A à Z"/>
+ <meta property="og:type" content="website" />
+ <meta property="og:url" content="https://kuadrado-software.fr/gamedev"/>
+ <meta property="og:image" content="https://kuadrado-software.fr/assets/images/brain.png"/>
+ <meta property="twitter:image" content="https://kuadrado-software.fr/assets/images/brain.png"/>
+ <meta property="og:locale" content="fr_FR"/>
+ <meta property="og:site_name" content="Kuadrado Software" />
+
+ <!-- English translation not ready yet -->
+ <!-- <meta property="og:locale:alternate" content="en_GB" /> -->
+
+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+ <link href="/style/style.css" rel="stylesheet" />
+ <script type="application/ld+json">{"@context":"https://schema.org","type":"WebPage","description":"Apprendre à créer un jeu vidéo de A à Z","image":["https://kuadrado-software.fr/assets/images/brain.svg","https://kuadrado-software.fr/assets/images/brain.png","https://kuadrado-software.fr/assets/images/game_studio_banner.png","https://kuadrado-software.fr/assets/images/popularization_banner.png"],"keywords":"Apprendre informatique jeu vidéo, gamedev, code","name":"Kuadrado Software - Game Studio Club","url":"https://kuadrado-software.fr/education/game-studio/club"}</script>
+ </head>
+ <!-- The vocab attribute defines the standard vocabulary used for RDFa standard.
+ The DOM may contain properties such as "typeof" and "property" accordinly to the schema.org vocabulary -->
+ <body vocab="https://schema.org/">
+ <!-- The H1 tag will be never seen but it's necessary for SEO -->
+ <main><h1 style="visibility: hidden">Kuadrado Software | Game Studio Club</h1></main>
+ </body>
+ <script type="text/javascript" src="./gamedev.js"></script>
+</html>
diff --git a/public/games/games.js b/public/games/games.js
index 7932baaf00c1140c444bb5a3f9fa415ceaf9d7a2..38cc7a6ff80170e7bd76b965b6b3cdb60f81e26a 100644
--- a/public/games/games.js
+++ b/public/games/games.js
@@ -554,17 +554,15 @@ module.exports = function runPage(PageComponent) {
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
- ["/games/", "Jeux"],
- [
- "/education/",
- "Pédagogie",
- [
- // submenu
- ["/education/#game-studio-club", "Game Studio Club"],
- ["/education/#popularization", "Vulgarisation numérique"],
- ],
- ],
- ["/software-development/", "Software"],
+ { url: "/games/", text: "Jeux" },
+ {
+ url: "/education/",
+ text: "Pédagogie",
+ // submenu: [
+ // { url: "/gamedev", text: "Création de jeux vidéo" },
+ // ]
+ },
+ { url: "/software-development/", text: "Software" }
];
class NavBar {
@@ -614,13 +612,14 @@ class NavBar {
};
}
- renderMenu(menuItemsArray, isSubmenu = false) {
+ renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
- contents: menuItemsArray.map(link => {
- const [href, text, submenu] = link;
+ contents: menuItemsArray.map(item => {
+ const { url, text, submenu } = item;
+ const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
@@ -630,7 +629,7 @@ class NavBar {
href,
contents: text,
},
- ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
+ ].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
@@ -716,13 +715,12 @@ class Template {
},
{
tag: "span",
- contents:
- "<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
+ contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
- { tag: "strong", contents: "<blue>Nous contacter : </blue>" },
+ { tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
diff --git a/public/main.js b/public/main.js
index 6199d7f8eb0ab3846598f21476bcc35cb4db143b..bc1ea8afe67521a179fc02334ea323c9ca04377a 100644
--- a/public/main.js
+++ b/public/main.js
@@ -766,17 +766,15 @@ module.exports = function runPage(PageComponent) {
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
- ["/games/", "Jeux"],
- [
- "/education/",
- "Pédagogie",
- [
- // submenu
- ["/education/#game-studio-club", "Game Studio Club"],
- ["/education/#popularization", "Vulgarisation numérique"],
- ],
- ],
- ["/software-development/", "Software"],
+ { url: "/games/", text: "Jeux" },
+ {
+ url: "/education/",
+ text: "Pédagogie",
+ // submenu: [
+ // { url: "/gamedev", text: "Création de jeux vidéo" },
+ // ]
+ },
+ { url: "/software-development/", text: "Software" }
];
class NavBar {
@@ -826,13 +824,14 @@ class NavBar {
};
}
- renderMenu(menuItemsArray, isSubmenu = false) {
+ renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
- contents: menuItemsArray.map(link => {
- const [href, text, submenu] = link;
+ contents: menuItemsArray.map(item => {
+ const { url, text, submenu } = item;
+ const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
@@ -842,7 +841,7 @@ class NavBar {
href,
contents: text,
},
- ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
+ ].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
@@ -928,13 +927,12 @@ class Template {
},
{
tag: "span",
- contents:
- "<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
+ contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
- { tag: "strong", contents: "<blue>Nous contacter : </blue>" },
+ { tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js
index dcc038d5f8ea143e470ed45daadcb5e947509ded..19b47a496e15fcb7a1ff0f31096be70195ee9678 100644
--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -595,17 +595,15 @@ module.exports = function runPage(PageComponent) {
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
- ["/games/", "Jeux"],
- [
- "/education/",
- "Pédagogie",
- [
- // submenu
- ["/education/#game-studio-club", "Game Studio Club"],
- ["/education/#popularization", "Vulgarisation numérique"],
- ],
- ],
- ["/software-development/", "Software"],
+ { url: "/games/", text: "Jeux" },
+ {
+ url: "/education/",
+ text: "Pédagogie",
+ // submenu: [
+ // { url: "/gamedev", text: "Création de jeux vidéo" },
+ // ]
+ },
+ { url: "/software-development/", text: "Software" }
];
class NavBar {
@@ -655,13 +653,14 @@ class NavBar {
};
}
- renderMenu(menuItemsArray, isSubmenu = false) {
+ renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
- contents: menuItemsArray.map(link => {
- const [href, text, submenu] = link;
+ contents: menuItemsArray.map(item => {
+ const { url, text, submenu } = item;
+ const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
@@ -671,7 +670,7 @@ class NavBar {
href,
contents: text,
},
- ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
+ ].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
@@ -757,13 +756,12 @@ class Template {
},
{
tag: "span",
- contents:
- "<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
+ contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
- { tag: "strong", contents: "<blue>Nous contacter : </blue>" },
+ { tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
diff --git a/public/style/pages/education/education.css b/public/style/pages/education/education.css
index b56ef64aa42e98deae0a0ce968b48c6fce8fba2a..8c81e7e0e4cb2971d212ade9a40b6d07803ebd27 100644
--- a/public/style/pages/education/education.css
+++ b/public/style/pages/education/education.css
@@ -1,9 +1,9 @@
/* Error: Undefined variable.
* ,
- * 30 | background-color: $yellow_2;
+ * 25 | background-color: $yellow_2;
* | ^^^^^^^^^
* '
- * src/pages/education/education.scss 30:27 root stylesheet */
+ * src/pages/education/education.scss 25:27 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
@@ -13,5 +13,5 @@ body::before {
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
- content: "Error: Undefined variable.\a \2577 \a 30 \2502 background-color: $yellow_2;\a \2502 ^^^^^^^^^\a \2575 \a src/pages/education/education.scss 30:27 root stylesheet";
+ content: "Error: Undefined variable.\a \2577 \a 25 \2502 background-color: $yellow_2;\a \2502 ^^^^^^^^^\a \2575 \a src/pages/education/education.scss 25:27 root stylesheet";
}
diff --git a/public/style/pages/education/subpages/game-studio-club/game-studio-club.css b/public/style/pages/education/subpages/game-studio-club/game-studio-club.css
new file mode 100644
index 0000000000000000000000000000000000000000..90586b2992a72e02cfcbff01b2d27cbad98e4e32
--- /dev/null
+++ b/public/style/pages/education/subpages/game-studio-club/game-studio-club.css
@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=game-studio-club.css.map */
diff --git a/public/style/pages/games/games.css b/public/style/pages/games/games.css
index 9eb419b995bbc31b81cfe83535a1fdd0d0022897..e86516d63c998ee9dfcce27ad674fcee98d6b858 100644
--- a/public/style/pages/games/games.css
+++ b/public/style/pages/games/games.css
@@ -1,9 +1,9 @@
/* Error: Undefined variable.
* ,
- * 14 | color: $light_2;
+ * 15 | color: $light_2;
* | ^^^^^^^^
* '
- * src/pages/games/games.scss 14:28 root stylesheet */
+ * src/pages/games/games.scss 15:28 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
@@ -13,5 +13,5 @@ body::before {
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
- content: "Error: Undefined variable.\a \2577 \a 14 \2502 color: $light_2;\a \2502 ^^^^^^^^\a \2575 \a src/pages/games/games.scss 14:28 root stylesheet";
+ content: "Error: Undefined variable.\a \2577 \a 15 \2502 color: $light_2;\a \2502 ^^^^^^^^\a \2575 \a src/pages/games/games.scss 15:28 root stylesheet";
}
diff --git a/public/style/style.css b/public/style/style.css
index 4632a54da3640dcaf6d5c565669e5271da7e2a71..abc4eaea95f7cd775060e00351dab1466dc2650b 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -36,6 +36,10 @@ body .bg-blue {
background-color: #4baabb;
color: white;
}
+body .bg-dark {
+ background-color: #3c4144;
+ color: #aabbc8;
+}
body #seo-title {
visibility: hidden;
}
@@ -802,16 +806,11 @@ main #page-container #education-page .title-banner {
flex-direction: column;
height: 20vw;
min-height: 250px;
+ background-image: url("/assets/images/popularization_banner.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
-main #page-container #education-page .title-banner.game-banner {
- background-image: url("/assets/images/game_studio_banner.png");
-}
-main #page-container #education-page .title-banner.popu-banner {
- background-image: url("/assets/images/popularization_banner.png");
-}
main #page-container #education-page .title-banner h2 {
color: white;
font-size: 2.5em;
@@ -835,288 +834,126 @@ main #page-container #education-page .special-announcement .page-contents-center
margin: 0;
padding: 40px 0;
}
-main #page-container #education-page .section-contents {
- padding: 20px 40px 60px;
+main #page-container #education-page .edu-themes {
display: grid;
- grid-template-columns: auto 1fr;
- gap: 20px;
- height: auto;
-}
-main #page-container #education-page .section-contents .full-row {
- grid-column: 1/span 2;
-}
-main #page-container #education-page .section-contents .practical-infos {
- grid-column: 2;
- grid-row: 2;
- display: flex;
- flex-direction: column;
- gap: 40px;
- background-image: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
-}
-main #page-container #education-page .section-contents .practical-infos .info-item {
- display: flex;
- flex-direction: column;
- background-color: white;
- padding: 20px;
-}
-main #page-container #education-page .section-contents .practical-infos .info-item strong {
- margin-bottom: 10px;
- white-space: nowrap;
- color: #6b7880;
-}
-main #page-container #education-page .section-contents .practical-infos .info-item span,
-main #page-container #education-page .section-contents .practical-infos .info-item a {
- font-size: 14px;
+ grid-template-columns: 1fr 1fr;
+ gap: 50px;
+ font-family: monospace;
+ padding: 70px 0;
}
-main #page-container #education-page .section-contents .list-wrapper {
- grid-column: 1;
- grid-row: 2;
+main #page-container #education-page .edu-themes .edu-theme {
+ display: grid;
+ grid-template-columns: auto 1fr;
}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
- display: flex;
- gap: 20px 30px;
- flex-wrap: wrap;
+main #page-container #education-page .edu-themes .edu-theme * {
+ border-style: dashed;
+ border-color: #00ff00;
+ border-width: 0 0 0 0;
}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
- position: relative;
- border: solid #d4d9dd;
- border-width: 0 2px 2px 0;
+main #page-container #education-page .edu-themes .edu-theme h3 {
+ color: #00ff00;
+ grid-row: 1;
+ margin: 0;
+ padding: 0 10px;
display: flex;
- flex-direction: column;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .title {
- color: #6b7880;
- display: block;
- position: absolute;
- background-color: #fffa;
- padding: 3px 10px;
- width: 100%;
+ align-items: center;
+ border-width: 0 0 0 1px;
}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme img {
+main #page-container #education-page .edu-themes .edu-theme img {
width: 100%;
- height: auto;
- image-rendering: pixelated;
- image-rendering: -moz-crisp-edges;
- image-rendering: crisp-edges;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
- background-color: #fffe;
- position: absolute;
- top: 25px;
- left: 25px;
- width: 300px;
- height: auto;
- max-height: 0;
- visibility: hidden;
- z-index: 1;
- transition: max-height 0.6s;
- padding: 20px;
- border: solid #d4d9dd;
- border-width: 0 1px 1px 0;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- gap: 10px;
+ grid-row: 1/span 2;
+ border-width: 1px 0 1px 1px;
}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details .comment {
- font-style: italic;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details .comment * {
- color: #6b7880;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul {
- list-style-type: disc;
- font-size: 14px;
- margin-left: 10px;
+main #page-container #education-page .edu-themes .edu-theme p {
+ text-align: justify;
+ color: #72e3f0;
+ grid-row: 2;
+ margin: 0;
+ padding: 10px 30px 0 10px;
+ border-width: 1px 1px 1px 0;
}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul li {
- color: #6b7880;
+main #page-container #education-page .edu-themes .edu-theme p * {
+ color: #72e3f0;
}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme:hover .details {
- max-height: 1000px;
- visibility: visible;
+main #page-container #education-page .practical-info {
+ padding: 50px 0;
}
-main #page-container #education-page .section-contents .infos-inscriptions {
- display: flex;
- gap: 40px;
- background-image: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
+main #page-container #education-page .practical-info .page-contents-center {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 50px;
}
-main #page-container #education-page .section-contents .infos-inscriptions .groups,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing {
- background-color: white;
- padding: 20px;
- display: flex;
- flex-direction: column;
+main #page-container #education-page .practical-info .page-contents-center .info-block {
+ display: grid;
+ grid-template-rows: auto 1fr;
}
-main #page-container #education-page .section-contents .infos-inscriptions .groups h3,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing h3 {
+main #page-container #education-page .practical-info .page-contents-center .info-block .info-title {
+ color: #4baabb;
margin: 0;
- color: #96a5ae;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
- border: 1px solid #dde;
- border-collapse: collapse;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
- border: 1px solid #dde;
- padding: 10px 20px;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .documents,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents {
- margin-top: 20px;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .documents .links,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents .links {
- display: flex;
- gap: 20px;
+ border-bottom: 1px dashed #aabbc8;
+ border-left: 1px dashed #aabbc8;
+ padding: 10px;
}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .documents .links .download-link,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents .links .download-link {
- border: 1px solid;
- padding: 8px;
- display: flex;
- margin: 10px 0 0;
- border-radius: 4px;
+main #page-container #education-page .practical-info .page-contents-center .info-block .info-body {
+ margin: 0;
+ padding: 20px 10px;
+ border-right: 1px dashed #aabbc8;
+ border-bottom: 1px dashed #aabbc8;
}
-main #page-container #education-page .section-contents .teacher {
- grid-column: 1/span 2;
- background: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
+main #page-container #education-page .practical-info .page-contents-center .info-block ul {
display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: row;
flex-direction: column;
+ gap: 5px;
}
-main #page-container #education-page .section-contents .teacher .teacher-card {
- background-color: white;
+main #page-container #education-page .practical-info .page-contents-center .info-block ul li:not(.fullwidth) {
display: grid;
- grid-template-columns: auto 1fr;
- width: 100%;
- gap: 20px;
- padding: 20px;
-}
-main #page-container #education-page .section-contents .teacher .teacher-card h3 {
- margin: 0;
- width: 100%;
- color: #96a5ae;
- grid-column: 1/span 2;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
}
-main #page-container #education-page .section-contents .teacher .teacher-card .pic img {
- width: 100px;
+main #page-container #education-page .practical-info .page-contents-center .info-block ul.tabled li span {
+ padding: 3px 0;
}
-main #page-container #education-page .section-contents .teacher .teacher-card .infos-text {
- padding: 0 20px;
+main #page-container #education-page .practical-info .page-contents-center .info-block ul.tabled li span:first-child {
+ font-weight: bold;
+ color: #6b7880;
}
-main #page-container #education-page .section-contents .teacher .teacher-card .infos-text h4 {
+main #page-container #education-page .practical-info .page-contents-center .info-block ul.tabled li span:last-child {
color: #4baabb;
- margin: 0;
- font-size: 18px;
-}
-main #page-container #education-page .section-contents .teacher .teacher-card .infos-text p {
- color: #96a5ae;
- display: block;
}
-@media screen and (max-width: 900px) {
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
- display: block;
- }
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
- width: 100%;
- margin-bottom: 20px;
- }
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
- background-color: #fff9;
- position: relative;
- top: unset;
- width: 100%;
- left: unset;
- max-height: unset;
- visibility: visible;
- padding: 10px;
- box-shadow: none;
- }
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul {
- list-style-type: disc;
- font-size: 14px;
- margin-left: 10px;
- }
- main #page-container #education-page .section-contents .infos-inscriptions {
- flex-direction: column;
+@media screen and (max-width: 1200px) {
+ main #page-container #education-page .edu-themes {
+ grid-template-columns: 1fr;
+ gap: 30px;
+ padding: 70px 0;
}
}
@media screen and (max-width: 780px) {
- main #page-container #education-page h3.big {
- font-size: 22px;
- }
- main #page-container #education-page .title-banner {
- height: 170px;
- min-height: unset;
+ main #page-container #education-page .practical-info .page-contents-center {
+ grid-template-columns: 1fr;
+ gap: 30px;
}
- main #page-container #education-page .title-banner h2 {
- font-size: 2em;
- margin: 20px;
- text-shadow: 0 0 4px #000b;
+ main #page-container #education-page .practical-info .page-contents-center .info-block .info-title {
+ border-top: 1px dashed #aabbc8;
}
- main #page-container #education-page .section-contents {
- padding: 20px 20px 40px;
- grid-template-columns: 100%;
+ main #page-container #education-page .practical-info .page-contents-center .info-block .info-body {
+ border-bottom: none;
}
- main #page-container #education-page .section-contents .full-row {
- grid-column: 1;
+}
+@media screen and (max-width: 560px) {
+ main #page-container #education-page .edu-themes .edu-theme h3 {
+ border-width: 0 0 1px 1px;
}
- main #page-container #education-page .section-contents .practical-infos {
- grid-column: 1;
- grid-row: 3;
- gap: 10px;
- padding: 10px;
+ main #page-container #education-page .edu-themes .edu-theme img {
+ max-width: 150px;
+ height: auto;
+ grid-row: 1;
+ border-width: 1px 0 0 1px;
}
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
- grid-column: 1;
+ main #page-container #education-page .edu-themes .edu-theme p {
grid-row: 2;
- display: block;
- }
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
- margin-bottom: 20px;
- }
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
- background-color: #fff9;
- position: relative;
- top: unset;
- width: 100%;
- left: unset;
- max-height: unset;
- visibility: visible;
- padding: 10px;
- box-shadow: none;
- }
- main #page-container #education-page .section-contents .infos-inscriptions {
- gap: 10px;
- padding: 10px;
- }
- main #page-container #education-page .section-contents .infos-inscriptions .groups,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing {
- background-color: white;
- padding: 20px;
- display: flex;
- flex-direction: column;
- }
- main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
- width: 100%;
- }
- main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
- border: 1px solid #dde;
- padding: 10px;
- }
- main #page-container #education-page .section-contents .teacher {
- grid-column: 1;
- padding: 20px;
+ grid-column: 1/span 2;
+ padding: 20px 10px 30px 10px;
+ border-width: 0 1px 1px 1px;
}
}
main #page-container #games-page .game-articles article {
@@ -1127,6 +964,7 @@ main #page-container #games-page .game-articles article {
}
main #page-container #games-page .game-articles article.game-article {
grid-template-rows: repeat(7, auto);
+ width: 100%;
}
main #page-container #games-page .game-articles article.game-article .game-title {
grid-column: 1/span 2;
@@ -1144,6 +982,7 @@ main #page-container #games-page .game-articles article.game-article .game-banne
flex-direction: row;
flex-direction: column;
background-color: black;
+ overflow: hidden;
}
main #page-container #games-page .game-articles article.game-article .game-banner img {
height: 500px;
@@ -1234,16 +1073,18 @@ main #page-container #games-page .game-articles article.placeholder * {
}
main #page-container #games-page .game-articles article.game-article .game-title {
grid-column: 1;
- padding: 20px;
+ padding: 0;
font-size: 25px;
}
main #page-container #games-page .game-articles article.game-article .game-banner {
grid-column: 1;
+ margin: 0 -20px;
}
main #page-container #games-page .game-articles article.game-article .image-carousel {
grid-column: 1;
grid-row: 3;
height: 400px;
+ margin: 0 -20px;
}
main #page-container #games-page .game-articles article.game-article .game-team {
grid-column: 1;
diff --git a/src/pages/education/components/game-studio-club.js b/src/pages/education/components/game-studio-club.js
deleted file mode 100644
index 089c14947d0fe4be650e3c9ca73da40edb7b5185..0000000000000000000000000000000000000000
--- a/src/pages/education/components/game-studio-club.js
+++ /dev/null
@@ -1,470 +0,0 @@
-"use strict";
-
-const { images_url } = require("../../../../constants");
-
-const GAMEDEV_THEMES = [
- {
- title: "Dessin et création 2D",
- image: "learning_theme_2d.png",
- details: [
- "Création de décors et de personnages",
- "Dessin sur ordinateur, pixel art, vectoriel",
- "Animations 2D",
- ],
- },
- {
- title: "Musique et sons",
- image: "learning_theme_sound.png",
- details: ["Logiciels de son et synthétiseurs", "Composition", "Prise de son", "Mixage"],
- },
- {
- title: "Écriture",
- image: "learning_theme_write.png",
- details: [
- "Écrire une histoire, construire une narration",
- "Imaginer des mondes et des personnages",
- ],
- },
- {
- title: "Conception",
- image: "learning_theme_conception.png",
- details: [
- "Concevoir les différents éléments qui composent le jeu",
- "Développer les mécanismes de gameplay",
- ],
- },
- {
- title: "Programmation",
- image: "learning_theme_coding.png",
- details: [
- "Apprendre pas à pas à coder avec différents langages de programmation",
- "Découvrir les bases du web en créant des mini-jeux en lignes",
- ],
- },
- {
- title: "Mathématiques",
- image: "learning_theme_math.png",
- comment:
- "<em>Créer un jeu vidéo c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</em>",
- details: [
- "Algorithmie",
- "Logique (algèbre booléen)",
- "Géométrie",
- "Trigonométrie",
- "Algèbre linéaire",
- "Repères 2D / 3D",
- "Vecteurs 2D / 3D",
- "Newton",
- "...",
- ],
- },
- {
- title: "Travail d'équipe",
- image: "learning_theme_team.png",
- comment: `
- <em>
- Faire son jeu tout seul c'est bien mais ça peut être long !
- <br />Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.
- </em>`,
- details: ["Gestion de projet", "Méthodologie", "Communication"],
- },
- {
- title: "Logiciels libres, GNU/Linux",
- image: "learning_theme_linux.png",
- comment:
- "<em>Nous utilisons essentiellement des logiciels libres sur Linux.<br />C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</em>",
- details: ["Ubuntu / Debian", "GIMP", "LMMS", "Audacity", "Pencil2d", "..."],
- },
-];
-
-class GameStudioClub {
- render() {
- return {
- tag: "section",
- typeof: "EducationalOrganization",
- contents: [
- {
- tag: "div",
- class: "title-banner game-banner",
- id: "game-studio-club", // anchor id
- contents: [{ tag: "h2", contents: "Game Studio Club", property: "name" }],
- },
- {
- tag: "div",
- class: "special-announcement",
- contents: [
- {
- tag: "div",
- class: "page-contents-center",
- contents: [
- {
- tag: "p",
- contents: `
- <green>Mise à jour en préparation : </green><br />
- Le programme pédagogique va être amené à changer très prochainement, la durée des séances sera raccourcie à 1h30,
- les matières abordées dans le de développement de jeu seront proposées séparément (animation 2D, programmation,
- sons électroniques, maths / physique, etc.), et l'accès au nombre de séances hebdomadaire ne sera plus limité quelle
- que soit la durée de l'abonnement.<br />
- Vous pouvez d'ores et déjà tenir compte de ces changements pour une inscription prochaine ou une réinscription.
- `,
- },
- ],
- },
- ],
- },
- {
- tag: "div",
- class: "section-contents page-contents-center",
- contents: [
- {
- tag: "div",
- class: "full-row",
- contents: [
- {
- tag: "h3",
- class: "big",
- contents:
- "Apprendre à créer un <blue>jeu vidéo</blue> de A à Z",
- property: "headline",
- },
- {
- tag: "strong",
- contents:
- "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
- },
- {
- tag: "p",
- contents:
- "<em><b><blue>Aucun prérequis nécessaire</blue></b>. Pas besoin d'être fort en maths ou en informatique, le but est d'apprendre et se détendre !</em>",
- },
- ],
- },
- {
- tag: "div",
- class: "practical-infos",
- contents: [
- {
- tag: "div",
- class: "info-item",
- property: "about",
- contents: [
- { tag: "strong", contents: "Ça se passe où ?" },
- {
- tag: "span",
-
- contents:
- "Dans les locaux,<br/><em>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</em>",
- },
- ],
- },
- {
- tag: "div",
- class: "info-item",
- property: "about",
- contents: [
- { tag: "strong", contents: "Pour qui ?" },
- {
- tag: "span",
- contents: `Tout le monde à partir de <b><blue>12 ans</blue></b>.
- <br><br><b><blue>Ados</blue></b> et <b><blue>adultes</blue></b>.
- `,
- },
- ],
- },
- {
- tag: "div",
- class: "info-item",
- property: "about",
- contents: [
- {
- tag: "strong",
- contents: "Contact",
- },
- {
- tag: "a",
- href: "tel:+33475780872",
- contents: "04 75 78 08 72",
- property: "telephone",
- },
- {
- tag: "a",
- href: "mailto:contact@kuadrado-software.fr",
- contents: "contact@kuadrado-software.fr",
- property: "email",
- },
- ],
- },
- ],
- },
- {
- tag: "div",
- class: "list-wrapper",
- property: "hasPart",
- contents: [
- {
- tag: "ul",
- class: "learning-themes",
- contents: GAMEDEV_THEMES.map(li => {
- return {
- tag: "li",
- class: "learning-theme",
- typeof: "ListItem",
- contents: [
- {
- tag: "strong",
- class: "title",
- contents: li.title,
- property: "name",
- },
- {
- tag: "img",
- alt: `learning theme image ${li.title}`,
- src: `${images_url}${li.image}`,
- property: "image",
- },
- {
- tag: "div",
- class: "details",
- property: "description",
- contents: [
- li.comment && {
- tag: "div",
- class: "comment",
- contents: li.comment,
- },
- {
- tag: "ul",
- contents: li.details.map(d => {
- return {
- tag: "li",
- contents: d,
- };
- }),
- },
- ],
- },
- ],
- };
- }),
- },
- ],
- },
- {
- tag: "div",
- class: "infos-inscriptions full-row",
- property: "about",
- contents: [
- {
- tag: "div",
- class: "groups",
- contents: [
- {
- tag: "h3",
- contents: "Groupes",
- },
- {
- tag: "p",
- contents:
- "Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
- },
- {
- tag: "div",
- class: "table-wrapper",
- contents: [
- {
- tag: "table",
- contents: [
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Mardi" },
- {
- tag: "td",
- contents: "16h - 19h",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Mercredi" },
- {
- tag: "td",
- contents: "14h - 17h",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Jeudi" },
- {
- tag: "td",
- contents: "16h - 19h",
- },
- ],
- },
- ],
- },
- ],
- },
- {
- tag: "p",
- contents: `
- Les séances sont accessibles sur des plages horaires de 3 heures,
- mais les participants peuvent arriver et repartir à l'heure qu'ils souhaitent,
- ils ne sont pas obligés de rester les 3 heures.
- <br><br>
- Le club est ouvert à toute personne à partir de <b><blue>12 ans</blue></b>,
- adolescent ou adulte, et les groupes sont aussi <b><blue>intergénérationnels</blue></b> que possible.
- `,
- },
- ],
- },
- {
- tag: "div",
- class: "pricing",
- contents: [
- {
- tag: "h3",
- contents: "Inscription, fonctionnement et tarifs",
- },
- {
- tag: "p",
- contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.<br /><br />
- Le matériel informatique (pc portable, souris, tablette graphique) est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
- `,
- },
- {
- tag: "div",
- class: "table-wrapper",
- contents: [
- {
- tag: "table",
- contents: [
- {
- tag: "tr",
- contents: [
- {
- tag: "td",
- contents: "Abonnement 1 mois",
- },
- {
- tag: "td",
- contents: "(4 séances)",
- },
- {
- tag: "td",
- contents:
- "<b><blue>60€</blue></b>",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- {
- tag: "td",
- contents:
- "Abonnement 1 trimestre",
- },
- {
- tag: "td",
- contents: "(12 séances)",
- },
- {
- tag: "td",
- contents:
- "<b><blue>160€</blue></b>",
- },
- ],
- },
- ],
- },
- ],
- },
- {
- tag: "div",
- class: "documents",
- contents: [
- {
- tag: "div",
- contents: "Télécharger la fiche d'inscription",
- },
- {
- tag: "div",
- class: "links",
- contents: [
- {
- tag: "a",
- class: "download-link",
- download: "fiche-inscription",
- href: "/assets/documents/fiche-inscription.pdf",
- contents: "PDF",
- },
- {
- tag: "a",
- class: "download-link",
- download: "fiche-inscription",
- href: "/assets/documents/fiche-inscription.odt",
- contents: "Libre Office",
- },
- ]
- }
-
- ],
- },
- ],
- },
- ],
- },
- {
- tag: "div",
- class: "teacher",
- contents: [
-
- {
- tag: "div",
- class: "teacher-card",
- contents: [
- {
- tag: "h3",
- contents: "Animé par",
- },
- {
- tag: "div",
- class: "pic",
- contents: [
- {
- tag: "img",
- src:
- "/assets/images/pijar_profile_lt_square.png",
- },
- ],
- },
- {
- tag: "div",
- class: "infos-text",
- contents: [
- {
- tag: "h4",
- contents: "Pierre Jarriges"
- },
- {
- tag: "p",
- contents: "Développeur jeu vidéo, auteur BD, compositeur."
- }
- ]
- }
- ],
- },
- ],
- },
- ],
- },
- ],
- };
- }
-}
-
-module.exports = GameStudioClub;
diff --git a/src/pages/education/components/popularization.js b/src/pages/education/components/popularization.js
deleted file mode 100644
index adbfa5102d56ff2f9bf0bad5c172f32d68b09b81..0000000000000000000000000000000000000000
--- a/src/pages/education/components/popularization.js
+++ /dev/null
@@ -1,196 +0,0 @@
-"use strict";
-
-const { images_url } = require("../../../../constants");
-
-const VULGARISATION_THEMES = [
- {
- title: "Qu'est-ce qui se passe dans mon ordinateur ?",
- image: "learning_theme_pc.png",
- details: [
- "Répondre aux questions sur l'informatique de tous les jours",
- "L'organisation des fichiers",
- "Le navigateur web et les logiciels usuels",
- "Le système d'exploitation",
- ],
- },
- {
- title: "GNU/Linux, le monde du libre",
- image: "learning_theme_linux.png",
- details: [
- "Apprendre à installer Linux",
- "Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
- ],
- },
- {
- title: "Comment fonctionne le web ?",
- image: "learning_theme_web.png",
- details: [
- "De quoi est fait le réseau internet ?",
- "Comment fonctionnent les différents services que nous utilisons ?",
- "Qu'est-ce qu'un cloud ?",
- ],
- },
- {
- title: "Le langages des machines",
- image: "learning_theme_coding.png",
- details: [
- "Qu'est-ce qu'un langage de programmation",
- "À quoi ça sert ?",
- "Les métiers du développement informatique",
- ],
- },
- {
- title: "Les coulisses du jeu vidéo",
- image: "learning_theme_2d.png",
- details: [
- "De quoi sont fait les jeux vidéos ?",
- "Quels sont les outils ?",
- "Les métiers du jeu vidéo",
- "Du pixelart à l'industrie lourde",
- "Qu'est-ce qu'un moteur de jeu ?",
- ],
- },
-];
-
-class Popularization {
- render() {
- return {
- tag: "section",
- typeof: "EducationalOrganization",
- contents: [
- {
- tag: "div",
- class: "title-banner popu-banner",
- id: "popularization", // anchor id
- contents: [
- { tag: "h2", contents: "Vulgarisation numérique", property: "name" },
- ],
- },
- {
- tag: "div",
- class: "section-contents page-contents-center",
- contents: [
- {
- tag: "div",
- class: "full-row",
- contents: [
- {
- tag: "h3",
- class: "big",
- contents: "<blue>S'approprier</blue> l'informatique",
- property: "headline",
- },
- {
- tag: "strong",
- contents:
- "Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
- property: "alternativeHeadline",
- },
- {
- tag: "p",
- contents:
- "<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
- property: "description",
- },
- ],
- },
- {
- tag: "div",
- class: "practical-infos",
- contents: [
- {
- tag: "div",
- class: "info-item",
- contents: [
- {
- tag: "span",
- contents:
- "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un <b><blue>devis gratuit</blue></b>.",
- },
- ],
- },
- {
- tag: "div",
- class: "info-item",
- contents: [
- {
- tag: "strong",
- contents: "Contact",
- },
- {
- tag: "a",
- href: "tel:+33475780872",
- contents: "04 75 78 08 72",
- property: "telephone",
- },
- {
- tag: "a",
- href: "mailto:contact@kuadrado-software.fr",
- contents: "contact@kuadrado-software.fr",
- property: "email",
- },
- ],
- },
- ],
- },
- {
- tag: "div",
- class: "list-wrapper",
- contents: [
- {
- tag: "ul",
- class: "learning-themes",
- property: "hasPart",
- contents: VULGARISATION_THEMES.map(li => {
- return {
- tag: "li",
- typeof: "ListItem",
- class: "learning-theme " + li.class,
- contents: [
- {
- tag: "strong",
- class: "title",
- contents: li.title,
- property: "name",
- },
- {
- tag: "img",
- alt: `learning theme image ${li.title}`,
- src: `${images_url}${li.image}`,
- property: "image",
- },
- {
- tag: "div",
- class: "details",
- property: "description",
- contents: [
- {
- tag: "div",
- class: "comment",
- contents: li.comment,
- },
- {
- tag: "ul",
- contents: li.details.map(d => {
- return {
- tag: "li",
- contents: d,
- };
- }),
- },
- ],
- },
- ],
- };
- }),
- },
- ],
- },
- ],
- },
- ],
- };
- }
-}
-
-module.exports = Popularization;
diff --git a/src/pages/education/education.js b/src/pages/education/education.js
index 92af28cd10b49453d6634586d9f0475ee16fdc2e..53c9ac3da0b8b2194d6422a95d9bce3066b6c695 100644
--- a/src/pages/education/education.js
+++ b/src/pages/education/education.js
@@ -2,15 +2,54 @@
const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
-const GameStudioClub = require("./components/game-studio-club");
-const Popularization = require("./components/popularization");
-class EducationPage extends WebPage {
+const EDU_THEMES = [
+ // {
+ // title: "Création de jeux vidéo",
+ // description: "Conception, graphisme et animation, programmation, je vous accompagne dans la découverte des techniques pour créer un jeu vidéo de A à Z",
+ // image: "learning_theme_conception.png",
+ // pageUrl: "gamedev",
+ // },
+ {
+ title: "Programmation",
+ description: `<b>Franchissez le mur du code !</b><br />
+ Apprenez à programmer avec différents langages (Python, Javascript, C ...), pour du web, du logiciel, du jeu vidéo ou autre.`,
+ image: "learning_theme_coding.png",
+ // pageUrl: "coding",
+ },
+ {
+ title: "Dessin numérique et animation 2D",
+ description: `Apprenez à utiliser des logiciels libres de création graphique 2D et d'animation.<br />
+ Créez des personnages et des décors, menez votre projet de dessin animé, d'illustration ou de jeu vidéo.`,
+ image: "learning_theme_2d.png",
+ // pageUrl: "2d",
+ },
+ {
+ title: "Maths et physiques",
+ description: "Abordez les notions fondamentales de façon décontractée pour le plaisir de comprendre.",
+ image: "learning_theme_math.png",
+ // pageUrl: "math",
+ },
+ // {
+ // title: "Musique et sons électroniques",
+ // description: "Découvrez des logiciels libres de composition musicales, de synthèse sonore et de prise de son.",
+ // image: "learning_theme_sound.png",
+ // pageUrl: "sound",
+ // },
+ {
+ title: "Aide informatique générale",
+ description: "Perdu avec votre ordinateur ou votre smartphone, les logiciels, internet ? Je vous aide pas à pas à comprendre les fondamentaux et à utiliser sereinement la technologie.",
+ image: "learning_theme_pc.png",
+ // pageUrl: "popularization"
+ }
+];
+class EducationPage extends WebPage {
render() {
return {
tag: "div",
id: "education-page",
+ typeof: "EducationalOrganization",
contents: [
{
tag: "div",
@@ -34,14 +73,212 @@ class EducationPage extends WebPage {
{ tag: "h1", contents: "Pédagogie" },
{
tag: "p",
- contents: `Animations autour de la création de jeux vidéos, vulgarisation numérique.`,
+ contents: `Animation d'ateliers informatiques accessibles à tous.
+ Programmation, graphisme 2D, jeux vidéo, vulgarisation, accompagnement de projet, etc.`,
},
],
},
],
},
- new GameStudioClub().render(),
- new Popularization().render(),
+ {
+ tag: "div",
+ class: "title-banner",
+ },
+ {
+ tag: "section",
+ class: "bg-dark",
+ contents: [
+ {
+ tag: "div",
+ class: "page-contents-center",
+ contents: [
+ {
+ tag: "ul",
+ class: "edu-themes",
+ contents: EDU_THEMES.map(theme => {
+ return {
+ tag: "li",
+ class: "edu-theme",
+ contents: [
+ { tag: "img", width: 250, height: 140, class: "pixelated", src: `${images_url}${theme.image}` },
+ { tag: "h3", contents: theme.title },
+ { tag: "p", contents: theme.description },
+ ]
+ }
+ })
+ },
+ ]
+ },
+ ]
+ },
+ {
+ tag: "section",
+ class: "practical-info",
+ contents: [
+ {
+ tag: "div",
+ class: "page-contents-center",
+ contents: [
+ {
+ tag: "div",
+ class: "info-block",
+ contents: [
+ { tag: "h3", class: "info-title", contents: "Pour qui ?" },
+ {
+ tag: "p",
+ class: "info-body",
+ contents: `Les ateliers sont accessibles aux adultes comme aux enfants, plutôt à partir de 12 ans.<br/>
+ Les séances ont lieu en groupes mixtes.
+ `
+ }
+ ]
+ },
+ {
+ tag: "div",
+ class: "info-block",
+ contents: [
+ { tag: "h3", class: "info-title", contents: "Où ça ?" },
+ {
+ tag: "p",
+ class: "info-body",
+ contents: "Dans mon local professionnel : <br /><blue>32 rue Simon Vialet, passage du Cheminou, 07240 Vernoux en Vivarais.</blue>"
+ }
+ ]
+ },
+ {
+ tag: "div",
+ class: "info-block",
+ contents: [
+ { tag: "h3", class: "info-title", contents: "Quel matériel ?" },
+ {
+ tag: "p",
+ class: "info-body",
+ contents: `Le matériel informatique est fourni sur place (ordinateurs et tablettes graphique)
+ mais il est possible d'amener le sien.
+ <br />Il est recommandé d'apporter au moins une clé USB pour faire ses sauvegardes.`
+ }
+ ]
+ },
+ {
+ tag: "div",
+ class: "info-block",
+ contents: [
+ { tag: "h3", class: "info-title", contents: "Quand ?" },
+ {
+ tag: "ul",
+ class: "info-body tabled",
+ contents: [
+ {
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Mardi" },
+ { tag: "span", contents: "16h - 18h" },
+ ]
+ },
+ {
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Mercredi" },
+ { tag: "span", contents: "14h - 16h" },
+ ]
+ },
+ {
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Jeudi" },
+ { tag: "span", contents: "16h - 18h" },
+ ]
+ },
+ {
+ tag: "li",
+ class: "fullwidth",
+ contents: "<em><blue>Ouvert de Septembre à Juin, sauf vacances scolaires ou fermetures exceptionnelles</blue></em>"
+ }
+ ]
+ },
+ ]
+ },
+ {
+ tag: "div",
+ class: "info-block",
+ contents: [
+ { tag: "h3", class: "info-title", contents: "Combien ça coûte ?" },
+ {
+ tag: "ul",
+ class: "info-body tabled",
+ contents: [
+ {
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Inscription au mois" },
+ { tag: "span", contents: "50€" },
+ ]
+ },
+ {
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Inscription à la séance" },
+ { tag: "span", contents: "15€" },
+ ]
+ },
+ {
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Cours particuliers" },
+ { tag: "span", contents: "30€/h, sur place ou en visio. Horaires à définir." },
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ tag: "div",
+ class: "info-block",
+ contents: [
+ { tag: "h3", class: "info-title", contents: "Pour s'inscrire ou en savoir plus" },
+ {
+ tag: "ul",
+ class: "info-body",
+ contents: [
+ {
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "Me contacter" },
+ {
+ tag: "a",
+ href: "mailto:contact@kuadrado-software.fr",
+ contents: "contact@kuadrado-software.fr",
+ }
+ ]
+ },
+ {
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "" },
+ {
+ tag: "a",
+ href: "tel:+33475780872",
+ contents: "04 75 78 08 72",
+ property: "telephone",
+ },
+ ]
+ },
+ {
+ tag: "li",
+ contents: [
+ { tag: "span", contents: "ou passer directement me voir au local !" }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+
+ },
],
};
}
diff --git a/src/pages/education/education.scss b/src/pages/education/education.scss
index 6430ccd8b028bdb15a3af1b4abb783b37e7cca00..c18b3b33638ede8bd16239c340d1a1edcdb6395b 100644
--- a/src/pages/education/education.scss
+++ b/src/pages/education/education.scss
@@ -10,12 +10,7 @@
flex-direction: column;
height: 20vw;
min-height: 250px;
- &.game-banner {
- background-image: url("/assets/images/game_studio_banner.png");
- }
- &.popu-banner {
- background-image: url("/assets/images/popularization_banner.png");
- }
+ background-image: url("/assets/images/popularization_banner.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
@@ -40,296 +35,142 @@
}
}
}
- .section-contents {
- padding: 20px 40px 60px;
+
+ .edu-themes {
display: grid;
- grid-template-columns: auto 1fr;
- gap: 20px;
- height: auto;
- .full-row {
- grid-column: 1 / span 2;
- }
- .practical-infos {
- grid-column: 2;
- grid-row: 2;
- display: flex;
- flex-direction: column;
- gap: 40px;
- background-image: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
- .info-item {
- display: flex;
- flex-direction: column;
- background-color: white;
- padding: 20px;
- strong {
- margin-bottom: 10px;
- white-space: nowrap;
- color: $medium_grey;
- }
- span,
- a {
- font-size: 14px;
- }
+ grid-template-columns: 1fr 1fr;
+ gap: 50px;
+ font-family: monospace;
+ padding: 70px 0;
+ .edu-theme {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ * {
+ border-style: dashed;
+ border-color: $green;
+ border-width: 0 0 0 0;
}
- }
- .list-wrapper {
- grid-column: 1;
- grid-row: 2;
- ul.learning-themes {
+ h3 {
+ color: $green;
+ grid-row: 1;
+ margin: 0;
+ padding: 0 10px;
display: flex;
- gap: 20px 30px;
- flex-wrap: wrap;
- li.learning-theme {
- position: relative;
- border: solid $light_0;
- border-width: 0 2px 2px 0;
- display: flex;
- flex-direction: column;
- .title {
- color: $medium_grey;
- display: block;
- position: absolute;
- background-color: #fffa;
- padding: 3px 10px;
- width: 100%;
- }
- img {
- width: 100%;
- height: auto;
- image-rendering: pixelated;
- image-rendering: -moz-crisp-edges;
- image-rendering: crisp-edges;
- }
- .details {
- background-color: #fffe;
- position: absolute;
- top: 25px;
- left: 25px;
- width: 300px;
- height: auto;
- max-height: 0;
- visibility: hidden;
- z-index: 1;
- transition: max-height 0.6s;
- padding: 20px;
- border: solid $light_0;
- border-width: 0 1px 1px 0;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- gap: 10px;
- .comment {
- font-style: italic;
- * {
- color: $medium_grey;
- }
- }
- ul {
- list-style-type: disc;
- font-size: 14px;
- margin-left: 10px;
- li {
- color: $medium_grey;
- }
- }
- }
- &:hover {
- .details {
- max-height: 1000px;
- visibility: visible;
- }
- }
- }
+ align-items: center;
+ border-width: 0 0 0 1px;
}
- }
-
- .infos-inscriptions {
- display: flex;
- gap: 40px;
- background-image: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
- .groups,
- .pricing {
- background-color: white;
- padding: 20px;
- display: flex;
- flex-direction: column;
- h3 {
- margin: 0;
- color: $light_1;
- }
- .table-wrapper {
- table {
- border: 1px solid #dde;
- border-collapse: collapse;
- td {
- border: 1px solid #dde;
- padding: 10px 20px;
- }
- }
- }
- .documents {
- margin-top: 20px;
- .links {
- display: flex;
- gap: 20px;
- .download-link {
- border: 1px solid;
- padding: 8px;
- display: flex;
- margin: 10px 0 0;
- border-radius: 4px;
- }
- }
+ img {
+ width: 100%;
+ grid-row: 1 / span 2;
+ border-width: 1px 0 1px 1px;
+ }
+ p {
+ text-align: justify;
+ color: $blue_3;
+ * {
+ color: $blue_3;
}
+ grid-row: 2;
+ margin: 0;
+ padding: 10px 30px 0 10px;
+ border-width: 1px 1px 1px 0;
}
}
+ }
- .teacher {
- grid-column: 1 / span 2;
- background: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
- @include flex-center-col;
- .teacher-card {
- background-color: white;
+ .practical-info {
+ padding: 50px 0;
+ .page-contents-center {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 50px;
+ .info-block {
display: grid;
- grid-template-columns: auto 1fr;
- width: 100%;
- gap: 20px;
- padding: 20px;
- h3 {
+ grid-template-rows: auto 1fr;
+ .info-title {
+ color: $blue_2;
margin: 0;
- width: 100%;
- color: $light_1;
- grid-column: 1 / span 2;
+ border-bottom: 1px dashed $light_2;
+ border-left: 1px dashed $light_2;
+ padding: 10px;
}
- .pic {
- img {
- width: 100px;
- }
+ .info-body {
+ margin: 0;
+ padding: 20px 10px;
+ border-right: 1px dashed $light_2;
+ border-bottom: 1px dashed $light_2;
}
- .infos-text {
- padding: 0 20px;
- h4 {
- color: $blue_2;
- margin: 0;
- font-size: 18px;
- }
- p {
- color: $light_1;
- display: block;
+ ul {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ li:not(.fullwidth) {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
}
- }
- }
- }
- }
- @media screen and (max-width: $screen_l) {
- .section-contents {
- .list-wrapper {
- ul.learning-themes {
- display: block;
- li.learning-theme {
- width: 100%;
- margin-bottom: 20px;
- .details {
- background-color: #fff9;
- position: relative;
- top: unset;
- width: 100%;
- left: unset;
- max-height: unset;
- visibility: visible;
- padding: 10px;
- box-shadow: none;
- ul {
- list-style-type: disc;
- font-size: 14px;
- margin-left: 10px;
+ &.tabled {
+ li {
+ span {
+ padding: 3px 0;
+ &:first-child {
+ font-weight: bold;
+ color: $medium_grey;
+ }
+ &:last-child {
+ color: $blue_2;
+ }
}
}
}
}
}
+ }
+ }
- .infos-inscriptions {
- flex-direction: column;
- }
+ @media screen and (max-width: 1200px) {
+ .edu-themes {
+ grid-template-columns: 1fr;
+ gap: 30px;
+ padding: 70px 0;
}
}
@media screen and (max-width: $screen_m) {
- h3 {
- &.big {
- font-size: 22px;
- }
- }
- .title-banner {
- height: 170px;
- min-height: unset;
- h2 {
- font-size: 2em;
- margin: 20px;
- text-shadow: 0 0 4px #000b;
- }
- }
- .section-contents {
- padding: 20px 20px 40px;
- grid-template-columns: 100%;
- .full-row {
- grid-column: 1;
- }
- .practical-infos {
- grid-column: 1;
- grid-row: 3;
- gap: 10px;
- padding: 10px;
- }
- .list-wrapper {
- ul.learning-themes {
- grid-column: 1;
- grid-row: 2;
- display: block;
- li.learning-theme {
- margin-bottom: 20px;
- .details {
- background-color: #fff9;
- position: relative;
- top: unset;
- width: 100%;
- left: unset;
- max-height: unset;
- visibility: visible;
- padding: 10px;
- box-shadow: none;
- }
+ .practical-info {
+ .page-contents-center {
+ grid-template-columns: 1fr;
+ gap: 30px;
+ .info-block {
+ .info-title {
+ border-top: 1px dashed $light_2;
+ }
+ .info-body {
+ border-bottom: none;
}
}
}
+ }
+ }
- .infos-inscriptions {
- gap: 10px;
- padding: 10px;
- .groups,
- .pricing {
- background-color: white;
- padding: 20px;
- display: flex;
- flex-direction: column;
- .table-wrapper {
- table {
- width: 100%;
- td {
- border: 1px solid #dde;
- padding: 10px;
- }
- }
- }
+ @media screen and (max-width: $screen_s) {
+ .edu-themes {
+ .edu-theme {
+ h3 {
+ border-width: 0 0 1px 1px;
+ }
+ img {
+ max-width: 150px;
+ height: auto;
+ grid-row: 1;
+ border-width: 1px 0 0 1px;
+ }
+ p {
+ grid-row: 2;
+ grid-column: 1 / span 2;
+ padding: 20px 10px 30px 10px;
+ border-width: 0 1px 1px 1px;
}
- }
- .teacher {
- grid-column: 1;
- padding: 20px;
}
}
}
diff --git a/src/pages/education/index.js b/src/pages/education/index.js
index 91113ae314ef63784d40156f85110a7048a4387f..0657aae2e5ce608eeaa8f7533bf5de88cb632a29 100644
--- a/src/pages/education/index.js
+++ b/src/pages/education/index.js
@@ -1,5 +1,3 @@
-"use strict";
-
"use strict";
const runPage = require("../../run-page");
const EducationPage = require("./education");
diff --git a/src/pages/games/games.scss b/src/pages/games/games.scss
index c6bc7628f66bfb6d89fb72c9b83875d6e76ffbd1..f6e1f14151e8a8a97c82a432f42abd679665edbd 100644
--- a/src/pages/games/games.scss
+++ b/src/pages/games/games.scss
@@ -7,6 +7,7 @@
margin: 20px 0;
&.game-article {
grid-template-rows: repeat(7, auto);
+ width: 100%;
.game-title {
grid-column: 1 / span 2;
margin: 0;
@@ -20,6 +21,7 @@
grid-column: 1 / span 2;
@include flex-center-col;
background-color: black;
+ overflow: hidden;
img {
height: 500px;
}
@@ -111,18 +113,20 @@
grid-template-rows: repeat(6, auto);
.game-title {
grid-column: 1;
- padding: 20px;
+ padding: 0;
font-size: 25px;
}
.game-banner {
grid-column: 1;
+ margin: 0 -20px;
}
.image-carousel {
grid-column: 1;
grid-row: 3;
height: 400px;
+ margin: 0 -20px;
}
.game-team {
grid-column: 1;
diff --git a/src/style.scss b/src/style.scss
index 329f2922253438ffbb074e738ad955826f62fdb7..ffed060e308f8d73a936524092cdda7d01044574 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -39,6 +39,12 @@ body {
background-color: $blue_2;
color: white;
}
+
+ .bg-dark {
+ background-color: $dark_2;
+ color: $light_2;
+ }
+
#seo-title {
visibility: hidden;
}
diff --git a/src/template/components/navbar.js b/src/template/components/navbar.js
index d469da09d0c1e19a12fa0104eed2c76e63cb9262..d8f837f6d9c53b55206de16247eb6ec3863df112 100644
--- a/src/template/components/navbar.js
+++ b/src/template/components/navbar.js
@@ -3,17 +3,15 @@
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
- ["/games/", "Jeux"],
- [
- "/education/",
- "Pédagogie",
- [
- // submenu
- ["/education/#game-studio-club", "Game Studio Club"],
- ["/education/#popularization", "Vulgarisation numérique"],
- ],
- ],
- ["/software-development/", "Software"],
+ { url: "/games/", text: "Jeux" },
+ {
+ url: "/education/",
+ text: "Pédagogie",
+ // submenu: [
+ // { url: "/gamedev", text: "Création de jeux vidéo" },
+ // ]
+ },
+ { url: "/software-development/", text: "Software" }
];
class NavBar {
@@ -63,13 +61,14 @@ class NavBar {
};
}
- renderMenu(menuItemsArray, isSubmenu = false) {
+ renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
- contents: menuItemsArray.map(link => {
- const [href, text, submenu] = link;
+ contents: menuItemsArray.map(item => {
+ const { url, text, submenu } = item;
+ const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
@@ -79,7 +78,7 @@ class NavBar {
href,
contents: text,
},
- ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
+ ].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
diff --git a/src/template/template.js b/src/template/template.js
index 5862f3a517d7ac24b2530afbde86214d560162b4..9512eae0130be90ef74ea46eb774fb72b3b29127 100644
--- a/src/template/template.js
+++ b/src/template/template.js
@@ -54,13 +54,12 @@ class Template {
},
{
tag: "span",
- contents:
- "<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
+ contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
- { tag: "strong", contents: "<blue>Nous contacter : </blue>" },
+ { tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",