diff --git a/assets/images/learning_theme_2D.gif b/assets/images/learning_theme_2D.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5c0714600e838cf61d3fa39f2444e64b89e3b7b3
Binary files /dev/null and b/assets/images/learning_theme_2D.gif differ
diff --git a/assets/images/learning_theme_code.jpg b/assets/images/learning_theme_code.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e6a7db21d9c2fc8c3f73d2b88a1884cb86d59d93
Binary files /dev/null and b/assets/images/learning_theme_code.jpg differ
diff --git a/assets/images/learning_theme_linux.jpg b/assets/images/learning_theme_linux.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..68d25962439a18db4f0dba1bbf8b6bcf16c525ad
Binary files /dev/null and b/assets/images/learning_theme_linux.jpg differ
diff --git a/assets/images/learning_theme_math.jpg b/assets/images/learning_theme_math.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..06697fba88dbf46d58220dd03769ab7353fc261a
Binary files /dev/null and b/assets/images/learning_theme_math.jpg differ
diff --git a/assets/images/learning_theme_sound.jpg b/assets/images/learning_theme_sound.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4cc8ab352fb55af9af4805327057cfeb6af0b6bc
Binary files /dev/null and b/assets/images/learning_theme_sound.jpg differ
diff --git a/assets/images/logo_kuadrado_l.png b/assets/images/logo_kuadrado_l.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b16c9e5b9c8b5013df89a9706a6097361853c76
Binary files /dev/null and b/assets/images/logo_kuadrado_l.png differ
diff --git a/assets/images/logo_kuadrado_l64.png b/assets/images/logo_kuadrado_l64.png
new file mode 100644
index 0000000000000000000000000000000000000000..506011353e077a517111477a639ee014bde00c02
Binary files /dev/null and b/assets/images/logo_kuadrado_l64.png differ
diff --git a/assets/images/logo_kuadrado_s32.png b/assets/images/logo_kuadrado_s32.png
new file mode 100644
index 0000000000000000000000000000000000000000..103c0c4dd7debe579c0ce5a1387f3d1b07dfd150
Binary files /dev/null and b/assets/images/logo_kuadrado_s32.png differ
diff --git a/assets/images/logo_kuadrado_xs16.png b/assets/images/logo_kuadrado_xs16.png
new file mode 100644
index 0000000000000000000000000000000000000000..33ff22969a51a1b56e050253e05e483bef7c2263
Binary files /dev/null and b/assets/images/logo_kuadrado_xs16.png differ
diff --git a/assets/images/wallpaper_binary.png b/assets/images/wallpaper_binary.png
index ac336b129d814776ba763b8cb6e2fd45f6ea101e..00469a82af6b37ed5f504f13c9f54da5e92e0586 100644
Binary files a/assets/images/wallpaper_binary.png and b/assets/images/wallpaper_binary.png differ
diff --git a/assets/images/wallpaper_binary_light.png b/assets/images/wallpaper_binary_light.png
index 2fe2305059398233e404ea9a0055de78fff4170b..87fb0b5da96fa0692f977f08aa53075920c61236 100644
Binary files a/assets/images/wallpaper_binary_light.png and b/assets/images/wallpaper_binary_light.png differ
diff --git a/favicon.ico b/favicon.ico
index 328b2613f7eef30ac9fddca258782fb2b2e11f2b..33ff22969a51a1b56e050253e05e483bef7c2263 100644
Binary files a/favicon.ico and b/favicon.ico differ
diff --git a/public/education/education.js b/public/education/education.js
index a25894829fdc70cde0e24e7d64389e63f2810b05..994c32948c09fe32f2cec332d93eef2a04a284f8 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -114,7 +114,7 @@ const { images_url } = require("../../../../constants");
const GAMEDEV_THEMES = [
{
title: "Dessin et création 2D",
- image: `${images_url}/glitch_meta_screen1.png`,
+ image: `${images_url}/learning_theme_2D.gif`,
comment: "",
details: [
"Créer des décors et des personnages",
@@ -124,7 +124,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Musique et effets sonores",
- image: `${images_url}/glitch_meta_screen2.png`,
+ image: `${images_url}/learning_theme_sound.jpg`,
comment: "",
details: [
"Utiliser des logiciels de son et des synthétiseurs",
@@ -147,13 +147,13 @@ const GAMEDEV_THEMES = [
image: `${images_url}/glitch_meta_screen4.png`,
comment: "",
details: [
- "Comprendres les différents éléments qui composent un jeu",
+ "Comprendre les différents éléments qui composent un jeu",
"Développer les mécanismes de gameplay",
],
},
{
title: "Programmation informatique",
- image: `${images_url}/glitch_meta_screen5.png`,
+ image: `${images_url}/learning_theme_code.jpg`,
comment: "",
details: [
"Apprendre pas à pas à coder avec différents langages de programmation",
@@ -162,11 +162,11 @@ const GAMEDEV_THEMES = [
},
{
title: "Mathématiques et physique",
- image: `${images_url}/glitch_meta_screen6.png`,
+ image: `${images_url}/learning_theme_math.jpg`,
comment:
- "<i>Le jeu vidéo et l'informatique en général, c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</i>",
+ "<i>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 !</i>",
details: [
- "Algorithmie, logique, calcul, ensembles, géométrie, trigonométrie, algèbre linéaire ,vecteurs, repères en 2 dimensions ...",
+ "Algorithmie, logique, géométrie, trigonométrie, algèbre linéaire, vecteurs, repères en 2D ...",
],
},
{
@@ -177,8 +177,8 @@ const GAMEDEV_THEMES = [
details: [],
},
{
- title: "Logiciels libres, systèmes Linux",
- image: `${images_url}/glitch_meta_screen2.png`,
+ title: "Logiciels libres, GNU/Linux",
+ image: `${images_url}/learning_theme_linux.jpg`,
comment:
"<i>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 !</i>",
details: [],
@@ -450,7 +450,7 @@ const VULGARISATION_THEMES = [
},
{
title: "GNU/Linux, le monde du libre",
- image: `${images_url}/glitch_meta_screen2.png`,
+ image: `${images_url}/learning_theme_linux.jpg`,
comment: "",
details: [
"Installer Linux, démystifier et faire tomber les barrières.",
@@ -469,7 +469,7 @@ const VULGARISATION_THEMES = [
},
{
title: "Le langages des machines",
- image: `${images_url}/glitch_meta_screen4.png`,
+ image: `${images_url}/learning_theme_code.jpg`,
comment: "",
details: [
"Démystifier la programmation informatique",
@@ -640,8 +640,10 @@ module.exports = function runPage(PageComponent) {
},{"./lib/object-html-renderer":3,"./template/template":9}],9:[function(require,module,exports){
"use strict";
+const { images_url } = require("../../constants");
+
const NAV_MENU_ITEMS = [
- ["/public/", "Accueil"],
+ ["/public/", "logo_kuadrado_s32.png; "],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
@@ -665,13 +667,25 @@ class Template {
tag: "ul",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
- const [href, text, submenu] = link;
+ let [href, text, submenu] = link;
+ const spltTxt = text.split(";");
+ text = spltTxt.length > 1 ? spltTxt[1] : text;
+ const img = spltTxt.length > 1 ? spltTxt[0] : undefined;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
- contents: [{ tag: "a", href, contents: text }].concat(
- submenu ? [this.renderMenu(submenu, true)] : []
- ),
+ contents: [
+ {
+ tag: "a",
+ href,
+ contents: img
+ ? [
+ { tag: "img", src: `${images_url}/${img}` },
+ { tag: "span", contents: text },
+ ]
+ : text,
+ },
+ ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
};
}),
};
@@ -713,4 +727,4 @@ class Template {
module.exports = Template;
-},{}]},{},[7]);
+},{"../../constants":2}]},{},[7]);
diff --git a/public/games/games.js b/public/games/games.js
index f90123602165a3c0462975062e1b4908dc6b3e3f..3641539c87259fc25e4c2bcf830de9ef9024f04c 100644
--- a/public/games/games.js
+++ b/public/games/games.js
@@ -1,4 +1,26 @@
(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){
+const ENV = "dev";
+
+let server_url;
+
+switch (ENV) {
+ case "dev":
+ server_url = "http://localhost:9000";
+ break;
+ case "prod":
+ server_url = "http://your_production_server_url:port";
+}
+
+module.exports = { server_url };
+
+},{}],2:[function(require,module,exports){
+const { server_url } = require("./config");
+
+module.exports = {
+ images_url: `${server_url}/assets/images`,
+};
+
+},{"./config":1}],3:[function(require,module,exports){
"use strict";
module.exports = {
@@ -84,7 +106,7 @@ module.exports = {
},
};
-},{}],2:[function(require,module,exports){
+},{}],4:[function(require,module,exports){
"use strict";
class GamesPage {
@@ -107,7 +129,7 @@ class GamesPage {
module.exports = GamesPage;
-},{}],3:[function(require,module,exports){
+},{}],5:[function(require,module,exports){
"use strict";
"use strict";
@@ -115,7 +137,7 @@ const runPage = require("../../run-page");
const GamesPage = require("./games");
runPage(GamesPage);
-},{"../../run-page":4,"./games":2}],4:[function(require,module,exports){
+},{"../../run-page":6,"./games":4}],6:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -127,11 +149,13 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":1,"./template/template":5}],5:[function(require,module,exports){
+},{"./lib/object-html-renderer":3,"./template/template":7}],7:[function(require,module,exports){
"use strict";
+const { images_url } = require("../../constants");
+
const NAV_MENU_ITEMS = [
- ["/public/", "Accueil"],
+ ["/public/", "logo_kuadrado_s32.png; "],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
@@ -155,13 +179,25 @@ class Template {
tag: "ul",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
- const [href, text, submenu] = link;
+ let [href, text, submenu] = link;
+ const spltTxt = text.split(";");
+ text = spltTxt.length > 1 ? spltTxt[1] : text;
+ const img = spltTxt.length > 1 ? spltTxt[0] : undefined;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
- contents: [{ tag: "a", href, contents: text }].concat(
- submenu ? [this.renderMenu(submenu, true)] : []
- ),
+ contents: [
+ {
+ tag: "a",
+ href,
+ contents: img
+ ? [
+ { tag: "img", src: `${images_url}/${img}` },
+ { tag: "span", contents: text },
+ ]
+ : text,
+ },
+ ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
};
}),
};
@@ -203,4 +239,4 @@ class Template {
module.exports = Template;
-},{}]},{},[3]);
+},{"../../constants":2}]},{},[5]);
diff --git a/public/main.js b/public/main.js
index d3cd2699dbf62cb9d02b7cc1393019d56cdf78b4..b01a7088c52388d31163822017d8b78dd18766fe 100644
--- a/public/main.js
+++ b/public/main.js
@@ -1,4 +1,26 @@
(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){
+const ENV = "dev";
+
+let server_url;
+
+switch (ENV) {
+ case "dev":
+ server_url = "http://localhost:9000";
+ break;
+ case "prod":
+ server_url = "http://your_production_server_url:port";
+}
+
+module.exports = { server_url };
+
+},{}],2:[function(require,module,exports){
+const { server_url } = require("./config");
+
+module.exports = {
+ images_url: `${server_url}/assets/images`,
+};
+
+},{"./config":1}],3:[function(require,module,exports){
"use strict";
class HomePage {
@@ -21,7 +43,7 @@ class HomePage {
module.exports = HomePage;
-},{}],2:[function(require,module,exports){
+},{}],4:[function(require,module,exports){
"use strict";
module.exports = {
@@ -107,7 +129,7 @@ module.exports = {
},
};
-},{}],3:[function(require,module,exports){
+},{}],5:[function(require,module,exports){
"use strict";
const HomePage = require("./homepage");
@@ -115,7 +137,7 @@ const runPage = require("./run-page");
runPage(HomePage);
-},{"./homepage":1,"./run-page":4}],4:[function(require,module,exports){
+},{"./homepage":3,"./run-page":6}],6:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -127,11 +149,13 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":2,"./template/template":5}],5:[function(require,module,exports){
+},{"./lib/object-html-renderer":4,"./template/template":7}],7:[function(require,module,exports){
"use strict";
+const { images_url } = require("../../constants");
+
const NAV_MENU_ITEMS = [
- ["/public/", "Accueil"],
+ ["/public/", "logo_kuadrado_s32.png; "],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
@@ -155,13 +179,25 @@ class Template {
tag: "ul",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
- const [href, text, submenu] = link;
+ let [href, text, submenu] = link;
+ const spltTxt = text.split(";");
+ text = spltTxt.length > 1 ? spltTxt[1] : text;
+ const img = spltTxt.length > 1 ? spltTxt[0] : undefined;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
- contents: [{ tag: "a", href, contents: text }].concat(
- submenu ? [this.renderMenu(submenu, true)] : []
- ),
+ contents: [
+ {
+ tag: "a",
+ href,
+ contents: img
+ ? [
+ { tag: "img", src: `${images_url}/${img}` },
+ { tag: "span", contents: text },
+ ]
+ : text,
+ },
+ ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
};
}),
};
@@ -203,4 +239,4 @@ class Template {
module.exports = Template;
-},{}]},{},[3]);
+},{"../../constants":2}]},{},[5]);
diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js
index 2651a13416865f70010566f674f605cd4b997c3f..3a91476ec3446dcc0a052aa153478f962aeba97a 100644
--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -1,4 +1,26 @@
(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){
+const ENV = "dev";
+
+let server_url;
+
+switch (ENV) {
+ case "dev":
+ server_url = "http://localhost:9000";
+ break;
+ case "prod":
+ server_url = "http://your_production_server_url:port";
+}
+
+module.exports = { server_url };
+
+},{}],2:[function(require,module,exports){
+const { server_url } = require("./config");
+
+module.exports = {
+ images_url: `${server_url}/assets/images`,
+};
+
+},{"./config":1}],3:[function(require,module,exports){
"use strict";
module.exports = {
@@ -84,7 +106,7 @@ module.exports = {
},
};
-},{}],2:[function(require,module,exports){
+},{}],4:[function(require,module,exports){
"use strict";
class SoftwareDevelopment {
@@ -107,7 +129,7 @@ class SoftwareDevelopment {
module.exports = SoftwareDevelopment;
-},{}],3:[function(require,module,exports){
+},{}],5:[function(require,module,exports){
"use strict";
"use strict";
@@ -115,7 +137,7 @@ const runPage = require("../../run-page");
const SoftwareDevelopment = require("./software-development");
runPage(SoftwareDevelopment);
-},{"../../run-page":4,"./software-development":2}],4:[function(require,module,exports){
+},{"../../run-page":6,"./software-development":4}],6:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -127,11 +149,13 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":1,"./template/template":5}],5:[function(require,module,exports){
+},{"./lib/object-html-renderer":3,"./template/template":7}],7:[function(require,module,exports){
"use strict";
+const { images_url } = require("../../constants");
+
const NAV_MENU_ITEMS = [
- ["/public/", "Accueil"],
+ ["/public/", "logo_kuadrado_s32.png; "],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
@@ -155,13 +179,25 @@ class Template {
tag: "ul",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
- const [href, text, submenu] = link;
+ let [href, text, submenu] = link;
+ const spltTxt = text.split(";");
+ text = spltTxt.length > 1 ? spltTxt[1] : text;
+ const img = spltTxt.length > 1 ? spltTxt[0] : undefined;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
- contents: [{ tag: "a", href, contents: text }].concat(
- submenu ? [this.renderMenu(submenu, true)] : []
- ),
+ contents: [
+ {
+ tag: "a",
+ href,
+ contents: img
+ ? [
+ { tag: "img", src: `${images_url}/${img}` },
+ { tag: "span", contents: text },
+ ]
+ : text,
+ },
+ ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
};
}),
};
@@ -203,4 +239,4 @@ class Template {
module.exports = Template;
-},{}]},{},[3]);
+},{"../../constants":2}]},{},[5]);
diff --git a/src/pages/education/components/game-studio-club.js b/src/pages/education/components/game-studio-club.js
index fcbbeb548e44db4df877162cc90c134e3346dc6e..82064b874b19b727f2f755c15f290749c019102b 100644
--- a/src/pages/education/components/game-studio-club.js
+++ b/src/pages/education/components/game-studio-club.js
@@ -5,7 +5,7 @@ const { images_url } = require("../../../../constants");
const GAMEDEV_THEMES = [
{
title: "Dessin et création 2D",
- image: `${images_url}/glitch_meta_screen1.png`,
+ image: `${images_url}/learning_theme_2D.gif`,
comment: "",
details: [
"Créer des décors et des personnages",
@@ -15,7 +15,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Musique et effets sonores",
- image: `${images_url}/glitch_meta_screen2.png`,
+ image: `${images_url}/learning_theme_sound.jpg`,
comment: "",
details: [
"Utiliser des logiciels de son et des synthétiseurs",
@@ -38,13 +38,13 @@ const GAMEDEV_THEMES = [
image: `${images_url}/glitch_meta_screen4.png`,
comment: "",
details: [
- "Comprendres les différents éléments qui composent un jeu",
+ "Comprendre les différents éléments qui composent un jeu",
"Développer les mécanismes de gameplay",
],
},
{
title: "Programmation informatique",
- image: `${images_url}/glitch_meta_screen5.png`,
+ image: `${images_url}/learning_theme_code.jpg`,
comment: "",
details: [
"Apprendre pas à pas à coder avec différents langages de programmation",
@@ -53,11 +53,11 @@ const GAMEDEV_THEMES = [
},
{
title: "Mathématiques et physique",
- image: `${images_url}/glitch_meta_screen6.png`,
+ image: `${images_url}/learning_theme_math.jpg`,
comment:
- "<i>Le jeu vidéo et l'informatique en général, c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</i>",
+ "<i>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 !</i>",
details: [
- "Algorithmie, logique, calcul, ensembles, géométrie, trigonométrie, algèbre linéaire ,vecteurs, repères en 2 dimensions ...",
+ "Algorithmie, logique, géométrie, trigonométrie, algèbre linéaire, vecteurs, repères en 2D ...",
],
},
{
@@ -68,8 +68,8 @@ const GAMEDEV_THEMES = [
details: [],
},
{
- title: "Logiciels libres, systèmes Linux",
- image: `${images_url}/glitch_meta_screen2.png`,
+ title: "Logiciels libres, GNU/Linux",
+ image: `${images_url}/learning_theme_linux.jpg`,
comment:
"<i>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 !</i>",
details: [],
diff --git a/src/pages/education/components/popularization.js b/src/pages/education/components/popularization.js
index a4cf8ecb1cff66ffc4bcbf219babb72c24bc3580..13cb54cf9d6868bd9a40053e55c825c967542b1d 100644
--- a/src/pages/education/components/popularization.js
+++ b/src/pages/education/components/popularization.js
@@ -16,7 +16,7 @@ const VULGARISATION_THEMES = [
},
{
title: "GNU/Linux, le monde du libre",
- image: `${images_url}/glitch_meta_screen2.png`,
+ image: `${images_url}/learning_theme_linux.jpg`,
comment: "",
details: [
"Installer Linux, démystifier et faire tomber les barrières.",
@@ -35,7 +35,7 @@ const VULGARISATION_THEMES = [
},
{
title: "Le langages des machines",
- image: `${images_url}/glitch_meta_screen4.png`,
+ image: `${images_url}/learning_theme_code.jpg`,
comment: "",
details: [
"Démystifier la programmation informatique",
diff --git a/src/pages/education/education.scss b/src/pages/education/education.scss
index 4fdba544056f6b9ef57520f73661a199dc5399f9..a96b72b4b91b0cccd622dd360d33c8079db599fe 100644
--- a/src/pages/education/education.scss
+++ b/src/pages/education/education.scss
@@ -107,32 +107,19 @@
.infos-inscriptions {
display: flex;
gap: 40px;
+ background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
+ url("../assets/images/wallpaper_binary_light.png");
+ padding: 20px;
.groups,
.pricing {
- background-image: linear-gradient(
- rgba(255, 255, 255, 0.2),
- rgba(255, 255, 255, 0.2)
- ),
- url("../assets/images/wallpaper_binary_light.png");
+ background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
- & > * {
- background-color: white;
- margin: 0;
- width: 100%;
- }
h3 {
- flex: 1;
- padding: 20px 20px 10px;
- }
- p {
- padding: 10px 20px;
- flex: 1;
+ margin: 0;
}
.table-wrapper {
- flex: 1;
- padding: 20px;
table {
border: 1px solid #dde;
border-collapse: collapse;
@@ -143,9 +130,6 @@
}
}
}
- .pricing {
- // flex: 1;
- }
}
}
}
diff --git a/src/style.scss b/src/style.scss
index 472df3e4714468ed02152ae4651f01c285a36c21..1d2fa44821fc1d6198035e592867c531d98fa84a 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -20,7 +20,7 @@ main {
header {
width: 100%;
nav {
- background-color: #fff1;
+ background-color: rgba(255, 255, 255, 0.1);
ul {
display: flex;
padding: 0;
@@ -30,10 +30,15 @@ main {
position: relative;
a {
display: flex;
+ align-items: center;
+ height: 100%;
padding: 10px 20px;
color: #b8b9c5;
font-weight: 500;
text-decoration: none;
+ img {
+ width: 40px;
+ }
}
.submenu {
@@ -41,11 +46,15 @@ main {
position: absolute;
height: auto;
max-height: 0;
- transition: max-height .5s;
+ transition: max-height 0.5s;
top: 100%;
left: 50%;
flex-direction: column;
- background-image: url("../assets/images/wallpaper_binary.png");
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.1),
+ rgba(255, 255, 255, 0.1)
+ ),
+ url("../assets/images/wallpaper_binary.png");
white-space: nowrap;
}
&:hover,
@@ -59,6 +68,16 @@ main {
.submenu {
visibility: unset;
max-height: 1000px;
+ a {
+ color: #b8b9c5;
+ }
+ li {
+ &:hover {
+ a {
+ color: white;
+ }
+ }
+ }
}
}
}
diff --git a/src/template/template.js b/src/template/template.js
index eae8317637caa33aebf16e4999b219f0485fede5..f945e3ac38efa8d643f6327ca6cedb5586947ae5 100644
--- a/src/template/template.js
+++ b/src/template/template.js
@@ -1,7 +1,9 @@
"use strict";
+const { images_url } = require("../../constants");
+
const NAV_MENU_ITEMS = [
- ["/public/", "Accueil"],
+ ["/public/", "logo_kuadrado_s32.png; "],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
@@ -25,13 +27,25 @@ class Template {
tag: "ul",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
- const [href, text, submenu] = link;
+ let [href, text, submenu] = link;
+ const spltTxt = text.split(";");
+ text = spltTxt.length > 1 ? spltTxt[1] : text;
+ const img = spltTxt.length > 1 ? spltTxt[0] : undefined;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
- contents: [{ tag: "a", href, contents: text }].concat(
- submenu ? [this.renderMenu(submenu, true)] : []
- ),
+ contents: [
+ {
+ tag: "a",
+ href,
+ contents: img
+ ? [
+ { tag: "img", src: `${images_url}/${img}` },
+ { tag: "span", contents: text },
+ ]
+ : text,
+ },
+ ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
};
}),
};
diff --git a/style/pages/education/education.css b/style/pages/education/education.css
index a704330e55a91799af3a2c0672ac5e46369465ea..7e66c075c22e42761a9f3de3a1c7c1a9d0351884 100644
--- a/style/pages/education/education.css
+++ b/style/pages/education/education.css
@@ -105,34 +105,19 @@
#education-page .section-contents .infos-inscriptions {
display: flex;
gap: 40px;
+ background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("../assets/images/wallpaper_binary_light.png");
+ padding: 20px;
}
#education-page .section-contents .infos-inscriptions .groups,
#education-page .section-contents .infos-inscriptions .pricing {
- background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("../assets/images/wallpaper_binary_light.png");
+ background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
}
-#education-page .section-contents .infos-inscriptions .groups > *,
-#education-page .section-contents .infos-inscriptions .pricing > * {
- background-color: white;
- margin: 0;
- width: 100%;
-}
#education-page .section-contents .infos-inscriptions .groups h3,
#education-page .section-contents .infos-inscriptions .pricing h3 {
- flex: 1;
- padding: 20px 20px 10px;
-}
-#education-page .section-contents .infos-inscriptions .groups p,
-#education-page .section-contents .infos-inscriptions .pricing p {
- padding: 10px 20px;
- flex: 1;
-}
-#education-page .section-contents .infos-inscriptions .groups .table-wrapper,
-#education-page .section-contents .infos-inscriptions .pricing .table-wrapper {
- flex: 1;
- padding: 20px;
+ margin: 0;
}
#education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
#education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
diff --git a/style/style.css b/style/style.css
index 382adc23cd99d93a1297045af81f47727b7056f0..e71a402686e7125fe61b51b36927af96e15c35ae 100644
--- a/style/style.css
+++ b/style/style.css
@@ -22,7 +22,7 @@ main header {
width: 100%;
}
main header nav {
- background-color: #fff1;
+ background-color: rgba(255, 255, 255, 0.1);
}
main header nav ul {
display: flex;
@@ -35,11 +35,16 @@ main header nav ul li {
}
main header nav ul li a {
display: flex;
+ align-items: center;
+ height: 100%;
padding: 10px 20px;
color: #b8b9c5;
font-weight: 500;
text-decoration: none;
}
+main header nav ul li a img {
+ width: 40px;
+}
main header nav ul li .submenu {
visibility: hidden;
position: absolute;
@@ -49,7 +54,7 @@ main header nav ul li .submenu {
top: 100%;
left: 50%;
flex-direction: column;
- background-image: url("../assets/images/wallpaper_binary.png");
+ background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url("../assets/images/wallpaper_binary.png");
white-space: nowrap;
}
main header nav ul li:hover, main header nav ul li.active {
@@ -62,6 +67,12 @@ main header nav ul li:hover .submenu {
visibility: unset;
max-height: 1000px;
}
+main header nav ul li:hover .submenu a {
+ color: #b8b9c5;
+}
+main header nav ul li:hover .submenu li:hover a {
+ color: white;
+}
main #page-container {
background-color: white;
width: 1200px;
@@ -175,34 +186,19 @@ main #page-container #education-page .section-contents ul.learning-themes li.lea
main #page-container #education-page .section-contents .infos-inscriptions {
display: flex;
gap: 40px;
+ background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("../assets/images/wallpaper_binary_light.png");
+ padding: 20px;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups,
main #page-container #education-page .section-contents .infos-inscriptions .pricing {
- background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("../assets/images/wallpaper_binary_light.png");
+ background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
}
-main #page-container #education-page .section-contents .infos-inscriptions .groups > *,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing > * {
- background-color: white;
- margin: 0;
- width: 100%;
-}
main #page-container #education-page .section-contents .infos-inscriptions .groups h3,
main #page-container #education-page .section-contents .infos-inscriptions .pricing h3 {
- flex: 1;
- padding: 20px 20px 10px;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups p,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing p {
- padding: 10px 20px;
- flex: 1;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper {
- flex: 1;
- padding: 20px;
+ margin: 0;
}
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 {
diff --git a/style/style.css.map b/style/style.css.map
index cdf729022ff9ea5729b5890214750bad2c536f20..cfb66607f21e0ffe53a8db56d84f64b227270c37 100644
--- a/style/style.css.map
+++ b/style/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/style.scss","../src/pages/education/education.scss"],"names":[],"mappings":"AAAA;EAII;EACA;;AAJA;EACI;;AAIJ;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EAEI;;AACA;EACI;;AAIJ;EACI;EACA;;AAOxB;EACI;EACA;EACA;EACA;;ACtEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;AAAA;EAEI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AACA;AAAA;EAEI;EAKA;EACA;EACA;;AACA;AAAA;EACI;EACA;EACA;;AAEJ;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;ADlExB;EACI;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../src/style.scss","../src/pages/education/education.scss"],"names":[],"mappings":"AAAA;EAII;EACA;;AAJA;EACI;;AAIJ;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;;AAEJ;EAEI;;AACA;EACI;;AAIJ;EACI;EACA;;AACA;EACI;;AAII;EACI;;AAUpC;EACI;EACA;EACA;EACA;;ACzFJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;AAAA;EAEI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;EACA;EAEA;;AACA;AAAA;EAEI;EACA;EACA;EACA;;AACA;AAAA;EACI;;AAGA;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;ADlCxB;EACI;EACA;EACA","file":"style.css"}
\ No newline at end of file