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 bbfa4d23 authored by peter_rabbit's avatar peter_rabbit
Browse files

feat:responsive home page

parent f20031d3
No related branches found
No related tags found
No related merge requests found
/* Error: Undefined variable. /* Error: Undefined variable.
* , * ,
* 24 | color: $medium_grey; * 9 | background-color: $light_0;
* | ^^^^^^^^^^^^ * | ^^^^^^^^
* ' * '
* src/homepage.scss 24:24 root stylesheet */ * src/homepage.scss 9:27 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 24 \2502 color: $medium_grey;\a \2502 ^^^^^^^^^^^^\a \2575 \a src/homepage.scss 24:24 root stylesheet"; content: "Error: Undefined variable.\a \2577 \a 9 \2502 background-color: $light_0;\a \2502 ^^^^^^^^\a \2575 \a src/homepage.scss 9:27 root stylesheet";
} }
...@@ -214,6 +214,8 @@ main #page-container #home-page { ...@@ -214,6 +214,8 @@ main #page-container #home-page {
main #page-container #home-page .section-title { main #page-container #home-page .section-title {
padding: 10px; padding: 10px;
margin: 0; margin: 0;
background-color: #d4d9dd;
color: #6b7880;
} }
main #page-container #home-page .articles-displayer { main #page-container #home-page .articles-displayer {
margin: 0 auto 40px; margin: 0 auto 40px;
...@@ -351,6 +353,47 @@ main #page-container #home-page .articles-displayer article.article-placeholder ...@@ -351,6 +353,47 @@ main #page-container #home-page .articles-displayer article.article-placeholder
main #page-container #home-page .articles-displayer article.article-placeholder .subtitle { main #page-container #home-page .articles-displayer article.article-placeholder .subtitle {
height: 30px; height: 30px;
} }
@media screen and (max-width: 900px) {
main #page-container #home-page .articles-displayer {
grid-template-columns: 40px auto 40px;
}
main #page-container #home-page .articles-displayer article {
gap: 5px;
grid-template-columns: 1fr;
grid-template-rows: 300px auto auto auto 1fr;
padding: 0;
}
main #page-container #home-page .articles-displayer article .date {
grid-row: 2;
padding: 0 10px;
}
main #page-container #home-page .articles-displayer article .title {
grid-row: 3;
padding: 0 10px;
}
main #page-container #home-page .articles-displayer article .subtitle {
grid-row: 4;
padding: 0 10px;
}
main #page-container #home-page .articles-displayer article .body {
grid-row: 5;
padding: 0 10px 30px;
}
main #page-container #home-page .articles-displayer article .image-carousel {
grid-row: 1;
grid-column: 1;
}
main #page-container #home-page .articles-displayer article .image-carousel img {
max-height: 100%;
}
main #page-container #home-page .articles-displayer article .image-carousel .carousel-bullets {
gap: 15px;
}
main #page-container #home-page .articles-displayer article .image-carousel .carousel-bullets .bullet {
width: 12px;
height: 12px;
}
}
main #page-container #home-page .grid-3 { main #page-container #home-page .grid-3 {
gap: 30px; gap: 30px;
} }
...@@ -370,7 +413,7 @@ main #page-container #home-page .grid-3 .theme-card .card-img { ...@@ -370,7 +413,7 @@ main #page-container #home-page .grid-3 .theme-card .card-img {
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
flex-direction: column; flex-direction: column;
background-image: url("/assets/images/wallpaper_binary.png"); background-color: black;
position: relative; position: relative;
} }
main #page-container #home-page .grid-3 .theme-card .card-img img { main #page-container #home-page .grid-3 .theme-card .card-img img {
...@@ -383,6 +426,8 @@ main #page-container #home-page .grid-3 .theme-card .card-title h2 { ...@@ -383,6 +426,8 @@ main #page-container #home-page .grid-3 .theme-card .card-title h2 {
text-align: center; text-align: center;
padding: 10px 20px; padding: 10px 20px;
color: #4baabb; color: #4baabb;
display: block;
background-color: white;
} }
main #page-container #home-page .grid-3 .theme-card .card-description { main #page-container #home-page .grid-3 .theme-card .card-description {
background-image: url("/assets/images/wallpaper_binary.png"); background-image: url("/assets/images/wallpaper_binary.png");
...@@ -397,6 +442,38 @@ main #page-container #home-page .grid-3 .theme-card .card-description p { ...@@ -397,6 +442,38 @@ main #page-container #home-page .grid-3 .theme-card .card-description p {
main #page-container #home-page .grid-3 .theme-card:hover { main #page-container #home-page .grid-3 .theme-card:hover {
transform: scale(1.03); transform: scale(1.03);
} }
@media screen and (max-width: 900px) {
main #page-container #home-page .grid-3 {
grid-template-columns: 1fr;
gap: 40px;
}
main #page-container #home-page .grid-3 .theme-card {
transition: transform 0.3s;
}
main #page-container #home-page .grid-3 .theme-card .card-img {
height: 300px;
}
main #page-container #home-page .grid-3 .theme-card .card-img img {
min-width: unset;
height: 100%;
}
main #page-container #home-page .grid-3 .theme-card .card-title h2 {
padding: 5px 20px;
}
main #page-container #home-page .grid-3 .theme-card .card-description {
background-image: url("/assets/images/wallpaper_binary.png");
flex: 1;
padding: 10px 10px 20px;
}
main #page-container #home-page .grid-3 .theme-card .card-description p {
margin: 0;
color: #72e3f0;
text-align: center;
}
main #page-container #home-page .grid-3 .theme-card:hover {
transform: none;
}
}
@media screen and (max-width: 1300px) { @media screen and (max-width: 1300px) {
main #page-container #home-page .articles-displayer, main #page-container #home-page .articles-displayer,
main #page-container #home-page .grid-3 { main #page-container #home-page .grid-3 {
......
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
.section-title { .section-title {
padding: 10px; padding: 10px;
margin: 0; margin: 0;
background-color: $light_0;
color: $medium_grey;
} }
.articles-displayer { .articles-displayer {
...@@ -139,6 +141,45 @@ ...@@ -139,6 +141,45 @@
} }
} }
} }
@media screen and (max-width: $screen_l) {
grid-template-columns: 40px auto 40px;
article {
gap: 5px;
grid-template-columns: 1fr;
grid-template-rows: 300px auto auto auto 1fr;
padding: 0;
.date {
grid-row: 2;
padding: 0 10px;
}
.title {
grid-row: 3;
padding: 0 10px;
}
.subtitle {
grid-row: 4;
padding: 0 10px;
}
.body {
grid-row: 5;
padding: 0 10px 30px;
}
.image-carousel {
grid-row: 1;
grid-column: 1;
img {
max-height: 100%;
}
.carousel-bullets {
gap: 15px;
.bullet {
width: 12px;
height: 12px;
}
}
}
}
}
} }
.grid-3 { .grid-3 {
...@@ -153,7 +194,7 @@ ...@@ -153,7 +194,7 @@
height: 240px; height: 240px;
overflow: hidden; overflow: hidden;
@include flex-center-col; @include flex-center-col;
background-image: url("/assets/images/wallpaper_binary.png"); background-color: black;
position: relative; position: relative;
img { img {
position: absolute; position: absolute;
...@@ -167,6 +208,8 @@ ...@@ -167,6 +208,8 @@
text-align: center; text-align: center;
padding: 10px 20px; padding: 10px 20px;
color: $blue_2; color: $blue_2;
display: block;
background-color: white;
} }
} }
.card-description { .card-description {
...@@ -185,6 +228,40 @@ ...@@ -185,6 +228,40 @@
} }
} }
} }
@media screen and (max-width: $screen_l) {
.grid-3 {
grid-template-columns: 1fr;
gap: 40px;
.theme-card {
.card-img {
height: 300px;
img {
min-width: unset;
height: 100%;
}
}
.card-title {
h2 {
padding: 5px 20px;
}
}
.card-description {
background-image: url("/assets/images/wallpaper_binary.png");
flex: 1;
padding: 10px 10px 20px;
p {
margin: 0;
color: $blue_3;
text-align: center;
}
}
transition: transform 0.3s;
&:hover {
transform: none;
}
}
}
}
@media screen and (max-width: $page_contents_center_width) { @media screen and (max-width: $page_contents_center_width) {
.articles-displayer, .articles-displayer,
.grid-3 { .grid-3 {
...@@ -193,6 +270,5 @@ ...@@ -193,6 +270,5 @@
.section-title { .section-title {
margin: 0 20px; margin: 0 20px;
} }
} }
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment