diff --git a/public/articles/games/fantom_quest/fantom_quest.json b/public/articles/games/fantom_quest/fantom_quest.json
index 9e0e9674c29b22eb494ff3e5e072d4d1873a2038..c2f155dc34ab3eae8b65b2106abb8f155fabc22a 100755
--- a/public/articles/games/fantom_quest/fantom_quest.json
+++ b/public/articles/games/fantom_quest/fantom_quest.json
@@ -3,6 +3,7 @@
"subtitle": "Le labyrinthe de la quête d'identité",
"tags": ["jeu web", "pixelart", "javascript", "labyrinthe"],
"body": "<file>fantom_quest.txt",
+ "image_banner": "fantom_quest_intro.gif",
"images": [
"screen_fantom_quest_1.jpg",
"screen_fantom_quest_2.jpg",
diff --git a/public/articles/games/fantom_quest/images/fantom_quest_intro.gif b/public/articles/games/fantom_quest/images/fantom_quest_intro.gif
new file mode 100644
index 0000000000000000000000000000000000000000..109819d4f3eb8831255202f27fe20924d8b69c0b
Binary files /dev/null and b/public/articles/games/fantom_quest/images/fantom_quest_intro.gif differ
diff --git a/public/articles/news/go-game-studio-club/go-game-studio-club.txt b/public/articles/news/go-game-studio-club/go-game-studio-club.txt
index 3bd0fbbf5643868aca22d20fe90153c9f4e781a8..e0c1607ed156952347a9c05a13f9aba36f42938a 100644
--- a/public/articles/news/go-game-studio-club/go-game-studio-club.txt
+++ b/public/articles/news/go-game-studio-club/go-game-studio-club.txt
@@ -6,15 +6,6 @@ Des <b>jeux vidéos</b> bien sûr, non pas pour y jouer mais bien pour les <b>fa
Créer un jeu c'est l'occasion de croiser ensemble une multitude de disciplines, comme l'animation 2D, l'écriture, la création sonore, la programmation, les maths et la physique, et d'autres choses encore.
S'inscrire au Game Studio Club c'est l'occasion d'être accompagné en douceur sur l'apprentissage de toutes ces choses et d'acquerrir l'autonomie pour créer un jeu vidéo entièrement.
-<b>C'est pour qui ? Ça se passe comment ?</b>
-
-L'inscription est accessible à tous à partir de 12 ans (environ).
-Mais attention l'activité n'est pas réservée aux adolescents, les adultes peuvent s'inscrire aussi :) !
-
-Les séances accueilleront des groupes de 5 personnes.
-1 inscription = 1 séance par semaine dans un groupe au choix.
-Inscription au mois ou au trimestre, respectivement 60€ ou 160€.
-
Retrouvez toutes les infos sur la page <b><a href="https://kuadrado-software.fr/education/#game-studio-club" target="_blank">Game Studio Club</a></b> !
À très bientôt !
diff --git a/public/assets/documents/fiche-inscription.odt b/public/assets/documents/fiche-inscription.odt
new file mode 100644
index 0000000000000000000000000000000000000000..91040fd1fd3fb2a8606455b2631bdde44b77251b
Binary files /dev/null and b/public/assets/documents/fiche-inscription.odt differ
diff --git a/public/assets/images/mini_pix/pijarpix.png b/public/assets/images/mini_pix/pijarpix.png
new file mode 100755
index 0000000000000000000000000000000000000000..e32f91b8528a1d3c06af2aa88d51320504a7dee3
Binary files /dev/null and b/public/assets/images/mini_pix/pijarpix.png differ
diff --git a/public/assets/images/pijar_profile_lt_square.png b/public/assets/images/pijar_profile_lt_square.png
new file mode 100644
index 0000000000000000000000000000000000000000..91066bb0036daeec1553647514fc5d3d884a37b0
Binary files /dev/null and b/public/assets/images/pijar_profile_lt_square.png differ
diff --git a/public/education/education.js b/public/education/education.js
index 4fe9f165ba1f0a5739f2c80739f1ebcfee5174b7..117226b147418975d7db42df0b008e1c5d1be9f6 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -469,7 +469,11 @@ class GameStudioClub {
tag: "td",
contents: "(4 séances)",
},
- { tag: "td", contents: "<b><blue>60€</blue></b>" },
+ {
+ tag: "td",
+ contents:
+ "<b><blue>60€</blue></b>",
+ },
],
},
{
@@ -484,7 +488,11 @@ class GameStudioClub {
tag: "td",
contents: "(12 séances)",
},
- { tag: "td", contents: "<b><blue>160€</blue></b>" },
+ {
+ tag: "td",
+ contents:
+ "<b><blue>160€</blue></b>",
+ },
],
},
],
@@ -493,20 +501,80 @@ class GameStudioClub {
},
{
tag: "div",
+ class:"documents",
contents: [
{
- tag: "a",
- class: "download-link",
- download: "fiche-inscription",
- href: "/assets/documents/fiche-inscription.pdf",
+ tag: "div",
contents: "Télécharger la fiche d'inscription",
},
+ {
+ tag:"div",
+ class: "links",
+ contents: [
+ {
+ tag: "a",
+ class: "download-link",
+ download: "fiche-inscription",
+ href: "/assets/documents/fiche-inscription.pdf",
+ contents: "PDF",
+ },
+ {
+ tag: "a",
+ class: "download-link",
+ download: "fiche-inscription",
+ href: "/assets/documents/fiche-inscription.odt",
+ contents: "Libre Office",
+ },
+ ]
+ }
+
],
},
],
},
],
},
+ {
+ tag: "div",
+ class: "teacher",
+ contents: [
+ {
+ tag: "h3",
+ contents: "Animé par",
+ },
+ {
+ tag: "div",
+ class: "teacher-card",
+ contents: [
+ {
+ tag: "div",
+ class: "pic",
+ contents: [
+ {
+ tag: "img",
+ src:
+ "/assets/images/pijar_profile_lt_square.png",
+ },
+ ],
+ },
+ {
+ tag:"div",
+ class:"infos-text",
+ contents: [
+ {
+ tag:"h4",
+ contents: "Pierre Jarriges"
+ },
+ {
+ tag: "p",
+ contents: "Développeur jeu vidéo, auteur BD, compositeur."
+ }
+ ]
+ }
+ ],
+ },
+ ],
+ },
],
},
],
diff --git a/public/games/games.js b/public/games/games.js
index d544e718bd504175edd2de68a73c9e980d73cedc..e6e5a74571cbddc13fbbbbdef16a58adb26acbd5 100644
--- a/public/games/games.js
+++ b/public/games/games.js
@@ -337,7 +337,16 @@ class GameArticle {
}
render() {
- const { title, tags, body, subtitle, images, path, team_subarticles } = this.props;
+ const {
+ title,
+ tags,
+ body,
+ subtitle,
+ images,
+ path,
+ team_subarticles,
+ image_banner,
+ } = this.props;
return {
tag: "article",
typeof: "VideoGame",
@@ -350,6 +359,13 @@ class GameArticle {
class: "game-title",
contents: title,
},
+ {
+ tag: "div",
+ class: "game-banner",
+ contents: [
+ { tag: "img", class: "pixelated", src: `${path}/images/${image_banner}` },
+ ],
+ },
{
tag: "div",
class: "game-tags",
diff --git a/public/index.html b/public/index.html
index 4cb1aa72ce1935cac93cabb1122322ad78690390..1929d7eb34cd360a8abea6729aa81c654206c666 100644
--- a/public/index.html
+++ b/public/index.html
@@ -63,17 +63,6 @@
"name": "Kuadrado Software - Jeux",
"url": "https://kuadrado-software.fr/games"
},
- {
- "type": "WebPage",
- "description": "Développement web, moteur de jeux, outillage logiciel, retrouvez nos projets en détail",
- "image": [
- "https://kuadrado-software.fr/assets/images/meca_proc.svg",
- "https://kuadrado-software.fr/assets/images/meca_proc.png"
- ],
- "keywords": "développement, development, web, logiciel, software, R&D, service, service numérique, Ardèche, Rhone-Alpes, prestation, création",
- "name": "Kuadrado Software - Développement web et logiciel",
- "url": "https://kuadrado-software.fr/software-development"
- },
{
"type": "WebPage",
"description": "Animations autour de la création de jeux vidéos, vulgarisation numérique. Découvrez nos initiatives pédagogiques.",
diff --git a/public/main.js b/public/main.js
index 9ecb0a22fd7ab5c349658010de28366b5cf7f170..39d21c2a6d60329ac873b87855537d40527e3dc3 100644
--- a/public/main.js
+++ b/public/main.js
@@ -92,7 +92,7 @@ class ImageCarousel {
module.exports = ImageCarousel;
-},{"../lib/object-html-renderer":10}],4:[function(require,module,exports){
+},{"../lib/object-html-renderer":11}],4:[function(require,module,exports){
"use strict";
class KuadradoValues {
@@ -113,25 +113,24 @@ class KuadradoValues {
tag: "ul",
class: "values-list",
contents: [
+ [
+ "📖 <blue>Partage des connaissances</blue>",
+ `Pour sortir de l'élitisme de l'ingénierie, pour sortir de la domination par l'obscurantisme et de la consommation aveugle,
+ pour aller plus loin ensemble, le partage du savoir est fondamental.`,
+ ],
[
"💻 <blue>Logiciels libres et open source</blue>",
- `Toutes nos productions logicielles, web et vidéoludiques sont
+ `Toutes nos productions numériques, jeux vidéo, web, software, sont
<b><a href="https://fr.wikipedia.org/wiki/Logiciel_libre" target="_blank">libres et open source</a></b>.
- <br/>
- Kuadrado Software souhaite s'engager fortement dans un numérique ouvert et transparent.`,
+ <br/> ainsi que les outils engagés dans leur fabrication.`,
],
[
"🌿 <blue>Écologie</blue>",
`Nous vivons une époque ou l'utilisation de la technologie connaît une croissance exponentielle notament
à travers internet.
- <br/>Il est primordial selon nous de construire le numérique dans une direction de légèreté et d'économie de
+ <br/>Il est primordial de construire le numérique dans une direction de légèreté et d'économie de
ressources.`,
],
- [
- "📖 <blue>Partage des connaissances</blue>",
- `Pour sortir de l'élitisme de l'ingénierie, pour sortir de la domination par l'obscurantisme et de la consommation aveugle,
- pour aller plus loin ensemble, le partage du savoir est fondamental.`,
- ],
].map(v => {
const [title, body] = v;
return {
@@ -307,7 +306,7 @@ class NewsArticles {
module.exports = NewsArticles;
-},{"../../constants":2,"../generic-components/image-carousel":3,"../lib/article-utils":8,"../lib/object-html-renderer":10}],6:[function(require,module,exports){
+},{"../../constants":2,"../generic-components/image-carousel":3,"../lib/article-utils":9,"../lib/object-html-renderer":11}],6:[function(require,module,exports){
"use strict";
const { images_url } = require("../../constants");
@@ -348,10 +347,112 @@ module.exports = ThemeCard;
},{"../../constants":2}],7:[function(require,module,exports){
"use strict";
+class WhoAmI {
+ render() {
+ return {
+ tag: "section",
+ class: "whoami",
+ contents: [
+ {
+ tag: "div",
+ class: "page-contents-center",
+ contents: [
+ {
+ tag: "h2",
+ contents: "<blue>Qui sommes-nous-je ?</blue>",
+ },
+ {
+ tag: "div",
+ class: "presentation-card",
+ contents: [
+ {
+ tag: "div",
+ class: "header",
+ contents: [
+ {
+ tag: "div",
+ class: "pic",
+ contents: [
+ {
+ tag: "img",
+ alt:
+ "portrait Pierre Jarriges pixel art by Lucie Ventadour",
+ src: "assets/images/pijar_profile_lt_square.png",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "header-text",
+ contents: [
+ {
+ tag: "h3",
+ contents: "Pierre Jarriges",
+ },
+ {
+ tag: "h4",
+ contents:
+ "Artiste, auteur BD, compositeur, développeur informatique",
+ },
+ {
+ tag: "strong",
+ contents:
+ "Créateur de <blue>Kuadrado Software</blue> en Février 2021.",
+ },
+ ],
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "body",
+ contents: [
+ {
+ tag: "p",
+ contents: `
+ “ La création de <b><blue>Kuadrado Software</blue></b> vient de la volonté de développer deux axes ensembles :
+ <br /><br />
+ 🎮 D'une part exprimer une passion en créant des <b>jeux vidéo indépendants</b> sur un modèle léger et artisanal dans
+ une identité artistique forte, et de les distribuer sans compromission par une logique du marché ;
+ en effet, partir à la conquête du marché à dos de startup n'est pas l'objectif de Kuadrado Software. Il s'agit
+ avant tout de se donner les moyens de partager avec le monde une idée de liberté, de partage et de plaisir de
+ créer des choses simples.
+ <br /><br />
+ 💡 D'autre part il s'agit aussi de porter un <b>projet pédagogique</b> autour de la création de jeu vidéo, et
+ plus largement de la vulgarisation numérique. Le partage de connaissances et l'apprentissage collectif étant pour
+ moi l'instrument le plus efficace de lutte contre l'élitisme, contre le cloisonnement face à la technologie
+ (et donc à sa surconsommation), et tout simplement un moyen d'ouverture vers les autres.
+ <br /><br />
+ À l'heure d'aujourd'hui Kuadrado Software est construit sur un modèle d'auto-entreprise.
+ <br />
+ Mais le but n'est naturellement pas de rester tout seul à développer des projets et de parler de moi au
+ pluriel ! Il s'agit bien de développer une identité qui pourra rassembler plusieurs énergies
+ dans le même état d'esprit, former des équipes de travail et de création, et s'inscrire dans un tissu
+ local de savoir-faire, tout en gardant un modèle d'entreprise aussi léger, libéral, modulaire et indépendant
+ que possible .â€
+ `,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+module.exports = WhoAmI;
+
+},{}],8:[function(require,module,exports){
+"use strict";
+
const { images_url } = require("../constants");
const KuadradoValues = require("./home-page-components/kuadrado-values");
const NewsArticles = require("./home-page-components/news-articles");
const ThemeCard = require("./home-page-components/theme-card");
+const WhoAmI = require("./home-page-components/whoami");
const WebPage = require("./lib/web-page");
class HomePage extends WebPage {
@@ -390,11 +491,7 @@ class HomePage extends WebPage {
{
tag: "ul",
class: "philo-bubbles",
- contents: [
- "Simplicité",
- "Légèreté",
- "Écologie",
- ].map(word => {
+ contents: ["Simplicité", "Légèreté", "Écologie"].map(word => {
return {
tag: "li",
contents: [{ tag: "span", contents: word }],
@@ -412,7 +509,7 @@ class HomePage extends WebPage {
img: "game_controller.svg",
href: "/games/",
description:
- "Toutes nos créations vidéoludiques, jeux web et jeux PC, projets en cours, c'est par ici que ça se passe.",
+ "Créations vidéoludiques, jeux web et jeux PC, projets en cours.",
},
// {
// title: "Software",
@@ -424,8 +521,7 @@ class HomePage extends WebPage {
title: "Pédagogie",
img: "brain.svg",
href: "/education/",
- description: `S'approprier la technologie par le partage de connaissances.
- <br/>Découvrez nos initiatives pédagogiques.`,
+ description: `S'approprier la technologie par le partage de connaissances.`,
},
].map(cardProps => new ThemeCard(cardProps).render()),
},
@@ -442,14 +538,14 @@ class HomePage extends WebPage {
},
{
tag: "section",
- class: "page-contents-center",
+ class: "page-contents-center news",
contents: [
{ tag: "h2", contents: "Actu", class: "section-title bg-blue" },
new NewsArticles().render(),
],
},
- // WIP
new KuadradoValues().render(),
+ new WhoAmI().render(),
],
};
}
@@ -457,7 +553,7 @@ class HomePage extends WebPage {
module.exports = HomePage;
-},{"../constants":2,"./home-page-components/kuadrado-values":4,"./home-page-components/news-articles":5,"./home-page-components/theme-card":6,"./lib/web-page":11}],8:[function(require,module,exports){
+},{"../constants":2,"./home-page-components/kuadrado-values":4,"./home-page-components/news-articles":5,"./home-page-components/theme-card":6,"./home-page-components/whoami":7,"./lib/web-page":12}],9:[function(require,module,exports){
"use strict";
const { fetchjson, fetchtext } = require("./fetch");
@@ -520,7 +616,7 @@ module.exports = {
populateArticles,
};
-},{"./fetch":9}],9:[function(require,module,exports){
+},{"./fetch":10}],10:[function(require,module,exports){
"use strict";
function fetchjson(url) {
@@ -546,7 +642,7 @@ module.exports = {
fetchtext,
};
-},{}],10:[function(require,module,exports){
+},{}],11:[function(require,module,exports){
"use strict";
module.exports = {
@@ -632,7 +728,7 @@ module.exports = {
},
};
-},{}],11:[function(require,module,exports){
+},{}],12:[function(require,module,exports){
"use strict";
class WebPage {
@@ -642,7 +738,7 @@ class WebPage {
}
module.exports = WebPage;
-},{}],12:[function(require,module,exports){
+},{}],13:[function(require,module,exports){
"use strict";
const HomePage = require("./homepage");
@@ -650,7 +746,7 @@ const runPage = require("./run-page");
runPage(HomePage);
-},{"./homepage":7,"./run-page":13}],13:[function(require,module,exports){
+},{"./homepage":8,"./run-page":14}],14:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -662,7 +758,7 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":10,"./template/template":15}],14:[function(require,module,exports){
+},{"./lib/object-html-renderer":11,"./template/template":16}],15:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
@@ -781,7 +877,7 @@ class NavBar {
module.exports = NavBar;
-},{"../../../constants":2}],15:[function(require,module,exports){
+},{"../../../constants":2}],16:[function(require,module,exports){
"use strict";
const { in_construction } = require("../../config");
@@ -892,4 +988,4 @@ class Template {
module.exports = Template;
-},{"../../config":1,"../../constants":2,"./components/navbar":14}]},{},[12]);
+},{"../../config":1,"../../constants":2,"./components/navbar":15}]},{},[13]);
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 8f3c2acebf2a03b03a4a8e988995f818b1371582..a1427177021f1861a83b7cc2bc0ee6bcfe10f7d8 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -2,18 +2,14 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://kuadrado-software.fr</loc>
- <lastmod>2021-02-02</lastmod>
+ <lastmod>2021-02-19</lastmod>
</url>
<url>
<loc>https://kuadrado-software.fr/games/</loc>
- <lastmod>2021-02-02</lastmod>
- </url>
- <url>
- <loc>https://kuadrado-software.fr/software-development/</loc>
- <lastmod>2021-02-02</lastmod>
+ <lastmod>2021-02-19</lastmod>
</url>
<url>
<loc>https://kuadrado-software.fr/education/</loc>
- <lastmod>2021-02-02</lastmod>
+ <lastmod>2021-02-19</lastmod>
</url>
</urlset>
\ No newline at end of file
diff --git a/public/style/homepage.css b/public/style/homepage.css
index 67fb896cef4c828c7c53647567da2dce007235c1..6f7d990fdead94314f4c2562d99995f066217d8a 100644
--- a/public/style/homepage.css
+++ b/public/style/homepage.css
@@ -1,9 +1,9 @@
/* Error: Undefined variable.
* ,
- * 8 | background-color: $light_0;
+ * 7 | background-color: $light_0;
* | ^^^^^^^^
* '
- * src/homepage.scss 8:27 root stylesheet */
+ * src/homepage.scss 7:27 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
@@ -13,5 +13,5 @@ body::before {
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
- content: "Error: Undefined variable.\a \2577 \a 8 \2502 background-color: $light_0;\a \2502 ^^^^^^^^\a \2575 \a src/homepage.scss 8:27 root stylesheet";
+ content: "Error: Undefined variable.\a \2577 \a 7 \2502 background-color: $light_0;\a \2502 ^^^^^^^^\a \2575 \a src/homepage.scss 7:27 root stylesheet";
}
diff --git a/public/style/style.css b/public/style/style.css
index 2108052627a4baa89cb2c1b9c8308cc72f91973a..83d08892f58a087de58e9a602fa6ea5f03cf9456 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -29,6 +29,11 @@ body .bg-blue {
body #seo-title {
visibility: hidden;
}
+body img.pixelated {
+ image-rendering: pixelated;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: crisp-edges;
+}
main {
display: flex;
@@ -87,7 +92,7 @@ main .image-carousel .carousel-bullets .bullet.active {
max-height: 100%;
}
main .image-carousel .carousel-bullets {
- gap: 15px;
+ gap: 30px;
}
main .image-carousel .carousel-bullets .bullet {
width: 12px;
@@ -321,7 +326,6 @@ main #page-container .page-header.logo-left .grid-wrapper p {
main #page-container .page-philo {
background-image: url("/assets/images/wallpaper_binary.png");
padding: 120px 30px;
- margin: 40px 0;
}
main #page-container .page-philo p {
width: 100%;
@@ -360,7 +364,6 @@ main #page-container h2.page-section-title {
main #page-container #home-page {
display: flex;
flex-direction: column;
- gap: 20px;
}
main #page-container #home-page .section-title {
padding: 10px;
@@ -416,15 +419,18 @@ main #page-container #home-page .page-header .philo-bubbles li:last-child {
main #page-container #home-page .page-header .philo-bubbles li:last-child * {
color: #96a5ae;
}
-main #page-container #home-page .articles-displayer {
+main #page-container #home-page .news {
+ padding: 60px 20px;
+}
+main #page-container #home-page .news .articles-displayer {
margin: 0 auto 40px;
}
-main #page-container #home-page .articles-displayer .prev-next-buttons {
+main #page-container #home-page .news .articles-displayer .prev-next-buttons {
display: flex;
justify-content: space-between;
}
-main #page-container #home-page .articles-displayer .prev-next-buttons .prev-btn,
-main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn {
+main #page-container #home-page .news .articles-displayer .prev-next-buttons .prev-btn,
+main #page-container #home-page .news .articles-displayer .prev-next-buttons .next-btn {
border: none;
background: none;
display: flex;
@@ -432,21 +438,21 @@ main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn
gap: 10px;
padding: 5px 0;
}
-main #page-container #home-page .articles-displayer .prev-next-buttons .prev-btn.disabled,
-main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn.disabled {
+main #page-container #home-page .news .articles-displayer .prev-next-buttons .prev-btn.disabled,
+main #page-container #home-page .news .articles-displayer .prev-next-buttons .next-btn.disabled {
visibility: hidden;
pointer-events: none;
}
-main #page-container #home-page .articles-displayer .prev-next-buttons .prev-btn.active,
-main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn.active {
+main #page-container #home-page .news .articles-displayer .prev-next-buttons .prev-btn.active,
+main #page-container #home-page .news .articles-displayer .prev-next-buttons .next-btn.active {
cursor: pointer;
color: #6b7880;
}
-main #page-container #home-page .articles-displayer .prev-next-buttons .prev-btn.active:hover,
-main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn.active:hover {
+main #page-container #home-page .news .articles-displayer .prev-next-buttons .prev-btn.active:hover,
+main #page-container #home-page .news .articles-displayer .prev-next-buttons .next-btn.active:hover {
color: #3c4144;
}
-main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn.active::after {
+main #page-container #home-page .news .articles-displayer .prev-next-buttons .next-btn.active::after {
content: " ";
border-style: solid;
border-width: 2px 2px 0 0;
@@ -458,7 +464,7 @@ main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn
align-items: center;
flex-direction: row;
}
-main #page-container #home-page .articles-displayer .prev-next-buttons .prev-btn.active::before {
+main #page-container #home-page .news .articles-displayer .prev-next-buttons .prev-btn.active::before {
content: " ";
border-style: solid;
border-width: 2px 2px 0 0;
@@ -470,7 +476,7 @@ main #page-container #home-page .articles-displayer .prev-next-buttons .prev-btn
align-items: center;
flex-direction: row;
}
-main #page-container #home-page .articles-displayer article {
+main #page-container #home-page .news .articles-displayer article {
display: grid;
gap: 5px 20px;
grid-template-columns: 1fr 1fr;
@@ -479,85 +485,85 @@ main #page-container #home-page .articles-displayer article {
padding-left: 20px;
background-color: #3c4144;
}
-main #page-container #home-page .articles-displayer article *:not(a) {
+main #page-container #home-page .news .articles-displayer article *:not(a) {
color: #d4d9dd;
}
-main #page-container #home-page .articles-displayer article .date {
+main #page-container #home-page .news .articles-displayer article .date {
grid-column: 1;
grid-row: 1;
text-align: right;
}
-main #page-container #home-page .articles-displayer article .date time {
+main #page-container #home-page .news .articles-displayer article .date time {
color: #6b7880;
font-style: italic;
font-size: 12px;
}
-main #page-container #home-page .articles-displayer article .title {
+main #page-container #home-page .news .articles-displayer article .title {
grid-column: 1;
grid-row: 2;
}
-main #page-container #home-page .articles-displayer article .title h3 {
+main #page-container #home-page .news .articles-displayer article .title h3 {
margin: 0 0 10px;
}
-main #page-container #home-page .articles-displayer article .subtitle {
+main #page-container #home-page .news .articles-displayer article .subtitle {
grid-column: 1;
grid-row: 3;
font-style: italic;
font-size: 15px;
}
-main #page-container #home-page .articles-displayer article .body {
+main #page-container #home-page .news .articles-displayer article .body {
grid-column: 1;
grid-row: 4;
min-height: 200px;
padding-bottom: 40px;
text-align: justify;
}
-main #page-container #home-page .articles-displayer article .image-carousel {
+main #page-container #home-page .news .articles-displayer article .image-carousel {
grid-row: 1/span 4;
grid-column: 2;
}
-main #page-container #home-page .articles-displayer article .image-carousel img {
+main #page-container #home-page .news .articles-displayer article .image-carousel img {
max-height: 100%;
}
-main #page-container #home-page .articles-displayer article.article-placeholder {
+main #page-container #home-page .news .articles-displayer article.article-placeholder {
padding: 0;
}
-main #page-container #home-page .articles-displayer article.article-placeholder * {
+main #page-container #home-page .news .articles-displayer article.article-placeholder * {
background-color: #d4d9dd;
}
-main #page-container #home-page .articles-displayer article.article-placeholder .date {
+main #page-container #home-page .news .articles-displayer article.article-placeholder .date {
height: 10px;
}
-main #page-container #home-page .articles-displayer article.article-placeholder .title {
+main #page-container #home-page .news .articles-displayer article.article-placeholder .title {
height: 40px;
}
-main #page-container #home-page .articles-displayer article.article-placeholder .subtitle {
+main #page-container #home-page .news .articles-displayer article.article-placeholder .subtitle {
height: 30px;
}
@media screen and (max-width: 900px) {
- main #page-container #home-page .articles-displayer article {
+ main #page-container #home-page .news .articles-displayer article {
gap: 5px;
grid-template-columns: 1fr;
grid-template-rows: 300px auto auto auto 1fr;
padding: 0;
}
- main #page-container #home-page .articles-displayer article .date {
+ main #page-container #home-page .news .articles-displayer article .date {
grid-row: 2;
padding: 0 10px;
}
- main #page-container #home-page .articles-displayer article .title {
+ main #page-container #home-page .news .articles-displayer article .title {
grid-row: 3;
padding: 0 10px;
}
- main #page-container #home-page .articles-displayer article .subtitle {
+ main #page-container #home-page .news .articles-displayer article .subtitle {
grid-row: 4;
padding: 0 10px;
}
- main #page-container #home-page .articles-displayer article .body {
+ main #page-container #home-page .news .articles-displayer article .body {
grid-row: 5;
padding: 0 10px 30px;
}
- main #page-container #home-page .articles-displayer article .image-carousel {
+ main #page-container #home-page .news .articles-displayer article .image-carousel {
grid-row: 1;
grid-column: 1;
}
@@ -566,6 +572,7 @@ main #page-container #home-page .poles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
+ padding: 100px 0;
}
main #page-container #home-page .poles .theme-card {
display: flex;
@@ -647,6 +654,72 @@ main #page-container #home-page .kuadrado-values ul.values-list li h3 {
main #page-container #home-page .kuadrado-values ul.values-list li p {
text-align: justify;
}
+main #page-container #home-page .whoami {
+ background-image: url("/assets/images/wallpaper_binary_white.png");
+ padding: 100px 0 120px;
+}
+main #page-container #home-page .whoami .page-contents-center {
+ background-color: white;
+ padding: 40px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-direction: column;
+}
+main #page-container #home-page .whoami .page-contents-center h2 {
+ text-align: center;
+ background-color: #3c4144;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-direction: column;
+ width: 220px;
+ height: 220px;
+ border-radius: 100%;
+ padding: 30px;
+}
+main #page-container #home-page .whoami .page-contents-center .presentation-card .header {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 30px;
+ background-color: #3c4144;
+ padding: 50px 20px;
+}
+main #page-container #home-page .whoami .page-contents-center .presentation-card .header .pic {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-direction: column;
+}
+main #page-container #home-page .whoami .page-contents-center .presentation-card .header .pic img {
+ width: 150px;
+ height: auto;
+ border-radius: 100%;
+}
+main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text h3 {
+ font-size: 22px;
+ color: #d4d9dd;
+ margin: 0;
+}
+main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text h4 {
+ font-size: 18px;
+}
+main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text strong,
+main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text h4 {
+ color: #96a5ae;
+}
+main #page-container #home-page .whoami .page-contents-center .presentation-card .body p {
+ font-size: 18px;
+ font-style: italic;
+ font-family: serif;
+ color: #555d61;
+}
+main #page-container #home-page .whoami .page-contents-center .presentation-card .body p *:not(blue, a) {
+ color: #555d61;
+}
@media screen and (max-width: 900px) {
main #page-container #home-page .poles {
grid-template-columns: 1fr;
@@ -684,12 +757,24 @@ main #page-container #home-page .kuadrado-values ul.values-list li p {
}
@media screen and (max-width: 1300px) {
main #page-container #home-page .poles {
- padding: 0 20px;
+ padding: 20px;
}
main #page-container #home-page .articles-displayer {
padding: 0;
}
}
+@media screen and (max-width: 560px) {
+ main #page-container #home-page .whoami .page-contents-center .presentation-card .header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-direction: column;
+ }
+ main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text {
+ text-align: center;
+ }
+}
main #page-container #education-page h3.big {
font-size: 30px;
}
@@ -860,12 +945,58 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
border: 1px solid #dde;
padding: 10px 20px;
}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .download-link,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .download-link {
+main #page-container #education-page .section-contents .infos-inscriptions .groups .documents,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents {
+ margin-top: 20px;
+}
+main #page-container #education-page .section-contents .infos-inscriptions .groups .documents .links,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents .links {
+ display: flex;
+ gap: 20px;
+}
+main #page-container #education-page .section-contents .infos-inscriptions .groups .documents .links .download-link,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents .links .download-link {
border: 1px solid;
- padding: 10px;
- display: inline-block;
+ padding: 8px;
+ display: flex;
margin: 10px 0 0;
+ border-radius: 4px;
+}
+main #page-container #education-page .section-contents .teacher {
+ grid-column: 1/span 2;
+ background: url("/assets/images/wallpaper_binary.png");
+ padding: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-direction: column;
+ gap: 20px;
+}
+main #page-container #education-page .section-contents .teacher h3 {
+ margin: 0;
+ width: 100%;
+ color: #d4d9dd;
+}
+main #page-container #education-page .section-contents .teacher .teacher-card {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ width: 100%;
+}
+main #page-container #education-page .section-contents .teacher .teacher-card .pic img {
+ width: 100px;
+}
+main #page-container #education-page .section-contents .teacher .teacher-card .infos-text {
+ padding: 0 20px;
+}
+main #page-container #education-page .section-contents .teacher .teacher-card .infos-text h4 {
+ color: #72e3f0;
+ margin: 0;
+ font-size: 18px;
+}
+main #page-container #education-page .section-contents .teacher .teacher-card .infos-text p {
+ color: #96a5ae;
+ display: block;
}
@media screen and (max-width: 900px) {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
@@ -895,7 +1026,7 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
flex-direction: column;
}
}
-@media screen and (max-width: 560px) {
+@media screen and (max-width: 780px) {
main #page-container #education-page h3.big {
font-size: 22px;
}
@@ -909,8 +1040,8 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
text-shadow: 0 0 4px #000b;
}
main #page-container #education-page .section-contents {
- padding: 20px 10px 40px;
- grid-template-columns: 1fr;
+ padding: 20px 20px 40px;
+ grid-template-columns: 100%;
}
main #page-container #education-page .section-contents .full-row {
grid-column: 1;
@@ -960,6 +1091,10 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
border: 1px solid #dde;
padding: 10px;
}
+ main #page-container #education-page .section-contents .teacher {
+ grid-column: 1;
+ padding: 20px;
+ }
}
main #page-container #games-page .game-articles article {
display: grid;
@@ -968,7 +1103,7 @@ main #page-container #games-page .game-articles article {
margin: 20px 0;
}
main #page-container #games-page .game-articles article.game-article {
- grid-template-rows: repeat(6, auto);
+ grid-template-rows: repeat(7, auto);
background-color: #3c4144;
}
main #page-container #games-page .game-articles article.game-article *:not(a) {
@@ -983,6 +1118,13 @@ main #page-container #games-page .game-articles article.game-article .game-title
font-size: 35px;
font-style: italic;
}
+main #page-container #games-page .game-articles article.game-article .game-banner {
+ grid-column: 1/span 2;
+ display: flex;
+}
+main #page-container #games-page .game-articles article.game-article .game-banner img {
+ width: 100%;
+}
main #page-container #games-page .game-articles article.game-article .game-tags {
display: flex;
gap: 10px;
@@ -1008,7 +1150,7 @@ main #page-container #games-page .game-articles article.game-article .game-descr
}
main #page-container #games-page .game-articles article.game-article .image-carousel {
grid-column: 2;
- grid-row: 2/span 4;
+ grid-row: 3/span 4;
height: 100%;
}
main #page-container #games-page .game-articles article.game-article .game-team {
@@ -1064,16 +1206,19 @@ main #page-container #games-page .game-articles article.placeholder * {
grid-template-columns: 1fr;
}
main #page-container #games-page .game-articles article.game-article {
- grid-template-rows: repeat(5, auto);
+ grid-template-rows: repeat(6, auto);
}
main #page-container #games-page .game-articles article.game-article .game-title {
grid-column: 1;
padding: 20px;
font-size: 25px;
}
+ main #page-container #games-page .game-articles article.game-article .game-banner {
+ grid-column: 1;
+ }
main #page-container #games-page .game-articles article.game-article .image-carousel {
grid-column: 1;
- grid-row: 2;
+ grid-row: 3;
height: 400px;
}
main #page-container #games-page .game-articles article.game-article .game-team {
diff --git a/src/home-page-components/kuadrado-values.js b/src/home-page-components/kuadrado-values.js
index e7893c3eec4eeea4e78b809d706a236bcedd3e97..678e0ed07104c8471aa72197e83788652e9d6ccd 100644
--- a/src/home-page-components/kuadrado-values.js
+++ b/src/home-page-components/kuadrado-values.js
@@ -18,25 +18,24 @@ class KuadradoValues {
tag: "ul",
class: "values-list",
contents: [
+ [
+ "📖 <blue>Partage des connaissances</blue>",
+ `Pour sortir de l'élitisme de l'ingénierie, pour sortir de la domination par l'obscurantisme et de la consommation aveugle,
+ pour aller plus loin ensemble, le partage du savoir est fondamental.`,
+ ],
[
"💻 <blue>Logiciels libres et open source</blue>",
- `Toutes nos productions logicielles, web et vidéoludiques sont
+ `Toutes nos productions numériques, jeux vidéo, web, software, sont
<b><a href="https://fr.wikipedia.org/wiki/Logiciel_libre" target="_blank">libres et open source</a></b>.
- <br/>
- Kuadrado Software souhaite s'engager fortement dans un numérique ouvert et transparent.`,
+ <br/> ainsi que les outils engagés dans leur fabrication.`,
],
[
"🌿 <blue>Écologie</blue>",
`Nous vivons une époque ou l'utilisation de la technologie connaît une croissance exponentielle notament
à travers internet.
- <br/>Il est primordial selon nous de construire le numérique dans une direction de légèreté et d'économie de
+ <br/>Il est primordial de construire le numérique dans une direction de légèreté et d'économie de
ressources.`,
],
- [
- "📖 <blue>Partage des connaissances</blue>",
- `Pour sortir de l'élitisme de l'ingénierie, pour sortir de la domination par l'obscurantisme et de la consommation aveugle,
- pour aller plus loin ensemble, le partage du savoir est fondamental.`,
- ],
].map(v => {
const [title, body] = v;
return {
diff --git a/src/home-page-components/whoami.js b/src/home-page-components/whoami.js
new file mode 100644
index 0000000000000000000000000000000000000000..d4d6b2ac83dc7e3a7616fd98906e8854a89229d9
--- /dev/null
+++ b/src/home-page-components/whoami.js
@@ -0,0 +1,99 @@
+"use strict";
+
+class WhoAmI {
+ render() {
+ return {
+ tag: "section",
+ class: "whoami",
+ contents: [
+ {
+ tag: "div",
+ class: "page-contents-center",
+ contents: [
+ {
+ tag: "h2",
+ contents: "<blue>Qui sommes-nous-je ?</blue>",
+ },
+ {
+ tag: "div",
+ class: "presentation-card",
+ contents: [
+ {
+ tag: "div",
+ class: "header",
+ contents: [
+ {
+ tag: "div",
+ class: "pic",
+ contents: [
+ {
+ tag: "img",
+ alt:
+ "portrait Pierre Jarriges pixel art by Lucie Ventadour",
+ src: "assets/images/pijar_profile_lt_square.png",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "header-text",
+ contents: [
+ {
+ tag: "h3",
+ contents: "Pierre Jarriges",
+ },
+ {
+ tag: "h4",
+ contents:
+ "Artiste, auteur BD, compositeur, développeur informatique",
+ },
+ {
+ tag: "strong",
+ contents:
+ "Créateur de <blue>Kuadrado Software</blue> en Février 2021.",
+ },
+ ],
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "body",
+ contents: [
+ {
+ tag: "p",
+ contents: `
+ “ La création de <b><blue>Kuadrado Software</blue></b> vient de la volonté de développer deux axes ensembles :
+ <br /><br />
+ 🎮 D'une part exprimer une passion en créant des <b>jeux vidéo indépendants</b> sur un modèle léger et artisanal dans
+ une identité artistique forte, et de les distribuer sans compromission par une logique du marché ;
+ en effet, partir à la conquête du marché à dos de startup n'est pas l'objectif de Kuadrado Software. Il s'agit
+ avant tout de se donner les moyens de partager avec le monde une idée de liberté, de partage et de plaisir de
+ créer des choses simples.
+ <br /><br />
+ 💡 D'autre part il s'agit aussi de porter un <b>projet pédagogique</b> autour de la création de jeu vidéo, et
+ plus largement de la vulgarisation numérique. Le partage de connaissances et l'apprentissage collectif étant pour
+ moi l'instrument le plus efficace de lutte contre l'élitisme, contre le cloisonnement face à la technologie
+ (et donc à sa surconsommation), et tout simplement un moyen d'ouverture vers les autres.
+ <br /><br />
+ À l'heure d'aujourd'hui Kuadrado Software est construit sur un modèle d'auto-entreprise.
+ <br />
+ Mais le but n'est naturellement pas de rester tout seul à développer des projets et de parler de moi au
+ pluriel ! Il s'agit bien de développer une identité qui pourra rassembler plusieurs énergies
+ dans le même état d'esprit, former des équipes de travail et de création, et s'inscrire dans un tissu
+ local de savoir-faire, tout en gardant un modèle d'entreprise aussi léger, libéral, modulaire et indépendant
+ que possible .â€
+ `,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+module.exports = WhoAmI;
diff --git a/src/homepage.js b/src/homepage.js
index cef2ff9926962bc17355df0e5a1e98a0e3ebd811..10ca357746f48d4af1e24b0f436574631dde162e 100644
--- a/src/homepage.js
+++ b/src/homepage.js
@@ -4,6 +4,7 @@ const { images_url } = require("../constants");
const KuadradoValues = require("./home-page-components/kuadrado-values");
const NewsArticles = require("./home-page-components/news-articles");
const ThemeCard = require("./home-page-components/theme-card");
+const WhoAmI = require("./home-page-components/whoami");
const WebPage = require("./lib/web-page");
class HomePage extends WebPage {
@@ -42,11 +43,7 @@ class HomePage extends WebPage {
{
tag: "ul",
class: "philo-bubbles",
- contents: [
- "Simplicité",
- "Légèreté",
- "Écologie",
- ].map(word => {
+ contents: ["Simplicité", "Légèreté", "Écologie"].map(word => {
return {
tag: "li",
contents: [{ tag: "span", contents: word }],
@@ -64,7 +61,7 @@ class HomePage extends WebPage {
img: "game_controller.svg",
href: "/games/",
description:
- "Toutes nos créations vidéoludiques, jeux web et jeux PC, projets en cours, c'est par ici que ça se passe.",
+ "Créations vidéoludiques, jeux web et jeux PC, projets en cours.",
},
// {
// title: "Software",
@@ -76,8 +73,7 @@ class HomePage extends WebPage {
title: "Pédagogie",
img: "brain.svg",
href: "/education/",
- description: `S'approprier la technologie par le partage de connaissances.
- <br/>Découvrez nos initiatives pédagogiques.`,
+ description: `S'approprier la technologie par le partage de connaissances.`,
},
].map(cardProps => new ThemeCard(cardProps).render()),
},
@@ -94,14 +90,14 @@ class HomePage extends WebPage {
},
{
tag: "section",
- class: "page-contents-center",
+ class: "page-contents-center news",
contents: [
{ tag: "h2", contents: "Actu", class: "section-title bg-blue" },
new NewsArticles().render(),
],
},
- // WIP
new KuadradoValues().render(),
+ new WhoAmI().render(),
],
};
}
diff --git a/src/homepage.scss b/src/homepage.scss
index a76fa5ca6799d243f3dfc34a54f30e2ae3b93942..03a20d1166473d81670be08f515ddc176ed731d9 100644
--- a/src/homepage.scss
+++ b/src/homepage.scss
@@ -1,7 +1,6 @@
#home-page {
display: flex;
flex-direction: column;
- gap: 20px;
.section-title {
padding: 10px;
margin: 0;
@@ -48,149 +47,151 @@
}
}
}
-
- .articles-displayer {
- margin: 0 auto 40px;
- .prev-next-buttons {
- display: flex;
- justify-content: space-between;
- .prev-btn,
- .next-btn {
- border: none;
- background: none;
+ .news {
+ padding: 60px 20px;
+ .articles-displayer {
+ margin: 0 auto 40px;
+ .prev-next-buttons {
display: flex;
- align-items: center;
- gap: 10px;
- padding: 5px 0;
- &.disabled {
- visibility: hidden;
- pointer-events: none;
- }
- &.active {
- cursor: pointer;
- color: $medium_grey;
- &:hover {
- color: $dark_2;
+ justify-content: space-between;
+ .prev-btn,
+ .next-btn {
+ border: none;
+ background: none;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 5px 0;
+ &.disabled {
+ visibility: hidden;
+ pointer-events: none;
+ }
+ &.active {
+ cursor: pointer;
+ color: $medium_grey;
+ &:hover {
+ color: $dark_2;
+ }
}
}
- }
- .next-btn {
- &.active {
- &::after {
- content: " ";
- border-style: solid;
- border-width: 2px 2px 0 0;
- width: 8px;
- height: 8px;
- transform: rotate(45deg);
- @include flex-center;
+ .next-btn {
+ &.active {
+ &::after {
+ content: " ";
+ border-style: solid;
+ border-width: 2px 2px 0 0;
+ width: 8px;
+ height: 8px;
+ transform: rotate(45deg);
+ @include flex-center;
+ }
}
}
- }
- .prev-btn {
- &.active {
- &::before {
- content: " ";
- border-style: solid;
- border-width: 2px 2px 0 0;
- width: 8px;
- height: 8px;
- transform: rotate(-135deg);
- @include flex-center;
+ .prev-btn {
+ &.active {
+ &::before {
+ content: " ";
+ border-style: solid;
+ border-width: 2px 2px 0 0;
+ width: 8px;
+ height: 8px;
+ transform: rotate(-135deg);
+ @include flex-center;
+ }
}
}
}
- }
- article {
- display: grid;
- gap: 5px 20px;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: auto auto auto 1fr;
- position: relative;
- padding-left: 20px;
- background-color: $dark_2;
- *:not(a) {
- color: $light_0;
- }
- .date {
- grid-column: 1;
- grid-row: 1;
- text-align: right;
- time {
- color: $medium_grey;
- font-style: italic;
- font-size: 12px;
- }
- }
- .title {
- grid-column: 1;
- grid-row: 2;
- h3 {
- margin: 0 0 10px;
- }
- }
- .subtitle {
- grid-column: 1;
- grid-row: 3;
- font-style: italic;
- font-size: 15px;
- }
- .body {
- grid-column: 1;
- grid-row: 4;
- min-height: 200px;
- padding-bottom: 40px;
- text-align: justify;
- }
- .image-carousel {
- grid-row: 1 / span 4;
- grid-column: 2;
- img {
- max-height: 100%;
- }
- }
- &.article-placeholder {
- padding: 0;
- * {
- background-color: $light_0;
+ article {
+ display: grid;
+ gap: 5px 20px;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto auto auto 1fr;
+ position: relative;
+ padding-left: 20px;
+ background-color: $dark_2;
+ *:not(a) {
+ color: $light_0;
}
.date {
- height: 10px;
+ grid-column: 1;
+ grid-row: 1;
+ text-align: right;
+ time {
+ color: $medium_grey;
+ font-style: italic;
+ font-size: 12px;
+ }
}
.title {
- height: 40px;
- }
- .subtitle {
- height: 30px;
- }
- }
- }
- @media screen and (max-width: $screen_l) {
- article {
- gap: 5px;
- grid-template-columns: 1fr;
- grid-template-rows: 300px auto auto auto 1fr;
- padding: 0;
- .date {
+ grid-column: 1;
grid-row: 2;
- padding: 0 10px;
- }
- .title {
- grid-row: 3;
- padding: 0 10px;
+ h3 {
+ margin: 0 0 10px;
+ }
}
.subtitle {
- grid-row: 4;
- padding: 0 10px;
+ grid-column: 1;
+ grid-row: 3;
+ font-style: italic;
+ font-size: 15px;
}
.body {
- grid-row: 5;
- padding: 0 10px 30px;
+ grid-column: 1;
+ grid-row: 4;
+ min-height: 200px;
+ padding-bottom: 40px;
+ text-align: justify;
}
.image-carousel {
- grid-row: 1;
- grid-column: 1;
+ grid-row: 1 / span 4;
+ grid-column: 2;
+ img {
+ max-height: 100%;
+ }
+ }
+ &.article-placeholder {
+ padding: 0;
+ * {
+ background-color: $light_0;
+ }
+ .date {
+ height: 10px;
+ }
+ .title {
+ height: 40px;
+ }
+ .subtitle {
+ height: 30px;
+ }
+ }
+ }
+ @media screen and (max-width: $screen_l) {
+ article {
+ gap: 5px;
+ grid-template-columns: 1fr;
+ grid-template-rows: 300px auto auto auto 1fr;
+ padding: 0;
+ .date {
+ grid-row: 2;
+ padding: 0 10px;
+ }
+ .title {
+ grid-row: 3;
+ padding: 0 10px;
+ }
+ .subtitle {
+ grid-row: 4;
+ padding: 0 10px;
+ }
+ .body {
+ grid-row: 5;
+ padding: 0 10px 30px;
+ }
+ .image-carousel {
+ grid-row: 1;
+ grid-column: 1;
+ }
}
}
}
@@ -200,6 +201,7 @@
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
+ padding: 100px 0;
.theme-card {
display: flex;
flex-direction: column;
@@ -278,6 +280,67 @@
}
}
+ .whoami {
+ background-image: url("/assets/images/wallpaper_binary_white.png");
+ padding: 100px 0 120px;
+ .page-contents-center {
+ background-color: white;
+ padding: 40px;
+ @include flex-center-col;
+ h2 {
+ text-align: center;
+ background-color: $dark_2;
+ @include flex-center-col;
+ width: 220px;
+ height: 220px;
+ border-radius: 100%;
+ padding: 30px;
+ }
+ .presentation-card {
+ .header {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 30px;
+ background-color: $dark_2;
+ padding: 50px 20px;
+ .pic {
+ @include flex-center-col;
+ img {
+ width: 150px;
+ height: auto;
+ border-radius: 100%;
+ }
+ }
+ .header-text {
+ h3 {
+ font-size: 22px;
+ color: $light_0;
+ margin: 0;
+ }
+ h4 {
+ font-size: 18px;
+ }
+ strong,
+ h4 {
+ color: $light_1;
+ }
+ }
+ }
+ .body {
+ p {
+ font-size: 18px;
+ font-style: italic;
+ font-family: serif;
+ color: $dark_3;
+ *:not(blue, a) {
+ color: $dark_3;
+ }
+ }
+ }
+ }
+ }
+ }
+
@media screen and (max-width: $screen_l) {
.poles {
grid-template-columns: 1fr;
@@ -317,13 +380,31 @@
grid-template-columns: 1fr;
}
}
+
+
}
@media screen and (max-width: $page_contents_center_width) {
.poles {
- padding: 0 20px;
+ padding: 20px;
}
.articles-displayer {
padding: 0;
}
}
+
+ @media screen and (max-width: $screen_s) {
+ .whoami {
+ .page-contents-center {
+ .presentation-card {
+ .header {
+ @include flex-center-col;
+ .header-text {
+ text-align: center;
+
+ }
+ }
+ }
+ }
+ }
+ }
}
diff --git a/src/pages/education/components/game-studio-club.js b/src/pages/education/components/game-studio-club.js
index 25022c859cbfb1f493e786fe6417483950db9279..d94fe3a2b04a2203fbfd721afda2655fc2cc68ff 100644
--- a/src/pages/education/components/game-studio-club.js
+++ b/src/pages/education/components/game-studio-club.js
@@ -348,7 +348,11 @@ class GameStudioClub {
tag: "td",
contents: "(4 séances)",
},
- { tag: "td", contents: "<b><blue>60€</blue></b>" },
+ {
+ tag: "td",
+ contents:
+ "<b><blue>60€</blue></b>",
+ },
],
},
{
@@ -363,7 +367,11 @@ class GameStudioClub {
tag: "td",
contents: "(12 séances)",
},
- { tag: "td", contents: "<b><blue>160€</blue></b>" },
+ {
+ tag: "td",
+ contents:
+ "<b><blue>160€</blue></b>",
+ },
],
},
],
@@ -372,20 +380,80 @@ class GameStudioClub {
},
{
tag: "div",
+ class:"documents",
contents: [
{
- tag: "a",
- class: "download-link",
- download: "fiche-inscription",
- href: "/assets/documents/fiche-inscription.pdf",
+ tag: "div",
contents: "Télécharger la fiche d'inscription",
},
+ {
+ tag:"div",
+ class: "links",
+ contents: [
+ {
+ tag: "a",
+ class: "download-link",
+ download: "fiche-inscription",
+ href: "/assets/documents/fiche-inscription.pdf",
+ contents: "PDF",
+ },
+ {
+ tag: "a",
+ class: "download-link",
+ download: "fiche-inscription",
+ href: "/assets/documents/fiche-inscription.odt",
+ contents: "Libre Office",
+ },
+ ]
+ }
+
],
},
],
},
],
},
+ {
+ tag: "div",
+ class: "teacher",
+ contents: [
+ {
+ tag: "h3",
+ contents: "Animé par",
+ },
+ {
+ tag: "div",
+ class: "teacher-card",
+ contents: [
+ {
+ tag: "div",
+ class: "pic",
+ contents: [
+ {
+ tag: "img",
+ src:
+ "/assets/images/pijar_profile_lt_square.png",
+ },
+ ],
+ },
+ {
+ tag:"div",
+ class:"infos-text",
+ contents: [
+ {
+ tag:"h4",
+ contents: "Pierre Jarriges"
+ },
+ {
+ tag: "p",
+ contents: "Développeur jeu vidéo, auteur BD, compositeur."
+ }
+ ]
+ }
+ ],
+ },
+ ],
+ },
],
},
],
diff --git a/src/pages/education/education.scss b/src/pages/education/education.scss
index 34b9f489819ad338038a508cbc7703c4b4e82a73..f1c7226be0a2389f09b9adbabee0a2c9057f1ee6 100644
--- a/src/pages/education/education.scss
+++ b/src/pages/education/education.scss
@@ -167,11 +167,55 @@
}
}
}
- .download-link {
- border: 1px solid;
- padding: 10px;
- display: inline-block;
- margin: 10px 0 0;
+ .documents {
+ margin-top: 20px;
+ .links {
+ display: flex;
+ gap: 20px;
+ .download-link {
+ border: 1px solid;
+ padding: 8px;
+ display: flex;
+ margin: 10px 0 0;
+ border-radius: 4px;
+ }
+ }
+ }
+
+ }
+ }
+
+ .teacher {
+ grid-column: 1 / span 2;
+ background: url("/assets/images/wallpaper_binary.png");
+ padding: 30px;
+ @include flex-center-col;
+ gap: 20px;
+ h3 {
+ margin: 0;
+ width: 100%;
+ color: $light_0;
+ }
+ .teacher-card {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ width: 100%;
+ .pic {
+ img {
+ width: 100px;
+ }
+ }
+ .infos-text {
+ padding: 0 20px;
+ h4 {
+ color: $blue_3;
+ margin: 0;
+ font-size: 18px;
+ }
+ p {
+ color: $light_1;
+ display: block;
+ }
}
}
}
@@ -210,7 +254,7 @@
}
}
- @media screen and (max-width: $screen_s) {
+ @media screen and (max-width: $screen_m) {
h3 {
&.big {
font-size: 22px;
@@ -226,8 +270,8 @@
}
}
.section-contents {
- padding: 20px 10px 40px;
- grid-template-columns: 1fr;
+ padding: 20px 20px 40px;
+ grid-template-columns: 100%;
.full-row {
grid-column: 1;
}
@@ -279,6 +323,10 @@
}
}
}
+ .teacher {
+ grid-column: 1;
+ padding: 20px;
+ }
}
}
}
diff --git a/src/pages/games/components/game-article.js b/src/pages/games/components/game-article.js
index 689ff6db7d8384ee5a9590ea46bbf12d2a8b754e..18d663f5fa4c71d18ad106e284fd7e3635bab746 100644
--- a/src/pages/games/components/game-article.js
+++ b/src/pages/games/components/game-article.js
@@ -57,7 +57,16 @@ class GameArticle {
}
render() {
- const { title, tags, body, subtitle, images, path, team_subarticles } = this.props;
+ const {
+ title,
+ tags,
+ body,
+ subtitle,
+ images,
+ path,
+ team_subarticles,
+ image_banner,
+ } = this.props;
return {
tag: "article",
typeof: "VideoGame",
@@ -70,6 +79,13 @@ class GameArticle {
class: "game-title",
contents: title,
},
+ {
+ tag: "div",
+ class: "game-banner",
+ contents: [
+ { tag: "img", class: "pixelated", src: `${path}/images/${image_banner}` },
+ ],
+ },
{
tag: "div",
class: "game-tags",
diff --git a/src/pages/games/games.scss b/src/pages/games/games.scss
index df569d7f318b8b392511f5c7b53c9c923237295f..e0969e8a26c3163ef1dd15cff44477f4e1610946 100644
--- a/src/pages/games/games.scss
+++ b/src/pages/games/games.scss
@@ -6,7 +6,7 @@
gap: 0 20px;
margin: 20px 0;
&.game-article {
- grid-template-rows: repeat(6, auto);
+ grid-template-rows: repeat(7, auto);
background-color: $dark_2;
*:not(a) {
color: $light_0;
@@ -21,6 +21,14 @@
font-style: italic;
}
+ .game-banner {
+ grid-column: 1 / span 2;
+ display: flex;
+ img {
+ width: 100%;
+ }
+ }
+
.game-tags {
display: flex;
gap: 10px;
@@ -48,7 +56,7 @@
.image-carousel {
grid-column: 2;
- grid-row: 2 / span 4;
+ grid-row: 3 / span 4;
height: 100%;
}
.game-team {
@@ -103,16 +111,20 @@
@media screen and (max-width: $screen_l) {
grid-template-columns: 1fr;
&.game-article {
- grid-template-rows: repeat(5, auto);
+ grid-template-rows: repeat(6, auto);
.game-title {
grid-column: 1;
padding: 20px;
font-size: 25px;
}
+ .game-banner {
+ grid-column: 1;
+ }
+
.image-carousel {
grid-column: 1;
- grid-row: 2;
+ grid-row: 3;
height: 400px;
}
.game-team {
diff --git a/src/style.scss b/src/style.scss
index cfb15a1a9290f3633f039e2ea88306cc6f0b6721..437cd630d2e091f144d2a21480ef5fcdea5d1ea9 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -32,6 +32,12 @@ body {
#seo-title {
visibility: hidden;
}
+
+ img.pixelated {
+ image-rendering: pixelated;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: crisp-edges;
+ }
}
main {
@@ -85,7 +91,7 @@ main {
max-height: 100%;
}
.carousel-bullets {
- gap: 15px;
+ gap: 30px;
.bullet {
width: 12px;
height: 12px;
@@ -328,7 +334,6 @@ main {
.page-philo {
background-image: url("/assets/images/wallpaper_binary.png");
padding: 120px 30px;
- margin: 40px 0;
p {
width: 100%;
max-width: 600px;