diff --git a/assets/images/popularization_banner.png b/assets/images/popularization_banner.png
index fcf5d7f57af41938d961100803ccb42b913a090d..5210d5a77acbcdbd31fbe11065baa56bcd0c3d11 100644
Binary files a/assets/images/popularization_banner.png and b/assets/images/popularization_banner.png differ
diff --git a/build.js b/build.js
index 2b14e728da6877b6de1ea5ddb5c2a34fd4445a42..b7e022b8891cba5147eb286dc622d1fe90f554d1 100644
--- a/build.js
+++ b/build.js
@@ -19,6 +19,7 @@ function getPageHtml(pagename) {
<html>
<head>
<meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>Kuadrado Software - ${pagename}</title>
<link href="../../style/style.css" rel="stylesheet" />
</head>
diff --git a/public/education/education.js b/public/education/education.js
index 16c0cc640e6de4e7a5fbf5d07795a01eda4c9a08..83ed969e27441e29ee8f2a686a8c587e4bdd9f44 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -109,10 +109,12 @@ module.exports = {
},{}],4:[function(require,module,exports){
"use strict";
+const { images_url } = require("../../../../constants");
+
const GAMEDEV_THEMES = [
{
title: "Dessin et création 2D",
- class: "crea2d",
+ image: "learning_theme_2d.png",
details: [
"Création de décors et de personnages",
"Dessin sur ordinateur, pixel art, vectoriel",
@@ -121,12 +123,12 @@ const GAMEDEV_THEMES = [
},
{
title: "Musique et sons",
- class: "sound",
+ image: "learning_theme_sound.png",
details: ["Logiciels de son et synthétiseurs", "Composition", "Prise de son", "Mixage"],
},
{
title: "Écriture",
- class: "write",
+ image: "learning_theme_write.png",
details: [
"Écrire une histoire, construire une narration",
"Imaginer des mondes et des personnages",
@@ -134,8 +136,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Conception",
- class: "conception",
- comment: "",
+ image: "learning_theme_conception.png",
details: [
"Concevoir les différents éléments qui composent le jeu",
"Développer les mécanismes de gameplay",
@@ -143,8 +144,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Programmation",
- class: "coding",
- comment: "",
+ 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",
@@ -152,7 +152,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Mathématiques",
- class: "math",
+ 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: [
@@ -169,20 +169,20 @@ const GAMEDEV_THEMES = [
},
{
title: "Travail d'équipe",
- class: "team",
+ 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.
+ <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: [],
+ details: ["Gestion de projet", "Méthodes agiles", "Communication"],
},
{
title: "Logiciels libres, GNU/Linux",
- class: "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: [],
+ "<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", "..."],
},
];
@@ -205,7 +205,12 @@ class GameStudioClub {
tag: "div",
class: "full-row",
contents: [
- { tag: "h3", contents: "Apprendre à créer un jeu vidéo de A à Z" },
+ {
+ tag: "h3",
+ class: "big",
+ contents:
+ "Apprendre à créer un <blue>jeu vidéo</blue> de A à Z",
+ },
{
tag: "strong",
contents:
@@ -214,7 +219,7 @@ class GameStudioClub {
{
tag: "p",
contents:
- "<em>Aucun prérequis nécessaire. Pas besoin d'être fort en maths ou en informatique, le but est d'apprendre et se détendre !</em>",
+ "<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>",
},
],
},
@@ -241,7 +246,8 @@ class GameStudioClub {
{ tag: "strong", contents: "Pour qui ?" },
{
tag: "span",
- contents: "Tout le monde à partir de 12 ans.",
+ contents:
+ "Tout le monde à partir de <b><blue>12 ans</blue></b>.",
},
],
},
@@ -272,9 +278,10 @@ class GameStudioClub {
contents: GAMEDEV_THEMES.map(li => {
return {
tag: "li",
- class: "learning-theme " + li.class,
+ class: "learning-theme",
contents: [
{ tag: "strong", class: "title", contents: li.title },
+ { tag: "img", src: `${images_url}/${li.image}` },
{
tag: "div",
class: "details",
@@ -313,7 +320,8 @@ class GameStudioClub {
},
{
tag: "p",
- contents: "Les groupes sont de 5 personnes maximum.",
+ contents:
+ "Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
},
{
tag: "div",
@@ -369,7 +377,7 @@ class GameStudioClub {
{
tag: "p",
contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.
- <br>Le matériel informatique est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
+ <br /><br />Le matériel informatique est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
`,
},
{
@@ -390,7 +398,7 @@ class GameStudioClub {
tag: "td",
contents: "(4 séances)",
},
- { tag: "td", contents: "70€" },
+ { tag: "td", contents: "60€" },
],
},
{
@@ -405,7 +413,7 @@ class GameStudioClub {
tag: "td",
contents: "(12 séances)",
},
- { tag: "td", contents: "190€" },
+ { tag: "td", contents: "160€" },
],
},
],
@@ -425,24 +433,25 @@ class GameStudioClub {
module.exports = GameStudioClub;
-},{}],5:[function(require,module,exports){
+},{"../../../../constants":2}],5:[function(require,module,exports){
"use strict";
+const { images_url } = require("../../../../constants");
+
const VULGARISATION_THEMES = [
{
title: "Qu'est-ce qui se passe dans mon ordinateur ?",
- class:"pc",
- comment: "",
+ 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",
- class:"linux",
- comment: "",
+ image: "learning_theme_linux.png",
details: [
"Installer Linux, démystifier et faire tomber les barrières.",
"Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
@@ -450,8 +459,7 @@ const VULGARISATION_THEMES = [
},
{
title: "Comment fonctionne le web ?",
- class:"web",
- comment: "",
+ image: "learning_theme_web.png",
details: [
"De quoi est fait le réseau internet ?",
"Comment fonctionnent les différents services que nous utilisons ?",
@@ -460,8 +468,7 @@ const VULGARISATION_THEMES = [
},
{
title: "Le langages des machines",
- class:"coding",
- comment: "",
+ image: "learning_theme_coding.png",
details: [
"Démystifier la programmation informatique",
"Qu'est-ce qu'un langage de programmation",
@@ -480,7 +487,7 @@ class Popularization {
tag: "div",
class: "title-banner popu-banner",
id: "popularization", // anchor id
- contents: [{ tag: "h2", contents: "Ateliers de vulgarisation" }],
+ contents: [{ tag: "h2", contents: "Vulgarisation numérique" }],
},
{
tag: "div",
@@ -503,7 +510,7 @@ class Popularization {
{
tag: "span",
contents:
- "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un devis gratuit.",
+ "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un <b><blue>devis gratuit</blue></b>.",
},
],
},
@@ -537,15 +544,11 @@ class Popularization {
class: "learning-theme " + li.class,
contents: [
{ tag: "strong", class: "title", contents: li.title },
+ { tag: "img", src: `${images_url}/${li.image}` },
{
tag: "div",
class: "details",
contents: [
- {
- tag: "strong",
- class: "title",
- contents: li.title,
- },
{
tag: "div",
class: "comment",
@@ -575,7 +578,7 @@ class Popularization {
module.exports = Popularization;
-},{}],6:[function(require,module,exports){
+},{"../../../../constants":2}],6:[function(require,module,exports){
"use strict";
const GameStudioClub = require("./components/game-studio-club");
@@ -591,7 +594,7 @@ class EducationPage {
tag: "div",
id: "education-page",
contents: [
- { tag: "h1", contents: "Pédagogie" },
+ { tag: "h1", contents: "<blue>Pédagogie</blue>" },
{
tag: "p",
class: "edu-philo",
@@ -627,13 +630,13 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":3,"./template/template":9}],9:[function(require,module,exports){
+},{"./lib/object-html-renderer":3,"./template/template":10}],9:[function(require,module,exports){
"use strict";
-const { images_url } = require("../../constants");
+const { images_url } = require("../../../constants");
+const HOME_LOGO = "logo_kuadrado_s32.png";
const NAV_MENU_ITEMS = [
- ["/public/", "logo_kuadrado_s32.png; "],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
@@ -647,20 +650,53 @@ const NAV_MENU_ITEMS = [
],
];
-class Template {
- constructor(props) {
- this.props = props;
+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: "/public/",
+ contents: [
+ {
+ tag: "img",
+ src: `${images_url}/${HOME_LOGO}`,
+ },
+ ],
+ },
+ ],
+ };
}
renderMenu(menuItemsArray, isSubmenu = false) {
- const r = {
+ return {
tag: "ul",
+ id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(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;
+ const [href, text, submenu] = link;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
@@ -668,32 +704,53 @@ class Template {
{
tag: "a",
href,
- contents: img
- ? [
- { tag: "img", src: `${images_url}/${img}` },
- { tag: "span", contents: text },
- ]
- : text,
+ contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
};
}),
};
- return r;
}
+ 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}],10:[function(require,module,exports){
+"use strict";
+
+const NavBar = require("./components/navbar");
+
+class Template {
+ constructor(props) {
+ this.props = props;
+ }
render() {
return {
tag: "main",
contents: [
{
tag: "header",
- contents: [
- {
- tag: "nav",
- contents: [this.renderMenu(NAV_MENU_ITEMS)],
- },
- ],
+ contents: [new NavBar().render()],
},
{
tag: "div",
@@ -717,4 +774,4 @@ class Template {
module.exports = Template;
-},{"../../constants":2}]},{},[7]);
+},{"./components/navbar":9}]},{},[7]);
diff --git a/public/education/index.html b/public/education/index.html
index 4ce83d17341eafaf08a4dbef2ee28004c169bd60..4d42538363095847bdd1795ea8374a74a40db822 100644
--- a/public/education/index.html
+++ b/public/education/index.html
@@ -3,6 +3,7 @@
<html>
<head>
<meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>Kuadrado Software - education</title>
<link href="../../style/style.css" rel="stylesheet" />
</head>
diff --git a/public/games/games.js b/public/games/games.js
index 3641539c87259fc25e4c2bcf830de9ef9024f04c..fbed8b6fbc8d9665e04bb48924e188c5180d23b6 100644
--- a/public/games/games.js
+++ b/public/games/games.js
@@ -149,13 +149,13 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":3,"./template/template":7}],7:[function(require,module,exports){
+},{"./lib/object-html-renderer":3,"./template/template":8}],7:[function(require,module,exports){
"use strict";
-const { images_url } = require("../../constants");
+const { images_url } = require("../../../constants");
+const HOME_LOGO = "logo_kuadrado_s32.png";
const NAV_MENU_ITEMS = [
- ["/public/", "logo_kuadrado_s32.png; "],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
@@ -169,20 +169,53 @@ const NAV_MENU_ITEMS = [
],
];
-class Template {
- constructor(props) {
- this.props = props;
+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: "/public/",
+ contents: [
+ {
+ tag: "img",
+ src: `${images_url}/${HOME_LOGO}`,
+ },
+ ],
+ },
+ ],
+ };
}
renderMenu(menuItemsArray, isSubmenu = false) {
- const r = {
+ return {
tag: "ul",
+ id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(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;
+ const [href, text, submenu] = link;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
@@ -190,32 +223,53 @@ class Template {
{
tag: "a",
href,
- contents: img
- ? [
- { tag: "img", src: `${images_url}/${img}` },
- { tag: "span", contents: text },
- ]
- : text,
+ contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
};
}),
};
- return r;
+ }
+
+ 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}],8:[function(require,module,exports){
+"use strict";
+
+const NavBar = require("./components/navbar");
+
+class Template {
+ constructor(props) {
+ this.props = props;
+ }
render() {
return {
tag: "main",
contents: [
{
tag: "header",
- contents: [
- {
- tag: "nav",
- contents: [this.renderMenu(NAV_MENU_ITEMS)],
- },
- ],
+ contents: [new NavBar().render()],
},
{
tag: "div",
@@ -239,4 +293,4 @@ class Template {
module.exports = Template;
-},{"../../constants":2}]},{},[5]);
+},{"./components/navbar":7}]},{},[5]);
diff --git a/public/games/index.html b/public/games/index.html
index 21b93ee2aab48731d30e97ff5db137ec19e9ba13..addc0c40022720980966f6810faadf8fecb95f3b 100644
--- a/public/games/index.html
+++ b/public/games/index.html
@@ -3,6 +3,7 @@
<html>
<head>
<meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>Kuadrado Software - games</title>
<link href="../../style/style.css" rel="stylesheet" />
</head>
diff --git a/public/main.js b/public/main.js
index b01a7088c52388d31163822017d8b78dd18766fe..ffe81b5dc125a1b3b270586129cda198dcc6cb6d 100644
--- a/public/main.js
+++ b/public/main.js
@@ -149,13 +149,13 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":4,"./template/template":7}],7:[function(require,module,exports){
+},{"./lib/object-html-renderer":4,"./template/template":8}],7:[function(require,module,exports){
"use strict";
-const { images_url } = require("../../constants");
+const { images_url } = require("../../../constants");
+const HOME_LOGO = "logo_kuadrado_s32.png";
const NAV_MENU_ITEMS = [
- ["/public/", "logo_kuadrado_s32.png; "],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
@@ -169,20 +169,53 @@ const NAV_MENU_ITEMS = [
],
];
-class Template {
- constructor(props) {
- this.props = props;
+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: "/public/",
+ contents: [
+ {
+ tag: "img",
+ src: `${images_url}/${HOME_LOGO}`,
+ },
+ ],
+ },
+ ],
+ };
}
renderMenu(menuItemsArray, isSubmenu = false) {
- const r = {
+ return {
tag: "ul",
+ id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(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;
+ const [href, text, submenu] = link;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
@@ -190,32 +223,53 @@ class Template {
{
tag: "a",
href,
- contents: img
- ? [
- { tag: "img", src: `${images_url}/${img}` },
- { tag: "span", contents: text },
- ]
- : text,
+ contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
};
}),
};
- return r;
+ }
+
+ 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}],8:[function(require,module,exports){
+"use strict";
+
+const NavBar = require("./components/navbar");
+
+class Template {
+ constructor(props) {
+ this.props = props;
+ }
render() {
return {
tag: "main",
contents: [
{
tag: "header",
- contents: [
- {
- tag: "nav",
- contents: [this.renderMenu(NAV_MENU_ITEMS)],
- },
- ],
+ contents: [new NavBar().render()],
},
{
tag: "div",
@@ -239,4 +293,4 @@ class Template {
module.exports = Template;
-},{"../../constants":2}]},{},[5]);
+},{"./components/navbar":7}]},{},[5]);
diff --git a/public/software-development/index.html b/public/software-development/index.html
index 22249bb1c025bf5ee3c830a964a569f41e53716c..bf1742163121a976571397ef21a0d723cb8dd421 100644
--- a/public/software-development/index.html
+++ b/public/software-development/index.html
@@ -3,6 +3,7 @@
<html>
<head>
<meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>Kuadrado Software - software-development</title>
<link href="../../style/style.css" rel="stylesheet" />
</head>
diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js
index 3a91476ec3446dcc0a052aa153478f962aeba97a..2144b979da1c7705479f9bbf3d5249ff1e184a22 100644
--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -149,13 +149,13 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":3,"./template/template":7}],7:[function(require,module,exports){
+},{"./lib/object-html-renderer":3,"./template/template":8}],7:[function(require,module,exports){
"use strict";
-const { images_url } = require("../../constants");
+const { images_url } = require("../../../constants");
+const HOME_LOGO = "logo_kuadrado_s32.png";
const NAV_MENU_ITEMS = [
- ["/public/", "logo_kuadrado_s32.png; "],
["/public/games/", "Jeux"],
["/public/software-development/", "Software"],
[
@@ -169,20 +169,53 @@ const NAV_MENU_ITEMS = [
],
];
-class Template {
- constructor(props) {
- this.props = props;
+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: "/public/",
+ contents: [
+ {
+ tag: "img",
+ src: `${images_url}/${HOME_LOGO}`,
+ },
+ ],
+ },
+ ],
+ };
}
renderMenu(menuItemsArray, isSubmenu = false) {
- const r = {
+ return {
tag: "ul",
+ id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(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;
+ const [href, text, submenu] = link;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
@@ -190,32 +223,53 @@ class Template {
{
tag: "a",
href,
- contents: img
- ? [
- { tag: "img", src: `${images_url}/${img}` },
- { tag: "span", contents: text },
- ]
- : text,
+ contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
};
}),
};
- return r;
+ }
+
+ 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}],8:[function(require,module,exports){
+"use strict";
+
+const NavBar = require("./components/navbar");
+
+class Template {
+ constructor(props) {
+ this.props = props;
+ }
render() {
return {
tag: "main",
contents: [
{
tag: "header",
- contents: [
- {
- tag: "nav",
- contents: [this.renderMenu(NAV_MENU_ITEMS)],
- },
- ],
+ contents: [new NavBar().render()],
},
{
tag: "div",
@@ -239,4 +293,4 @@ class Template {
module.exports = Template;
-},{"../../constants":2}]},{},[5]);
+},{"./components/navbar":7}]},{},[5]);
diff --git a/src/pages/education/components/game-studio-club.js b/src/pages/education/components/game-studio-club.js
index 6ea91cb97a2211343111eccdd48ee3425c7eaed0..e0de3ec7b5ee2a0b8baf7dc13c201675942e3b9f 100644
--- a/src/pages/education/components/game-studio-club.js
+++ b/src/pages/education/components/game-studio-club.js
@@ -1,9 +1,11 @@
"use strict";
+const { images_url } = require("../../../../constants");
+
const GAMEDEV_THEMES = [
{
title: "Dessin et création 2D",
- class: "crea2d",
+ image: "learning_theme_2d.png",
details: [
"Création de décors et de personnages",
"Dessin sur ordinateur, pixel art, vectoriel",
@@ -12,12 +14,12 @@ const GAMEDEV_THEMES = [
},
{
title: "Musique et sons",
- class: "sound",
+ image: "learning_theme_sound.png",
details: ["Logiciels de son et synthétiseurs", "Composition", "Prise de son", "Mixage"],
},
{
title: "Écriture",
- class: "write",
+ image: "learning_theme_write.png",
details: [
"Écrire une histoire, construire une narration",
"Imaginer des mondes et des personnages",
@@ -25,8 +27,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Conception",
- class: "conception",
- comment: "",
+ image: "learning_theme_conception.png",
details: [
"Concevoir les différents éléments qui composent le jeu",
"Développer les mécanismes de gameplay",
@@ -34,8 +35,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Programmation",
- class: "coding",
- comment: "",
+ 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",
@@ -43,7 +43,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Mathématiques",
- class: "math",
+ 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: [
@@ -60,20 +60,20 @@ const GAMEDEV_THEMES = [
},
{
title: "Travail d'équipe",
- class: "team",
+ 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.
+ <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: [],
+ details: ["Gestion de projet", "Méthodes agiles", "Communication"],
},
{
title: "Logiciels libres, GNU/Linux",
- class: "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: [],
+ "<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", "..."],
},
];
@@ -96,7 +96,12 @@ class GameStudioClub {
tag: "div",
class: "full-row",
contents: [
- { tag: "h3", contents: "Apprendre à créer un jeu vidéo de A à Z" },
+ {
+ tag: "h3",
+ class: "big",
+ contents:
+ "Apprendre à créer un <blue>jeu vidéo</blue> de A à Z",
+ },
{
tag: "strong",
contents:
@@ -105,7 +110,7 @@ class GameStudioClub {
{
tag: "p",
contents:
- "<em>Aucun prérequis nécessaire. Pas besoin d'être fort en maths ou en informatique, le but est d'apprendre et se détendre !</em>",
+ "<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>",
},
],
},
@@ -132,7 +137,8 @@ class GameStudioClub {
{ tag: "strong", contents: "Pour qui ?" },
{
tag: "span",
- contents: "Tout le monde à partir de 12 ans.",
+ contents:
+ "Tout le monde à partir de <b><blue>12 ans</blue></b>.",
},
],
},
@@ -163,9 +169,10 @@ class GameStudioClub {
contents: GAMEDEV_THEMES.map(li => {
return {
tag: "li",
- class: "learning-theme " + li.class,
+ class: "learning-theme",
contents: [
{ tag: "strong", class: "title", contents: li.title },
+ { tag: "img", src: `${images_url}/${li.image}` },
{
tag: "div",
class: "details",
@@ -204,7 +211,8 @@ class GameStudioClub {
},
{
tag: "p",
- contents: "Les groupes sont de 5 personnes maximum.",
+ contents:
+ "Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
},
{
tag: "div",
@@ -260,7 +268,7 @@ class GameStudioClub {
{
tag: "p",
contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.
- <br>Le matériel informatique est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
+ <br /><br />Le matériel informatique est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
`,
},
{
@@ -281,7 +289,7 @@ class GameStudioClub {
tag: "td",
contents: "(4 séances)",
},
- { tag: "td", contents: "70€" },
+ { tag: "td", contents: "60€" },
],
},
{
@@ -296,7 +304,7 @@ class GameStudioClub {
tag: "td",
contents: "(12 séances)",
},
- { tag: "td", contents: "190€" },
+ { tag: "td", contents: "160€" },
],
},
],
diff --git a/src/pages/education/components/popularization.js b/src/pages/education/components/popularization.js
index 9b4236924fd036f09306c4b2905a4ddad1ea1581..2ab8b4eb899b29b0f7386dc1e975427b633c40ee 100644
--- a/src/pages/education/components/popularization.js
+++ b/src/pages/education/components/popularization.js
@@ -1,20 +1,21 @@
"use strict";
+const { images_url } = require("../../../../constants");
+
const VULGARISATION_THEMES = [
{
title: "Qu'est-ce qui se passe dans mon ordinateur ?",
- class:"pc",
- comment: "",
+ 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",
- class:"linux",
- comment: "",
+ image: "learning_theme_linux.png",
details: [
"Installer Linux, démystifier et faire tomber les barrières.",
"Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
@@ -22,8 +23,7 @@ const VULGARISATION_THEMES = [
},
{
title: "Comment fonctionne le web ?",
- class:"web",
- comment: "",
+ image: "learning_theme_web.png",
details: [
"De quoi est fait le réseau internet ?",
"Comment fonctionnent les différents services que nous utilisons ?",
@@ -32,8 +32,7 @@ const VULGARISATION_THEMES = [
},
{
title: "Le langages des machines",
- class:"coding",
- comment: "",
+ image: "learning_theme_coding.png",
details: [
"Démystifier la programmation informatique",
"Qu'est-ce qu'un langage de programmation",
@@ -52,7 +51,7 @@ class Popularization {
tag: "div",
class: "title-banner popu-banner",
id: "popularization", // anchor id
- contents: [{ tag: "h2", contents: "Ateliers de vulgarisation" }],
+ contents: [{ tag: "h2", contents: "Vulgarisation numérique" }],
},
{
tag: "div",
@@ -75,7 +74,7 @@ class Popularization {
{
tag: "span",
contents:
- "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un devis gratuit.",
+ "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un <b><blue>devis gratuit</blue></b>.",
},
],
},
@@ -109,15 +108,11 @@ class Popularization {
class: "learning-theme " + li.class,
contents: [
{ tag: "strong", class: "title", contents: li.title },
+ { tag: "img", src: `${images_url}/${li.image}` },
{
tag: "div",
class: "details",
contents: [
- {
- tag: "strong",
- class: "title",
- contents: li.title,
- },
{
tag: "div",
class: "comment",
diff --git a/src/pages/education/education.js b/src/pages/education/education.js
index 9c180d152be9e6f0b4961b0b709267054804bc9b..c241aed50e121b75ea2c6c6debe7927b5c67eabd 100644
--- a/src/pages/education/education.js
+++ b/src/pages/education/education.js
@@ -13,7 +13,7 @@ class EducationPage {
tag: "div",
id: "education-page",
contents: [
- { tag: "h1", contents: "Pédagogie" },
+ { tag: "h1", contents: "<blue>Pédagogie</blue>" },
{
tag: "p",
class: "edu-philo",
diff --git a/src/pages/education/education.scss b/src/pages/education/education.scss
index 70439e396125cec71de4f2ff6e1a6de6282e5818..cf3c92f81f13dacb395c1ca6a663555090ad63b6 100644
--- a/src/pages/education/education.scss
+++ b/src/pages/education/education.scss
@@ -3,6 +3,11 @@
margin: 15px 40px 0;
font-size: 25px;
}
+ h3 {
+ &.big {
+ font-size: 30px;
+ }
+ }
.edu-philo {
margin: 15px 40px 15px 100px;
max-width: 800px;
@@ -12,7 +17,8 @@
display: flex;
justify-content: flex-end;
flex-direction: column;
- height: 300px;
+ height: 15vw;
+ min-height: 250px;
&.game-banner {
background-image: url("../../../assets/images/game_studio_banner.png");
}
@@ -21,7 +27,7 @@
}
background-size: cover;
background-repeat: no-repeat;
- background-position: 0% 90%;
+ background-position: center;
h2 {
color: white;
font-size: 2.5em;
@@ -57,7 +63,6 @@
span,
a {
font-size: 14px;
- text-decoration: none;
}
}
}
@@ -68,55 +73,20 @@
gap: 20px 30px;
flex-wrap: wrap;
li.learning-theme {
- &.crea2d {
- background: url("../../../assets/images/learning_theme_2d.png") no-repeat ;
- background-size: cover;
- }
- &.sound {
- background: url("../../../assets/images/learning_theme_sound.png") no-repeat;
- background-size: cover;
- }
- &.coding {
- background: url("../../../assets/images/learning_theme_coding.png") no-repeat;
- background-size: cover;
- }
- &.math {
- background: url("../../../assets/images/learning_theme_math.png") no-repeat;
- background-size: cover;
- }
- &.linux {
- background: url("../../../assets/images/learning_theme_linux.png") no-repeat;
- background-size: cover;
- }
- &.team {
- background: url("../../../assets/images/learning_theme_team.png") no-repeat;
- background-size: cover;
- }
- &.conception {
- background: url("../../../assets/images/learning_theme_conception.png") no-repeat;
- background-size: cover;
- }
- &.write {
- background: url("../../../assets/images/learning_theme_write.png") no-repeat;
- background-size: cover;
- }
- &.web {
- background: url("../../../assets/images/learning_theme_web.png") no-repeat;
- background-size: cover;
- }
- &.pc {
- background: url("../../../assets/images/learning_theme_pc.png") no-repeat;
- background-size: cover;
- }
- width: 250px;
- height: 140px;
position: relative;
box-shadow: 3px 3px 5px 1px #0001;
- padding: 10px;
+ display: flex;
+ flex-direction: column;
.title {
color: $dark_2;
- font-size: 1.1em;
display: block;
+ position: absolute;
+ background-color: white;
+ padding: 5px 25px;
+ }
+ img {
+ width: 100%;
+ height: auto;
}
.details {
background-color: #fffd;
@@ -164,7 +134,6 @@
padding: 20px;
display: flex;
flex-direction: column;
- // box-shadow: 3px 3px 5px 1px #0001;
h3 {
margin: 0;
}
@@ -181,4 +150,121 @@
}
}
}
+ @media screen and (max-width: $screen_l) {
+ .section-contents {
+ ul.learning-themes {
+ 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;
+ .comment {
+ font-style: italic;
+ }
+ ul {
+ list-style-type: disc;
+ font-size: 14px;
+ margin-left: 10px;
+ li {
+ color: $dark_3;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ @media screen and (max-width: $screen_s) {
+ h1 {
+ margin: 15px 20px 0;
+ font-size: 25px;
+ }
+ h3 {
+ &.big {
+ font-size: 22px;
+ }
+ }
+ .edu-philo {
+ margin: 15px;
+ max-width: unset;
+ }
+ .title-banner {
+ height: 170px;
+ min-height: unset;
+ h2 {
+ font-size: 2em;
+ margin: 20px;
+ text-shadow: 0 0 4px #000b;
+ }
+ }
+ .section-contents {
+ margin: 20px 10px 40px;
+ grid-template-columns: 1fr;
+ .full-row {
+ grid-column: 1;
+ }
+ .practical-infos {
+ grid-column: 1;
+ grid-row: 3;
+ gap: 10px;
+ padding: 10px;
+ }
+ 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;
+ ul {
+ li {
+ color: $dark_3;
+ }
+ }
+ }
+ }
+ }
+
+ .infos-inscriptions {
+ display: flex;
+ gap: 10px;
+ padding: 10px;
+ flex-direction: column;
+ .groups,
+ .pricing {
+ background-color: white;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ .table-wrapper {
+ table {
+ width: 100%;
+ td {
+ border: 1px solid #dde;
+ padding: 10px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
}
diff --git a/src/style.scss b/src/style.scss
index f7a03549ef06e123ec3aaf763c5dd58c76515ebe..276db2b785fb0da98f1462a31d9a89b22c2d8067 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -15,6 +15,17 @@ body {
padding: 0;
list-style-type: none;
}
+ a {
+ color: $blue_2;
+ text-decoration: none;
+ &:hover {
+ color: $blue_3;
+ }
+ }
+
+ blue {
+ color: $blue_2;
+ }
}
main {
@@ -27,6 +38,15 @@ main {
header {
width: 100%;
nav {
+ display: flex;
+ align-items: center;
+ height: $navbar_height;
+ .home {
+ margin: 0 10px;
+ img {
+ width: 40px;
+ }
+ }
ul {
display: flex;
padding: 0;
@@ -42,9 +62,6 @@ main {
color: $light_1;
font-weight: 800;
text-decoration: none;
- img {
- width: 40px;
- }
}
.submenu {
@@ -89,6 +106,66 @@ main {
}
}
}
+ .burger {
+ display: none;
+ }
+ @media screen and (max-width: $screen_s) {
+ justify-content: space-between;
+ .burger {
+ display: flex;
+ font-weight: bold;
+ border: 1px solid;
+ margin: 0 20px;
+ cursor: pointer;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border-radius: 100%;
+ width: 25px;
+ height: 25px;
+ color: $dark_3;
+ font-size: 20px;
+ }
+ ul {
+ display: none;
+ &.responsive-show {
+ display: flex;
+ position: absolute;
+ right: 0;
+ max-width: 100vw;
+ min-width: 50vw;
+ top: $navbar_height;
+ flex-direction: column;
+ background-color: white;
+ box-shadow: 0 4px 6px 2px #0000000a;
+ li {
+ &.active {
+ a {
+ border: none;
+ }
+ }
+ .submenu {
+ display: flex;
+ visibility: visible;
+ position: relative;
+ height: unset;
+ max-height: unset;
+ transition: max-height 0.6s;
+ top: unset;
+ left: unset;
+ li {
+ a {
+ font-weight: 400;
+ font-size: 12px;
+ color: $light_1;
+ }
+ }
+ margin-left: 20px;
+ }
+ }
+ }
+ }
+ }
}
}
#page-container {
diff --git a/src/template/components/navbar.js b/src/template/components/navbar.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9159218936c5624e9a6976e7daa37884c71589a
--- /dev/null
+++ b/src/template/components/navbar.js
@@ -0,0 +1,103 @@
+"use strict";
+
+const { images_url } = require("../../../constants");
+
+const HOME_LOGO = "logo_kuadrado_s32.png";
+const NAV_MENU_ITEMS = [
+ ["/public/games/", "Jeux"],
+ ["/public/software-development/", "Software"],
+ [
+ "/public/education/",
+ "Pédagogie",
+ [
+ // submenu
+ ["/public/education/#game-studio-club", "Game Studio Club"],
+ ["/public/education/#popularization", "Animations vulgarisation"],
+ ],
+ ],
+];
+
+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: "/public/",
+ contents: [
+ {
+ tag: "img",
+ src: `${images_url}/${HOME_LOGO}`,
+ },
+ ],
+ },
+ ],
+ };
+ }
+
+ renderMenu(menuItemsArray, isSubmenu = false) {
+ return {
+ tag: "ul",
+ id: "nav-menu-list",
+ class: isSubmenu ? "submenu" : "",
+ contents: menuItemsArray.map(link => {
+ const [href, text, submenu] = link;
+ return {
+ tag: "li",
+ class: !isSubmenu && window.location.pathname === href ? "active" : "",
+ contents: [
+ {
+ tag: "a",
+ href,
+ contents: text,
+ },
+ ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
+ };
+ }),
+ };
+ }
+
+ 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;
diff --git a/src/template/template.js b/src/template/template.js
index f945e3ac38efa8d643f6327ca6cedb5586947ae5..3c13131925bb20812a07600e12ffeed2ebafa004 100644
--- a/src/template/template.js
+++ b/src/template/template.js
@@ -1,69 +1,18 @@
"use strict";
-const { images_url } = require("../../constants");
-
-const NAV_MENU_ITEMS = [
- ["/public/", "logo_kuadrado_s32.png; "],
- ["/public/games/", "Jeux"],
- ["/public/software-development/", "Software"],
- [
- "/public/education/",
- "Pédagogie",
- [
- // submenu
- ["/public/education/#game-studio-club", "Game Studio Club"],
- ["/public/education/#popularization", "Animations vulgarisation"],
- ],
- ],
-];
+const NavBar = require("./components/navbar");
class Template {
constructor(props) {
this.props = props;
}
-
- renderMenu(menuItemsArray, isSubmenu = false) {
- const r = {
- tag: "ul",
- class: isSubmenu ? "submenu" : "",
- contents: menuItemsArray.map(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: img
- ? [
- { tag: "img", src: `${images_url}/${img}` },
- { tag: "span", contents: text },
- ]
- : text,
- },
- ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
- };
- }),
- };
- return r;
- }
-
render() {
return {
tag: "main",
contents: [
{
tag: "header",
- contents: [
- {
- tag: "nav",
- contents: [this.renderMenu(NAV_MENU_ITEMS)],
- },
- ],
+ contents: [new NavBar().render()],
},
{
tag: "div",
diff --git a/src/theme.scss b/src/theme.scss
index 114bfdd08f9a2594ed890b748cb10ed16ee49c0d..4551e25ad69d1d6d7adb4ffe20a0373c598a0d55 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -15,3 +15,14 @@ $red_1: #9c3030;
$red_2: #e74949;
$yellow_1: #e5a002;
$yellow_2: #ffe600;
+
+// screen thresholds
+$screen_l: 900px;
+$screen_m: 780px;
+$screen_s: 560px;
+$screen_xs: 480px;
+
+
+// useful constants
+
+$navbar_height: 40px;
diff --git a/style/pages/education/education.css b/style/pages/education/education.css
index bd021868ddc935fda9d3f2adf28d334ca3867c5b..f4a31b939cf68793d093d3d3b2725b9911b55fea 100644
--- a/style/pages/education/education.css
+++ b/style/pages/education/education.css
@@ -1,9 +1,9 @@
/* Error: Undefined variable.
* ,
- * 47 | background-color: $light_0;
+ * 53 | background-color: $light_0;
* | ^^^^^^^^
* '
- * src/pages/education/education.scss 47:31 root stylesheet */
+ * src/pages/education/education.scss 53:31 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 47 \2502 background-color: $light_0;\a \2502 ^^^^^^^^\a \2575 \a src/pages/education/education.scss 47:31 root stylesheet";
+ content: "Error: Undefined variable.\a \2577 \a 53 \2502 background-color: $light_0;\a \2502 ^^^^^^^^\a \2575 \a src/pages/education/education.scss 53:31 root stylesheet";
}
diff --git a/style/style.css b/style/style.css
index 13f29f2ca3cd4fa54c5b4356b947d107da4dfdab..5511c249e96a75bafbe5090f7f5d99f888f1c40e 100644
--- a/style/style.css
+++ b/style/style.css
@@ -14,6 +14,16 @@ body ul {
padding: 0;
list-style-type: none;
}
+body a {
+ color: #34a0b3;
+ text-decoration: none;
+}
+body a:hover {
+ color: #17cff0;
+}
+body blue {
+ color: #34a0b3;
+}
main {
background: url("../assets/images/wallpaper_binary_white.png");
@@ -26,6 +36,17 @@ main {
main header {
width: 100%;
}
+main header nav {
+ display: flex;
+ align-items: center;
+ height: 40px;
+}
+main header nav .home {
+ margin: 0 10px;
+}
+main header nav .home img {
+ width: 40px;
+}
main header nav ul {
display: flex;
padding: 0;
@@ -44,9 +65,6 @@ main header nav ul li a {
font-weight: 800;
text-decoration: none;
}
-main header nav ul li a img {
- width: 40px;
-}
main header nav ul li .submenu {
visibility: hidden;
overflow: hidden;
@@ -78,6 +96,62 @@ main header nav ul li:hover .submenu a {
main header nav ul li:hover .submenu li:hover a {
color: #3c4144;
}
+main header nav .burger {
+ display: none;
+}
+@media screen and (max-width: 560px) {
+ main header nav {
+ justify-content: space-between;
+ }
+ main header nav .burger {
+ display: flex;
+ font-weight: bold;
+ border: 1px solid;
+ margin: 0 20px;
+ cursor: pointer;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border-radius: 100%;
+ width: 25px;
+ height: 25px;
+ color: #555d61;
+ font-size: 20px;
+ }
+ main header nav ul {
+ display: none;
+ }
+ main header nav ul.responsive-show {
+ display: flex;
+ position: absolute;
+ right: 0;
+ max-width: 100vw;
+ min-width: 50vw;
+ top: 40px;
+ flex-direction: column;
+ background-color: white;
+ box-shadow: 0 4px 6px 2px #0000000a;
+ }
+ main header nav ul.responsive-show li.active a {
+ border: none;
+ }
+ main header nav ul.responsive-show li .submenu {
+ display: flex;
+ visibility: visible;
+ position: relative;
+ height: unset;
+ max-height: unset;
+ transition: max-height 0.6s;
+ top: unset;
+ left: unset;
+ margin-left: 20px;
+ }
+ main header nav ul.responsive-show li .submenu li a {
+ font-weight: 400;
+ font-size: 12px;
+ color: #96a5ae;
+ }
+}
main #page-container {
background-color: white;
width: 1200px;
@@ -88,6 +162,9 @@ main #page-container #education-page h1 {
margin: 15px 40px 0;
font-size: 25px;
}
+main #page-container #education-page h3.big {
+ font-size: 30px;
+}
main #page-container #education-page .edu-philo {
margin: 15px 40px 15px 100px;
max-width: 800px;
@@ -97,10 +174,11 @@ main #page-container #education-page .title-banner {
display: flex;
justify-content: flex-end;
flex-direction: column;
- height: 300px;
+ height: 15vw;
+ min-height: 250px;
background-size: cover;
background-repeat: no-repeat;
- background-position: 0% 90%;
+ background-position: center;
}
main #page-container #education-page .title-banner.game-banner {
background-image: url("../../../assets/images/game_studio_banner.png");
@@ -145,7 +223,6 @@ main #page-container #education-page .section-contents .practical-infos .info-it
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;
- text-decoration: none;
}
main #page-container #education-page .section-contents ul.learning-themes {
grid-column: 1;
@@ -155,56 +232,21 @@ main #page-container #education-page .section-contents ul.learning-themes {
flex-wrap: wrap;
}
main #page-container #education-page .section-contents ul.learning-themes li.learning-theme {
- width: 250px;
- height: 140px;
position: relative;
box-shadow: 3px 3px 5px 1px #0001;
- padding: 10px;
-}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.crea2d {
- background: url("../../../assets/images/learning_theme_2d.png") no-repeat;
- background-size: cover;
-}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.sound {
- background: url("../../../assets/images/learning_theme_sound.png") no-repeat;
- background-size: cover;
-}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.coding {
- background: url("../../../assets/images/learning_theme_coding.png") no-repeat;
- background-size: cover;
-}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.math {
- background: url("../../../assets/images/learning_theme_math.png") no-repeat;
- background-size: cover;
-}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.linux {
- background: url("../../../assets/images/learning_theme_linux.png") no-repeat;
- background-size: cover;
-}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.team {
- background: url("../../../assets/images/learning_theme_team.png") no-repeat;
- background-size: cover;
-}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.conception {
- background: url("../../../assets/images/learning_theme_conception.png") no-repeat;
- background-size: cover;
-}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.write {
- background: url("../../../assets/images/learning_theme_write.png") no-repeat;
- background-size: cover;
-}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.web {
- background: url("../../../assets/images/learning_theme_web.png") no-repeat;
- background-size: cover;
-}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.pc {
- background: url("../../../assets/images/learning_theme_pc.png") no-repeat;
- background-size: cover;
+ display: flex;
+ flex-direction: column;
}
main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .title {
color: #3c4144;
- font-size: 1.1em;
display: block;
+ position: absolute;
+ background-color: white;
+ padding: 5px 25px;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme img {
+ width: 100%;
+ height: auto;
}
main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .details {
background-color: #fffd;
@@ -263,6 +305,115 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
border: 1px solid #dde;
padding: 10px 20px;
}
+@media screen and (max-width: 900px) {
+ main #page-container #education-page .section-contents ul.learning-themes {
+ display: block;
+ }
+ main #page-container #education-page .section-contents ul.learning-themes li.learning-theme {
+ margin-bottom: 20px;
+ }
+ main #page-container #education-page .section-contents 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 ul.learning-themes li.learning-theme .details .comment {
+ font-style: italic;
+ }
+ main #page-container #education-page .section-contents 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 ul.learning-themes li.learning-theme .details ul li {
+ color: #555d61;
+ }
+}
+@media screen and (max-width: 560px) {
+ main #page-container #education-page h1 {
+ margin: 15px 20px 0;
+ font-size: 25px;
+ }
+ main #page-container #education-page h3.big {
+ font-size: 22px;
+ }
+ main #page-container #education-page .edu-philo {
+ margin: 15px;
+ max-width: unset;
+ }
+ main #page-container #education-page .title-banner {
+ height: 170px;
+ min-height: unset;
+ }
+ main #page-container #education-page .title-banner h2 {
+ font-size: 2em;
+ margin: 20px;
+ text-shadow: 0 0 4px #000b;
+ }
+ main #page-container #education-page .section-contents {
+ margin: 20px 10px 40px;
+ grid-template-columns: 1fr;
+ }
+ main #page-container #education-page .section-contents .full-row {
+ grid-column: 1;
+ }
+ main #page-container #education-page .section-contents .practical-infos {
+ grid-column: 1;
+ grid-row: 3;
+ gap: 10px;
+ padding: 10px;
+ }
+ main #page-container #education-page .section-contents ul.learning-themes {
+ grid-column: 1;
+ grid-row: 2;
+ display: block;
+ }
+ main #page-container #education-page .section-contents ul.learning-themes li.learning-theme {
+ margin-bottom: 20px;
+ }
+ main #page-container #education-page .section-contents 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 ul.learning-themes li.learning-theme .details ul li {
+ color: #555d61;
+ }
+ main #page-container #education-page .section-contents .infos-inscriptions {
+ display: flex;
+ gap: 10px;
+ padding: 10px;
+ 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;
+ 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 footer {
width: 100%;
background-color: #fff1;
diff --git a/style/style.css.map b/style/style.css.map
index 2d8e97b39ae24851224055c546923d4c418c1a5c..4a3170688265f7b218e5750c717ea84b78507a34 100644
--- a/style/style.css.map
+++ b/style/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/style.scss","../src/theme.scss","../src/pages/education/education.scss"],"names":[],"mappings":"AAEA;EAQI;EACA;;AARA;EACI;EACA,OCLC;EDMD;EACA;EACA;;AAIJ;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEI;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA,OCrCd;EDsCc;EACA;;AACA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI,OC/DnB;EDgEmB;;AAIJ;EACI,OCrEnB;;ADwEe;EACI;EACA;;AACA;EACI,OCzEtB;ED0EsB;;AAII;EACI,OClF/B;;AD4FL;EACI;EACA;EACA;EACA;;AEhGJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EAOA;EACA;EACA;;AARA;EACI;;AAEJ;EACI;;AAKJ;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA,kBD3CF;EC4CE;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;AAAA;EAEI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;;AACA;EAyCI;EACA;EACA;EACA;EACA;;AA5CA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI,ODnHX;ECoHW;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;;AAIJ;EACI;EACA;;AAMhB;EACI;EACA;EACA,kBD3JF;EC4JE;;AACA;AAAA;EAEI;EACA;EACA;EACA;;AAEA;AAAA;EACI;;AAGA;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;AF5ExB;EACI;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../src/style.scss","../src/theme.scss","../src/pages/education/education.scss"],"names":[],"mappings":"AAEA;EAQI;EACA;;AARA;EACI;EACA,OCLC;EDMD;EACA;EACA;;AAIJ;EACI;EACA;EACA;;AAEJ;EACI,OCPC;EDQD;;AACA;EACI,OCTH;;ADaL;EACI,OCfC;;;ADmBT;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA,QCfI;;ADgBJ;EACI;;AACA;EACI;;AAGR;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA,OCzDd;ED0Dc;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI,OChFnB;EDiFmB;;AAIJ;EACI,OCtFnB;;ADyFe;EACI;EACA;;AACA;EACI,OC1FtB;ED2FsB;;AAII;EACI,OCnG/B;;AD2GG;EACI;;AAEJ;EAxEJ;IAyEQ;;EACA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OC3HX;ID4HW;;EAEJ;IACI;;EACA;IACI;IACA;IACA;IACA;IACA;IACA,KC7GR;ID8GQ;IACA;IACA;;EAGQ;IACI;;EAGR;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAQA;;EANI;IACI;IACA;IACA,OC3J9B;;;ADsKN;EACI;EACA;EACA;EACA;;AE7KJ;EACI;EACA;;AAGA;EACI;;AAGR;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EAOA;EACA;EACA;;AARA;EACI;;AAEJ;EACI;;AAKJ;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA,kBDjDF;ECkDE;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;AAAA;EAEI;;AAIZ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI,OD/EX;ECgFW;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;;AAIJ;EACI;EACA;;AAMhB;EACI;EACA;EACA,kBD7HF;EC8HE;;AACA;AAAA;EAEI;EACA;EACA;EACA;;AACA;AAAA;EACI;;AAGA;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;AAOxB;EAEQ;IACI;;EACA;IACI;;EACA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EACA;IACI;;EAEJ;IACI;IACA;IACA;;EACA;IACI,OD9KvB;;;ACuLL;EACI;IACI;IACA;;EAGA;IACI;;EAGR;IACI;IACA;;EAEJ;IACI;IACA;;EACA;IACI;IACA;IACA;;EAGR;IACI;IACA;;EACA;IACI;;EAEJ;IACI;IACA;IACA;IACA;;EAEJ;IACI;IACA;IACA;;EACA;IACI;;EACA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEI;IACI,OD5OvB;;ECmPG;IACI;IACA;IACA;IACA;;EACA;AAAA;IAEI;IACA;IACA;IACA;;EAEI;AAAA;IACI;;EACA;AAAA;IACI;IACA;;;AFpF5B;EACI;EACA;EACA","file":"style.css"}
\ No newline at end of file