diff --git a/public/articles/software/index.json b/public/articles/software/index.json
index 9eeda8bf41fdedb4278e10b76c791495d7d54cee..82e6d2b1ed5bb0157a78a9086c26645301ae256f 100755
--- a/public/articles/software/index.json
+++ b/public/articles/software/index.json
@@ -1,3 +1,3 @@
{
- "articles": ["watergun", "website-template"]
+ "articles": ["watergun", "website-template", "make_frames"]
}
diff --git a/public/articles/software/make_frames/images/screen_make_frames.png b/public/articles/software/make_frames/images/screen_make_frames.png
new file mode 100644
index 0000000000000000000000000000000000000000..1cad3ad3fa68becd61855f7055cfacfc231ef401
Binary files /dev/null and b/public/articles/software/make_frames/images/screen_make_frames.png differ
diff --git a/public/articles/software/make_frames/make_frames.json b/public/articles/software/make_frames/make_frames.json
new file mode 100644
index 0000000000000000000000000000000000000000..97bc775308b04efef8988ae2cb0fe598846a515a
--- /dev/null
+++ b/public/articles/software/make_frames/make_frames.json
@@ -0,0 +1,20 @@
+{
+ "title": "Make Frames",
+ "date": "2021/02/21",
+ "subtitle": "Outil en ligne de commande de manipulation d'animation",
+ "body": "<file>make_frames.txt",
+ "technical": {
+ "stack": ["Rust"],
+ "license": "GNU-GPL v3",
+ "repository": "https://gitlab.com/peter_rabbit/make_frames",
+ "version": "0.1.0"
+ },
+ "images": ["screen_make_frames.png"],
+ "releases": [
+ {
+ "version": "0.1.0",
+ "platform": "Debian/Ubuntu - amd64",
+ "download": "make_frames_0.1.0_amd64.deb"
+ }
+ ]
+}
diff --git a/public/articles/software/make_frames/make_frames.txt b/public/articles/software/make_frames/make_frames.txt
new file mode 100644
index 0000000000000000000000000000000000000000..90fa245106e02d862e9a4443857d1d9f9ff2679c
--- /dev/null
+++ b/public/articles/software/make_frames/make_frames.txt
@@ -0,0 +1,3 @@
+Make Frames est un utilitaire en ligne de commande pour Linux écrit en Rust destiné à faciliter le montage des animations sous forme de frise de frames.
+
+Le programme prend en entrée soit une animation au format GIF, soit un dossier de frames séparées au format PNG, et sort un fichier PNG unique avec toutes les frames montées en ligne.
\ No newline at end of file
diff --git a/public/articles/software/make_frames/release/make_frames_0.1.0_amd64.deb b/public/articles/software/make_frames/release/make_frames_0.1.0_amd64.deb
new file mode 100644
index 0000000000000000000000000000000000000000..8b7e822e9a7a82d569cd54ebd474a5bbf7af32c0
Binary files /dev/null and b/public/articles/software/make_frames/release/make_frames_0.1.0_amd64.deb differ
diff --git a/public/articles/software/watergun/watergun.txt b/public/articles/software/watergun/watergun.txt
index 00b8a43e9d164548739871c35548fba68646bbe7..99c4098a832c7dfa834c25127809f3617ba075a2 100755
--- a/public/articles/software/watergun/watergun.txt
+++ b/public/articles/software/watergun/watergun.txt
@@ -1,4 +1 @@
-Watergun est un logiciel de création web fonctionnant entièrement hors ligne et permettant de générer facilement un site web statique très léger, de le déployer en ligne et de le modifier.
-
-Watergun est un logiciel libre open source sous license GNU GPLv3.
-Il est développé entièrement en Javascript / Node.js avec l'API <a href="https://www.electronjs.org/">Electron</a> qui est sa seule dépendance.
+Projet expérimental de logiciel de création web fonctionnant entièrement hors ligne et permettant de générer facilement un site web statique très léger, de le déployer en ligne et de le modifier.
\ No newline at end of file
diff --git a/public/articles/software/website-template/website-template.json b/public/articles/software/website-template/website-template.json
index 6f5dd94c0fb9344449c64bea2cbfebff7bd1c859..c4deb8dd01d2c0ff9199034e5df8c9661cde5879 100644
--- a/public/articles/software/website-template/website-template.json
+++ b/public/articles/software/website-template/website-template.json
@@ -1,5 +1,5 @@
{
- "title": "Website template",
+ "title": "Template web",
"date": "2021/01/28",
"subtitle": "Modèle de site statique simple et dynamique",
"body": "<file>website-template.txt",
diff --git a/public/articles/software/website-template/website-template.txt b/public/articles/software/website-template/website-template.txt
index 49fba5b9bba84f208d02163ecd385bfe57a7145c..c1610ade0201331a578dac1178f76c7b29e62eb9 100644
--- a/public/articles/software/website-template/website-template.txt
+++ b/public/articles/software/website-template/website-template.txt
@@ -1,5 +1,3 @@
Basé sur les mêmes mécanismes de rendu dynamique que pour Watergun, ce modèle de site web propose une base réutilisable pour n'importe quel site statique simple et moderne.
-Aucun framework ni aucune librairie n'est utilisée dans le moteur de rendu du DOM. L'objectif étant un maximum de légèreté et de simplicité à la fois dans le code mais aussi dans le résultat final.
-
Ce modèle est celui qui a servi pour le présent site.
\ No newline at end of file
diff --git a/public/education/education.js b/public/education/education.js
index 117226b147418975d7db42df0b008e1c5d1be9f6..45a123edfb569882e11c6211e7cc87e1a3e39799 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -538,14 +538,15 @@ class GameStudioClub {
tag: "div",
class: "teacher",
contents: [
- {
- tag: "h3",
- contents: "Animé par",
- },
+
{
tag: "div",
class: "teacher-card",
contents: [
+ {
+ tag: "h3",
+ contents: "Animé par",
+ },
{
tag: "div",
class: "pic",
@@ -861,15 +862,6 @@ const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
- // À murir..
- // [
- // "/software-development/",
- // "Software",
- // [
- // ["/software-development/#projects", "Projets"],
- // ["/software-development/#service", "Prestation de services"],
- // ],
- // ],
[
"/education/",
"Pédagogie",
@@ -879,6 +871,7 @@ const NAV_MENU_ITEMS = [
["/education/#popularization", "Vulgarisation numérique"],
],
],
+ ["/software-development/", "Software"],
];
class NavBar {
diff --git a/public/games/games.js b/public/games/games.js
index e6e5a74571cbddc13fbbbbdef16a58adb26acbd5..d42a375a2902b6a12aa4dcedaa51fddf614f1be3 100644
--- a/public/games/games.js
+++ b/public/games/games.js
@@ -555,15 +555,6 @@ const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
- // À murir..
- // [
- // "/software-development/",
- // "Software",
- // [
- // ["/software-development/#projects", "Projets"],
- // ["/software-development/#service", "Prestation de services"],
- // ],
- // ],
[
"/education/",
"Pédagogie",
@@ -573,6 +564,7 @@ const NAV_MENU_ITEMS = [
["/education/#popularization", "Vulgarisation numérique"],
],
],
+ ["/software-development/", "Software"],
];
class NavBar {
diff --git a/public/main.js b/public/main.js
index 39d21c2a6d60329ac873b87855537d40527e3dc3..a8820f97f028bb2573c8b799744d6471b2f87515 100644
--- a/public/main.js
+++ b/public/main.js
@@ -114,18 +114,18 @@ class KuadradoValues {
class: "values-list",
contents: [
[
- "📖 <blue>Partage des connaissances</blue>",
+ "<emoji>📖</emoji> <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>",
+ "<emoji>💻</emoji> <blue>Logiciels libres et open source</blue>",
`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/> ainsi que les outils engagés dans leur fabrication.`,
],
[
- "🌿 <blue>Écologie</blue>",
+ "<emoji>🌿</emoji> <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 de construire le numérique dans une direction de légèreté et d'économie de
@@ -359,7 +359,7 @@ class WhoAmI {
contents: [
{
tag: "h2",
- contents: "<blue>Qui sommes-nous-je ?</blue>",
+ contents: "Qui sommes-nous-je ?",
},
{
tag: "div",
@@ -410,15 +410,15 @@ class WhoAmI {
{
tag: "p",
contents: `
- “ La création de <b><blue>Kuadrado Software</blue></b> vient de la volonté de développer deux axes ensembles :
+ “ La création de <b><blue>Kuadrado Software</blue></b> vient de la volonté de développer différents 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
+ <emoji>🎮</emoji> 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
+ <emoji>💡</emoji> 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.
@@ -511,18 +511,18 @@ class HomePage extends WebPage {
description:
"Créations vidéoludiques, jeux web et jeux PC, projets en cours.",
},
- // {
- // title: "Software",
- // img: "meca_proc.svg",
- // href: "/software-development/",
- // description: `Développement web, moteur de jeux, outillage logiciel, retrouvez nos projets en détail sur cette page.`,
- // },
{
title: "Pédagogie",
img: "brain.svg",
href: "/education/",
description: `S'approprier la technologie par le partage de connaissances.`,
},
+ {
+ title: "Software",
+ img: "meca_proc.svg",
+ href: "/software-development/",
+ description: `R&D, projets expérimentaux, web et outillage logiciel`,
+ },
].map(cardProps => new ThemeCard(cardProps).render()),
},
{
@@ -538,9 +538,10 @@ class HomePage extends WebPage {
},
{
tag: "section",
- class: "page-contents-center news",
+ class: "page-contents-center",
+ id:"news",
contents: [
- { tag: "h2", contents: "Actu", class: "section-title bg-blue" },
+ { tag: "h2", contents: "Actu", class: "section-title" },
new NewsArticles().render(),
],
},
@@ -765,15 +766,6 @@ const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
- // À murir..
- // [
- // "/software-development/",
- // "Software",
- // [
- // ["/software-development/#projects", "Projets"],
- // ["/software-development/#service", "Prestation de services"],
- // ],
- // ],
[
"/education/",
"Pédagogie",
@@ -783,6 +775,7 @@ const NAV_MENU_ITEMS = [
["/education/#popularization", "Vulgarisation numérique"],
],
],
+ ["/software-development/", "Software"],
];
class NavBar {
diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js
index 2659d17f59a992c54c9740d50de5396bd761654c..87a9eb11c5fe8879e69299db6d02906651351dc5 100644
--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -280,144 +280,6 @@ module.exports = WebPage;
},{}],8:[function(require,module,exports){
"use strict";
-const { images_url } = require("../../../../constants");
-
-const SKILL_THEMES = [
- "Applications web",
- "Service backend, serveur, API REST, bases de données",
- "Sites web statiques, serveurs de fichiers",
- "Développement frontend, interfaces",
- "Conception et design UX / UI",
- "Création graphique bitmap et vectoriel",
- "Prototypes embarqués, IoT, Arduino",
- "Développement logiciel",
- "Applications Android",
-];
-
-const SKILL_STACK = [
- ["Javascript", "js.png"],
- ["Node.js", "node.png"],
- ["React.js", "react.png"],
- ["Python", "python.png"],
- ["C/C++", "c.png"],
- ["Rust", "rust.png"],
- ["MySQL", "mysql.png"],
- ["PostgreSQL", "postgre.png"],
- ["MongoDB", "mongodb.png"],
- ["HTML", "html.png"],
- ["CSS", "css.png"],
- ["Sass", "sass.png"],
- ["Docker", "docker.png"],
- ["Linux", "linux.png"],
- ["Nginx", "nginx.png"],
- ["Apache", "apache.png"],
-];
-
-class ServiceSection {
- render() {
- return {
- tag: "section",
- class: "page-contents-center",
- id: "service-section",
- typeof: "Service",
- additionalType: "Organization",
- contents: [
- {
- tag: "h3",
- contents:
- "<blue>Nos compétences</blue> pour votre besoin <blue>numérique</blue>",
- property: "slogan",
- },
- {
- tag: "p",
- property: "description",
- contents: `
- La demande numérique est omniprésente et de nombreuses entreprises ont besoin de bénéficier d'outils spécifiques réalisés sur mesure,
- applications web et mobiles, site statiques, logiciels, ERP, etc, mais n'ont pas forcément les compétences chez elles,
- et n'ont pas non plus un besoin suffisamment grand pour embaucher une équipe de développement.
- <br /><br />
- <b><blue>Kuadrado</blue></b> propose de répondre à ce cas de figure pour les entreprises et organisations locales
- (Ardèche, Drôme, Rhône, Loire, Haute-Loire...) en étant leur <b>partenaire en développement <blue>web et logiciel</blue></b>.`,
- },
- {
- tag: "p",
- class: "teaser",
- contents: [
- {
- tag: "strong",
- property: "slogan",
- contents:
- "Des solutions <blue>sur mesure, légères, simples, maintenables, scalables et écologiques</blue>",
- },
- ],
- },
- {
- tag: "div",
- class: "skills",
- contents: [
- {
- tag: "ul",
- class: "skill-themes",
- contents: SKILL_THEMES.map(item => {
- return { tag: "li", contents: item, property: "about" };
- }),
- },
- {
- tag: "ul",
- class: "skill-stack",
- contents: SKILL_STACK.map(item => {
- const [title, img] = item;
- return {
- tag: "li",
- property: "about",
- contents: [
- {
- tag: "strong",
- contents: title,
- },
- {
- tag: "img",
- src: `${images_url}tech_logos/${img}`,
- },
- ],
- };
- }),
- },
- {
- tag: "div",
- class: "call-us",
- contents: [
- {
- tag: "h3",
- contents: `Un <blue>projet à réaliser</blue> ?
- <br/>Besoin d'informations, de conseils ou d'un <blue>devis</blue> ?`,
- },
- {
- tag: "a",
- href: "mailto:contact@kuadrado-software.fr",
- contents: "contact@kuadrado-software.fr",
- property: "email",
- },
- {
- tag: "a",
- href: "tel:+33475780872",
- contents: "04 75 78 08 72",
- property: "telephone",
- },
- ],
- },
- ],
- },
- ],
- };
- }
-}
-
-module.exports = ServiceSection;
-
-},{"../../../../constants":2}],9:[function(require,module,exports){
-"use strict";
-
const { articles_url } = require("../../../../constants");
const ImageCarousel = require("../../../generic-components/image-carousel");
const { loadArticles, getArticleBody, getArticleDate } = require("../../../lib/article-utils");
@@ -429,7 +291,7 @@ class SoftwareArticle {
}
render() {
- const { title, date, body, subtitle, images, path, technical } = this.props;
+ const { title, date, body, subtitle, images, path, technical, releases } = this.props;
return {
tag: "article",
class: "software-article",
@@ -525,20 +387,68 @@ class SoftwareArticle {
contents: [
{
tag: "label",
- contents: [
- {
- tag: "a",
- href: technical.repository,
- target: "_blank",
- contents: "Dépôt code source",
- property: "url",
- },
- ],
+ contents: "Code source",
+ },
+ {
+ tag: "a",
+ href: technical.repository,
+ target: "_blank",
+ contents: technical.repository.replace(
+ /https?:\/\/(www\.)?/g,
+ ""
+ ),
+ property: "url",
},
],
},
],
},
+ releases && {
+ tag: "h2",
+ contents: "Releases",
+ },
+ releases && {
+ tag: "ul",
+ class: "releases",
+ contents: [
+ {
+ tag: "li",
+ class: "detail",
+ contents: [
+ {
+ tag: "label",
+ class: "label",
+ contents: "Plateforme",
+ },
+ {
+ tag: "label",
+ class: "label",
+ contents: "Téléchargement",
+ },
+ ],
+ },
+ ].concat(
+ releases.map(rel => {
+ return {
+ tag: "li",
+ class: "release detail",
+ contents: [
+ {
+ tag: "label",
+ contents: rel.platform,
+ },
+ {
+ tag: "a",
+ download: rel.download,
+ href: `${path}/release/${rel.download}`,
+ contents: rel.download,
+ property: "url",
+ },
+ ],
+ };
+ })
+ ),
+ },
],
},
],
@@ -610,12 +520,11 @@ class SoftwareArticles {
module.exports = SoftwareArticles;
-},{"../../../../constants":2,"../../../generic-components/image-carousel":3,"../../../lib/article-utils":4,"../../../lib/object-html-renderer":6}],10:[function(require,module,exports){
+},{"../../../../constants":2,"../../../generic-components/image-carousel":3,"../../../lib/article-utils":4,"../../../lib/object-html-renderer":6}],9:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
-const ServiceSection = require("./components/service-section");
const SoftwareArticles = require("./components/software-articles");
class SoftwareDevelopment extends WebPage {
@@ -646,26 +555,13 @@ class SoftwareDevelopment extends WebPage {
{ tag: "h1", contents: "Software" },
{
tag: "p",
- contents: `Développement web, moteurs de jeux et outillage logiciel.`,
+ contents: `R&D, projets expérimentaux, outillage logiciel pour le développement de jeu ou pour le web.`,
},
],
},
],
},
- {
- tag: "h2",
- id: "projects", //anchor
- contents: "Projets",
- class: "page-section-title",
- },
new SoftwareArticles().render(),
- {
- tag: "h2",
- id: "service", //anchor
- contents: "Prestation de services",
- class: "page-section-title",
- },
- new ServiceSection().render(),
],
};
}
@@ -673,7 +569,7 @@ class SoftwareDevelopment extends WebPage {
module.exports = SoftwareDevelopment;
-},{"../../../constants":2,"../../lib/web-page":7,"./components/service-section":8,"./components/software-articles":9}],11:[function(require,module,exports){
+},{"../../../constants":2,"../../lib/web-page":7,"./components/software-articles":8}],10:[function(require,module,exports){
"use strict";
"use strict";
@@ -681,7 +577,7 @@ const runPage = require("../../run-page");
const SoftwareDevelopment = require("./software-development");
runPage(SoftwareDevelopment);
-},{"../../run-page":12,"./software-development":10}],12:[function(require,module,exports){
+},{"../../run-page":11,"./software-development":9}],11:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -693,22 +589,13 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":6,"./template/template":14}],13:[function(require,module,exports){
+},{"./lib/object-html-renderer":6,"./template/template":13}],12:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
- // À murir..
- // [
- // "/software-development/",
- // "Software",
- // [
- // ["/software-development/#projects", "Projets"],
- // ["/software-development/#service", "Prestation de services"],
- // ],
- // ],
[
"/education/",
"Pédagogie",
@@ -718,6 +605,7 @@ const NAV_MENU_ITEMS = [
["/education/#popularization", "Vulgarisation numérique"],
],
],
+ ["/software-development/", "Software"],
];
class NavBar {
@@ -812,7 +700,7 @@ class NavBar {
module.exports = NavBar;
-},{"../../../constants":2}],14:[function(require,module,exports){
+},{"../../../constants":2}],13:[function(require,module,exports){
"use strict";
const { in_construction } = require("../../config");
@@ -923,4 +811,4 @@ class Template {
module.exports = Template;
-},{"../../config":1,"../../constants":2,"./components/navbar":13}]},{},[11]);
+},{"../../config":1,"../../constants":2,"./components/navbar":12}]},{},[10]);
diff --git a/public/style/home-page-components/news-articles.css b/public/style/home-page-components/news-articles.css
new file mode 100644
index 0000000000000000000000000000000000000000..4fa2a445880e30bc1b0750c5ea67d5fb6586bad0
--- /dev/null
+++ b/public/style/home-page-components/news-articles.css
@@ -0,0 +1,17 @@
+/* Error: Undefined variable.
+ * ,
+ * 22 | color: $medium_grey;
+ * | ^^^^^^^^^^^^
+ * '
+ * src/home-page-components/news-articles.scss 22: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 22 \2502 color: $medium_grey;\a \2502 ^^^^^^^^^^^^\a \2575 \a src/home-page-components/news-articles.scss 22:28 root stylesheet";
+}
diff --git a/public/style/homepage.css b/public/style/homepage.css
index 6f7d990fdead94314f4c2562d99995f066217d8a..00062e138a7561026f6d5f3c844b24f36d52b985 100644
--- a/public/style/homepage.css
+++ b/public/style/homepage.css
@@ -1,9 +1,9 @@
/* Error: Undefined variable.
* ,
- * 7 | background-color: $light_0;
- * | ^^^^^^^^
+ * 7 | color: $light_2;
+ * | ^^^^^^^^
* '
- * src/homepage.scss 7:27 root stylesheet */
+ * src/homepage.scss 7:16 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 7 \2502 background-color: $light_0;\a \2502 ^^^^^^^^\a \2575 \a src/homepage.scss 7:27 root stylesheet";
+ content: "Error: Undefined variable.\a \2577 \a 7 \2502 color: $light_2;\a \2502 ^^^^^^^^\a \2575 \a src/homepage.scss 7:16 root stylesheet";
}
diff --git a/public/style/pages/games/games.css b/public/style/pages/games/games.css
index a172391064087fc34a6de0b591042e19bc1d77b9..9eb419b995bbc31b81cfe83535a1fdd0d0022897 100644
--- a/public/style/pages/games/games.css
+++ b/public/style/pages/games/games.css
@@ -1,9 +1,9 @@
/* Error: Undefined variable.
* ,
- * 10 | background-color: $dark_2;
- * | ^^^^^^^
+ * 14 | color: $light_2;
+ * | ^^^^^^^^
* '
- * src/pages/games/games.scss 10:35 root stylesheet */
+ * src/pages/games/games.scss 14:28 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 10 \2502 background-color: $dark_2;\a \2502 ^^^^^^^\a \2575 \a src/pages/games/games.scss 10:35 root stylesheet";
+ content: "Error: Undefined variable.\a \2577 \a 14 \2502 color: $light_2;\a \2502 ^^^^^^^^\a \2575 \a src/pages/games/games.scss 14:28 root stylesheet";
}
diff --git a/public/style/pages/software-development/software-development.css b/public/style/pages/software-development/software-development.css
index 7446ac3ca3680f9668eee838c85300195fcdfb25..e9e1acc3555438dcd5b93518ab6d9c4fdd42bd53 100644
--- a/public/style/pages/software-development/software-development.css
+++ b/public/style/pages/software-development/software-development.css
@@ -1,9 +1,9 @@
/* Error: Undefined variable.
- * ,
- * 9 | background-color: $dark_2;
- * | ^^^^^^^
- * '
- * src/pages/software-development/software-development.scss 9:31 root stylesheet */
+ * ,
+ * 11 | color: $light_2;
+ * | ^^^^^^^^
+ * '
+ * src/pages/software-development/software-development.scss 11:24 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 9 \2502 background-color: $dark_2;\a \2502 ^^^^^^^\a \2575 \a src/pages/software-development/software-development.scss 9:31 root stylesheet";
+ content: "Error: Undefined variable.\a \2577 \a 11 \2502 color: $light_2;\a \2502 ^^^^^^^^\a \2575 \a src/pages/software-development/software-development.scss 11:24 root stylesheet";
}
diff --git a/public/style/style.css b/public/style/style.css
index 83d08892f58a087de58e9a602fa6ea5f03cf9456..65184acd7d618b1efa32df0105c49686d6c68912 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -22,6 +22,10 @@ body a:hover {
body blue {
color: #4baabb;
}
+body emoji {
+ font-style: initial;
+ font-size: 25px;
+}
body .bg-blue {
background-color: #4baabb;
color: white;
@@ -368,8 +372,7 @@ main #page-container #home-page {
main #page-container #home-page .section-title {
padding: 10px;
margin: 0;
- background-color: #d4d9dd;
- color: #6b7880;
+ color: #aabbc8;
}
main #page-container #home-page .page-header .philo-bubbles {
display: flex;
@@ -419,18 +422,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 .news {
+main #page-container #home-page #news {
padding: 60px 20px;
}
-main #page-container #home-page .news .articles-displayer {
+main #page-container #home-page #news .articles-displayer {
margin: 0 auto 40px;
}
-main #page-container #home-page .news .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 .news .articles-displayer .prev-next-buttons .prev-btn,
-main #page-container #home-page .news .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;
@@ -438,21 +441,21 @@ main #page-container #home-page .news .articles-displayer .prev-next-buttons .ne
gap: 10px;
padding: 5px 0;
}
-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 {
+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 .news .articles-displayer .prev-next-buttons .prev-btn.active,
-main #page-container #home-page .news .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 .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 {
+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 .news .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;
@@ -464,7 +467,7 @@ main #page-container #home-page .news .articles-displayer .prev-next-buttons .ne
align-items: center;
flex-direction: row;
}
-main #page-container #home-page .news .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;
@@ -476,101 +479,97 @@ main #page-container #home-page .news .articles-displayer .prev-next-buttons .pr
align-items: center;
flex-direction: row;
}
-main #page-container #home-page .news .articles-displayer article {
+main #page-container #home-page #news .articles-displayer article {
display: grid;
- gap: 5px 20px;
+ gap: 5px 50px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto 1fr;
position: relative;
padding-left: 20px;
- background-color: #3c4144;
-}
-main #page-container #home-page .news .articles-displayer article *:not(a) {
- color: #d4d9dd;
}
-main #page-container #home-page .news .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 .news .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 .news .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 .news .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 .news .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 .news .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 .news .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 .news .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 .news .articles-displayer article.article-placeholder {
+main #page-container #home-page #news .articles-displayer article.article-placeholder {
padding: 0;
}
-main #page-container #home-page .news .articles-displayer article.article-placeholder * {
+main #page-container #home-page #news .articles-displayer article.article-placeholder * {
background-color: #d4d9dd;
}
-main #page-container #home-page .news .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 .news .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 .news .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 .news .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 .news .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 .news .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 .news .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 .news .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 .news .articles-displayer article .image-carousel {
+ main #page-container #home-page #news .articles-displayer article .image-carousel {
grid-row: 1;
grid-column: 1;
}
}
main #page-container #home-page .poles {
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
padding: 100px 0;
}
@@ -590,7 +589,6 @@ main #page-container #home-page .poles .theme-card .card-img {
align-items: center;
flex-direction: row;
flex-direction: column;
- background-color: black;
position: relative;
}
main #page-container #home-page .poles .theme-card .card-img img {
@@ -608,13 +606,12 @@ main #page-container #home-page .poles .theme-card .card-title h2 {
background-color: white;
}
main #page-container #home-page .poles .theme-card .card-description {
- background-image: url("/assets/images/wallpaper_binary.png");
flex: 1;
padding: 30px 20px;
}
main #page-container #home-page .poles .theme-card .card-description p {
margin: 0;
- color: #72e3f0;
+ color: #4baabb;
text-align: center;
}
main #page-container #home-page .poles .theme-card:hover {
@@ -655,11 +652,9 @@ 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;
+ padding: 20px 0 50px;
}
main #page-container #home-page .whoami .page-contents-center {
- background-color: white;
padding: 40px;
display: flex;
justify-content: center;
@@ -669,7 +664,7 @@ main #page-container #home-page .whoami .page-contents-center {
}
main #page-container #home-page .whoami .page-contents-center h2 {
text-align: center;
- background-color: #3c4144;
+ background-color: #6b7880;
display: flex;
justify-content: center;
align-items: center;
@@ -679,12 +674,13 @@ main #page-container #home-page .whoami .page-contents-center h2 {
height: 220px;
border-radius: 100%;
padding: 30px;
+ margin: 40px 0;
+ color: #72e3f0;
}
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 {
@@ -701,7 +697,7 @@ main #page-container #home-page .whoami .page-contents-center .presentation-card
}
main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text h3 {
font-size: 22px;
- color: #d4d9dd;
+ color: #96a5ae;
margin: 0;
}
main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text h4 {
@@ -739,15 +735,8 @@ main #page-container #home-page .whoami .page-contents-center .presentation-card
padding: 5px 20px;
}
main #page-container #home-page .poles .theme-card .card-description {
- background-image: url("/assets/images/wallpaper_binary.png");
- flex: 1;
padding: 20px 30px;
}
- main #page-container #home-page .poles .theme-card .card-description p {
- margin: 0;
- color: #72e3f0;
- text-align: center;
- }
main #page-container #home-page .poles .theme-card:hover {
transform: none;
}
@@ -845,6 +834,7 @@ main #page-container #education-page .section-contents .practical-infos .info-it
main #page-container #education-page .section-contents .practical-infos .info-item strong {
margin-bottom: 10px;
white-space: nowrap;
+ color: #6b7880;
}
main #page-container #education-page .section-contents .practical-infos .info-item span,
main #page-container #education-page .section-contents .practical-infos .info-item a {
@@ -934,6 +924,7 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
main #page-container #education-page .section-contents .infos-inscriptions .groups h3,
main #page-container #education-page .section-contents .infos-inscriptions .pricing h3 {
margin: 0;
+ color: #96a5ae;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
@@ -964,24 +955,27 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
}
main #page-container #education-page .section-contents .teacher {
grid-column: 1/span 2;
- background: url("/assets/images/wallpaper_binary.png");
+ background: url("/assets/images/wallpaper_binary_light.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 {
+ background-color: white;
display: grid;
grid-template-columns: auto 1fr;
width: 100%;
+ gap: 20px;
+ padding: 20px;
+}
+main #page-container #education-page .section-contents .teacher .teacher-card h3 {
+ margin: 0;
+ width: 100%;
+ color: #96a5ae;
+ grid-column: 1/span 2;
}
main #page-container #education-page .section-contents .teacher .teacher-card .pic img {
width: 100px;
@@ -990,7 +984,7 @@ main #page-container #education-page .section-contents .teacher .teacher-card .i
padding: 0 20px;
}
main #page-container #education-page .section-contents .teacher .teacher-card .infos-text h4 {
- color: #72e3f0;
+ color: #4baabb;
margin: 0;
font-size: 18px;
}
@@ -1099,31 +1093,31 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
main #page-container #games-page .game-articles article {
display: grid;
grid-template-columns: 0.7fr 1fr;
- gap: 0 20px;
+ gap: 30px 50px;
margin: 20px 0;
}
main #page-container #games-page .game-articles article.game-article {
grid-template-rows: repeat(7, auto);
- background-color: #3c4144;
-}
-main #page-container #games-page .game-articles article.game-article *:not(a) {
- color: #d4d9dd;
}
main #page-container #games-page .game-articles article.game-article .game-title {
grid-column: 1/span 2;
- background-color: #d4d9dd;
margin: 0;
padding: 30px 20px;
- color: #6b7880;
+ color: #aabbc8;
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;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-direction: column;
+ background-color: black;
}
main #page-container #games-page .game-articles article.game-article .game-banner img {
- width: 100%;
+ height: 500px;
}
main #page-container #games-page .game-articles article.game-article .game-tags {
display: flex;
@@ -1134,14 +1128,15 @@ main #page-container #games-page .game-articles article.game-article .game-tags
main #page-container #games-page .game-articles article.game-article .game-tags span {
font-size: 12px;
padding: 4px;
- background-color: #6b7880;
- color: #d4d9dd;
+ background-color: #d4d9dd;
+ color: #6b7880;
border-radius: 5px;
font-weight: 600;
}
main #page-container #games-page .game-articles article.game-article .game-subtitle {
grid-column: 1;
- margin: 10px 20px 30px;
+ margin: 10px 20px;
+ color: #6b7880;
}
main #page-container #games-page .game-articles article.game-article .game-description {
grid-column: 1;
@@ -1157,8 +1152,7 @@ main #page-container #games-page .game-articles article.game-article .game-team
grid-column: 1/span 2;
}
main #page-container #games-page .game-articles article.game-article .game-team h2 {
- background-color: #96a5ae;
- color: #3c4144;
+ color: #6b7880;
padding: 10px 20px;
font-style: italic;
font-size: 20px;
@@ -1184,6 +1178,7 @@ main #page-container #games-page .game-articles article.game-article .game-team
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-title {
margin: 0 0 5px;
+ color: #6b7880;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-subtitle {
margin: 0 10px;
@@ -1235,27 +1230,22 @@ main #page-container #games-page .game-articles article.placeholder * {
}
}
main #page-container #software-page .software-articles {
- margin: 0 auto 50px;
+ margin: 20px auto 50px;
}
main #page-container #software-page .software-articles article.software-article {
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: 1fr 0.7fr;
margin: 0 0 30px;
- gap: 0 30px;
- background-color: #3c4144;
-}
-main #page-container #software-page .software-articles article.software-article > * {
- color: #d4d9dd;
+ gap: 10px 30px;
}
main #page-container #software-page .software-articles article.software-article .software-title {
grid-column: 1/span 2;
- background-color: #d4d9dd;
- color: #6b7880;
+ color: #aabbc8;
margin: 0;
- padding: 20px;
+ padding: 10px;
}
main #page-container #software-page .software-articles article.software-article .software-date {
- margin: 10px 0 0;
+ margin: 0;
color: #96a5ae;
font-style: italic;
text-align: right;
@@ -1265,28 +1255,27 @@ main #page-container #software-page .software-articles article.software-article
}
main #page-container #software-page .software-articles article.software-article .software-subtitle {
grid-column: 1;
- margin: 10px 20px 20px;
+ margin: 10px;
+ color: #6b7880;
}
main #page-container #software-page .software-articles article.software-article .software-description {
grid-column: 1;
text-align: justify;
- margin: 20px;
+ margin: 10px;
}
main #page-container #software-page .software-articles article.software-article .image-carousel {
grid-column: 2;
- grid-row: 2/span 5;
- min-height: 400px;
+ grid-row: 2/span 6;
+ min-height: 250px;
}
main #page-container #software-page .software-articles article.software-article .software-technical {
- grid-column: 1/span 2;
+ grid-column: 1;
}
main #page-container #software-page .software-articles article.software-article .software-technical h2 {
- background-color: #96a5ae;
- color: #3c4144;
- margin: 0;
- padding: 10px 20px;
- font-size: 20px;
- font-style: italic;
+ color: #6b7880;
+ margin: 0 10px;
+ padding: 10px 0 0;
+ font-size: 16px;
}
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details {
margin: 10px;
@@ -1294,21 +1283,40 @@ main #page-container #software-page .software-articles article.software-article
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail {
display: grid;
grid-template-columns: 1fr auto;
+ font-size: 12px;
+ border-bottom: 1px solid #d4d9dd;
padding: 5px 0;
}
-main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail:not(:first-child) {
- border-top: 1px solid #6b7880;
-}
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail label {
font-weight: bold;
+ color: #6b7880;
}
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
-main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail *:not(a) {
- color: #d4d9dd;
+main #page-container #software-page .software-articles article.software-article .software-technical ul.releases {
+ margin: 10px;
+}
+main #page-container #software-page .software-articles article.software-article .software-technical .detail {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ font-size: 12px;
+ border-bottom: 1px solid #d4d9dd;
+ padding: 5px 0;
+}
+main #page-container #software-page .software-articles article.software-article .software-technical .detail label {
+ font-weight: bold;
+ color: #6b7880;
+}
+main #page-container #software-page .software-articles article.software-article .software-technical .detail .label {
+ color: #aabbc8;
+}
+main #page-container #software-page .software-articles article.software-article .software-technical .detail ul {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
}
@media screen and (max-width: 900px) {
main #page-container #software-page .software-articles article.software-article {
@@ -1320,6 +1328,7 @@ main #page-container #software-page .software-articles article.software-article
main #page-container #software-page .software-articles article.software-article .image-carousel {
grid-column: 1;
grid-row: 2;
+ height: 200px;
}
main #page-container #software-page .software-articles article.software-article .software-technical {
grid-column: 1;
diff --git a/src/home-page-components/kuadrado-values.js b/src/home-page-components/kuadrado-values.js
index 678e0ed07104c8471aa72197e83788652e9d6ccd..c568ecf803146110c509b1d81a4049b4bac37388 100644
--- a/src/home-page-components/kuadrado-values.js
+++ b/src/home-page-components/kuadrado-values.js
@@ -19,18 +19,18 @@ class KuadradoValues {
class: "values-list",
contents: [
[
- "📖 <blue>Partage des connaissances</blue>",
+ "<emoji>📖</emoji> <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>",
+ "<emoji>💻</emoji> <blue>Logiciels libres et open source</blue>",
`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/> ainsi que les outils engagés dans leur fabrication.`,
],
[
- "🌿 <blue>Écologie</blue>",
+ "<emoji>🌿</emoji> <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 de construire le numérique dans une direction de légèreté et d'économie de
diff --git a/src/home-page-components/news-articles.scss b/src/home-page-components/news-articles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1d839c9e76a60a57eb342d6af7888adf9793348a
--- /dev/null
+++ b/src/home-page-components/news-articles.scss
@@ -0,0 +1,149 @@
+#news {
+ padding: 60px 20px;
+ .articles-displayer {
+ margin: 0 auto 40px;
+ .prev-next-buttons {
+ display: flex;
+ 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;
+ }
+ }
+ }
+ .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 50px;
+ 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;
+ }
+ .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;
+ }
+ }
+ }
+ }
+}
diff --git a/src/home-page-components/whoami.js b/src/home-page-components/whoami.js
index d4d6b2ac83dc7e3a7616fd98906e8854a89229d9..3cd6e87925168d537388131a5436e1ebcb6d89e6 100644
--- a/src/home-page-components/whoami.js
+++ b/src/home-page-components/whoami.js
@@ -12,7 +12,7 @@ class WhoAmI {
contents: [
{
tag: "h2",
- contents: "<blue>Qui sommes-nous-je ?</blue>",
+ contents: "Qui sommes-nous-je ?",
},
{
tag: "div",
@@ -63,15 +63,15 @@ class WhoAmI {
{
tag: "p",
contents: `
- “ La création de <b><blue>Kuadrado Software</blue></b> vient de la volonté de développer deux axes ensembles :
+ “ La création de <b><blue>Kuadrado Software</blue></b> vient de la volonté de développer différents 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
+ <emoji>🎮</emoji> 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
+ <emoji>💡</emoji> 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.
diff --git a/src/homepage.js b/src/homepage.js
index 10ca357746f48d4af1e24b0f436574631dde162e..a0c825652a300865dae6e4c16721ebcd4099ccd9 100644
--- a/src/homepage.js
+++ b/src/homepage.js
@@ -63,18 +63,18 @@ class HomePage extends WebPage {
description:
"Créations vidéoludiques, jeux web et jeux PC, projets en cours.",
},
- // {
- // title: "Software",
- // img: "meca_proc.svg",
- // href: "/software-development/",
- // description: `Développement web, moteur de jeux, outillage logiciel, retrouvez nos projets en détail sur cette page.`,
- // },
{
title: "Pédagogie",
img: "brain.svg",
href: "/education/",
description: `S'approprier la technologie par le partage de connaissances.`,
},
+ {
+ title: "Software",
+ img: "meca_proc.svg",
+ href: "/software-development/",
+ description: `R&D, projets expérimentaux, web et outillage logiciel`,
+ },
].map(cardProps => new ThemeCard(cardProps).render()),
},
{
@@ -90,9 +90,10 @@ class HomePage extends WebPage {
},
{
tag: "section",
- class: "page-contents-center news",
+ class: "page-contents-center",
+ id:"news",
contents: [
- { tag: "h2", contents: "Actu", class: "section-title bg-blue" },
+ { tag: "h2", contents: "Actu", class: "section-title" },
new NewsArticles().render(),
],
},
diff --git a/src/homepage.scss b/src/homepage.scss
index 03a20d1166473d81670be08f515ddc176ed731d9..30484b92b94bb16fb20481f65ec687084d387eef 100644
--- a/src/homepage.scss
+++ b/src/homepage.scss
@@ -4,8 +4,7 @@
.section-title {
padding: 10px;
margin: 0;
- background-color: $light_0;
- color: $medium_grey;
+ color: $light_2;
}
.page-header {
.philo-bubbles {
@@ -47,159 +46,11 @@
}
}
}
- .news {
- padding: 60px 20px;
- .articles-displayer {
- margin: 0 auto 40px;
- .prev-next-buttons {
- display: flex;
- 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;
- }
- }
- }
- .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;
- }
- .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;
- }
- }
- }
- }
- }
+ @import "./home-page-components/news-articles.scss";
.poles {
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
padding: 100px 0;
.theme-card {
@@ -212,7 +63,6 @@
height: 240px;
overflow: hidden;
@include flex-center-col;
- background-color: black;
position: relative;
img {
position: absolute;
@@ -232,12 +82,11 @@
}
}
.card-description {
- background-image: url("/assets/images/wallpaper_binary.png");
flex: 1;
padding: 30px 20px;
p {
margin: 0;
- color: $blue_3;
+ color: $blue_2;
text-align: center;
}
}
@@ -281,27 +130,26 @@
}
.whoami {
- background-image: url("/assets/images/wallpaper_binary_white.png");
- padding: 100px 0 120px;
+ padding: 20px 0 50px;
.page-contents-center {
- background-color: white;
padding: 40px;
@include flex-center-col;
h2 {
text-align: center;
- background-color: $dark_2;
+ background-color: $medium_grey;
@include flex-center-col;
width: 220px;
height: 220px;
border-radius: 100%;
padding: 30px;
+ margin: 40px 0;
+ color: $blue_3;
}
.presentation-card {
.header {
display: grid;
grid-template-columns: auto 1fr;
gap: 30px;
- background-color: $dark_2;
padding: 50px 20px;
.pic {
@include flex-center-col;
@@ -314,7 +162,7 @@
.header-text {
h3 {
font-size: 22px;
- color: $light_0;
+ color: $light_1;
margin: 0;
}
h4 {
@@ -359,14 +207,7 @@
}
}
.card-description {
- background-image: url("/assets/images/wallpaper_binary.png");
- flex: 1;
padding: 20px 30px;
- p {
- margin: 0;
- color: $blue_3;
- text-align: center;
- }
}
transition: transform 0.3s;
&:hover {
@@ -380,8 +221,6 @@
grid-template-columns: 1fr;
}
}
-
-
}
@media screen and (max-width: $page_contents_center_width) {
.poles {
@@ -400,7 +239,6 @@
@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 d94fe3a2b04a2203fbfd721afda2655fc2cc68ff..91f4aa05d904bee7e968e71f0499f77f6396b6af 100644
--- a/src/pages/education/components/game-studio-club.js
+++ b/src/pages/education/components/game-studio-club.js
@@ -417,14 +417,15 @@ class GameStudioClub {
tag: "div",
class: "teacher",
contents: [
- {
- tag: "h3",
- contents: "Animé par",
- },
+
{
tag: "div",
class: "teacher-card",
contents: [
+ {
+ tag: "h3",
+ contents: "Animé par",
+ },
{
tag: "div",
class: "pic",
diff --git a/src/pages/education/education.scss b/src/pages/education/education.scss
index f1c7226be0a2389f09b9adbabee0a2c9057f1ee6..7fe2394b1936d6e49199c1550c1af34b1a6984fb 100644
--- a/src/pages/education/education.scss
+++ b/src/pages/education/education.scss
@@ -65,6 +65,7 @@
strong {
margin-bottom: 10px;
white-space: nowrap;
+ color: $medium_grey;
}
span,
a {
@@ -156,6 +157,7 @@
flex-direction: column;
h3 {
margin: 0;
+ color: $light_1;
}
.table-wrapper {
table {
@@ -187,19 +189,22 @@
.teacher {
grid-column: 1 / span 2;
- background: url("/assets/images/wallpaper_binary.png");
+ background: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
@include flex-center-col;
- gap: 20px;
- h3 {
- margin: 0;
- width: 100%;
- color: $light_0;
- }
.teacher-card {
+ background-color: white;
display: grid;
grid-template-columns: auto 1fr;
width: 100%;
+ gap: 20px;
+ padding: 20px;
+ h3 {
+ margin: 0;
+ width: 100%;
+ color: $light_1;
+ grid-column: 1 / span 2;
+ }
.pic {
img {
width: 100px;
@@ -208,7 +213,7 @@
.infos-text {
padding: 0 20px;
h4 {
- color: $blue_3;
+ color: $blue_2;
margin: 0;
font-size: 18px;
}
diff --git a/src/pages/games/games.scss b/src/pages/games/games.scss
index e0969e8a26c3163ef1dd15cff44477f4e1610946..c6bc7628f66bfb6d89fb72c9b83875d6e76ffbd1 100644
--- a/src/pages/games/games.scss
+++ b/src/pages/games/games.scss
@@ -3,29 +3,25 @@
article {
display: grid;
grid-template-columns: 0.7fr 1fr;
- gap: 0 20px;
+ gap: 30px 50px;
margin: 20px 0;
&.game-article {
grid-template-rows: repeat(7, auto);
- background-color: $dark_2;
- *:not(a) {
- color: $light_0;
- }
.game-title {
grid-column: 1 / span 2;
- background-color: $light_0;
margin: 0;
padding: 30px 20px;
- color: $medium_grey;
+ color: $light_2;
font-size: 35px;
font-style: italic;
}
.game-banner {
grid-column: 1 / span 2;
- display: flex;
+ @include flex-center-col;
+ background-color: black;
img {
- width: 100%;
+ height: 500px;
}
}
@@ -37,8 +33,8 @@
span {
font-size: 12px;
padding: 4px;
- background-color: $medium_grey;
- color: $light_0;
+ background-color: $light_0;
+ color: $medium_grey;
border-radius: 5px;
font-weight: 600;
}
@@ -46,7 +42,8 @@
.game-subtitle {
grid-column: 1;
- margin: 10px 20px 30px;
+ margin: 10px 20px;
+ color: $medium_grey;
}
.game-description {
grid-column: 1;
@@ -62,8 +59,7 @@
.game-team {
grid-column: 1 / span 2;
h2 {
- background-color: $light_1;
- color: $dark_2;
+ color: $medium_grey;
padding: 10px 20px;
font-style: italic;
font-size: 20px;
@@ -87,6 +83,7 @@
}
.team-member-title {
margin: 0 0 5px;
+ color: $medium_grey;
}
.team-member-subtitle {
margin: 0 10px;
diff --git a/src/pages/software-development/components/service-section.js b/src/pages/software-development/components/service-section.js
deleted file mode 100644
index db4e6472d76f0d1c3e4394daaaf735b5d332cebb..0000000000000000000000000000000000000000
--- a/src/pages/software-development/components/service-section.js
+++ /dev/null
@@ -1,136 +0,0 @@
-"use strict";
-
-const { images_url } = require("../../../../constants");
-
-const SKILL_THEMES = [
- "Applications web",
- "Service backend, serveur, API REST, bases de données",
- "Sites web statiques, serveurs de fichiers",
- "Développement frontend, interfaces",
- "Conception et design UX / UI",
- "Création graphique bitmap et vectoriel",
- "Prototypes embarqués, IoT, Arduino",
- "Développement logiciel",
- "Applications Android",
-];
-
-const SKILL_STACK = [
- ["Javascript", "js.png"],
- ["Node.js", "node.png"],
- ["React.js", "react.png"],
- ["Python", "python.png"],
- ["C/C++", "c.png"],
- ["Rust", "rust.png"],
- ["MySQL", "mysql.png"],
- ["PostgreSQL", "postgre.png"],
- ["MongoDB", "mongodb.png"],
- ["HTML", "html.png"],
- ["CSS", "css.png"],
- ["Sass", "sass.png"],
- ["Docker", "docker.png"],
- ["Linux", "linux.png"],
- ["Nginx", "nginx.png"],
- ["Apache", "apache.png"],
-];
-
-class ServiceSection {
- render() {
- return {
- tag: "section",
- class: "page-contents-center",
- id: "service-section",
- typeof: "Service",
- additionalType: "Organization",
- contents: [
- {
- tag: "h3",
- contents:
- "<blue>Nos compétences</blue> pour votre besoin <blue>numérique</blue>",
- property: "slogan",
- },
- {
- tag: "p",
- property: "description",
- contents: `
- La demande numérique est omniprésente et de nombreuses entreprises ont besoin de bénéficier d'outils spécifiques réalisés sur mesure,
- applications web et mobiles, site statiques, logiciels, ERP, etc, mais n'ont pas forcément les compétences chez elles,
- et n'ont pas non plus un besoin suffisamment grand pour embaucher une équipe de développement.
- <br /><br />
- <b><blue>Kuadrado</blue></b> propose de répondre à ce cas de figure pour les entreprises et organisations locales
- (Ardèche, Drôme, Rhône, Loire, Haute-Loire...) en étant leur <b>partenaire en développement <blue>web et logiciel</blue></b>.`,
- },
- {
- tag: "p",
- class: "teaser",
- contents: [
- {
- tag: "strong",
- property: "slogan",
- contents:
- "Des solutions <blue>sur mesure, légères, simples, maintenables, scalables et écologiques</blue>",
- },
- ],
- },
- {
- tag: "div",
- class: "skills",
- contents: [
- {
- tag: "ul",
- class: "skill-themes",
- contents: SKILL_THEMES.map(item => {
- return { tag: "li", contents: item, property: "about" };
- }),
- },
- {
- tag: "ul",
- class: "skill-stack",
- contents: SKILL_STACK.map(item => {
- const [title, img] = item;
- return {
- tag: "li",
- property: "about",
- contents: [
- {
- tag: "strong",
- contents: title,
- },
- {
- tag: "img",
- src: `${images_url}tech_logos/${img}`,
- },
- ],
- };
- }),
- },
- {
- tag: "div",
- class: "call-us",
- contents: [
- {
- tag: "h3",
- contents: `Un <blue>projet à réaliser</blue> ?
- <br/>Besoin d'informations, de conseils ou d'un <blue>devis</blue> ?`,
- },
- {
- tag: "a",
- href: "mailto:contact@kuadrado-software.fr",
- contents: "contact@kuadrado-software.fr",
- property: "email",
- },
- {
- tag: "a",
- href: "tel:+33475780872",
- contents: "04 75 78 08 72",
- property: "telephone",
- },
- ],
- },
- ],
- },
- ],
- };
- }
-}
-
-module.exports = ServiceSection;
diff --git a/src/pages/software-development/components/software-articles.js b/src/pages/software-development/components/software-articles.js
index 7e589bd13db372fe580d0d786c4676a47ddfc23d..730011a8dd8054df996ef5755a68b0937ed438c5 100644
--- a/src/pages/software-development/components/software-articles.js
+++ b/src/pages/software-development/components/software-articles.js
@@ -11,7 +11,7 @@ class SoftwareArticle {
}
render() {
- const { title, date, body, subtitle, images, path, technical } = this.props;
+ const { title, date, body, subtitle, images, path, technical, releases } = this.props;
return {
tag: "article",
class: "software-article",
@@ -107,20 +107,68 @@ class SoftwareArticle {
contents: [
{
tag: "label",
- contents: [
- {
- tag: "a",
- href: technical.repository,
- target: "_blank",
- contents: "Dépôt code source",
- property: "url",
- },
- ],
+ contents: "Code source",
+ },
+ {
+ tag: "a",
+ href: technical.repository,
+ target: "_blank",
+ contents: technical.repository.replace(
+ /https?:\/\/(www\.)?/g,
+ ""
+ ),
+ property: "url",
},
],
},
],
},
+ releases && {
+ tag: "h2",
+ contents: "Releases",
+ },
+ releases && {
+ tag: "ul",
+ class: "releases",
+ contents: [
+ {
+ tag: "li",
+ class: "detail",
+ contents: [
+ {
+ tag: "label",
+ class: "label",
+ contents: "Plateforme",
+ },
+ {
+ tag: "label",
+ class: "label",
+ contents: "Téléchargement",
+ },
+ ],
+ },
+ ].concat(
+ releases.map(rel => {
+ return {
+ tag: "li",
+ class: "release detail",
+ contents: [
+ {
+ tag: "label",
+ contents: rel.platform,
+ },
+ {
+ tag: "a",
+ download: rel.download,
+ href: `${path}/release/${rel.download}`,
+ contents: rel.download,
+ property: "url",
+ },
+ ],
+ };
+ })
+ ),
+ },
],
},
],
diff --git a/src/pages/software-development/software-development.js b/src/pages/software-development/software-development.js
index a5325a9ea8ce4b93255459f7d4484062f2cd7366..39a19b286f5e349ec4ee59eaac896767bbd2e290 100644
--- a/src/pages/software-development/software-development.js
+++ b/src/pages/software-development/software-development.js
@@ -2,7 +2,6 @@
const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
-const ServiceSection = require("./components/service-section");
const SoftwareArticles = require("./components/software-articles");
class SoftwareDevelopment extends WebPage {
@@ -33,26 +32,13 @@ class SoftwareDevelopment extends WebPage {
{ tag: "h1", contents: "Software" },
{
tag: "p",
- contents: `Développement web, moteurs de jeux et outillage logiciel.`,
+ contents: `R&D, projets expérimentaux, outillage logiciel pour le développement de jeu ou pour le web.`,
},
],
},
],
},
- {
- tag: "h2",
- id: "projects", //anchor
- contents: "Projets",
- class: "page-section-title",
- },
new SoftwareArticles().render(),
- {
- tag: "h2",
- id: "service", //anchor
- contents: "Prestation de services",
- class: "page-section-title",
- },
- new ServiceSection().render(),
],
};
}
diff --git a/src/pages/software-development/software-development.scss b/src/pages/software-development/software-development.scss
index 3f438f2368a4b5dfdd27d8a06e3a99482c92832e..2e64beae2cfef231d72a837885ad060188fe0662 100644
--- a/src/pages/software-development/software-development.scss
+++ b/src/pages/software-development/software-development.scss
@@ -1,24 +1,19 @@
#software-page {
.software-articles {
- margin: 0 auto 50px;
+ margin: 20px auto 50px;
article.software-article {
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: 1fr 0.7fr;
margin: 0 0 30px;
- gap: 0 30px;
- background-color: $dark_2;
- & > * {
- color: $light_0;
- }
+ gap: 10px 30px;
.software-title {
grid-column: 1 / span 2;
- background-color: $light_0;
- color: $medium_grey;
+ color: $light_2;
margin: 0;
- padding: 20px;
+ padding: 10px;
}
.software-date {
- margin: 10px 0 0;
+ margin: 0;
color: $light_1;
font-style: italic;
text-align: right;
@@ -29,49 +24,69 @@
.software-subtitle {
grid-column: 1;
- margin: 10px 20px 20px;
+ margin: 10px;
+ color: $medium_grey;
}
.software-description {
grid-column: 1;
text-align: justify;
- margin: 20px;
+ margin: 10px;
}
.image-carousel {
grid-column: 2;
- grid-row: 2 / span 5;
- min-height: 400px;
+ grid-row: 2 / span 6;
+ min-height: 250px;
}
.software-technical {
- grid-column: 1 / span 2;
+ grid-column: 1;
h2 {
- background-color: $light_1;
- color: $dark_2;
- margin: 0;
- padding: 10px 20px;
- font-size: 20px;
- font-style: italic;
+ color: $medium_grey;
+ margin: 0 10px;
+ padding: 10px 0 0;
+ font-size: 16px;
}
ul.technical-details {
margin: 10px;
.detail {
display: grid;
grid-template-columns: 1fr auto;
- &:not(:first-child) {
- border-top: 1px solid $medium_grey;
- }
+ font-size: 12px;
+ border-bottom: 1px solid $light_0;
+
padding: 5px 0;
label {
font-weight: bold;
+ color: $medium_grey;
}
ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
- *:not(a) {
- color: $light_0;
- }
+ }
+ }
+ ul.releases {
+ margin: 10px;
+ }
+ .detail {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ font-size: 12px;
+ border-bottom: 1px solid $light_0;
+
+ padding: 5px 0;
+ label {
+ font-weight: bold;
+ color: $medium_grey;
+ }
+ .label {
+ color: $light_2;
+ }
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
}
}
}
@@ -83,6 +98,7 @@
.image-carousel {
grid-column: 1;
grid-row: 2;
+ height: 200px;
}
.software-technical {
grid-column: 1;
diff --git a/src/style.scss b/src/style.scss
index 437cd630d2e091f144d2a21480ef5fcdea5d1ea9..1f7417037c1c9122e2feaeb062eef1b3e12c98d4 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -24,6 +24,10 @@ body {
blue {
color: $blue_2;
}
+ emoji {
+ font-style: initial;
+ font-size: 25px;
+ }
.bg-blue {
background-color: $blue_2;
diff --git a/src/template/components/navbar.js b/src/template/components/navbar.js
index 13f9e1c9c64c2f38270d497a5ab73422038d4b78..d469da09d0c1e19a12fa0104eed2c76e63cb9262 100644
--- a/src/template/components/navbar.js
+++ b/src/template/components/navbar.js
@@ -4,15 +4,6 @@ const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
- // À murir..
- // [
- // "/software-development/",
- // "Software",
- // [
- // ["/software-development/#projects", "Projets"],
- // ["/software-development/#service", "Prestation de services"],
- // ],
- // ],
[
"/education/",
"Pédagogie",
@@ -22,6 +13,7 @@ const NAV_MENU_ITEMS = [
["/education/#popularization", "Vulgarisation numérique"],
],
],
+ ["/software-development/", "Software"],
];
class NavBar {