wip:header illustration

config.js

-module.exports = { server_url: location.origin, in_construction: true };
+module.exports = {
+    server_url: `${location.origin}${
+        location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : ""
+    }`,
+    in_construction: true,
+};

nginx.conf

@@ -27,5 +27,14 @@ http {
     #gzip  on;
 	
     include /etc/nginx/conf.d/*.conf;
+
+    server {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        server_name kuadrado-software.fr www.kuadrado-software.fr;
+        location / {
+            add_header "Access-Control-Allow-Origin" "*";
+        }
+    }
 }
 

public/education/education.js

 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
-module.exports = { server_url: location.origin, in_construction: true };
+module.exports = {
+    server_url: `${location.origin}${
+        location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : ""
+    }`,
+    in_construction: true,
+};
 
 },{}],2:[function(require,module,exports){
 const { server_url } = require("./config");

public/games/games.js

 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
-module.exports = { server_url: location.origin, in_construction: true };
+module.exports = {
+    server_url: `${location.origin}${
+        location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : ""
+    }`,
+    in_construction: true,
+};
 
 },{}],2:[function(require,module,exports){
 const { server_url } = require("./config");
@@ -432,6 +437,7 @@ module.exports = GameArticles;
 },{"../../../../constants":2,"../../../lib/article-utils":4,"../../../lib/object-html-renderer":6,"./game-article":7}],9:[function(require,module,exports){
 "use strict";
 
+const { images_url } = require("../../../constants");
 const GameArticles = require("./components/game-articles");
 
 class GamesPage {
@@ -442,18 +448,30 @@ class GamesPage {
     render() {
         return {
             tag: "div",
-            id:"games-page",
+            id: "games-page",
             contents: [
                 {
                     tag: "div",
-                    class: "page-header",
+                    class: "page-header logo-left",
                     contents: [
-                        { tag: "h1", contents: "Jeux", class: "page-contents-center" },
                         {
-                            tag: "p",
-                            class: "page-contents-center",
-                            contents: `Créer des jeux vidéos c'est cœur de ce qui nous passionne.
-                            <br/>Retrouvez ici nos créations, à jouer en ligne ou à télécharger, et découvrez nos projets en cours.`,
+                            tag: "div",
+                            class: "page-contents-center grid-wrapper",
+                            contents: [
+                                {
+                                    tag: "div",
+                                    class: "logo",
+                                    contents: [
+                                        { tag: "img", src: `${images_url}/game_controller.svg` },
+                                    ],
+                                },
+                                { tag: "h1", contents: "Jeux" },
+                                {
+                                    tag: "p",
+                                    contents: `Créer des jeux vidéos c'est cœur de ce qui nous passionne.
+                                    <br/>Retrouvez ici nos créations, à jouer en ligne ou à télécharger, et découvrez nos projets en cours.`,
+                                },
+                            ],
                         },
                     ],
                 },
@@ -465,7 +483,7 @@ class GamesPage {
 
 module.exports = GamesPage;
 
-},{"./components/game-articles":8}],10:[function(require,module,exports){
+},{"../../../constants":2,"./components/game-articles":8}],10:[function(require,module,exports){
 "use strict";
 
 "use strict";

public/main.js

 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
-module.exports = { server_url: location.origin, in_construction: true };
+module.exports = {
+    server_url: `${location.origin}${
+        location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : ""
+    }`,
+    in_construction: true,
+};
 
 },{}],2:[function(require,module,exports){
 const { server_url } = require("./config");
@@ -311,20 +316,32 @@ class HomePage {
                         new NewsArticles().render(),
                     ],
                 },
+                {
+                    tag: "div",
+                    class: "page-philo",
+                    contents: [
+                        {
+                            tag: "p",
+                            class: "page-contents-center",
+                            contents: `Nous sommes engagés dans un idéal de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
+                            <br /><br />Nous voulons travailler pour le plaisir de créer et de maîtriser ce qu'on fait.`,
+                        },
+                    ],
+                },
                 {
                     tag: "section",
                     class: "page-contents-center grid-3",
                     contents: [
                         {
                             title: "Jeux",
-                            img: "screen_fantom_quest.jpg",
+                            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.",
                         },
                         {
                             title: "Software",
-                            img: "learning_theme_coding.png",
+                            img: "meca_proc.svg",
                             href: "/software-development/",
                             description:
                                 "Des fois quand on a besoin d'un outil, on le fabrique nous même (si ça nous amuse) ! Retrouvez les projets en détail.",

public/news-articles/index.json

 {
-    "articles": ["test/article-test.json", "nested/article-nested.json"]
+    "articles": ["test/article-test.json"]
 }

public/news-articles/nested/article-nested.json

-{
-    "title": "Kuadrado Software mange des burgers",
-    "date": "1954/02/25",
-    "subtitle": "Ouaiis on est vraiment contents",
-    "body": "<file>my-content-text.txt",
-    "images": ["screen_1.png", "screen_2.png", "screen_3.png", "screen_4.png"]
-}

public/news-articles/nested/my-content-text.txt

-Hahahaha eh ouais c'est encore nous.
-Ben ce coup ci on voulait vous dire que ce soir on va commander des burger, et qu'on va se mater une petite prod hollywoodienne qui devrait nous faire oublier toute cette merde de Covid etc. Enfin bref.
-Bon ben du coup je sais pas, allez bon ap quoi. Ouais salut
-Ok
-
-Ben quoi, ouais jsais pas. Ben non on n'a pas de masque on tient pas à crever asphyxiés.
-Nique le capitalisme. Qu'il crève dans son jus moisi et qu'il revienne pas nous emmerder.
-
-Donc ouais on va en rajouter encore un peu. Donc voilà ben ça fait plus de mots du coup.
-
-Haha et ben tu sais pas ?
-Non ?
-Eh ben rien. 
-Mais ça fait des lignes, comme ça je vois ce qui se passe pour un long article.
\ No newline at end of file

public/news-articles/test/article-test.json

 {
     "title": "Kuadrado Software ouvre ses portes",
     "date": "2032/08/25",
-    "subtitle": "Ouaiis on est vraiment contents",
+    "subtitle": "Article test",
     "body": "<file>content-text.txt",
     "images": [
         "screen_l1_1.jpg",

public/news-articles/test/content-text.txt

-Et ben voilà on est bien contents d'ouvrir nos portes. Nique sa mère le Covid, on lui pisse à la raie.
-Eh ouais, ben ouais.
-Alors voilà on est sympa, puis en plus on est des lapins. Faut bien le dire...
-
-Qu'est-ce qu'on pourrait dire d'autre ? Ben chais pas, on fait des jeux, puis des fois on se gueule dessus, même que les voisins doivent nous prendre pour des cassos des fois... M'enfin.
-
-Ben voilà allez salut !
-hop un petit lien http://example.com||ici
+Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.
\ No newline at end of file

public/software-development/software-development.js

 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
-module.exports = { server_url: location.origin, in_construction: true };
+module.exports = {
+    server_url: `${location.origin}${
+        location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : ""
+    }`,
+    in_construction: true,
+};
 
 },{}],2:[function(require,module,exports){
 const { server_url } = require("./config");
@@ -100,6 +105,8 @@ module.exports = {
 },{}],4:[function(require,module,exports){
 "use strict";
 
+const { images_url } = require("../../../constants");
+
 class SoftwareDevelopment {
     constructor(args) {
         Object.assign(this, args);
@@ -108,11 +115,31 @@ class SoftwareDevelopment {
     render() {
         return {
             tag: "div",
+            id: "software-page",
             contents: [
                 {
                     tag: "div",
-                    class: "page-header",
-                    contents: [{ tag: "h1", contents: "Software", class: "page-contents-center" }],
+                    class: "page-header logo-left",
+                    contents: [
+                        {
+                            tag: "div",
+                            class: "page-contents-center grid-wrapper",
+                            contents: [
+                                {
+                                    tag: "div",
+                                    class: "logo",
+                                    contents: [{ tag: "img", src: `${images_url}/meca_proc.svg` }],
+                                },
+                                { tag: "h1", contents: "Software" },
+                                {
+                                    tag: "p",
+                                    contents: `Développement web et outillage autour du gamedev. 
+                                    <br />Quand nous avons besoin d'un service logiciel simple et qu'il est pertinent de le 
+                                    développer nous même nous essayons au maximum de le réaliser de façon générique et de le publier sous license libre et open source`,
+                                },
+                            ],
+                        },
+                    ],
                 },
             ],
         };
@@ -121,7 +148,7 @@ class SoftwareDevelopment {
 
 module.exports = SoftwareDevelopment;
 
-},{}],5:[function(require,module,exports){
+},{"../../../constants":2}],5:[function(require,module,exports){
 "use strict";
 
 "use strict";

public/style/homepage.css

-/* Error: Undefined mixin.
+/* Error: Undefined variable.
  *   ,
- * 8 |             @include flex-center;
- *   |             ^^^^^^^^^^^^^^^^^^^^
+ * 9 |         background-color: $light_0;
+ *   |                           ^^^^^^^^
  *   '
- *   src/homepage.scss 8:13  root stylesheet */
+ *   src/homepage.scss 9: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 mixin.\a   \2577 \a 8 \2502              @include flex-center;\a   \2502              ^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   src/homepage.scss 8:13  root stylesheet";
+  content: "Error: Undefined variable.\a   \2577 \a 9 \2502          background-color: $light_0;\a   \2502                            ^^^^^^^^\a   \2575 \a   src/homepage.scss 9:27  root stylesheet";
 }

public/style/style.css

@@ -246,10 +246,37 @@ main #page-container .page-header p {
   font-style: italic;
   padding: 15px 40px 15px 100px;
   margin: 0 auto;
+  font-size: 18px;
 }
 main #page-container .page-header p * {
   color: #72e3f0;
 }
+main #page-container .page-header .big-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  gap: 20px;
+  padding: 20px;
+}
+main #page-container .page-header .big-logo img {
+  width: 200px;
+  max-width: 100%;
+}
+main #page-container .page-header .big-logo img.logo-text {
+  width: 300px;
+  max-width: 100%;
+}
+main #page-container .page-header .logo {
+  padding-left: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+main #page-container .page-header .logo img {
+  width: 200px;
+}
 @media screen and (max-width: 560px) {
   main #page-container .page-header h1 {
     padding: 15px 20px 0;
@@ -258,6 +285,50 @@ main #page-container .page-header p * {
     padding: 20px 20px 30px 40px;
     text-align: justify;
   }
+  main #page-container .page-header .big-logo {
+    flex-direction: column;
+  }
+}
+main #page-container .page-header.logo-left h1 {
+  width: 100%;
+}
+main #page-container .page-header.logo-left .grid-wrapper {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+}
+main #page-container .page-header.logo-left .grid-wrapper .logo {
+  grid-column: 1;
+  grid-row: 1/span 2;
+}
+@media screen and (max-width: 780px) {
+  main #page-container .page-header.logo-left .grid-wrapper {
+    grid-template-columns: 1fr;
+  }
+  main #page-container .page-header.logo-left .grid-wrapper .logo {
+    padding: 0 20px;
+  }
+  main #page-container .page-header.logo-left .grid-wrapper .logo img {
+    width: 400px;
+    max-width: 100%;
+  }
+}
+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%;
+  max-width: 600px;
+  font-size: 18px;
+  color: #6b7880;
+  text-align: center;
+  font-style: italic;
+  font-weight: bold;
+}
+main #page-container .page-philo p * {
+  color: #6b7880;
 }
 main #page-container .page-contents-center {
   width: 1300px;
@@ -270,27 +341,6 @@ main #page-container #home-page {
   gap: 20px;
   margin-bottom: 60px;
 }
-main #page-container #home-page .page-header .big-logo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-  gap: 20px;
-  padding: 20px;
-}
-main #page-container #home-page .page-header .big-logo img {
-  width: 200px;
-  max-width: 100%;
-}
-main #page-container #home-page .page-header .big-logo img.logo-text {
-  width: 300px;
-  max-width: 100%;
-}
-@media screen and (max-width: 560px) {
-  main #page-container #home-page .page-header .big-logo {
-    flex-direction: column;
-  }
-}
 main #page-container #home-page .section-title {
   padding: 10px;
   margin: 0;
@@ -460,8 +510,9 @@ main #page-container #home-page .grid-3 .theme-card .card-img {
 }
 main #page-container #home-page .grid-3 .theme-card .card-img img {
   position: absolute;
-  min-width: 100%;
+  width: 100%;
   min-height: 100%;
+  padding: 10px;
 }
 main #page-container #home-page .grid-3 .theme-card .card-title h2 {
   margin: 0;
@@ -828,7 +879,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;
-  height: 400px;
+  height: 100%;
 }
 main #page-container #games-page .game-articles article.game-article .game-team {
   grid-column: 1/span 2;
@@ -895,6 +946,7 @@ main #page-container #games-page .game-articles article.placeholder * {
   main #page-container #games-page .game-articles article.game-article .image-carousel {
     grid-column: 1;
     grid-row: 2;
+    height: 400px;
   }
   main #page-container #games-page .game-articles article.game-article .game-team {
     grid-column: 1;

src/homepage.js

@@ -49,20 +49,32 @@ class HomePage {
                         new NewsArticles().render(),
                     ],
                 },
+                {
+                    tag: "div",
+                    class: "page-philo",
+                    contents: [
+                        {
+                            tag: "p",
+                            class: "page-contents-center",
+                            contents: `Nous sommes engagés dans un idéal de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
+                            <br /><br />Nous voulons travailler pour le plaisir de créer et de maîtriser ce qu'on fait.`,
+                        },
+                    ],
+                },
                 {
                     tag: "section",
                     class: "page-contents-center grid-3",
                     contents: [
                         {
                             title: "Jeux",
-                            img: "screen_fantom_quest.jpg",
+                            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.",
                         },
                         {
                             title: "Software",
-                            img: "learning_theme_coding.png",
+                            img: "meca_proc.svg",
                             href: "/software-development/",
                             description:
                                 "Des fois quand on a besoin d'un outil, on le fabrique nous même (si ça nous amuse) ! Retrouvez les projets en détail.",