From e3f5a7c18a8a5ac666088c0ea78dc8f7fe1938a4 Mon Sep 17 00:00:00 2001
From: peter_rabbit <pierrejarriges@gmail.com>
Date: Sat, 23 Jan 2021 23:13:25 +0100
Subject: [PATCH] feat:article software
---
public/education/education.js | 27 ++----
public/games/games.js | 2 +-
public/main.js | 6 +-
.../software-articles/watergun/watergun.json | 4 +-
.../software-development.js | 49 +++++-----
.../software-development.css | 8 +-
public/style/style.css | 90 ++++++++++++++++---
src/generic-components/image-carousel.js | 2 +-
src/homepage.js | 4 +-
src/pages/education/education.js | 27 ++----
src/pages/games/games.scss | 4 +-
.../components/software-articles.js | 47 ++++++----
.../software-development.scss | 82 ++++++++++++++---
src/style.scss | 1 +
src/theme.scss | 4 +-
15 files changed, 233 insertions(+), 124 deletions(-)
diff --git a/public/education/education.js b/public/education/education.js
index 63efd49..99eba3b 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -648,30 +648,13 @@ class EducationPage {
contents: [
{
tag: "div",
- class: "page-header logo-left",
+ class: "page-header",
contents: [
+ { tag: "h1", contents: "Pédagogie" },
{
- tag: "div",
- class: "page-contents-center grid-wrapper",
- contents: [
- {
- tag: "div",
- class: "logo",
- contents: [
- {
- tag: "img",
- alt: "image brain",
- src: `${images_url}/brain.svg`,
- },
- ],
- },
- { tag: "h1", contents: "Pédagogie" },
- {
- tag: "p",
- contents: `La pédagogie est une arme puissante pour faire tomber les barrières
- entre les gens et la technologie, et nous sommes bien décidés à en faire usage !`,
- },
- ],
+ tag: "p",
+ contents: `La pédagogie est une arme puissante pour faire tomber les barrières
+ entre les gens et la technologie, et nous sommes bien décidés à en faire usage !`,
},
],
},
diff --git a/public/games/games.js b/public/games/games.js
index f936169..6d3ed58 100644
--- a/public/games/games.js
+++ b/public/games/games.js
@@ -29,7 +29,7 @@ class ImageCarousel {
showImageIndex: 0,
};
this.RUN_INTERVAL = 5000;
- this.run();
+ this.props.images.length > 1 && this.run();
}
run() {
diff --git a/public/main.js b/public/main.js
index 71dfd7f..fc02903 100644
--- a/public/main.js
+++ b/public/main.js
@@ -29,7 +29,7 @@ class ImageCarousel {
showImageIndex: 0,
};
this.RUN_INTERVAL = 5000;
- this.run();
+ this.props.images.length > 1 && this.run();
}
run() {
@@ -332,8 +332,8 @@ class HomePage {
{
tag: "p",
class: "page-contents-center",
- contents: `Nous sommes engagés dans une démarche de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
- <br /><br />Nous travailler pour le plaisir de créer, de maîtriser et de comprendre.`,
+ contents: `Nous avons à cœur une démarche de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
+ <br /><br />Nous travaillons pour le plaisir de créer, de maîtriser et de comprendre.`,
},
],
},
diff --git a/public/software-articles/watergun/watergun.json b/public/software-articles/watergun/watergun.json
index 5b03285..03034ea 100644
--- a/public/software-articles/watergun/watergun.json
+++ b/public/software-articles/watergun/watergun.json
@@ -1,14 +1,14 @@
{
"title": "Watergun",
"date": "2021/01/23",
- "tags": ["web", "desktop", "light-weight", "offline", "editor"],
"status": "Work in progress",
"subtitle": "Un éditeur de site web ultra-light",
"body": "<file>watergun.txt",
"technical": {
"stack": ["Javascript", "Node.js", "Electron"],
"license": "Gnu gpl v3",
- "repository": "https://gitlab.com/peter_rabbit/watergun-web-editor"
+ "repository": "https://gitlab.com/peter_rabbit/watergun-web-editor",
+ "version": "0.0.1"
},
"images": ["watergun-overview-light.jpg"]
}
diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js
index 839dfaf..3e8726e 100644
--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -29,7 +29,7 @@ class ImageCarousel {
showImageIndex: 0,
};
this.RUN_INTERVAL = 5000;
- this.run();
+ this.props.images.length > 1 && this.run();
}
run() {
@@ -284,7 +284,7 @@ class SoftwareArticle {
}
render() {
- const { title, date, status, tags, body, subtitle, images, path, technical } = this.props;
+ const { title, date, status, body, subtitle, images, path, technical } = this.props;
return {
tag: "article",
class: "software-article",
@@ -294,28 +294,27 @@ class SoftwareArticle {
class: "software-title",
contents: title,
},
- {
- tag: "span",
- class: "software-date",
- contents: getArticleDate(date),
- },
- {
- tag: "span",
- class: "software-status",
- contents: status,
- },
- {
- tag: "div",
- class: "software-tags",
- contents: tags.map(tag => {
- return { tag: "span", contents: tag };
- }),
- },
{
tag: "h3",
class: "software-subtitle",
contents: subtitle,
},
+ {
+ tag: "div",
+ class: "software-infos",
+ contents: [
+ {
+ tag: "span",
+ class: "software-date",
+ contents: getArticleDate(date),
+ },
+ {
+ tag: "span",
+ class: "software-status",
+ contents: status,
+ },
+ ],
+ },
{
tag: "div",
class: "software-description",
@@ -328,7 +327,7 @@ class SoftwareArticle {
contents: [
{
tag: "h2",
- contents: "Details techniques",
+ contents: "Details",
},
{
tag: "table",
@@ -350,6 +349,16 @@ class SoftwareArticle {
},
],
},
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Version actuelle" },
+ {
+ tag: "td",
+ contents: technical.version,
+ },
+ ],
+ },
{
tag: "tr",
contents: [
diff --git a/public/style/pages/software-development/software-development.css b/public/style/pages/software-development/software-development.css
index 4160b20..ace551e 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: $light_0;
- * | ^^^^^^^^
+ * 8 | background-color: $dark_2;
+ * | ^^^^^^^
* '
- * src/pages/software-development/software-development.scss 9:35 root stylesheet */
+ * src/pages/software-development/software-development.scss 8:31 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: $light_0;\a \2502 ^^^^^^^^\a \2575 \a src/pages/software-development/software-development.scss 9:35 root stylesheet";
+ content: "Error: Undefined variable.\a \2577 \a 8 \2502 background-color: $dark_2;\a \2502 ^^^^^^^\a \2575 \a src/pages/software-development/software-development.scss 8:31 root stylesheet";
}
diff --git a/public/style/style.css b/public/style/style.css
index 0012d2d..6bbbbae 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -5,6 +5,7 @@ body {
body * {
box-sizing: border-box;
color: #35393c;
+ line-height: 1.3em;
}
body ul {
margin: 0;
@@ -325,13 +326,13 @@ main #page-container .page-philo p {
width: 100%;
max-width: 600px;
font-size: 18px;
- color: #6b7880;
+ color: #aabbc8;
text-align: center;
font-style: italic;
font-weight: bold;
}
main #page-container .page-philo p * {
- color: #6b7880;
+ color: #aabbc8;
}
main #page-container .page-contents-center {
width: 1300px;
@@ -888,8 +889,8 @@ 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: #d4d9dd;
- color: #6b7880;
+ background-color: #96a5ae;
+ color: #3c4144;
padding: 10px 20px;
font-style: italic;
font-size: 20px;
@@ -967,8 +968,13 @@ main #page-container #games-page .game-articles article.placeholder * {
}
main #page-container #software-page .software-articles article.software-article {
display: grid;
- grid-template-columns: 1fr 0.7fr;
+ grid-template-columns: 1fr 1fr;
margin: 30px 0;
+ gap: 0 30px;
+ background-color: #3c4144;
+}
+main #page-container #software-page .software-articles article.software-article > * {
+ color: #d4d9dd;
}
main #page-container #software-page .software-articles article.software-article .software-title {
grid-column: 1/span 2;
@@ -977,27 +983,91 @@ 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-status {
+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-date {
- grid-column: 1;
+main #page-container #software-page .software-articles article.software-article .software-infos .software-date {
+ margin: 0 20px;
+ color: #96a5ae;
+ font-style: italic;
}
-main #page-container #software-page .software-articles article.software-article .software-tags {
- grid-column: 1;
+main #page-container #software-page .software-articles article.software-article .software-infos .software-status {
+ margin: 0 20px;
+ background-color: #e5a002;
+ color: #3c4144;
+ padding: 10px 20px;
+ font-weight: bold;
+ border-radius: 20px;
}
main #page-container #software-page .software-articles article.software-article .software-subtitle {
grid-column: 1;
+ margin: 20px;
}
main #page-container #software-page .software-articles article.software-article .software-description {
grid-column: 1;
+ text-align: justify;
+ margin: 20px;
}
main #page-container #software-page .software-articles article.software-article .image-carousel {
grid-column: 2;
+ grid-row: 2/span 5;
+ min-height: 400px;
}
main #page-container #software-page .software-articles article.software-article .software-technical {
grid-column: 1/span 2;
}
+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;
+}
+main #page-container #software-page .software-articles article.software-article .software-technical table {
+ border: 1px solid #96a5ae;
+ border-collapse: collapse;
+ margin: 10px 20px;
+}
+main #page-container #software-page .software-articles article.software-article .software-technical table tr td {
+ border: 1px solid #96a5ae;
+ color: #d4d9dd;
+ padding: 10px 20px;
+}
+main #page-container #software-page .software-articles article.software-article .software-technical table tr td *:not(a) {
+ color: #d4d9dd;
+}
+main #page-container #software-page .software-articles article.software-article .software-technical table tr td:first-child {
+ font-weight: bold;
+}
+main #page-container #software-page .software-articles article.software-article .software-technical table tr td:last-child ul {
+ display: flex;
+ gap: 10px;
+}
+@media screen and (max-width: 1300px) {
+ main #page-container #software-page .software-articles article.software-article {
+ margin: 30px 20px;
+ }
+}
+@media screen and (max-width: 900px) {
+ main #page-container #software-page .software-articles article.software-article {
+ grid-template-columns: 1fr;
+ }
+ main #page-container #software-page .software-articles article.software-article .software-title {
+ grid-column: 1;
+ }
+ main #page-container #software-page .software-articles article.software-article .image-carousel {
+ grid-column: 1;
+ grid-row: 2;
+ }
+ main #page-container #software-page .software-articles article.software-article .software-technical {
+ grid-column: 1;
+ }
+}
main footer {
display: flex;
justify-content: center;
diff --git a/src/generic-components/image-carousel.js b/src/generic-components/image-carousel.js
index 543c5ca..e9cd779 100644
--- a/src/generic-components/image-carousel.js
+++ b/src/generic-components/image-carousel.js
@@ -10,7 +10,7 @@ class ImageCarousel {
showImageIndex: 0,
};
this.RUN_INTERVAL = 5000;
- this.run();
+ this.props.images.length > 1 && this.run();
}
run() {
diff --git a/src/homepage.js b/src/homepage.js
index 29f7a4e..a96dcd9 100644
--- a/src/homepage.js
+++ b/src/homepage.js
@@ -61,8 +61,8 @@ class HomePage {
{
tag: "p",
class: "page-contents-center",
- contents: `Nous sommes engagés dans une démarche de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
- <br /><br />Nous travailler pour le plaisir de créer, de maîtriser et de comprendre.`,
+ contents: `Nous avons à cœur une démarche de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
+ <br /><br />Nous travaillons pour le plaisir de créer, de maîtriser et de comprendre.`,
},
],
},
diff --git a/src/pages/education/education.js b/src/pages/education/education.js
index d0b35bc..99ce300 100644
--- a/src/pages/education/education.js
+++ b/src/pages/education/education.js
@@ -16,30 +16,13 @@ class EducationPage {
contents: [
{
tag: "div",
- class: "page-header logo-left",
+ class: "page-header",
contents: [
+ { tag: "h1", contents: "Pédagogie" },
{
- tag: "div",
- class: "page-contents-center grid-wrapper",
- contents: [
- {
- tag: "div",
- class: "logo",
- contents: [
- {
- tag: "img",
- alt: "image brain",
- src: `${images_url}/brain.svg`,
- },
- ],
- },
- { tag: "h1", contents: "Pédagogie" },
- {
- tag: "p",
- contents: `La pédagogie est une arme puissante pour faire tomber les barrières
- entre les gens et la technologie, et nous sommes bien décidés à en faire usage !`,
- },
- ],
+ tag: "p",
+ contents: `La pédagogie est une arme puissante pour faire tomber les barrières
+ entre les gens et la technologie, et nous sommes bien décidés à en faire usage !`,
},
],
},
diff --git a/src/pages/games/games.scss b/src/pages/games/games.scss
index 0afab82..341bf60 100644
--- a/src/pages/games/games.scss
+++ b/src/pages/games/games.scss
@@ -53,8 +53,8 @@
.game-team {
grid-column: 1 / span 2;
h2 {
- background-color: $light_0;
- color: $medium_grey;
+ background-color: $light_1;
+ color: $dark_2;
padding: 10px 20px;
font-style: italic;
font-size: 20px;
diff --git a/src/pages/software-development/components/software-articles.js b/src/pages/software-development/components/software-articles.js
index 0feedc3..15cb37c 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, status, tags, body, subtitle, images, path, technical } = this.props;
+ const { title, date, status, body, subtitle, images, path, technical } = this.props;
return {
tag: "article",
class: "software-article",
@@ -21,28 +21,27 @@ class SoftwareArticle {
class: "software-title",
contents: title,
},
- {
- tag: "span",
- class: "software-date",
- contents: getArticleDate(date),
- },
- {
- tag: "span",
- class: "software-status",
- contents: status,
- },
- {
- tag: "div",
- class: "software-tags",
- contents: tags.map(tag => {
- return { tag: "span", contents: tag };
- }),
- },
{
tag: "h3",
class: "software-subtitle",
contents: subtitle,
},
+ {
+ tag: "div",
+ class: "software-infos",
+ contents: [
+ {
+ tag: "span",
+ class: "software-date",
+ contents: getArticleDate(date),
+ },
+ {
+ tag: "span",
+ class: "software-status",
+ contents: status,
+ },
+ ],
+ },
{
tag: "div",
class: "software-description",
@@ -55,7 +54,7 @@ class SoftwareArticle {
contents: [
{
tag: "h2",
- contents: "Details techniques",
+ contents: "Details",
},
{
tag: "table",
@@ -77,6 +76,16 @@ class SoftwareArticle {
},
],
},
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Version actuelle" },
+ {
+ tag: "td",
+ contents: technical.version,
+ },
+ ],
+ },
{
tag: "tr",
contents: [
diff --git a/src/pages/software-development/software-development.scss b/src/pages/software-development/software-development.scss
index 088aa6b..0c88350 100644
--- a/src/pages/software-development/software-development.scss
+++ b/src/pages/software-development/software-development.scss
@@ -2,8 +2,13 @@
.software-articles {
article.software-article {
display: grid;
- grid-template-columns: 1fr 0.7fr;
+ grid-template-columns: 1fr 1fr;
margin: 30px 0;
+ gap: 0 30px;
+ background-color: $dark_2;
+ & > * {
+ color: $light_0;
+ }
.software-title {
grid-column: 1 / span 2;
background-color: $light_0;
@@ -11,44 +16,93 @@
margin: 0;
padding: 20px;
}
- .software-status {
- grid-column: 1;
- }
- .software-date {
- grid-column: 1;
- }
-
- .software-tags {
+ .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-status {
+ margin: 0 20px;
+ background-color: $yellow_1;
+ color: $dark_2;
+ padding: 10px 20px;
+ font-weight: bold;
+ border-radius: 20px;
+ }
}
.software-subtitle {
grid-column: 1;
+ margin: 20px;
}
.software-description {
grid-column: 1;
+ text-align: justify;
+ margin: 20px;
}
.image-carousel {
grid-column: 2;
+ grid-row: 2 / span 5;
+ min-height: 400px;
}
.software-technical {
grid-column: 1 / span 2;
h2 {
+ background-color: $light_1;
+ color: $dark_2;
+ margin: 0;
+ padding: 10px 20px;
+ font-size: 20px;
+ font-style: italic;
}
table {
+ border: 1px solid $light_1;
+ border-collapse: collapse;
+ margin: 10px 20px;
tr {
- td:first-child {
- }
- td:last-child {
- ul {
- li {
+ td {
+ border: 1px solid $light_1;
+ color: $light_0;
+ padding: 10px 20px;
+ *:not(a) {
+ color: $light_0;
+ }
+ &:first-child {
+ font-weight: bold;
+ }
+ &:last-child {
+ ul {
+ display: flex;
+ gap: 10px;
}
}
}
}
}
}
+ @media screen and (max-width: $page_contents_center_width) {
+ margin: 30px 20px;
+ }
+ @media screen and (max-width: $screen_l) {
+ grid-template-columns: 1fr;
+ .software-title {
+ grid-column: 1;
+ }
+ .image-carousel {
+ grid-column: 1;
+ grid-row: 2;
+ }
+ .software-technical {
+ grid-column: 1;
+ }
+ }
}
}
}
diff --git a/src/style.scss b/src/style.scss
index 002eca6..2bc18e6 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -4,6 +4,7 @@ body {
* {
box-sizing: border-box;
color: $dark_1;
+ line-height: 1.3em;;
}
font-family: Arial, Helvetica, sans-serif;
margin: 0;
diff --git a/src/theme.scss b/src/theme.scss
index 58f0804..c617b7f 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -125,9 +125,9 @@ $page_contents_center_width: 1300px;
width: 100%;
max-width: 600px;
font-size: 18px;
- color: $medium_grey;
+ color: $light_2;
* {
- color: $medium_grey;
+ color: $light_2;
}
text-align: center;
font-style: italic;
--
GitLab