diff --git a/public/education/education.js b/public/education/education.js
index 994c32948c09fe32f2cec332d93eef2a04a284f8..a8f284b43c6212addfad182cbbd0c95b562b7555 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -109,12 +109,10 @@ module.exports = {
},{}],4:[function(require,module,exports){
"use strict";
-const { images_url } = require("../../../../constants");
-
const GAMEDEV_THEMES = [
{
title: "Dessin et création 2D",
- image: `${images_url}/learning_theme_2D.gif`,
+ class: "crea2d",
comment: "",
details: [
"Créer des décors et des personnages",
@@ -124,7 +122,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Musique et effets sonores",
- image: `${images_url}/learning_theme_sound.jpg`,
+ class: "sound",
comment: "",
details: [
"Utiliser des logiciels de son et des synthétiseurs",
@@ -135,7 +133,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Développer un univers",
- image: `${images_url}/glitch_meta_screen3.png`,
+ class: "write",
comment: "",
details: [
"Écrire une histoire, construire une narration",
@@ -144,7 +142,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Concevoir le jeu",
- image: `${images_url}/glitch_meta_screen4.png`,
+ class: "conception",
comment: "",
details: [
"Comprendre les différents éléments qui composent un jeu",
@@ -153,7 +151,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Programmation informatique",
- image: `${images_url}/learning_theme_code.jpg`,
+ class: "coding",
comment: "",
details: [
"Apprendre pas à pas à coder avec différents langages de programmation",
@@ -162,7 +160,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Mathématiques et physique",
- image: `${images_url}/learning_theme_math.jpg`,
+ class: "math",
comment:
"<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: [
@@ -171,14 +169,14 @@ const GAMEDEV_THEMES = [
},
{
title: "Travail en équipe",
- image: `${images_url}/glitch_meta_screen1.png`,
+ class: "team",
comment:
"<i>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.</i>",
details: [],
},
{
title: "Logiciels libres, GNU/Linux",
- image: `${images_url}/learning_theme_linux.jpg`,
+ class: "linux",
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: [],
@@ -266,18 +264,18 @@ class GameStudioClub {
contents: GAMEDEV_THEMES.map(li => {
return {
tag: "li",
- class: "learning-theme",
+ class: "learning-theme " + li.class,
contents: [
+ { tag: "strong", class: "title", contents: li.title },
{
tag: "div",
- class: "img-wrapper",
- contents: [{ tag: "img", src: li.image }],
- },
- {
- tag: "div",
- class: "right",
+ class: "details",
contents: [
- { tag: "strong", contents: li.title },
+ {
+ tag: "strong",
+ class: "title",
+ contents: li.title,
+ },
{
tag: "div",
class: "comment",
@@ -431,7 +429,7 @@ class GameStudioClub {
module.exports = GameStudioClub;
-},{"../../../../constants":2}],5:[function(require,module,exports){
+},{}],5:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../../constants");
@@ -439,18 +437,17 @@ const { images_url } = require("../../../../constants");
const VULGARISATION_THEMES = [
{
title: "Qu'est-ce qui se passe dans mon ordinateur ?",
- image: `${images_url}/glitch_meta_screen1.png`,
+ class:"general-pc",
comment: "",
details: [
- "Répondre à des questions simples sur l'informatique de tous les jours",
+ "Répondre aux questions sur l'informatique de tous les jours",
"L'organisation des fichiers",
- "Le navigateur web",
- "Les logiciels usuels",
+ "Le navigateur web et les logiciels usuels",
],
},
{
title: "GNU/Linux, le monde du libre",
- image: `${images_url}/learning_theme_linux.jpg`,
+ class:"linux",
comment: "",
details: [
"Installer Linux, démystifier et faire tomber les barrières.",
@@ -458,18 +455,18 @@ const VULGARISATION_THEMES = [
],
},
{
- title: "Comment fonctionne le réseau internet ?",
- image: `${images_url}/glitch_meta_screen3.png`,
+ title: "Comment fonctionne le web ?",
+ class:"web",
comment: "",
details: [
"De quoi est fait le réseau internet ?",
- "Comment fonctionnent les différents services que nous utilisons ? (Sites, applications, boites mail, etc...)",
+ "Comment fonctionnent les différents services que nous utilisons ?",
"Qu'est-ce qu'un cloud ?",
],
},
{
title: "Le langages des machines",
- image: `${images_url}/learning_theme_code.jpg`,
+ class:"coding",
comment: "",
details: [
"Démystifier la programmation informatique",
@@ -543,18 +540,18 @@ class Popularization {
contents: VULGARISATION_THEMES.map(li => {
return {
tag: "li",
- class: "learning-theme",
+ class: "learning-theme " + li.class,
contents: [
+ { tag: "strong", class: "title", contents: li.title },
{
tag: "div",
- class: "img-wrapper",
- contents: [{ tag: "img", src: li.image }],
- },
- {
- tag: "div",
- class: "right",
+ class: "details",
contents: [
- { tag: "strong", contents: li.title },
+ {
+ tag: "strong",
+ class: "title",
+ contents: li.title,
+ },
{
tag: "div",
class: "comment",
diff --git a/src/pages/education/components/game-studio-club.js b/src/pages/education/components/game-studio-club.js
index 82064b874b19b727f2f755c15f290749c019102b..8b34045b299664bfe763bcf2bf60da0c6b8011d4 100644
--- a/src/pages/education/components/game-studio-club.js
+++ b/src/pages/education/components/game-studio-club.js
@@ -1,11 +1,9 @@
"use strict";
-const { images_url } = require("../../../../constants");
-
const GAMEDEV_THEMES = [
{
title: "Dessin et création 2D",
- image: `${images_url}/learning_theme_2D.gif`,
+ class: "crea2d",
comment: "",
details: [
"Créer des décors et des personnages",
@@ -15,7 +13,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Musique et effets sonores",
- image: `${images_url}/learning_theme_sound.jpg`,
+ class: "sound",
comment: "",
details: [
"Utiliser des logiciels de son et des synthétiseurs",
@@ -26,7 +24,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Développer un univers",
- image: `${images_url}/glitch_meta_screen3.png`,
+ class: "write",
comment: "",
details: [
"Écrire une histoire, construire une narration",
@@ -35,7 +33,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Concevoir le jeu",
- image: `${images_url}/glitch_meta_screen4.png`,
+ class: "conception",
comment: "",
details: [
"Comprendre les différents éléments qui composent un jeu",
@@ -44,7 +42,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Programmation informatique",
- image: `${images_url}/learning_theme_code.jpg`,
+ class: "coding",
comment: "",
details: [
"Apprendre pas à pas à coder avec différents langages de programmation",
@@ -53,7 +51,7 @@ const GAMEDEV_THEMES = [
},
{
title: "Mathématiques et physique",
- image: `${images_url}/learning_theme_math.jpg`,
+ class: "math",
comment:
"<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: [
@@ -62,14 +60,14 @@ const GAMEDEV_THEMES = [
},
{
title: "Travail en équipe",
- image: `${images_url}/glitch_meta_screen1.png`,
+ class: "team",
comment:
"<i>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.</i>",
details: [],
},
{
title: "Logiciels libres, GNU/Linux",
- image: `${images_url}/learning_theme_linux.jpg`,
+ class: "linux",
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: [],
@@ -157,18 +155,18 @@ class GameStudioClub {
contents: GAMEDEV_THEMES.map(li => {
return {
tag: "li",
- class: "learning-theme",
+ class: "learning-theme " + li.class,
contents: [
+ { tag: "strong", class: "title", contents: li.title },
{
tag: "div",
- class: "img-wrapper",
- contents: [{ tag: "img", src: li.image }],
- },
- {
- tag: "div",
- class: "right",
+ class: "details",
contents: [
- { tag: "strong", contents: li.title },
+ {
+ tag: "strong",
+ class: "title",
+ contents: li.title,
+ },
{
tag: "div",
class: "comment",
diff --git a/src/pages/education/components/popularization.js b/src/pages/education/components/popularization.js
index 13cb54cf9d6868bd9a40053e55c825c967542b1d..470ab33d6fdff8d7f036f7ba0642248b3c3c0a1a 100644
--- a/src/pages/education/components/popularization.js
+++ b/src/pages/education/components/popularization.js
@@ -5,18 +5,17 @@ const { images_url } = require("../../../../constants");
const VULGARISATION_THEMES = [
{
title: "Qu'est-ce qui se passe dans mon ordinateur ?",
- image: `${images_url}/glitch_meta_screen1.png`,
+ class:"general-pc",
comment: "",
details: [
- "Répondre à des questions simples sur l'informatique de tous les jours",
+ "Répondre aux questions sur l'informatique de tous les jours",
"L'organisation des fichiers",
- "Le navigateur web",
- "Les logiciels usuels",
+ "Le navigateur web et les logiciels usuels",
],
},
{
title: "GNU/Linux, le monde du libre",
- image: `${images_url}/learning_theme_linux.jpg`,
+ class:"linux",
comment: "",
details: [
"Installer Linux, démystifier et faire tomber les barrières.",
@@ -24,18 +23,18 @@ const VULGARISATION_THEMES = [
],
},
{
- title: "Comment fonctionne le réseau internet ?",
- image: `${images_url}/glitch_meta_screen3.png`,
+ title: "Comment fonctionne le web ?",
+ class:"web",
comment: "",
details: [
"De quoi est fait le réseau internet ?",
- "Comment fonctionnent les différents services que nous utilisons ? (Sites, applications, boites mail, etc...)",
+ "Comment fonctionnent les différents services que nous utilisons ?",
"Qu'est-ce qu'un cloud ?",
],
},
{
title: "Le langages des machines",
- image: `${images_url}/learning_theme_code.jpg`,
+ class:"coding",
comment: "",
details: [
"Démystifier la programmation informatique",
@@ -109,18 +108,18 @@ class Popularization {
contents: VULGARISATION_THEMES.map(li => {
return {
tag: "li",
- class: "learning-theme",
+ class: "learning-theme " + li.class,
contents: [
+ { tag: "strong", class: "title", contents: li.title },
{
tag: "div",
- class: "img-wrapper",
- contents: [{ tag: "img", src: li.image }],
- },
- {
- tag: "div",
- class: "right",
+ class: "details",
contents: [
- { tag: "strong", contents: li.title },
+ {
+ tag: "strong",
+ class: "title",
+ contents: li.title,
+ },
{
tag: "div",
class: "comment",
diff --git a/src/pages/education/education.scss b/src/pages/education/education.scss
index a96b72b4b91b0cccd622dd360d33c8079db599fe..5b094c476837b968ab7cf5cfad4f54249029be4e 100644
--- a/src/pages/education/education.scss
+++ b/src/pages/education/education.scss
@@ -61,46 +61,130 @@
grid-column: 1;
grid-row: 2;
display: flex;
- gap: 20px;
+ gap: 20px 30px;
flex-wrap: wrap;
li.learning-theme {
- display: grid;
- grid-template-columns: auto 280px;
- border-bottom: 1px solid #dde;
- border-right: 1px solid #dde;
- .img-wrapper {
- grid-column: 1;
- width: 130px;
+ &.crea2d {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+ }
+ &.sound {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+ }
+ &.coding {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+ }
+ &.math {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+ }
+ &.linux {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+ }
+ &.team {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+ }
+ &.conception {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+ }
+ &.write {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+ }
+ &.web {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+ }
+ &.general-pc {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+ }
+ width: 250px;
+ height: 140px;
+ position: relative;
+ .title {
+ color: white;
+ padding: 10px 20px;
+ display: block;
+ }
+ .details {
+ background-color: #fffd;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ width: 300px;
+ height: auto;
+ max-height: 0;
+ visibility: hidden;
+ z-index: 1;
+ transition: max-height 0.6s;
+ padding: 20px;
+ box-shadow: 0 2px 12px 6px #0001;
overflow: hidden;
display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- img {
- position: absolute;
- max-height: 100%;
- min-width: 100%;
- }
- }
- .right {
- grid-column: 2;
- padding: 0 10px 10px;
- strong {
- display: block;
- margin-bottom: 10px;
+ flex-direction: column;
+ gap: 10px;
+ .title {
+ color: initial;
+ padding: 0;
}
.comment {
- font-size: 14px;
+ font-style: italic;
}
ul {
- font-size: 12px;
list-style-type: disc;
- margin: 10px 0 0 20px;
- display: flex;
- flex-direction: column;
- gap: 8px;
+ font-size: 14px;
+ margin-left: 10px;
+ }
+ }
+ &:hover {
+ .details {
+ max-height: 1000px;
+ visibility: visible;
}
}
+ // display: grid;
+ // grid-template-columns: auto 280px;
+ // border-bottom: 1px solid #dde;
+ // border-right: 1px solid #dde;
+ // .img-wrapper {
+ // grid-column: 1;
+ // width: 130px;
+ // overflow: hidden;
+ // display: flex;
+ // justify-content: center;
+ // align-items: center;
+ // position: relative;
+ // img {
+ // position: absolute;
+ // max-height: 100%;
+ // min-width: 100%;
+ // }
+ // }
+ // .right {
+ // grid-column: 2;
+ // padding: 0 10px 10px;
+ // strong {
+ // display: block;
+ // margin-bottom: 10px;
+ // }
+ // .comment {
+ // font-size: 14px;
+ // }
+ // ul {
+ // font-size: 12px;
+ // list-style-type: disc;
+ // margin: 10px 0 0 20px;
+ // display: flex;
+ // flex-direction: column;
+ // gap: 8px;
+ // }
+ // }
}
}
diff --git a/src/style.scss b/src/style.scss
index 1d2fa44821fc1d6198035e592867c531d98fa84a..62270e9ac3316dec347ff4660d52608015cec13e 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -46,7 +46,7 @@ main {
position: absolute;
height: auto;
max-height: 0;
- transition: max-height 0.5s;
+ transition: max-height 0.6s;
top: 100%;
left: 50%;
flex-direction: column;
@@ -57,14 +57,17 @@ main {
url("../assets/images/wallpaper_binary.png");
white-space: nowrap;
}
- &:hover,
&.active {
- background-color: #fff2;
a {
color: white;
}
}
&:hover {
+ background-color: #fff2;
+ a {
+ color: white;
+ }
+
.submenu {
visibility: unset;
max-height: 1000px;
diff --git a/style/pages/education/education.css b/style/pages/education/education.css
index 7e66c075c22e42761a9f3de3a1c7c1a9d0351884..5e22c2c318e36f4d858d7bf2f028dcceb2a7d885 100644
--- a/style/pages/education/education.css
+++ b/style/pages/education/education.css
@@ -60,47 +60,92 @@
grid-column: 1;
grid-row: 2;
display: flex;
- gap: 20px;
+ gap: 20px 30px;
flex-wrap: wrap;
}
#education-page .section-contents ul.learning-themes li.learning-theme {
- display: grid;
- grid-template-columns: auto 280px;
- border-bottom: 1px solid #dde;
- border-right: 1px solid #dde;
-}
-#education-page .section-contents ul.learning-themes li.learning-theme .img-wrapper {
- grid-column: 1;
- width: 130px;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
+ width: 250px;
+ height: 140px;
position: relative;
}
-#education-page .section-contents ul.learning-themes li.learning-theme .img-wrapper img {
- position: absolute;
- max-height: 100%;
- min-width: 100%;
+#education-page .section-contents ul.learning-themes li.learning-theme.crea2d {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
}
-#education-page .section-contents ul.learning-themes li.learning-theme .right {
- grid-column: 2;
- padding: 0 10px 10px;
+#education-page .section-contents ul.learning-themes li.learning-theme.sound {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
}
-#education-page .section-contents ul.learning-themes li.learning-theme .right strong {
- display: block;
- margin-bottom: 10px;
+#education-page .section-contents ul.learning-themes li.learning-theme.coding {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
}
-#education-page .section-contents ul.learning-themes li.learning-theme .right .comment {
- font-size: 14px;
+#education-page .section-contents ul.learning-themes li.learning-theme.math {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
}
-#education-page .section-contents ul.learning-themes li.learning-theme .right ul {
- font-size: 12px;
- list-style-type: disc;
- margin: 10px 0 0 20px;
+#education-page .section-contents ul.learning-themes li.learning-theme.linux {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme.team {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme.conception {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme.write {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme.web {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme.general-pc {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme .title {
+ color: white;
+ padding: 10px 20px;
+ display: block;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme .details {
+ background-color: #fffd;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ width: 300px;
+ height: auto;
+ max-height: 0;
+ visibility: hidden;
+ z-index: 1;
+ transition: max-height 0.6s;
+ padding: 20px;
+ box-shadow: 0 2px 12px 6px #0001;
+ overflow: hidden;
display: flex;
flex-direction: column;
- gap: 8px;
+ gap: 10px;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme .details .title {
+ color: initial;
+ padding: 0;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme .details .comment {
+ font-style: italic;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme .details ul {
+ list-style-type: disc;
+ font-size: 14px;
+ margin-left: 10px;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme:hover .details {
+ max-height: 1000px;
+ visibility: visible;
}
#education-page .section-contents .infos-inscriptions {
display: flex;
diff --git a/style/style.css b/style/style.css
index e71a402686e7125fe61b51b36927af96e15c35ae..85441fd82216247463d22b7aedec126e3f925324 100644
--- a/style/style.css
+++ b/style/style.css
@@ -50,17 +50,20 @@ main header nav ul li .submenu {
position: absolute;
height: auto;
max-height: 0;
- transition: max-height 0.5s;
+ transition: max-height 0.6s;
top: 100%;
left: 50%;
flex-direction: column;
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 {
+main header nav ul li.active a {
+ color: white;
+}
+main header nav ul li:hover {
background-color: #fff2;
}
-main header nav ul li:hover a, main header nav ul li.active a {
+main header nav ul li:hover a {
color: white;
}
main header nav ul li:hover .submenu {
@@ -141,47 +144,92 @@ main #page-container #education-page .section-contents ul.learning-themes {
grid-column: 1;
grid-row: 2;
display: flex;
- gap: 20px;
+ gap: 20px 30px;
flex-wrap: wrap;
}
main #page-container #education-page .section-contents ul.learning-themes li.learning-theme {
- display: grid;
- grid-template-columns: auto 280px;
- border-bottom: 1px solid #dde;
- border-right: 1px solid #dde;
-}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .img-wrapper {
- grid-column: 1;
- width: 130px;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
+ width: 250px;
+ height: 140px;
position: relative;
}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .img-wrapper img {
- position: absolute;
- max-height: 100%;
- min-width: 100%;
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.crea2d {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .right {
- grid-column: 2;
- padding: 0 10px 10px;
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.sound {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .right strong {
- display: block;
- margin-bottom: 10px;
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.coding {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .right .comment {
- font-size: 14px;
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.math {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
}
-main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .right ul {
- font-size: 12px;
- list-style-type: disc;
- margin: 10px 0 0 20px;
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.linux {
+ background: url("../../../assets/images/learning_theme_sound.jpg") 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_sound.jpg") 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_sound.jpg") 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_sound.jpg") 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_sound.jpg") no-repeat;
+ background-size: cover;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.general-pc {
+ background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background-size: cover;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .title {
+ color: white;
+ padding: 10px 20px;
+ display: block;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .details {
+ background-color: #fffd;
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ width: 300px;
+ height: auto;
+ max-height: 0;
+ visibility: hidden;
+ z-index: 1;
+ transition: max-height 0.6s;
+ padding: 20px;
+ box-shadow: 0 2px 12px 6px #0001;
+ overflow: hidden;
display: flex;
flex-direction: column;
- gap: 8px;
+ gap: 10px;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .details .title {
+ color: initial;
+ padding: 0;
+}
+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:hover .details {
+ max-height: 1000px;
+ visibility: visible;
}
main #page-container #education-page .section-contents .infos-inscriptions {
display: flex;
diff --git a/style/style.css.map b/style/style.css.map
index cfb66607f21e0ffe53a8db56d84f64b227270c37..a41a512345efedff7b137cccba4b63fcc8fc20a7 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;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
+{"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;;AAGA;EACI;;AAGR;EACI;;AACA;EACI;;AAGJ;EACI;EACA;;AACA;EACI;;AAII;EACI;;AAUpC;EACI;EACA;EACA;EACA;;AC5FJ;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;EAyCI;EACA;EACA;;AA1CA;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;;AAKJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAIJ;EACI;EACA;;AA2ChB;EACI;EACA;EACA;EAEA;;AACA;AAAA;EAEI;EACA;EACA;EACA;;AACA;AAAA;EACI;;AAGA;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;ADnHxB;EACI;EACA;EACA","file":"style.css"}
\ No newline at end of file