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
Hide whitespace changes
Inline Side-by-side
public/style/homepage.css
+ 6
− 6
View file @ bbfa4d23
/* Error: Undefined variable.
* ,
* 24 | color: $medium_grey;
* | ^^^^^^^^^^^^
* '
* src/homepage.scss 24:24 root stylesheet */
* ,
* 9 | background-color: $light_0;
* | ^^^^^^^^
* '
* src/homepage.scss 9:27 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 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";
}
public/style/style.css
+ 78
− 1
View file @ bbfa4d23
......@@ -214,6 +214,8 @@ main #page-container #home-page {
main #page-container #home-page .section-title {
padding: 10px;
margin: 0;
background-color: #d4d9dd;
color: #6b7880;
}
main #page-container #home-page .articles-displayer {
margin: 0 auto 40px;
......@@ -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 {
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 {
gap: 30px;
}
......@@ -370,7 +413,7 @@ main #page-container #home-page .grid-3 .theme-card .card-img {
align-items: center;
flex-direction: row;
flex-direction: column;
background-image: url("/assets/images/wallpaper_binary.png");
background-color: black;
position: relative;
}
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 {
text-align: center;
padding: 10px 20px;
color: #4baabb;
display: block;
background-color: white;
}
main #page-container #home-page .grid-3 .theme-card .card-description {
background-image: url("/assets/images/wallpaper_binary.png");
......@@ -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 {
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) {
main #page-container #home-page .articles-displayer,
main #page-container #home-page .grid-3 {
......
src/homepage.scss
+ 78
− 2
View file @ bbfa4d23
......@@ -6,6 +6,8 @@
.section-title {
padding: 10px;
margin: 0;
background-color: $light_0;
color: $medium_grey;
}
.articles-displayer {
......@@ -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 {
......@@ -153,7 +194,7 @@
height: 240px;
overflow: hidden;
@include flex-center-col;
background-image: url("/assets/images/wallpaper_binary.png");
background-color: black;
position: relative;
img {
position: absolute;
......@@ -167,6 +208,8 @@
text-align: center;
padding: 10px 20px;
color: $blue_2;
display: block;
background-color: white;
}
}
.card-description {
......@@ -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) {
.articles-displayer,
.grid-3 {
......@@ -193,6 +270,5 @@
.section-title {
margin: 0 20px;
}
}
}
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