From 350fbce8189e28fe16f3d063d445a6fcb10fbbce Mon Sep 17 00:00:00 2001
From: peter_rabbit <pierrejarriges@gmail.com>
Date: Tue, 19 Jan 2021 17:53:49 +0100
Subject: [PATCH] change page container layout
---
public/style/pages/education/education.css | 8 ++---
public/style/style.css | 39 ++++++++++++----------
src/pages/education/education.scss | 27 +++++++++------
src/style.scss | 6 ++--
src/theme.scss | 4 +--
5 files changed, 47 insertions(+), 37 deletions(-)
diff --git a/public/style/pages/education/education.css b/public/style/pages/education/education.css
index 1b7f865..55b3e73 100644
--- a/public/style/pages/education/education.css
+++ b/public/style/pages/education/education.css
@@ -1,9 +1,9 @@
/* Error: Undefined variable.
* ,
- * 15 | color: $light_2;
- * | ^^^^^^^^
+ * 16 | color: $medium_grey;
+ * | ^^^^^^^^^^^^
* '
- * src/pages/education/education.scss 15:16 root stylesheet */
+ * src/pages/education/education.scss 16: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 15 \2502 color: $light_2;\a \2502 ^^^^^^^^\a \2575 \a src/pages/education/education.scss 15:16 root stylesheet";
+ 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";
}
diff --git a/public/style/style.css b/public/style/style.css
index c2e6491..ff215dd 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -12,14 +12,14 @@ body ul {
list-style-type: none;
}
body a {
- color: #34a0b3;
+ color: #4baabb;
text-decoration: none;
}
body a:hover {
- color: #17cff0;
+ color: #72e3f0;
}
body blue {
- color: #34a0b3;
+ color: #4baabb;
}
main {
@@ -36,7 +36,7 @@ main header nav {
display: flex;
align-items: center;
height: 60px;
- background-color: #fffb;
+ background-color: #fffa;
}
main header nav .home {
margin: 0 10px;
@@ -162,29 +162,30 @@ main header nav .burger {
}
}
main #page-container {
- background-color: white;
- width: 1200px;
- max-width: 100%;
+ width: 100%;
flex: 1;
}
main #page-container #education-page h1 {
- margin: 15px 40px 0;
+ padding: 15px 40px 0;
font-size: 25px;
+ margin: 0;
+ background-color: white;
}
main #page-container #education-page h3.big {
font-size: 30px;
}
main #page-container #education-page .edu-philo {
- margin: 15px 40px 15px 100px;
- max-width: 800px;
+ padding: 15px 40px 15px 100px;
font-style: italic;
- color: #aabbc8;
+ color: #6b7880;
+ margin: 0;
+ background-color: white;
}
main #page-container #education-page .title-banner {
display: flex;
justify-content: flex-end;
flex-direction: column;
- height: 15vw;
+ height: 20vw;
min-height: 250px;
background-size: cover;
background-repeat: no-repeat;
@@ -203,11 +204,15 @@ main #page-container #education-page .title-banner h2 {
text-shadow: 0 0 6px #0003;
}
main #page-container #education-page .section-contents {
- margin: 20px 40px 60px;
+ padding: 20px 40px 60px;
+ margin: 0 auto;
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
height: auto;
+ width: 1300px;
+ max-width: 100%;
+ background-color: white;
}
main #page-container #education-page .section-contents .full-row {
grid-column: 1/span 2;
@@ -256,7 +261,7 @@ main #page-container #education-page .section-contents .list-wrapper ul.learning
display: block;
position: absolute;
background-color: #fffa;
- padding: 3px 25px;
+ padding: 3px 10px;
width: 100%;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme img {
@@ -367,14 +372,14 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
}
@media screen and (max-width: 560px) {
main #page-container #education-page h1 {
- margin: 15px 20px 0;
+ padding: 15px 20px 0;
font-size: 25px;
}
main #page-container #education-page h3.big {
font-size: 22px;
}
main #page-container #education-page .edu-philo {
- margin: 15px;
+ padding: 15px;
max-width: unset;
}
main #page-container #education-page .title-banner {
@@ -387,7 +392,7 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
text-shadow: 0 0 4px #000b;
}
main #page-container #education-page .section-contents {
- margin: 20px 10px 40px;
+ padding: 20px 10px 40px;
grid-template-columns: 1fr;
}
main #page-container #education-page .section-contents .full-row {
diff --git a/src/pages/education/education.scss b/src/pages/education/education.scss
index 1d063d7..a932bdc 100644
--- a/src/pages/education/education.scss
+++ b/src/pages/education/education.scss
@@ -1,7 +1,9 @@
#education-page {
h1 {
- margin: 15px 40px 0;
+ padding: 15px 40px 0;
font-size: 25px;
+ margin: 0;
+ background-color: white;
}
h3 {
&.big {
@@ -9,16 +11,17 @@
}
}
.edu-philo {
- margin: 15px 40px 15px 100px;
- max-width: 800px;
+ padding: 15px 40px 15px 100px;
font-style: italic;
- color: $light_2;
+ color: $medium_grey;
+ margin: 0;
+ background-color: white;
}
.title-banner {
display: flex;
justify-content: flex-end;
flex-direction: column;
- height: 15vw;
+ height: 20vw;
min-height: 250px;
&.game-banner {
background-image: url("/assets/images/game_studio_banner.png");
@@ -37,11 +40,15 @@
}
}
.section-contents {
- margin: 20px 40px 60px;
+ padding: 20px 40px 60px;
+ margin: 0 auto;
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
height: auto;
+ width:1300px;
+ max-width: 100%;
+ background-color: white;
.full-row {
grid-column: 1 / span 2;
}
@@ -86,7 +93,7 @@
display: block;
position: absolute;
background-color: #fffa;
- padding: 3px 25px;
+ padding: 3px 10px;
width: 100%;
}
img {
@@ -208,7 +215,7 @@
@media screen and (max-width: $screen_s) {
h1 {
- margin: 15px 20px 0;
+ padding: 15px 20px 0;
font-size: 25px;
}
h3 {
@@ -217,7 +224,7 @@
}
}
.edu-philo {
- margin: 15px;
+ padding: 15px;
max-width: unset;
}
.title-banner {
@@ -230,7 +237,7 @@
}
}
.section-contents {
- margin: 20px 10px 40px;
+ padding: 20px 10px 40px;
grid-template-columns: 1fr;
.full-row {
grid-column: 1;
diff --git a/src/style.scss b/src/style.scss
index c7fd41f..b4eb73c 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -37,7 +37,7 @@ main {
display: flex;
align-items: center;
height: $navbar_height;
- background-color: #fffb;
+ background-color: #fffa;
.home {
margin: 0 10px;
a {
@@ -178,9 +178,7 @@ main {
}
}
#page-container {
- background-color: white;
- width: 1200px;
- max-width: 100%;
+ width: 100%;
flex: 1;
@import "./pages/education/education.scss";
}
diff --git a/src/theme.scss b/src/theme.scss
index fded075..8bd15bc 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -10,8 +10,8 @@ $purple: #902f90;
$green: #00ff00;
$kaki: #368736;
$blue_1: #1c3db2;
-$blue_2: #34a0b3;
-$blue_3: #17cff0;
+$blue_2: #4baabb;
+$blue_3: #72e3f0;
$red_1: #9c3030;
$red_2: #e74949;
$yellow_1: #e5a002;
--
GitLab