diff --git a/public/games/games.js b/public/games/games.js
index 129e319ac9b8b6570dd680612ac5ea71c9439f69..9f8e5ed0ab4ea7708baf206f5106460e1c5c4b54 100644
--- a/public/games/games.js
+++ b/public/games/games.js
@@ -100,15 +100,6 @@ function getArticleDate(date) {
return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
}
-function getArticleStatus(status) {
- switch (status) {
- case "wip":
- return "En développement";
- case "released":
- return "En production";
- }
-}
-
function loadArticles(dir_url) {
return new Promise((resolve, reject) => {
fetchjson(`${dir_url}/index.json`)
@@ -157,7 +148,6 @@ module.exports = {
getArticleBody,
getArticleDate,
populateArticles,
- getArticleStatus,
};
},{"./fetch":5}],5:[function(require,module,exports){
@@ -286,7 +276,7 @@ module.exports = WebPage;
"use strict";
const ImageCarousel = require("../../../generic-components/image-carousel");
-const { getArticleBody, getArticleStatus } = require("../../../lib/article-utils");
+const { getArticleBody } = require("../../../lib/article-utils");
class TeamMember {
constructor(props) {
@@ -336,7 +326,7 @@ class GameArticle {
}
render() {
- const { title, tags, body, subtitle, images, path, team_subarticles, status } = this.props;
+ const { title, tags, body, subtitle, images, path, team_subarticles } = this.props;
return {
tag: "article",
class: "game-article",
@@ -348,29 +338,11 @@ class GameArticle {
},
{
tag: "div",
- class: "game-infos",
- contents: [
- {
- tag: "div",
- class: "game-tags",
- contents: tags.map(tag => {
- return { tag: "span", contents: tag };
- }),
- },
- {
- tag: "div",
- class: "game-status",
- contents: [
- {
- tag: "span",
- class: `project-status ${status}`,
- contents: getArticleStatus(status),
- },
- ],
- },
- ],
+ class: "game-tags",
+ contents: tags.map(tag => {
+ return { tag: "span", contents: tag };
+ }),
},
-
{
tag: "h3",
class: "game-subtitle",
diff --git a/public/main.js b/public/main.js
index 0f9c7eab93ed72147b41bd95739232147f2c43d8..19a12c0465b9f76a35c5e816fb5e616f01c62a5f 100644
--- a/public/main.js
+++ b/public/main.js
@@ -381,15 +381,6 @@ function getArticleDate(date) {
return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
}
-function getArticleStatus(status) {
- switch (status) {
- case "wip":
- return "En développement";
- case "released":
- return "En production";
- }
-}
-
function loadArticles(dir_url) {
return new Promise((resolve, reject) => {
fetchjson(`${dir_url}/index.json`)
@@ -438,7 +429,6 @@ module.exports = {
getArticleBody,
getArticleDate,
populateArticles,
- getArticleStatus,
};
},{"./fetch":8}],8:[function(require,module,exports){
diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js
index 4fc93d9472ebd5a1878901bd8fb0faf3c5fa00ef..f8c40d40ee85914a0c02d7332e283f81ec2456b4 100644
--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -100,15 +100,6 @@ function getArticleDate(date) {
return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
}
-function getArticleStatus(status) {
- switch (status) {
- case "wip":
- return "En développement";
- case "released":
- return "En production";
- }
-}
-
function loadArticles(dir_url) {
return new Promise((resolve, reject) => {
fetchjson(`${dir_url}/index.json`)
@@ -157,7 +148,6 @@ module.exports = {
getArticleBody,
getArticleDate,
populateArticles,
- getArticleStatus,
};
},{"./fetch":5}],5:[function(require,module,exports){
@@ -287,7 +277,11 @@ module.exports = WebPage;
const { articles_url } = require("../../../../constants");
const ImageCarousel = require("../../../generic-components/image-carousel");
-const { loadArticles, getArticleBody, getArticleDate, getArticleStatus } = require("../../../lib/article-utils");
+const {
+ loadArticles,
+ getArticleBody,
+ getArticleDate,
+} = require("../../../lib/article-utils");
const objectHtmlRenderer = require("../../../lib/object-html-renderer");
class SoftwareArticle {
@@ -296,7 +290,7 @@ class SoftwareArticle {
}
render() {
- const { title, date, status, body, subtitle, images, path, technical } = this.props;
+ const { title, date, body, subtitle, images, path, technical } = this.props;
return {
tag: "article",
class: "software-article",
@@ -312,20 +306,9 @@ class SoftwareArticle {
contents: subtitle,
},
{
- tag: "div",
- class: "software-infos",
- contents: [
- {
- tag: "span",
- class: "software-date",
- contents: getArticleDate(date),
- },
- {
- tag: "span",
- class: `project-status ${status}`,
- contents: getArticleStatus(status),
- },
- ],
+ tag: "span",
+ class: "software-date",
+ contents: getArticleDate(date),
},
{
tag: "div",
@@ -386,13 +369,16 @@ class SoftwareArticle {
tag: "li",
class: "detail",
contents: [
- { tag: "label", contents: [
- {
- tag: "a",
- href: technical.repository,
- contents: "Dépôt code source"
- }
- ] },
+ {
+ tag: "label",
+ contents: [
+ {
+ tag: "a",
+ href: technical.repository,
+ contents: "Dépôt code source",
+ },
+ ],
+ },
],
},
],
diff --git a/public/style/style.css b/public/style/style.css
index 909180c424685507d5960d6a36aa74588541ee98..86d8ebadc17bf3cc463660a87b2b2f3e3a7baa7c 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -336,19 +336,6 @@ main #page-container .page-contents-center {
max-width: 100%;
margin: 0 auto;
}
-main #page-container .project-status {
- margin: 0 20px;
- color: #3c4144;
- padding: 10px 20px;
- font-weight: bold;
- border-radius: 20px;
-}
-main #page-container .project-status.wip {
- background-color: #e5a002;
-}
-main #page-container .project-status.prod {
- background-color: #368736;
-}
main #page-container #home-page {
display: flex;
flex-direction: column;
@@ -861,7 +848,7 @@ main #page-container #games-page .game-articles article.game-article {
grid-template-rows: repeat(6, auto);
background-color: #3c4144;
}
-main #page-container #games-page .game-articles article.game-article *:not(a, .project-status) {
+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 {
@@ -873,19 +860,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-infos {
- font-size: 13px;
- grid-column: 1;
- display: grid;
- grid-template-columns: auto auto;
-}
-main #page-container #games-page .game-articles article.game-article .game-infos .game-tags {
+main #page-container #games-page .game-articles article.game-article .game-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 10px 20px;
}
-main #page-container #games-page .game-articles article.game-article .game-infos .game-tags span {
+main #page-container #games-page .game-articles article.game-article .game-tags span {
font-size: 12px;
padding: 4px;
background-color: #6b7880;
@@ -893,12 +874,6 @@ main #page-container #games-page .game-articles article.game-article .game-infos
border-radius: 5px;
font-weight: 600;
}
-main #page-container #games-page .game-articles article.game-article .game-infos .game-status {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: row;
-}
main #page-container #games-page .game-articles article.game-article .game-subtitle {
grid-column: 1;
margin: 10px 20px 30px;
@@ -973,9 +948,6 @@ main #page-container #games-page .game-articles article.placeholder * {
padding: 20px;
font-size: 25px;
}
- main #page-container #games-page .game-articles article.game-article .game-infos {
- grid-template-columns: 1fr;
- }
main #page-container #games-page .game-articles article.game-article .image-carousel {
grid-column: 1;
grid-row: 2;
@@ -1011,14 +983,7 @@ main #page-container #software-page .software-articles article.software-article
margin: 0;
padding: 20px;
}
-main #page-container #software-page .software-articles article.software-article .software-infos {
- grid-column: 1;
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 13px;
-}
-main #page-container #software-page .software-articles article.software-article .software-infos .software-date {
+main #page-container #software-page .software-articles article.software-article .software-date {
margin: 0 20px;
color: #96a5ae;
font-style: italic;
diff --git a/src/lib/article-utils.js b/src/lib/article-utils.js
index 10e9694c70f4ad5cd67f7be8ae5d0e8ca78a9c6c..ed31a353eaceccfe19055be5f4d3d2d82c3f49f0 100644
--- a/src/lib/article-utils.js
+++ b/src/lib/article-utils.js
@@ -10,15 +10,6 @@ function getArticleDate(date) {
return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
}
-function getArticleStatus(status) {
- switch (status) {
- case "wip":
- return "En développement";
- case "released":
- return "En production";
- }
-}
-
function loadArticles(dir_url) {
return new Promise((resolve, reject) => {
fetchjson(`${dir_url}/index.json`)
@@ -67,5 +58,4 @@ module.exports = {
getArticleBody,
getArticleDate,
populateArticles,
- getArticleStatus,
};
diff --git a/src/pages/games/components/game-article.js b/src/pages/games/components/game-article.js
index afca661f9a875a78bbd1985546fc0749fe985a1b..edd332ab7c4c897aa1978b326fbc56722dd06920 100644
--- a/src/pages/games/components/game-article.js
+++ b/src/pages/games/components/game-article.js
@@ -1,7 +1,7 @@
"use strict";
const ImageCarousel = require("../../../generic-components/image-carousel");
-const { getArticleBody, getArticleStatus } = require("../../../lib/article-utils");
+const { getArticleBody } = require("../../../lib/article-utils");
class TeamMember {
constructor(props) {
@@ -51,7 +51,7 @@ class GameArticle {
}
render() {
- const { title, tags, body, subtitle, images, path, team_subarticles, status } = this.props;
+ const { title, tags, body, subtitle, images, path, team_subarticles } = this.props;
return {
tag: "article",
class: "game-article",
@@ -63,29 +63,11 @@ class GameArticle {
},
{
tag: "div",
- class: "game-infos",
- contents: [
- {
- tag: "div",
- class: "game-tags",
- contents: tags.map(tag => {
- return { tag: "span", contents: tag };
- }),
- },
- {
- tag: "div",
- class: "game-status",
- contents: [
- {
- tag: "span",
- class: `project-status ${status}`,
- contents: getArticleStatus(status),
- },
- ],
- },
- ],
+ class: "game-tags",
+ contents: tags.map(tag => {
+ return { tag: "span", contents: tag };
+ }),
},
-
{
tag: "h3",
class: "game-subtitle",
diff --git a/src/pages/games/games.scss b/src/pages/games/games.scss
index 49217510ca9170d14e27177c69e7d300a5105257..fc261174edf9c2677d3dbd08a04bfaadd6fec88e 100644
--- a/src/pages/games/games.scss
+++ b/src/pages/games/games.scss
@@ -8,7 +8,7 @@
&.game-article {
grid-template-rows: repeat(6, auto);
background-color: $dark_2;
- *:not(a, .project-status) {
+ *:not(a) {
color: $light_0;
}
.game-title {
@@ -20,27 +20,19 @@
font-size: 35px;
font-style: italic;
}
- .game-infos {
- font-size: 13px;
- grid-column: 1;
- display: grid;
- grid-template-columns: auto auto;
- .game-tags {
- display: flex;
- gap: 10px;
- flex-wrap: wrap;
- margin: 10px 20px;
- span {
- font-size: 12px;
- padding: 4px;
- background-color: $medium_grey;
- color: $light_0;
- border-radius: 5px;
- font-weight: 600;
- }
- }
- .game-status {
- @include flex-center;
+
+ .game-tags {
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+ margin: 10px 20px;
+ span {
+ font-size: 12px;
+ padding: 4px;
+ background-color: $medium_grey;
+ color: $light_0;
+ border-radius: 5px;
+ font-weight: 600;
}
}
@@ -117,9 +109,6 @@
padding: 20px;
font-size: 25px;
}
- .game-infos {
- grid-template-columns: 1fr;
- }
.image-carousel {
grid-column: 1;
diff --git a/src/pages/software-development/components/software-articles.js b/src/pages/software-development/components/software-articles.js
index 4812f53b1947e5829f412b2ab15fb6e43180cb84..a90420c694279ad9b57d9a2fe5d7dd2287dc2cf3 100644
--- a/src/pages/software-development/components/software-articles.js
+++ b/src/pages/software-development/components/software-articles.js
@@ -2,7 +2,11 @@
const { articles_url } = require("../../../../constants");
const ImageCarousel = require("../../../generic-components/image-carousel");
-const { loadArticles, getArticleBody, getArticleDate, getArticleStatus } = require("../../../lib/article-utils");
+const {
+ loadArticles,
+ getArticleBody,
+ getArticleDate,
+} = require("../../../lib/article-utils");
const objectHtmlRenderer = require("../../../lib/object-html-renderer");
class SoftwareArticle {
@@ -11,7 +15,7 @@ class SoftwareArticle {
}
render() {
- const { title, date, status, body, subtitle, images, path, technical } = this.props;
+ const { title, date, body, subtitle, images, path, technical } = this.props;
return {
tag: "article",
class: "software-article",
@@ -27,20 +31,9 @@ class SoftwareArticle {
contents: subtitle,
},
{
- tag: "div",
- class: "software-infos",
- contents: [
- {
- tag: "span",
- class: "software-date",
- contents: getArticleDate(date),
- },
- {
- tag: "span",
- class: `project-status ${status}`,
- contents: getArticleStatus(status),
- },
- ],
+ tag: "span",
+ class: "software-date",
+ contents: getArticleDate(date),
},
{
tag: "div",
@@ -101,13 +94,16 @@ class SoftwareArticle {
tag: "li",
class: "detail",
contents: [
- { tag: "label", contents: [
- {
- tag: "a",
- href: technical.repository,
- contents: "Dépôt code source"
- }
- ] },
+ {
+ tag: "label",
+ contents: [
+ {
+ tag: "a",
+ href: technical.repository,
+ contents: "Dépôt code source",
+ },
+ ],
+ },
],
},
],
diff --git a/src/pages/software-development/software-development.scss b/src/pages/software-development/software-development.scss
index 83ac6cd2a66ae6564f078944a766d4e0b8c48078..10f208409a3d448baef42eea29b163e3b1b635f2 100644
--- a/src/pages/software-development/software-development.scss
+++ b/src/pages/software-development/software-development.scss
@@ -16,17 +16,10 @@
margin: 0;
padding: 20px;
}
- .software-infos {
- grid-column: 1;
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 13px;
- .software-date {
- margin: 0 20px;
- color: $light_1;
- font-style: italic;
- }
+ .software-date {
+ margin: 0 20px;
+ color: $light_1;
+ font-style: italic;
}
.software-subtitle {
diff --git a/src/style.scss b/src/style.scss
index 311e04761a2e3b9c9c7c838745ddfa8a54308601..d7681c7cad656c5fb1b29aada664364695c354c2 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -4,7 +4,7 @@ body {
* {
box-sizing: border-box;
color: $dark_1;
- line-height: 1.3em;;
+ line-height: 1.3em;
}
font-family: Arial, Helvetica, sans-serif;
margin: 0;
@@ -242,16 +242,107 @@ main {
width: 100%;
flex: 1;
.page-header {
- @include page-header;
+ background-image: url("/assets/images/wallpaper_binary.png");
+ padding: 50px 0;
+ h1 {
+ padding: 15px 40px 0;
+ font-size: 25px;
+ color: $blue_2;
+ margin: 0 auto;
+ }
+ p {
+ color: $blue_3;
+ * {
+ color: $blue_3;
+ }
+ font-style: italic;
+ padding: 15px 40px 15px 100px;
+ margin: 0 auto;
+ font-size: 18px;
+ }
+ .big-logo {
+ @include flex-center;
+ gap: 20px;
+ padding: 20px;
+ img {
+ width: 200px;
+ max-width: 100%;
+ &.logo-text {
+ width: 300px;
+ max-width: 100%;
+ }
+ }
+ }
+ .logo {
+ padding-left: 30px;
+ @include flex-center;
+ img {
+ width: 100%;
+ }
+ }
+ @media screen and (max-width: $screen_s) {
+ h1 {
+ padding: 15px 20px 0;
+ }
+ p {
+ padding: 20px 20px 30px 40px;
+ text-align: justify;
+ }
+ .big-logo {
+ flex-direction: column;
+ }
+ }
+ &.logo-left {
+ .grid-wrapper {
+ h1 {
+ width: 100%;
+ }
+ display: grid;
+ grid-template-columns: 120px 1fr;
+ grid-template-rows: auto 1fr;
+ .logo {
+ grid-column: 1;
+ grid-row: 1;
+ width: 100%;
+ }
+ p {
+ margin: 0;
+ grid-column: 1 / span 2;
+ }
+ }
+ @media screen and (max-width: $screen_m) {
+ .grid-wrapper {
+ h1 {
+ padding: 0 20px;
+ }
+ .logo {
+ padding: 0 20px;
+ }
+ }
+ }
+ }
}
.page-philo {
- @include page-philo;
+ background-image: url("/assets/images/wallpaper_binary.png");
+ padding: 120px 30px;
+ margin: 40px 0;
+ p {
+ width: 100%;
+ max-width: 600px;
+ font-size: 18px;
+ color: $light_2;
+ * {
+ color: $light_2;
+ }
+ text-align: center;
+ font-style: italic;
+ font-weight: bold;
+ }
}
.page-contents-center {
- @include page-contents-center;
- }
- .project-status {
- @include project-status
+ width: $page_contents_center_width;
+ max-width: 100%;
+ margin: 0 auto;
}
@import "./homepage.scss";
@import "./pages/education/education.scss";
diff --git a/src/theme.scss b/src/theme.scss
index 627be8433d5c0aa19cd3ffad72899ac5fc13d776..359933a56abfd6926f87f64b66a3d6e4122ccadf 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -28,125 +28,6 @@ $navbar_height: 60px;
$page_contents_center_width: 1300px;
// mixins
-@mixin page-contents-center {
- width: $page_contents_center_width;
- max-width: 100%;
- margin: 0 auto;
-}
-
-@mixin page-header {
- background-image: url("/assets/images/wallpaper_binary.png");
- padding: 50px 0;
- h1 {
- padding: 15px 40px 0;
- font-size: 25px;
- color: $blue_2;
- margin: 0 auto;
- }
- p {
- color: $blue_3;
- * {
- color: $blue_3;
- }
- font-style: italic;
- padding: 15px 40px 15px 100px;
- margin: 0 auto;
- font-size: 18px;
- }
- .big-logo {
- @include flex-center;
- gap: 20px;
- padding: 20px;
- img {
- width: 200px;
- max-width: 100%;
- &.logo-text {
- width: 300px;
- max-width: 100%;
- }
- }
- }
- .logo {
- padding-left: 30px;
- @include flex-center;
- img {
- width: 100%;
- }
- }
- @media screen and (max-width: $screen_s) {
- h1 {
- padding: 15px 20px 0;
- }
- p {
- padding: 20px 20px 30px 40px;
- text-align: justify;
- }
- .big-logo {
- flex-direction: column;
- }
- }
- &.logo-left {
- .grid-wrapper {
- h1 {
- width: 100%;
- }
- display: grid;
- grid-template-columns: 120px 1fr;
- grid-template-rows: auto 1fr;
- .logo {
- grid-column: 1;
- grid-row: 1;
- width: 100%;
- }
- p {
- margin: 0;
- grid-column: 1 / span 2;
- }
- }
- @media screen and (max-width: $screen_m) {
- .grid-wrapper {
- h1 {
- padding: 0 20px;
- }
- .logo {
- padding: 0 20px;
- }
- }
- }
- }
-}
-
-@mixin page-philo {
- background-image: url("/assets/images/wallpaper_binary.png");
- padding: 120px 30px;
- margin: 40px 0;
- p {
- width: 100%;
- max-width: 600px;
- font-size: 18px;
- color: $light_2;
- * {
- color: $light_2;
- }
- text-align: center;
- font-style: italic;
- font-weight: bold;
- }
-}
-
-@mixin project-status {
- margin: 0 20px;
- color: $dark_2;
- padding: 10px 20px;
- font-weight: bold;
- border-radius: 20px;
- &.wip {
- background-color: $yellow_1;
- }
- &.prod {
- background-color: $kaki;
- }
-}
@mixin flex-center {
display: flex;