From bcd8ae5b45459800a2708399f18e909114bb8183 Mon Sep 17 00:00:00 2001
From: peter_rabbit <pierrejarriges@gmail.com>
Date: Tue, 19 Jan 2021 18:47:41 +0100
Subject: [PATCH] design backgrounds
---
public/education/education.js | 16 +++++++++++-----
public/style/pages/education/education.css | 8 ++++----
public/style/style.css | 21 ++++++++++++---------
src/pages/education/education.js | 16 +++++++++++-----
src/pages/education/education.scss | 19 +++++++++++--------
src/style.scss | 5 ++++-
6 files changed, 53 insertions(+), 32 deletions(-)
diff --git a/public/education/education.js b/public/education/education.js
index 23a74cb..3e9dae4 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -676,12 +676,18 @@ class EducationPage {
tag: "div",
id: "education-page",
contents: [
- { tag: "h1", contents: "<blue>Pédagogie</blue>" },
{
- tag: "p",
- class: "edu-philo",
- contents:
- "Démystifier et s'approprier la technologie par le partage de connaissances.",
+ tag: "div",
+ class: "page-header",
+ contents: [
+ { tag: "h1", contents: "<blue>Pédagogie</blue>" },
+ {
+ tag: "p",
+ class: "edu-philo",
+ contents:
+ "Démystifier et s'approprier la technologie par le partage de connaissances.",
+ },
+ ],
},
new GameStudioClub().render(),
new Popularization().render(),
diff --git a/public/style/pages/education/education.css b/public/style/pages/education/education.css
index 55b3e73..0ecb168 100644
--- a/public/style/pages/education/education.css
+++ b/public/style/pages/education/education.css
@@ -1,9 +1,9 @@
/* Error: Undefined variable.
* ,
- * 16 | color: $medium_grey;
- * | ^^^^^^^^^^^^
+ * 17 | color: $blue_3;
+ * | ^^^^^^^
* '
- * src/pages/education/education.scss 16:16 root stylesheet */
+ * src/pages/education/education.scss 17: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 16 \2502 color: $medium_grey;\a \2502 ^^^^^^^^^^^^\a \2575 \a src/pages/education/education.scss 16:16 root stylesheet";
+ content: "Error: Undefined variable.\a \2577 \a 17 \2502 color: $blue_3;\a \2502 ^^^^^^^\a \2575 \a src/pages/education/education.scss 17:16 root stylesheet";
}
diff --git a/public/style/style.css b/public/style/style.css
index ff215dd..e9aea55 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -23,7 +23,6 @@ body blue {
}
main {
- background: url("/assets/images/wallpaper_binary_white.png");
display: flex;
flex-direction: column;
align-items: center;
@@ -165,11 +164,15 @@ main #page-container {
width: 100%;
flex: 1;
}
+main #page-container .page-header {
+ background-image: url("/assets/images/wallpaper_binary.png");
+}
main #page-container #education-page h1 {
padding: 15px 40px 0;
font-size: 25px;
- margin: 0;
- background-color: white;
+ margin: 0 auto;
+ max-width: 100%;
+ width: 1300px;
}
main #page-container #education-page h3.big {
font-size: 30px;
@@ -177,9 +180,10 @@ main #page-container #education-page h3.big {
main #page-container #education-page .edu-philo {
padding: 15px 40px 15px 100px;
font-style: italic;
- color: #6b7880;
- margin: 0;
- background-color: white;
+ color: #72e3f0;
+ margin: 0 auto;
+ max-width: 100%;
+ width: 1300px;
}
main #page-container #education-page .title-banner {
display: flex;
@@ -212,7 +216,6 @@ main #page-container #education-page .section-contents {
height: auto;
width: 1300px;
max-width: 100%;
- background-color: white;
}
main #page-container #education-page .section-contents .full-row {
grid-column: 1/span 2;
@@ -223,7 +226,7 @@ main #page-container #education-page .section-contents .practical-infos {
display: flex;
flex-direction: column;
gap: 40px;
- background-color: #d4d9dd;
+ background-image: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
}
main #page-container #education-page .section-contents .practical-infos .info-item {
@@ -311,7 +314,7 @@ main #page-container #education-page .section-contents .list-wrapper ul.learning
main #page-container #education-page .section-contents .infos-inscriptions {
display: flex;
gap: 40px;
- background-color: #d4d9dd;
+ background-image: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups,
diff --git a/src/pages/education/education.js b/src/pages/education/education.js
index c241aed..451a28e 100644
--- a/src/pages/education/education.js
+++ b/src/pages/education/education.js
@@ -13,12 +13,18 @@ class EducationPage {
tag: "div",
id: "education-page",
contents: [
- { tag: "h1", contents: "<blue>Pédagogie</blue>" },
{
- tag: "p",
- class: "edu-philo",
- contents:
- "Démystifier et s'approprier la technologie par le partage de connaissances.",
+ tag: "div",
+ class: "page-header",
+ contents: [
+ { tag: "h1", contents: "<blue>Pédagogie</blue>" },
+ {
+ tag: "p",
+ class: "edu-philo",
+ contents:
+ "Démystifier et s'approprier la technologie par le partage de connaissances.",
+ },
+ ],
},
new GameStudioClub().render(),
new Popularization().render(),
diff --git a/src/pages/education/education.scss b/src/pages/education/education.scss
index a932bdc..865cf34 100644
--- a/src/pages/education/education.scss
+++ b/src/pages/education/education.scss
@@ -2,8 +2,9 @@
h1 {
padding: 15px 40px 0;
font-size: 25px;
- margin: 0;
- background-color: white;
+ margin: 0 auto;
+ max-width: 100%;
+ width: 1300px;
}
h3 {
&.big {
@@ -13,9 +14,10 @@
.edu-philo {
padding: 15px 40px 15px 100px;
font-style: italic;
- color: $medium_grey;
- margin: 0;
- background-color: white;
+ color: $blue_3;
+ margin: 0 auto;
+ max-width: 100%;
+ width: 1300px;
}
.title-banner {
display: flex;
@@ -48,7 +50,6 @@
height: auto;
width:1300px;
max-width: 100%;
- background-color: white;
.full-row {
grid-column: 1 / span 2;
}
@@ -58,7 +59,8 @@
display: flex;
flex-direction: column;
gap: 40px;
- background-color: $light_0;
+ // background-color: $light_0;
+ background-image: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
.info-item {
display: flex;
@@ -149,7 +151,8 @@
.infos-inscriptions {
display: flex;
gap: 40px;
- background-color: $light_0;
+ // background-color: $light_0;
+ background-image: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
.groups,
.pricing {
diff --git a/src/style.scss b/src/style.scss
index b4eb73c..b98f6e3 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -26,7 +26,7 @@ body {
}
main {
- background: url("/assets/images/wallpaper_binary_white.png");
+ // background: url("/assets/images/wallpaper_binary_white.png");
display: flex;
flex-direction: column;
align-items: center;
@@ -180,6 +180,9 @@ main {
#page-container {
width: 100%;
flex: 1;
+ .page-header {
+ background-image: url("/assets/images/wallpaper_binary.png");
+ }
@import "./pages/education/education.scss";
}
footer {
--
GitLab