diff --git a/Makefile b/Makefile
index c2d656468ec2796a73f991b1297548bc17f1a3f9..327de4ad61da13f998a66b144e3b96a83bd4cb93 100644
--- a/Makefile
+++ b/Makefile
@@ -22,3 +22,6 @@ web:
stylesheet:
docker exec -it kuadrado bash -c "npm run style"
+
+open:
+ firefox http://localhost:9000/public/
diff --git a/assets/images/game_studio_banner.png b/assets/images/game_studio_banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..f92f2af3542f02c75dc841a93f591973e43e3e68
Binary files /dev/null and b/assets/images/game_studio_banner.png differ
diff --git a/assets/images/learning_theme_2d.png b/assets/images/learning_theme_2d.png
new file mode 100644
index 0000000000000000000000000000000000000000..377d28ca5f3f9e3de720eb2134bd1dc6fd51e798
Binary files /dev/null and b/assets/images/learning_theme_2d.png differ
diff --git a/assets/images/learning_theme_code.jpg b/assets/images/learning_theme_code.jpg
index e6a7db21d9c2fc8c3f73d2b88a1884cb86d59d93..dcd868ab24e94f08cc171758e5424810a6f56c72 100644
Binary files a/assets/images/learning_theme_code.jpg and b/assets/images/learning_theme_code.jpg differ
diff --git a/assets/images/learning_theme_sound.jpg b/assets/images/learning_theme_sound.jpg
index 4cc8ab352fb55af9af4805327057cfeb6af0b6bc..9d637c8f1dc6c58d7bcc3a7ca139842de0127c50 100644
Binary files a/assets/images/learning_theme_sound.jpg and b/assets/images/learning_theme_sound.jpg differ
diff --git a/assets/images/learning_theme_sound.png b/assets/images/learning_theme_sound.png
new file mode 100644
index 0000000000000000000000000000000000000000..91f9cca958a13cc93201a9a1e85a7f38e006244d
Binary files /dev/null and b/assets/images/learning_theme_sound.png differ
diff --git a/assets/images/learning_theme_sound.svg b/assets/images/learning_theme_sound.svg
new file mode 100644
index 0000000000000000000000000000000000000000..667519d432e45698bff2674e8a434ffd49b06a7b
--- /dev/null
+++ b/assets/images/learning_theme_sound.svg
@@ -0,0 +1,934 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="197.09602mm"
+ height="109.35831mm"
+ viewBox="0 0 197.09602 109.35831"
+ version="1.1"
+ id="svg8"
+ inkscape:version="1.0.1 (0767f8302a, 2020-10-17)"
+ sodipodi:docname="learning_theme_sound.svg">
+ <style
+ id="style2" />
+ <defs
+ id="defs2">
+ <rect
+ x="76.49086"
+ y="202.89584"
+ width="21.285378"
+ height="9.344162"
+ id="rect1558" />
+ <rect
+ x="54.898369"
+ y="196.27309"
+ width="25.171555"
+ height="7.685801"
+ id="rect1552" />
+ <rect
+ x="10.540067"
+ y="232.25053"
+ width="75.68058"
+ height="8.7689762"
+ id="rect1546" />
+ <rect
+ x="37.635578"
+ y="239.8183"
+ width="32.100857"
+ height="7.4476299"
+ id="rect1540" />
+ <rect
+ x="83.083977"
+ y="225.67381"
+ width="14.849139"
+ height="6.0662193"
+ id="rect1534" />
+ <rect
+ x="93.855064"
+ y="215.45615"
+ width="21.586544"
+ height="26.59169"
+ id="rect1528" />
+ <rect
+ x="78.754845"
+ y="222.91013"
+ width="66.092041"
+ height="7.8964043"
+ id="rect1522" />
+ <rect
+ x="85.154678"
+ y="221.62805"
+ width="72.761681"
+ height="7.1388187"
+ id="rect1516" />
+ <rect
+ x="83.050179"
+ y="224.60013"
+ width="12.497482"
+ height="3.020643"
+ id="rect1510" />
+ <rect
+ x="83.363152"
+ y="192.41232"
+ width="6.0760641"
+ height="5.6042147"
+ id="rect1504" />
+ <rect
+ x="84.615059"
+ y="227.23018"
+ width="1.8778589"
+ height="14.870101"
+ id="rect1498" />
+ <rect
+ x="77.254715"
+ y="203.65752"
+ width="6.863905"
+ height="23.932034"
+ id="rect1492" />
+ <inkscape:path-effect
+ effect="bspline"
+ id="path-effect1056"
+ is_visible="true"
+ lpeversion="1"
+ weight="33.333333"
+ steps="2"
+ helper_size="0"
+ apply_no_weight="true"
+ apply_with_weight="true"
+ only_selected="false" />
+ <inkscape:path-effect
+ effect="bspline"
+ id="path-effect1052"
+ is_visible="true"
+ lpeversion="1"
+ weight="33.333333"
+ steps="2"
+ helper_size="0"
+ apply_no_weight="true"
+ apply_with_weight="true"
+ only_selected="false" />
+ <inkscape:path-effect
+ effect="bspline"
+ id="path-effect1044"
+ is_visible="true"
+ lpeversion="1"
+ weight="33.333333"
+ steps="2"
+ helper_size="0"
+ apply_no_weight="true"
+ apply_with_weight="true"
+ only_selected="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect1038"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect1034"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect1030"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="bspline"
+ id="path-effect1026"
+ is_visible="true"
+ lpeversion="1"
+ weight="33.333333"
+ steps="2"
+ helper_size="0"
+ apply_no_weight="true"
+ apply_with_weight="true"
+ only_selected="false" />
+ <inkscape:path-effect
+ effect="bspline"
+ id="path-effect1020"
+ is_visible="true"
+ lpeversion="1"
+ weight="33.333333"
+ steps="2"
+ helper_size="0"
+ apply_no_weight="true"
+ apply_with_weight="true"
+ only_selected="false" />
+ <inkscape:path-effect
+ effect="bspline"
+ id="path-effect1014"
+ is_visible="true"
+ lpeversion="1"
+ weight="33.333333"
+ steps="2"
+ helper_size="0"
+ apply_no_weight="true"
+ apply_with_weight="true"
+ only_selected="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect998"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect992"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect986"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect978"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect966"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect960"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect954"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect948"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect942"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect936"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="spiro"
+ id="path-effect932"
+ is_visible="true"
+ lpeversion="1" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect930"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect924"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect918"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect912"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.000408163"
+ smooth_angles="360"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false" />
+ <inkscape:path-effect
+ effect="powerstroke"
+ id="path-effect906"
+ is_visible="true"
+ lpeversion="1"
+ offset_points="0.17383463,0.24539005"
+ sort_points="true"
+ interpolator_type="CentripetalCatmullRom"
+ interpolator_beta="0.75"
+ start_linecap_type="round"
+ linejoin_type="spiro"
+ miter_limit="4"
+ scale_width="1"
+ end_linecap_type="round" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect904"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.0032025118"
+ smooth_angles="0"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false"
+ step="1" />
+ <inkscape:path-effect
+ effect="powerstroke"
+ id="path-effect899"
+ is_visible="true"
+ lpeversion="1"
+ offset_points="1.4663347,0.51790292"
+ sort_points="true"
+ interpolator_type="CentripetalCatmullRom"
+ interpolator_beta="0.75"
+ start_linecap_type="round"
+ linejoin_type="spiro"
+ miter_limit="4"
+ scale_width="1"
+ end_linecap_type="round" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect897"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.0032025118"
+ smooth_angles="0"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false"
+ step="1" />
+ <inkscape:path-effect
+ effect="powerstroke"
+ id="path-effect892"
+ is_visible="true"
+ lpeversion="1"
+ offset_points="0.30654784,0.28660052 | 2.2548941,0.2580645"
+ sort_points="true"
+ interpolator_type="CentripetalCatmullRom"
+ interpolator_beta="0.75"
+ start_linecap_type="round"
+ linejoin_type="spiro"
+ miter_limit="4"
+ scale_width="1"
+ end_linecap_type="round" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect890"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.0032025118"
+ smooth_angles="0"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false"
+ step="1" />
+ <inkscape:path-effect
+ effect="powerstroke"
+ id="path-effect885"
+ is_visible="true"
+ lpeversion="1"
+ offset_points="0.61775833,0.37213448"
+ sort_points="true"
+ interpolator_type="CentripetalCatmullRom"
+ interpolator_beta="0.75"
+ start_linecap_type="round"
+ linejoin_type="spiro"
+ miter_limit="4"
+ scale_width="1"
+ end_linecap_type="round" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect883"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.0032025118"
+ smooth_angles="0"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false"
+ step="1" />
+ <inkscape:path-effect
+ effect="powerstroke"
+ id="path-effect878"
+ is_visible="true"
+ lpeversion="1"
+ offset_points="2,0.5"
+ sort_points="true"
+ interpolator_type="CentripetalCatmullRom"
+ interpolator_beta="0.75"
+ start_linecap_type="round"
+ linejoin_type="spiro"
+ miter_limit="4"
+ scale_width="1"
+ end_linecap_type="round" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect876"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.0032025118"
+ smooth_angles="0"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false"
+ step="1" />
+ <inkscape:path-effect
+ effect="powerstroke"
+ id="path-effect871"
+ is_visible="true"
+ lpeversion="1"
+ offset_points="0.9610637,0.28976296 | 2.6229669,0.15350652 | 4.4722037,0.42918182 | 6.7295495,0.25490206"
+ sort_points="true"
+ interpolator_type="CentripetalCatmullRom"
+ interpolator_beta="0.75"
+ start_linecap_type="round"
+ linejoin_type="spiro"
+ miter_limit="4"
+ scale_width="1"
+ end_linecap_type="round" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect869"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.0032025118"
+ smooth_angles="0"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false"
+ step="1" />
+ <inkscape:path-effect
+ effect="powerstroke"
+ id="path-effect864"
+ is_visible="true"
+ lpeversion="1"
+ offset_points="1.7499292,0.34046073 | 3.8139302,0.25173963 | 7.447699,0.51155335"
+ sort_points="true"
+ interpolator_type="CentripetalCatmullRom"
+ interpolator_beta="0.75"
+ start_linecap_type="round"
+ linejoin_type="spiro"
+ miter_limit="4"
+ scale_width="1"
+ end_linecap_type="round" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect862"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.0032025118"
+ smooth_angles="0"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false"
+ step="1" />
+ <inkscape:path-effect
+ effect="powerstroke"
+ id="path-effect857"
+ is_visible="true"
+ lpeversion="1"
+ offset_points="0.90332723,0.85760639"
+ sort_points="true"
+ interpolator_type="CentripetalCatmullRom"
+ interpolator_beta="0.75"
+ start_linecap_type="round"
+ linejoin_type="spiro"
+ miter_limit="4"
+ scale_width="1"
+ end_linecap_type="round" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect855"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.0032025118"
+ smooth_angles="0"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false"
+ step="1" />
+ <inkscape:path-effect
+ effect="powerstroke"
+ id="path-effect850"
+ is_visible="true"
+ lpeversion="1"
+ offset_points="0.56947976,0.89721402"
+ sort_points="true"
+ interpolator_type="CentripetalCatmullRom"
+ interpolator_beta="0.75"
+ start_linecap_type="round"
+ linejoin_type="spiro"
+ miter_limit="4"
+ scale_width="1"
+ end_linecap_type="round" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect848"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.0032025118"
+ smooth_angles="0"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false"
+ step="1" />
+ <inkscape:path-effect
+ effect="powerstroke"
+ id="path-effect843"
+ is_visible="true"
+ lpeversion="1"
+ offset_points="0.89863803,2.7629358"
+ sort_points="true"
+ interpolator_type="CentripetalCatmullRom"
+ interpolator_beta="0.75"
+ start_linecap_type="round"
+ linejoin_type="spiro"
+ miter_limit="4"
+ scale_width="1"
+ end_linecap_type="round" />
+ <inkscape:path-effect
+ effect="simplify"
+ id="path-effect841"
+ is_visible="true"
+ lpeversion="1"
+ steps="1"
+ threshold="0.0032025118"
+ smooth_angles="0"
+ helper_size="0"
+ simplify_individual_paths="false"
+ simplify_just_coalesce="false"
+ step="1" />
+ <rect
+ x="76.49086"
+ y="202.89584"
+ width="21.285378"
+ height="9.344162"
+ id="rect1558-2" />
+ <rect
+ x="76.49086"
+ y="202.89584"
+ width="21.285378"
+ height="9.344162"
+ id="rect1057" />
+ <rect
+ x="37.635578"
+ y="239.8183"
+ width="32.100857"
+ height="7.4476299"
+ id="rect1540-2" />
+ <rect
+ x="37.635578"
+ y="239.8183"
+ width="32.100857"
+ height="7.4476299"
+ id="rect1060" />
+ <rect
+ x="83.083977"
+ y="225.67381"
+ width="14.849139"
+ height="6.0662193"
+ id="rect1534-8" />
+ <rect
+ x="83.083977"
+ y="225.67381"
+ width="14.849139"
+ height="6.0662193"
+ id="rect1063" />
+ <rect
+ x="93.855064"
+ y="215.45615"
+ width="21.586544"
+ height="26.59169"
+ id="rect1528-9" />
+ <rect
+ x="93.855064"
+ y="215.45615"
+ width="21.586544"
+ height="26.59169"
+ id="rect1066" />
+ <rect
+ x="85.154678"
+ y="221.62805"
+ width="72.761681"
+ height="7.1388187"
+ id="rect1516-7" />
+ <rect
+ x="85.154678"
+ y="221.62805"
+ width="72.761681"
+ height="7.1388187"
+ id="rect1069" />
+ <rect
+ x="83.050179"
+ y="224.60013"
+ width="12.497482"
+ height="3.020643"
+ id="rect1510-3" />
+ <rect
+ x="83.050179"
+ y="224.60013"
+ width="12.497482"
+ height="3.020643"
+ id="rect1072" />
+ <rect
+ x="83.363152"
+ y="192.41232"
+ width="6.0760641"
+ height="5.6042147"
+ id="rect1504-6" />
+ <rect
+ x="83.363152"
+ y="192.41232"
+ width="6.0760641"
+ height="5.6042147"
+ id="rect1075" />
+ <rect
+ x="84.615059"
+ y="227.23018"
+ width="1.8778589"
+ height="14.870101"
+ id="rect1498-1" />
+ <rect
+ x="84.615059"
+ y="227.23018"
+ width="1.8778589"
+ height="14.870101"
+ id="rect1078" />
+ <rect
+ x="77.254715"
+ y="203.65752"
+ width="6.863905"
+ height="23.932034"
+ id="rect1492-2" />
+ <rect
+ x="77.254715"
+ y="203.65752"
+ width="6.863905"
+ height="23.932034"
+ id="rect1081" />
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="5.7548442"
+ inkscape:cx="665.51821"
+ inkscape:cy="349.96728"
+ inkscape:document-units="mm"
+ inkscape:current-layer="layer1"
+ inkscape:document-rotation="0"
+ showgrid="false"
+ inkscape:window-width="1920"
+ inkscape:window-height="966"
+ inkscape:window-x="0"
+ inkscape:window-y="27"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata5">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Calque 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-8.0699736,-117.67788)">
+ <path
+ style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="M 8.6583386,161.92467 H 204.57763"
+ id="path837" />
+ <path
+ style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 130.87908,157.36548 c 0,0 0,0 0,0 z"
+ id="path1405" />
+ <path
+ id="path1407"
+ style="fill:none;stroke:#96a5ae;stroke-width:1.17673;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 130.87908,159.11882 c 0,0 0,0 0,0 0,0 -0.73271,-4.73457 1.01766,-4.12583 1.75037,0.60872 1.34333,13.48222 3.9078,12.33242 2.56447,-1.14982 1.54685,-12.08442 3.78566,-11.49824 2.23882,0.58618 -0.93625,19.6372 2.15741,18.84809 3.09367,-0.78909 0.0814,-27.16741 2.84944,-26.33322 2.76801,0.83418 -0.16284,31.29325 3.50072,30.52671 3.66356,-0.76655 -0.65128,-33.77327 2.52378,-32.84891 3.17507,0.92438 0.48849,38.37256 3.37861,37.74129 2.89012,-0.63126 -0.73271,-45.63224 1.99459,-45.54207 2.72731,0.0901 -0.32565,40.53697 3.05296,40.94279 3.37861,0.4058 1.13979,-35.96021 2.89014,-35.37402 1.75035,0.58619 -0.32565,32.1049 3.21577,31.72162 3.54143,-0.38327 0.44777,-27.52814 2.32025,-27.28014 1.87248,0.24799 1.26188,26.37832 4.23343,23.96595 2.97155,-2.41238 1.91318,-18.82555 4.11132,-17.83355 2.19813,0.992 -0.52917,13.52734 2.15743,12.9637 2.6866,-0.56364 2.15744,-10.95714 4.07061,-10.14551 1.91317,0.81165 0.12211,8.68003 2.23884,8.27423 2.11672,-0.40582 1.09902,-8.92805 2.60517,-7.64295 1.50614,1.28511 2.36095,7.75567 4.39627,7.05676 2.03531,-0.69891 2.97156,-5.92947 4.68121,-5.11784 1.70964,0.81164 8.60948,2.17457 8.60948,2.17457 m -195.9192914,0 c 0,0 0.71305,-11.71136 2.9518894,-12.34263 2.23883,-0.63128 0.16282,26.82923 2.27953,27.28015 2.11672,0.4509 1.58755,-42.92678 4.314851,-42.40824 2.72731,0.51855 -1.506111,56.11593 0.48848,58.19014 1.9946,2.0742 2.40165,-62.40615 5.04755,-62.83451 2.6459,-0.42836 -3.98919,68.26799 -0.16282,67.29853 3.82637,-0.96945 4.84401,-67.16325 7.44921,-66.17125 2.60519,0.99199 -1.87248,61.25632 0.28494,62.40614 2.15743,1.14983 3.37859,-75.0993 6.87933,-75.07675 3.50074,0.0225 -2.23882,87.29646 0.48849,88.06299 2.7273,0.76656 5.65814,-84.70371 7.32709,-82.44916 1.66894,2.25457 -5.21039,79.74371 -0.69201,79.76626 4.51838,0.0225 4.88473,-75.55023 6.75722,-74.33278 1.87248,1.21748 -2.40166,70.09421 1.83177,68.83165 4.23343,-1.26255 3.66356,-65.51744 5.53604,-64.79598 1.87248,0.72145 -2e-5,63.53343 3.74494,62.76687 3.74497,-0.76653 1.95389,-60.69268 5.16968,-60.26432 3.21579,0.42837 -0.89552,54.67303 4.43697,55.46212 5.3325,0.78909 1.79108,-52.12536 5.61745,-50.84028 3.82637,1.28511 -1.01764,45.88026 3.70426,45.33917 4.72189,-0.5411 3.46001,-43.71589 7.24568,-41.7544 3.78566,1.96145 -1.91319,28.61033 3.46001,31.47361 5.3732,2.8633 3.01225,-27.16743 5.73956,-26.51361 2.727311,0.65383 -0.24422,30.68453 2.157431,30.25617 2.40165,-0.42836 0.73271,-34.3369 2.76801,-34.17908 2.03529,0.15783 -0.36636,32.3529 2.19813,32.08235 2.56449,-0.27054 -0.28497,-25.70196 1.75035,-26.06268 2.03532,-0.36073 -0.73267,22.74849 2.27956,21.14774 3.01223,-1.60074 0.20352,-21.64376 2.84942,-20.71938 2.64589,0.92436 0.56989,18.62265 3.3786,17.94629 2.80871,-0.67638 0.24425,-16.05246 2.56449,-14.51937 2.32025,1.53311 -0.69201,12.06188 1.95389,11.54334 2.6459,-0.51855 -0.69199,-12.06188 1.75037,-10.66405 2.44236,1.39782 0.16282,10.28077 2.36095,9.78477 2.19813,-0.49601 0.89551,-8.74768 2.52376,-7.89094 1.62826,0.85672 -0.2442,7.59785 2.32027,6.87639 2.56447,-0.72145 1.4654,-5.50112 1.4654,-5.50112" />
+ <g
+ id="g1480"
+ transform="matrix(-1,0,0,1,213.34799,0.43363391)">
+ <circle
+ style="fill:none;fill-opacity:1;stroke:#96a5ae;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ id="path1414-6"
+ cx="70.058769"
+ cy="218.32452"
+ r="7.6731014" />
+ <path
+ style="fill:none;stroke:#96a5ae;stroke-width:0.465;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 74.32744,212.13953 -1.785149,2.50535"
+ id="path1446" />
+ </g>
+ <g
+ id="g1484"
+ transform="matrix(-1,0,0,1,213.34799,0.43363391)">
+ <circle
+ style="fill:none;fill-opacity:1;stroke:#96a5ae;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ id="path1414-5"
+ cx="47.26096"
+ cy="218.3783"
+ r="7.6731014" />
+ <path
+ style="fill:none;stroke:#96a5ae;stroke-width:0.477877;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 42.943916,218.05998 -3.004891,0.0582"
+ id="path1446-2"
+ inkscape:transform-center-x="-2.9057048"
+ inkscape:transform-center-y="-0.023558266" />
+ </g>
+ <g
+ id="g1488"
+ transform="matrix(-1,0,0,1,213.84443,0.56961291)">
+ <circle
+ style="fill:none;fill-opacity:1;stroke:#96a5ae;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ id="path1414"
+ cx="25.134352"
+ cy="218.29347"
+ r="7.6731014" />
+ <path
+ style="fill:none;stroke:#96a5ae;stroke-width:0.465;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 31.727974,221.78375 -2.476205,-1.71593"
+ id="path1446-9"
+ inkscape:transform-center-x="-0.58899504"
+ inkscape:transform-center-y="-0.72443319" />
+ </g>
+ <text
+ xml:space="preserve"
+ id="text1490"
+ style="font-style:normal;font-weight:normal;font-size:2.11667px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect1492-2);fill:#000000;fill-opacity:1;stroke:none;"
+ transform="matrix(-1,0,0,1,213.34799,0.43363391)" />
+ <text
+ xml:space="preserve"
+ id="text1496"
+ style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect1498-1);fill:#000000;fill-opacity:1;stroke:none;"
+ transform="matrix(-1,0,0,1,213.34799,0.43363391)" />
+ <text
+ xml:space="preserve"
+ id="text1502"
+ style="font-size:1.41111px;line-height:4.20667px;font-family:sans-serif;white-space:pre;shape-inside:url(#rect1504-6);"
+ transform="matrix(-1,0,0,1,213.34799,0.43363391)" />
+ <text
+ xml:space="preserve"
+ id="text1508"
+ style="font-size:1.41111px;line-height:4.20667px;font-family:sans-serif;white-space:pre;shape-inside:url(#rect1510-3);"
+ transform="matrix(-1,0,0,1,213.34799,0.43363391)" />
+ <text
+ xml:space="preserve"
+ id="text1514"
+ style="font-size:1.41111px;line-height:4.20667px;font-family:sans-serif;white-space:pre;shape-inside:url(#rect1516-7);"
+ transform="matrix(-1,0,0,1,213.34799,0.43363391)" />
+ <text
+ xml:space="preserve"
+ id="text1526"
+ style="font-size:1.41111px;line-height:4.20667px;font-family:sans-serif;white-space:pre;shape-inside:url(#rect1528-9);"
+ transform="matrix(-1,0,0,1,213.34799,0.43363391)" />
+ <text
+ xml:space="preserve"
+ id="text1532"
+ style="font-size:1.41111px;line-height:4.20667px;font-family:sans-serif;white-space:pre;shape-inside:url(#rect1534-8);"
+ transform="matrix(-1,0,0,1,213.34799,0.43363391)" />
+ <text
+ xml:space="preserve"
+ id="text1538"
+ style="font-size:1.41111px;line-height:4.20667px;font-family:sans-serif;white-space:pre;shape-inside:url(#rect1540-2);"
+ transform="matrix(-1,0,0,1,213.34799,0.43363391)" />
+ <text
+ xml:space="preserve"
+ id="text1556"
+ style="font-size:1.41111px;line-height:4.20667px;font-family:sans-serif;white-space:pre;shape-inside:url(#rect1558-2);"
+ transform="matrix(-1,0,0,1,213.34799,0.43363391)" />
+ <ellipse
+ style="fill:none;stroke-width:0.265;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path1186"
+ cx="134.83992"
+ cy="217.35822"
+ rx="5.7160091"
+ ry="5.2693439" />
+ <ellipse
+ style="fill:none;stroke-width:0.264999;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path1188"
+ cx="127.20625"
+ cy="211.14108"
+ rx="2.8384109"
+ ry="3.0301862" />
+ <ellipse
+ style="fill:none;stroke-width:0.264999;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path1190"
+ cx="126.11538"
+ cy="210.12744"
+ rx="3.9978755"
+ ry="4.8000255" />
+ <ellipse
+ style="fill:none;stroke-width:0.264999;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path1192"
+ cx="134.85768"
+ cy="210.45912"
+ rx="4.7444172"
+ ry="4.4683342" />
+ <ellipse
+ style="fill:none;stroke-width:0.264999;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path1194"
+ cx="145.67943"
+ cy="200.571"
+ rx="4.1132321"
+ ry="4.6388636" />
+ <path
+ style="fill:none;stroke:#96a5ae;stroke-width:0.865;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path1236"
+ sodipodi:type="arc"
+ sodipodi:cx="142.28706"
+ sodipodi:cy="218.77983"
+ sodipodi:rx="8.7883577"
+ sodipodi:ry="7.6905513"
+ sodipodi:start="1.1291903"
+ sodipodi:end="4.8233246"
+ sodipodi:arc-type="arc"
+ d="m 146.04314,225.7326 a 8.7883577,7.6905513 0 0 1 -9.99751,-1.53857 8.7883577,7.6905513 0 0 1 -1.67066,-8.76177 8.7883577,7.6905513 0 0 1 8.88504,-4.29571"
+ sodipodi:open="true" />
+ <path
+ style="fill:none;stroke:#96a5ae;stroke-width:0.865;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path1236-9"
+ sodipodi:type="arc"
+ sodipodi:cx="165.09875"
+ sodipodi:cy="218.77988"
+ sodipodi:rx="8.7883577"
+ sodipodi:ry="7.6905513"
+ sodipodi:start="1.4609871"
+ sodipodi:end="4.8233246"
+ sodipodi:arc-type="arc"
+ d="m 166.06186,226.42411 a 8.7883577,7.6905513 0 0 1 -8.4099,-3.56025 8.7883577,7.6905513 0 0 1 0.005,-8.1753 8.7883577,7.6905513 0 0 1 8.41447,-3.55196"
+ sodipodi:open="true" />
+ <path
+ style="fill:none;stroke:#96a5ae;stroke-width:0.865;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path1236-9-3"
+ sodipodi:type="arc"
+ sodipodi:cx="187.73045"
+ sodipodi:cy="218.81703"
+ sodipodi:rx="8.7883577"
+ sodipodi:ry="7.6905513"
+ sodipodi:start="1.5473344"
+ sodipodi:end="4.8233246"
+ sodipodi:arc-type="arc"
+ d="m 187.93663,226.50547 a 8.7883577,7.6905513 0 0 1 -7.90914,-3.98614 8.7883577,7.6905513 0 0 1 0.39907,-7.97933 8.7883577,7.6905513 0 0 1 8.27684,-3.36625"
+ sodipodi:open="true" />
+ </g>
+</svg>
diff --git a/public/education/education.js b/public/education/education.js
index a8f284b43c6212addfad182cbbd0c95b562b7555..7dd9a1251f6f797e590c7b7cf1a8220503a5fb56 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -121,7 +121,7 @@ const GAMEDEV_THEMES = [
],
},
{
- title: "Musique et effets sonores",
+ title: "Musique et sons",
class: "sound",
comment: "",
details: [
@@ -132,7 +132,7 @@ const GAMEDEV_THEMES = [
],
},
{
- title: "Développer un univers",
+ title: "Écriture",
class: "write",
comment: "",
details: [
@@ -141,16 +141,16 @@ const GAMEDEV_THEMES = [
],
},
{
- title: "Concevoir le jeu",
+ title: "Conception",
class: "conception",
comment: "",
details: [
- "Comprendre les différents éléments qui composent un jeu",
+ "Concevoir les différents éléments qui composent le jeu",
"Développer les mécanismes de gameplay",
],
},
{
- title: "Programmation informatique",
+ title: "Programmation",
class: "coding",
comment: "",
details: [
@@ -159,26 +159,26 @@ const GAMEDEV_THEMES = [
],
},
{
- title: "Mathématiques et physique",
+ title: "Mathématiques",
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>",
+ "<em>Créer un jeu vidéo c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</em>",
details: [
"Algorithmie, logique, géométrie, trigonométrie, algèbre linéaire, vecteurs, repères en 2D ...",
],
},
{
- title: "Travail en équipe",
+ title: "Travail d'équipe",
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>",
+ "<em>Faire son jeu tout seul c'est bien mais ça peut être long !<br>Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.</em>",
details: [],
},
{
title: "Logiciels libres, GNU/Linux",
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>",
+ "<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: [],
},
];
@@ -208,6 +208,11 @@ class GameStudioClub {
contents:
"La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
},
+ {
+ 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>",
+ },
],
},
{
@@ -222,7 +227,7 @@ class GameStudioClub {
{
tag: "span",
contents:
- "Dans nos locaux,<br/><i>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</i>",
+ "Dans nos locaux,<br/><em>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</em>",
},
],
},
@@ -233,7 +238,7 @@ class GameStudioClub {
{ tag: "strong", contents: "Pour qui ?" },
{
tag: "span",
- contents: " Tout le monde à partir de 12 ans.",
+ contents: "Tout le monde à partir de 12 ans.",
},
],
},
@@ -271,12 +276,7 @@ class GameStudioClub {
tag: "div",
class: "details",
contents: [
- {
- tag: "strong",
- class: "title",
- contents: li.title,
- },
- {
+ li.comment&&{
tag: "div",
class: "comment",
contents: li.comment,
diff --git a/src/pages/education/components/game-studio-club.js b/src/pages/education/components/game-studio-club.js
index 8b34045b299664bfe763bcf2bf60da0c6b8011d4..c288dd83c65bdcd2f53e95326409fc5027d712f4 100644
--- a/src/pages/education/components/game-studio-club.js
+++ b/src/pages/education/components/game-studio-club.js
@@ -12,7 +12,7 @@ const GAMEDEV_THEMES = [
],
},
{
- title: "Musique et effets sonores",
+ title: "Musique et sons",
class: "sound",
comment: "",
details: [
@@ -23,7 +23,7 @@ const GAMEDEV_THEMES = [
],
},
{
- title: "Développer un univers",
+ title: "Écriture",
class: "write",
comment: "",
details: [
@@ -32,16 +32,16 @@ const GAMEDEV_THEMES = [
],
},
{
- title: "Concevoir le jeu",
+ title: "Conception",
class: "conception",
comment: "",
details: [
- "Comprendre les différents éléments qui composent un jeu",
+ "Concevoir les différents éléments qui composent le jeu",
"Développer les mécanismes de gameplay",
],
},
{
- title: "Programmation informatique",
+ title: "Programmation",
class: "coding",
comment: "",
details: [
@@ -50,26 +50,26 @@ const GAMEDEV_THEMES = [
],
},
{
- title: "Mathématiques et physique",
+ title: "Mathématiques",
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>",
+ "<em>Créer un jeu vidéo c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</em>",
details: [
"Algorithmie, logique, géométrie, trigonométrie, algèbre linéaire, vecteurs, repères en 2D ...",
],
},
{
- title: "Travail en équipe",
+ title: "Travail d'équipe",
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>",
+ "<em>Faire son jeu tout seul c'est bien mais ça peut être long !<br>Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.</em>",
details: [],
},
{
title: "Logiciels libres, GNU/Linux",
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>",
+ "<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: [],
},
];
@@ -99,6 +99,11 @@ class GameStudioClub {
contents:
"La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
},
+ {
+ 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>",
+ },
],
},
{
@@ -113,7 +118,7 @@ class GameStudioClub {
{
tag: "span",
contents:
- "Dans nos locaux,<br/><i>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</i>",
+ "Dans nos locaux,<br/><em>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</em>",
},
],
},
@@ -124,7 +129,7 @@ class GameStudioClub {
{ tag: "strong", contents: "Pour qui ?" },
{
tag: "span",
- contents: " Tout le monde à partir de 12 ans.",
+ contents: "Tout le monde à partir de 12 ans.",
},
],
},
@@ -162,12 +167,7 @@ class GameStudioClub {
tag: "div",
class: "details",
contents: [
- {
- tag: "strong",
- class: "title",
- contents: li.title,
- },
- {
+ li.comment && {
tag: "div",
class: "comment",
contents: li.comment,
diff --git a/src/pages/education/education.scss b/src/pages/education/education.scss
index 5b094c476837b968ab7cf5cfad4f54249029be4e..5f27fc7d0c2db20db78fc26d1f77149657d94c33 100644
--- a/src/pages/education/education.scss
+++ b/src/pages/education/education.scss
@@ -1,4 +1,10 @@
#education-page {
+ * {
+ image-rendering: pixelated;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: crisp-edges;
+ }
+
h1 {
margin: 15px 40px 0;
font-size: 25px;
@@ -13,7 +19,7 @@
justify-content: flex-end;
flex-direction: column;
height: 300px;
- background-image: url("../assets/images/glitch_meta_level3.png");
+ background-image: url("../../../assets/images/game_studio_banner.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 0% 90%;
@@ -21,7 +27,7 @@
color: white;
font-size: 2.5em;
margin: 40px;
- text-shadow: 0 0 8px #000;
+ text-shadow: 0 0 6px #000;
}
}
.section-contents {
@@ -65,15 +71,15 @@
flex-wrap: wrap;
li.learning-theme {
&.crea2d {
- background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background: url("../../../assets/images/learning_theme_2d.png") no-repeat ;
background-size: cover;
}
&.sound {
- background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background: url("../../../assets/images/learning_theme_sound.png") no-repeat;
background-size: cover;
}
&.coding {
- background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
+ background: url("../../../assets/images/learning_theme_code.jpg") no-repeat;
background-size: cover;
}
&.math {
@@ -107,9 +113,10 @@
width: 250px;
height: 140px;
position: relative;
+ box-shadow: 3px 3px 5px 1px #0001;
.title {
- color: white;
- padding: 10px 20px;
+ color: $dark_2;
+ font-size: 1.1em;
display: block;
}
.details {
@@ -129,10 +136,6 @@
display: flex;
flex-direction: column;
gap: 10px;
- .title {
- color: initial;
- padding: 0;
- }
.comment {
font-style: italic;
}
@@ -148,43 +151,6 @@
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 62270e9ac3316dec347ff4660d52608015cec13e..1fd3d98e15e00be7e93e56374f73ac4b9e6e3d81 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,6 +1,9 @@
+@import "./theme.scss";
+
body {
* {
box-sizing: border-box;
+ color: $dark_1;
}
font-family: Arial, Helvetica, sans-serif;
margin: 0;
diff --git a/src/theme.scss b/src/theme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..33279105b9bce9097cdb062b525af49c2fefcfdd
--- /dev/null
+++ b/src/theme.scss
@@ -0,0 +1,16 @@
+$dark_1: #35393c;
+$dark_2: #3c4144;
+$dark_3: #555d61;
+$light_1: #96a5ae;
+$light_2: #aabbc8;
+$magenta: #ff00ff;
+$purple: #902f90;
+$green: #00ff00;
+$kaki: #368736;
+$blue_1: #1c3db2;
+$blue_2: #34a0b3;
+$blue_3: #17cff0;
+$red_1: #9c3030;
+$red_2: #e74949;
+$yellow_1: #e5a002;
+$yellow_2: #ffe600;
diff --git a/style/pages/education/education.css b/style/pages/education/education.css
index 5e22c2c318e36f4d858d7bf2f028dcceb2a7d885..9979e768ad962e659876718424f2c32704ca9a0e 100644
--- a/style/pages/education/education.css
+++ b/style/pages/education/education.css
@@ -1,178 +1,17 @@
-#education-page h1 {
- margin: 15px 40px 0;
- font-size: 25px;
-}
-#education-page .edu-philo {
- margin: 15px 40px 15px 100px;
- max-width: 800px;
- font-style: italic;
-}
-#education-page .title-banner {
- display: flex;
- justify-content: flex-end;
- flex-direction: column;
- height: 300px;
- background-image: url("../assets/images/glitch_meta_level3.png");
- background-size: cover;
- background-repeat: no-repeat;
- background-position: 0% 90%;
-}
-#education-page .title-banner h2 {
- color: white;
- font-size: 2.5em;
- margin: 40px;
- text-shadow: 0 0 8px #000;
-}
-#education-page .section-contents {
- margin: 20px 40px 60px;
- display: grid;
- grid-template-columns: auto 1fr;
- gap: 20px;
- height: auto;
-}
-#education-page .section-contents .full-row {
- grid-column: 1/span 2;
-}
-#education-page .section-contents .practical-infos {
- grid-column: 2;
- grid-row: 2;
- display: flex;
- flex-direction: column;
- 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 .practical-infos .info-item {
- display: flex;
- flex-direction: column;
- background-color: white;
- padding: 20px;
-}
-#education-page .section-contents .practical-infos .info-item strong {
- margin-bottom: 10px;
-}
-#education-page .section-contents .practical-infos .info-item span,
-#education-page .section-contents .practical-infos .info-item a {
- font-size: 14px;
- text-decoration: none;
-}
-#education-page .section-contents ul.learning-themes {
- grid-column: 1;
- grid-row: 2;
- display: flex;
- gap: 20px 30px;
- flex-wrap: wrap;
-}
-#education-page .section-contents ul.learning-themes li.learning-theme {
- width: 250px;
- height: 140px;
- position: relative;
-}
-#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.sound {
- background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
- background-size: cover;
-}
-#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.math {
- background: url("../../../assets/images/learning_theme_sound.jpg") no-repeat;
- background-size: cover;
-}
-#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;
+/* Error: Undefined variable.
+ * ,
+ * 118 | color: $dark_2;
+ * | ^^^^^^^
+ * '
+ * src/pages/education/education.scss 118:28 root stylesheet */
+
+body::before {
+ font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+ "Droid Sans Mono", monospace, monospace;
+ white-space: pre;
display: block;
+ padding: 1em;
+ margin-bottom: 1em;
+ border-bottom: 2px solid black;
+ content: "Error: Undefined variable.\a \2577 \a 118 \2502 color: $dark_2;\a \2502 ^^^^^^^\a \2575 \a src/pages/education/education.scss 118:28 root stylesheet";
}
-#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: 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;
- 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-color: white;
- padding: 20px;
- display: flex;
- flex-direction: column;
-}
-#education-page .section-contents .infos-inscriptions .groups h3,
-#education-page .section-contents .infos-inscriptions .pricing h3 {
- margin: 0;
-}
-#education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
-#education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
- border: 1px solid #dde;
- border-collapse: collapse;
-}
-#education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
-#education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
- border: 1px solid #dde;
- padding: 10px 20px;
-}
-
-/*# sourceMappingURL=education.css.map */
diff --git a/style/style.css b/style/style.css
index 85441fd82216247463d22b7aedec126e3f925324..dfd0a90782a22fd7113ba7b1b245777857c7ba64 100644
--- a/style/style.css
+++ b/style/style.css
@@ -4,6 +4,7 @@ body {
}
body * {
box-sizing: border-box;
+ color: #35393c;
}
body ul {
margin: 0;
@@ -82,6 +83,11 @@ main #page-container {
max-width: 100%;
flex: 1;
}
+main #page-container #education-page * {
+ image-rendering: pixelated;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: crisp-edges;
+}
main #page-container #education-page h1 {
margin: 15px 40px 0;
font-size: 25px;
@@ -96,7 +102,7 @@ main #page-container #education-page .title-banner {
justify-content: flex-end;
flex-direction: column;
height: 300px;
- background-image: url("../assets/images/glitch_meta_level3.png");
+ background-image: url("../../../assets/images/game_studio_banner.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 0% 90%;
@@ -105,7 +111,7 @@ main #page-container #education-page .title-banner h2 {
color: white;
font-size: 2.5em;
margin: 40px;
- text-shadow: 0 0 8px #000;
+ text-shadow: 0 0 6px #000;
}
main #page-container #education-page .section-contents {
margin: 20px 40px 60px;
@@ -151,17 +157,18 @@ main #page-container #education-page .section-contents ul.learning-themes li.lea
width: 250px;
height: 140px;
position: relative;
+ box-shadow: 3px 3px 5px 1px #0001;
}
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: 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.jpg") no-repeat;
+ 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_sound.jpg") no-repeat;
+ background: url("../../../assets/images/learning_theme_code.jpg") no-repeat;
background-size: cover;
}
main #page-container #education-page .section-contents ul.learning-themes li.learning-theme.math {
@@ -193,8 +200,8 @@ main #page-container #education-page .section-contents ul.learning-themes li.lea
background-size: cover;
}
main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .title {
- color: white;
- padding: 10px 20px;
+ color: #3c4144;
+ font-size: 1.1em;
display: block;
}
main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .details {
@@ -215,10 +222,6 @@ main #page-container #education-page .section-contents ul.learning-themes li.lea
flex-direction: column;
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;
}
diff --git a/style/style.css.map b/style/style.css.map
index a41a512345efedff7b137cccba4b63fcc8fc20a7..77a372da8276d77bba3f8b6abc15ee7ae090a9fb 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;;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
+{"version":3,"sourceRoot":"","sources":["../src/style.scss","../src/theme.scss","../src/pages/education/education.scss"],"names":[],"mappings":"AAEA;EAKI;EACA;;AALA;EACI;EACA,OCLC;;ADSL;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;;AE/FJ;EACI;EACA;EACA;;AAGJ;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;EACA;;AA3CA;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;;AAMJ;EACI,ODpHX;ECqHW;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;EAEA;;AACA;AAAA;EAEI;EACA;EACA;EACA;;AACA;AAAA;EACI;;AAGA;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;AF9ExB;EACI;EACA;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/style/theme.css b/style/theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..be282753b4b9e2e1ea74fcf748545648d82d3617
--- /dev/null
+++ b/style/theme.css
@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=theme.css.map */