Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 350fbce8 authored by peter_rabbit's avatar peter_rabbit
Browse files

change page container layout

parent 780b95bc
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/style/pages/education/education.css
+ 4
− 4
View file @ 350fbce8
/* Error: Undefined variable. /* 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 { body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
...@@ -13,5 +13,5 @@ body::before { ...@@ -13,5 +13,5 @@ body::before {
padding: 1em; padding: 1em;
margin-bottom: 1em; margin-bottom: 1em;
border-bottom: 2px solid black; 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";
} }
public/style/style.css
+ 22
− 17
View file @ 350fbce8
...@@ -12,14 +12,14 @@ body ul { ...@@ -12,14 +12,14 @@ body ul {
list-style-type: none; list-style-type: none;
} }
body a { body a {
color: #34a0b3; color: #4baabb;
text-decoration: none; text-decoration: none;
} }
body a:hover { body a:hover {
color: #17cff0; color: #72e3f0;
} }
body blue { body blue {
color: #34a0b3; color: #4baabb;
} }
main { main {
...@@ -36,7 +36,7 @@ main header nav { ...@@ -36,7 +36,7 @@ main header nav {
display: flex; display: flex;
align-items: center; align-items: center;
height: 60px; height: 60px;
background-color: #fffb; background-color: #fffa;
} }
main header nav .home { main header nav .home {
margin: 0 10px; margin: 0 10px;
...@@ -162,29 +162,30 @@ main header nav .burger { ...@@ -162,29 +162,30 @@ main header nav .burger {
} }
} }
main #page-container { main #page-container {
background-color: white; width: 100%;
width: 1200px;
max-width: 100%;
flex: 1; flex: 1;
} }
main #page-container #education-page h1 { main #page-container #education-page h1 {
margin: 15px 40px 0; padding: 15px 40px 0;
font-size: 25px; font-size: 25px;
margin: 0;
background-color: white;
} }
main #page-container #education-page h3.big { main #page-container #education-page h3.big {
font-size: 30px; font-size: 30px;
} }
main #page-container #education-page .edu-philo { main #page-container #education-page .edu-philo {
margin: 15px 40px 15px 100px; padding: 15px 40px 15px 100px;
max-width: 800px;
font-style: italic; font-style: italic;
color: #aabbc8; color: #6b7880;
margin: 0;
background-color: white;
} }
main #page-container #education-page .title-banner { main #page-container #education-page .title-banner {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
flex-direction: column; flex-direction: column;
height: 15vw; height: 20vw;
min-height: 250px; min-height: 250px;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -203,11 +204,15 @@ main #page-container #education-page .title-banner h2 { ...@@ -203,11 +204,15 @@ main #page-container #education-page .title-banner h2 {
text-shadow: 0 0 6px #0003; text-shadow: 0 0 6px #0003;
} }
main #page-container #education-page .section-contents { main #page-container #education-page .section-contents {
margin: 20px 40px 60px; padding: 20px 40px 60px;
margin: 0 auto;
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 20px; gap: 20px;
height: auto; height: auto;
width: 1300px;
max-width: 100%;
background-color: white;
} }
main #page-container #education-page .section-contents .full-row { main #page-container #education-page .section-contents .full-row {
grid-column: 1/span 2; grid-column: 1/span 2;
...@@ -256,7 +261,7 @@ main #page-container #education-page .section-contents .list-wrapper ul.learning ...@@ -256,7 +261,7 @@ main #page-container #education-page .section-contents .list-wrapper ul.learning
display: block; display: block;
position: absolute; position: absolute;
background-color: #fffa; background-color: #fffa;
padding: 3px 25px; padding: 3px 10px;
width: 100%; width: 100%;
} }
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme img { 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 ...@@ -367,14 +372,14 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
main #page-container #education-page h1 { main #page-container #education-page h1 {
margin: 15px 20px 0; padding: 15px 20px 0;
font-size: 25px; font-size: 25px;
} }
main #page-container #education-page h3.big { main #page-container #education-page h3.big {
font-size: 22px; font-size: 22px;
} }
main #page-container #education-page .edu-philo { main #page-container #education-page .edu-philo {
margin: 15px; padding: 15px;
max-width: unset; max-width: unset;
} }
main #page-container #education-page .title-banner { main #page-container #education-page .title-banner {
...@@ -387,7 +392,7 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric ...@@ -387,7 +392,7 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
text-shadow: 0 0 4px #000b; text-shadow: 0 0 4px #000b;
} }
main #page-container #education-page .section-contents { main #page-container #education-page .section-contents {
margin: 20px 10px 40px; padding: 20px 10px 40px;
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
main #page-container #education-page .section-contents .full-row { main #page-container #education-page .section-contents .full-row {
......
src/pages/education/education.scss
+ 17
− 10
View file @ 350fbce8
#education-page { #education-page {
h1 { h1 {
margin: 15px 40px 0; padding: 15px 40px 0;
font-size: 25px; font-size: 25px;
margin: 0;
background-color: white;
} }
h3 { h3 {
&.big { &.big {
...@@ -9,16 +11,17 @@ ...@@ -9,16 +11,17 @@
} }
} }
.edu-philo { .edu-philo {
margin: 15px 40px 15px 100px; padding: 15px 40px 15px 100px;
max-width: 800px;
font-style: italic; font-style: italic;
color: $light_2; color: $medium_grey;
margin: 0;
background-color: white;
} }
.title-banner { .title-banner {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
flex-direction: column; flex-direction: column;
height: 15vw; height: 20vw;
min-height: 250px; min-height: 250px;
&.game-banner { &.game-banner {
background-image: url("/assets/images/game_studio_banner.png"); background-image: url("/assets/images/game_studio_banner.png");
...@@ -37,11 +40,15 @@ ...@@ -37,11 +40,15 @@
} }
} }
.section-contents { .section-contents {
margin: 20px 40px 60px; padding: 20px 40px 60px;
margin: 0 auto;
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 20px; gap: 20px;
height: auto; height: auto;
width:1300px;
max-width: 100%;
background-color: white;
.full-row { .full-row {
grid-column: 1 / span 2; grid-column: 1 / span 2;
} }
...@@ -86,7 +93,7 @@ ...@@ -86,7 +93,7 @@
display: block; display: block;
position: absolute; position: absolute;
background-color: #fffa; background-color: #fffa;
padding: 3px 25px; padding: 3px 10px;
width: 100%; width: 100%;
} }
img { img {
...@@ -208,7 +215,7 @@ ...@@ -208,7 +215,7 @@
@media screen and (max-width: $screen_s) { @media screen and (max-width: $screen_s) {
h1 { h1 {
margin: 15px 20px 0; padding: 15px 20px 0;
font-size: 25px; font-size: 25px;
} }
h3 { h3 {
...@@ -217,7 +224,7 @@ ...@@ -217,7 +224,7 @@
} }
} }
.edu-philo { .edu-philo {
margin: 15px; padding: 15px;
max-width: unset; max-width: unset;
} }
.title-banner { .title-banner {
...@@ -230,7 +237,7 @@ ...@@ -230,7 +237,7 @@
} }
} }
.section-contents { .section-contents {
margin: 20px 10px 40px; padding: 20px 10px 40px;
grid-template-columns: 1fr; grid-template-columns: 1fr;
.full-row { .full-row {
grid-column: 1; grid-column: 1;
......
src/style.scss
+ 2
− 4
View file @ 350fbce8
...@@ -37,7 +37,7 @@ main { ...@@ -37,7 +37,7 @@ main {
display: flex; display: flex;
align-items: center; align-items: center;
height: $navbar_height; height: $navbar_height;
background-color: #fffb; background-color: #fffa;
.home { .home {
margin: 0 10px; margin: 0 10px;
a { a {
...@@ -178,9 +178,7 @@ main { ...@@ -178,9 +178,7 @@ main {
} }
} }
#page-container { #page-container {
background-color: white; width: 100%;
width: 1200px;
max-width: 100%;
flex: 1; flex: 1;
@import "./pages/education/education.scss"; @import "./pages/education/education.scss";
} }
......
src/theme.scss
+ 2
− 2
View file @ 350fbce8
...@@ -10,8 +10,8 @@ $purple: #902f90; ...@@ -10,8 +10,8 @@ $purple: #902f90;
$green: #00ff00; $green: #00ff00;
$kaki: #368736; $kaki: #368736;
$blue_1: #1c3db2; $blue_1: #1c3db2;
$blue_2: #34a0b3; $blue_2: #4baabb;
$blue_3: #17cff0; $blue_3: #72e3f0;
$red_1: #9c3030; $red_1: #9c3030;
$red_2: #e74949; $red_2: #e74949;
$yellow_1: #e5a002; $yellow_1: #e5a002;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service