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 098efd19 authored by Pierre Jarriges's avatar Pierre Jarriges
Browse files

design game banner

parent b7125131
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/articles/games/fantom_quest/fantom_quest.txt
+ 2
− 1
View file @ 098efd19
Un petit fantôme en quête d'identité va devoir gravir chaque étage d'un donjon afin de rencontrer la sorcière qui lui révélera sa vraie nature.
Ce petit jeu de quête minimaliste en forme de labyrinthe sera jouable directement sur navigateur ou à télécharger sur pc.
Sortie prévue : Mars 2021 (si on y arrive !)
<s>Sortie prévue : Mars 2021 (si on y arrive !)</s>
Ça arrive, ça arrive.
- Concept original et graphismes : Lucie Ventadour
......
public/robots.txt
+ 2
− 1
View file @ 098efd19
User-agent: *
Disallow: /articles/
Disallow: /style/
\ No newline at end of file
Disallow: /style/
Sitemap: https://kuadrado-software.fr/sitemap.xml
\ No newline at end of file
public/sitemap.xml
+ 5
− 5
View file @ 098efd19
......@@ -2,18 +2,18 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://kuadrado-software.fr</loc>
<lastmod>2021-02-21</lastmod>
<lastmod>2021-11-21</lastmod>
</url>
<url>
<loc>https://kuadrado-software.fr/games/</loc>
<lastmod>2021-05-25</lastmod>
<lastmod>2021-11-21</lastmod>
</url>
<url>
<loc>https://kuadrado-software.fr/education/</loc>
<lastmod>2021-05-25</lastmod>
<lastmod>2021-11-21</lastmod>
</url>
<url>
<url>
<loc>https://kuadrado-software.fr/software-development/</loc>
<lastmod>2021-02-21</lastmod>
<lastmod>2021-11-21</lastmod>
</url>
</urlset>
\ No newline at end of file
public/style/style.css
+ 3
− 1
View file @ 098efd19
......@@ -983,9 +983,10 @@ main #page-container #games-page .game-articles article.game-article .game-banne
flex-direction: column;
background-color: black;
overflow: hidden;
height: 300px;
}
main #page-container #games-page .game-articles article.game-article .game-banner img {
height: 500px;
width: 100%;
}
main #page-container #games-page .game-articles article.game-article .game-tags {
display: flex;
......@@ -1079,6 +1080,7 @@ main #page-container #games-page .game-articles article.placeholder * {
main #page-container #games-page .game-articles article.game-article .game-banner {
grid-column: 1;
margin: 0 -20px;
height: 200px;
}
main #page-container #games-page .game-articles article.game-article .image-carousel {
grid-column: 1;
......
src/pages/games/games.scss
+ 143
− 141
View file @ 098efd19
#games-page {
.game-articles {
article {
display: grid;
grid-template-columns: 0.7fr 1fr;
gap: 30px 50px;
margin: 20px 0;
&.game-article {
grid-template-rows: repeat(7, auto);
width: 100%;
.game-title {
grid-column: 1 / span 2;
margin: 0;
padding: 30px 20px;
color: $light_2;
font-size: 35px;
font-style: italic;
}
.game-articles {
article {
display: grid;
grid-template-columns: 0.7fr 1fr;
gap: 30px 50px;
margin: 20px 0;
&.game-article {
grid-template-rows: repeat(7, auto);
width: 100%;
.game-title {
grid-column: 1 / span 2;
margin: 0;
padding: 30px 20px;
color: $light_2;
font-size: 35px;
font-style: italic;
}
.game-banner {
grid-column: 1 / span 2;
@include flex-center-col;
background-color: black;
overflow: hidden;
img {
height: 500px;
}
}
.game-banner {
grid-column: 1 / span 2;
@include flex-center-col;
background-color: black;
overflow: hidden;
height: 300px;
img {
width: 100%;
}
}
.game-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 10px 20px;
span {
font-size: 12px;
padding: 4px;
background-color: $light_0;
color: $medium_grey;
border-radius: 5px;
font-weight: 600;
}
}
.game-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 10px 20px;
span {
font-size: 12px;
padding: 4px;
background-color: $light_0;
color: $medium_grey;
border-radius: 5px;
font-weight: 600;
}
}
.game-subtitle {
grid-column: 1;
margin: 10px 20px;
color: $medium_grey;
}
.game-description {
grid-column: 1;
text-align: justify;
margin: 10px 20px 30px;
}
.game-subtitle {
grid-column: 1;
margin: 10px 20px;
color: $medium_grey;
}
.game-description {
grid-column: 1;
text-align: justify;
margin: 10px 20px 30px;
}
.image-carousel {
grid-column: 2;
grid-row: 3 / span 4;
height: 100%;
}
.game-team {
grid-column: 1 / span 2;
h2 {
color: $medium_grey;
padding: 10px 20px;
font-style: italic;
font-size: 20px;
margin: 0;
}
.team-members {
display: flex;
flex-direction: column;
.team-member {
display: grid;
grid-template-columns: 80px 1fr;
grid-template-rows: auto auto 1fr;
margin: 10px;
.team-member-img {
grid-row: 1 / span 3;
overflow: hidden;
img {
width: 100%;
padding: 0 10px 0 0;
}
}
.team-member-title {
margin: 0 0 5px;
color: $medium_grey;
}
.team-member-subtitle {
margin: 0 10px;
font-size: 14px;
color: $light_1;
font-style: italic;
}
.team-member-body {
margin: 10px 10px 20px 20px;
text-align: justify;
}
}
}
}
}
&.placeholder {
* {
background-color: $light_0;
}
height: 400px;
}
@media screen and (max-width: $screen_l) {
grid-template-columns: 1fr;
&.game-article {
grid-template-rows: repeat(6, auto);
.game-title {
grid-column: 1;
padding: 0;
font-size: 25px;
}
.image-carousel {
grid-column: 2;
grid-row: 3 / span 4;
height: 100%;
}
.game-team {
grid-column: 1 / span 2;
h2 {
color: $medium_grey;
padding: 10px 20px;
font-style: italic;
font-size: 20px;
margin: 0;
}
.team-members {
display: flex;
flex-direction: column;
.team-member {
display: grid;
grid-template-columns: 80px 1fr;
grid-template-rows: auto auto 1fr;
margin: 10px;
.team-member-img {
grid-row: 1 / span 3;
overflow: hidden;
img {
width: 100%;
padding: 0 10px 0 0;
}
}
.team-member-title {
margin: 0 0 5px;
color: $medium_grey;
}
.team-member-subtitle {
margin: 0 10px;
font-size: 14px;
color: $light_1;
font-style: italic;
}
.team-member-body {
margin: 10px 10px 20px 20px;
text-align: justify;
}
}
}
}
}
&.placeholder {
* {
background-color: $light_0;
}
height: 400px;
}
@media screen and (max-width: $screen_l) {
grid-template-columns: 1fr;
&.game-article {
grid-template-rows: repeat(6, auto);
.game-title {
grid-column: 1;
padding: 0;
font-size: 25px;
}
.game-banner {
grid-column: 1;
margin: 0 -20px;
}
.game-banner {
grid-column: 1;
margin: 0 -20px;
height: 200px;
}
.image-carousel {
grid-column: 1;
grid-row: 3;
height: 400px;
margin: 0 -20px;
}
.game-team {
grid-column: 1;
.team-members {
.team-member {
grid-template-columns: 70px 1fr;
.team-member-img {
grid-row: 1 / span 2;
}
.team-member-body {
grid-column: 1 / span 2;
}
}
}
}
}
}
}
}
.image-carousel {
grid-column: 1;
grid-row: 3;
height: 400px;
margin: 0 -20px;
}
.game-team {
grid-column: 1;
.team-members {
.team-member {
grid-template-columns: 70px 1fr;
.team-member-img {
grid-row: 1 / span 2;
}
.team-member-body {
grid-column: 1 / span 2;
}
}
}
}
}
}
}
}
}
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