From bbfa4d236c6f12d88e15c583d25286877660050f Mon Sep 17 00:00:00 2001
From: peter_rabbit <pierrejarriges@gmail.com>
Date: Wed, 20 Jan 2021 22:11:20 +0100
Subject: [PATCH] feat:responsive home page
---
public/style/homepage.css | 12 +++---
public/style/style.css | 79 +++++++++++++++++++++++++++++++++++++-
src/homepage.scss | 80 ++++++++++++++++++++++++++++++++++++++-
3 files changed, 162 insertions(+), 9 deletions(-)
diff --git a/public/style/homepage.css b/public/style/homepage.css
index cfc4dbd..b622117 100644
--- a/public/style/homepage.css
+++ b/public/style/homepage.css
@@ -1,9 +1,9 @@
/* 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";
}
diff --git a/public/style/style.css b/public/style/style.css
index f7686bf..c498e8b 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -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 {
diff --git a/src/homepage.scss b/src/homepage.scss
index f73960c..8ee0bc2 100644
--- a/src/homepage.scss
+++ b/src/homepage.scss
@@ -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;
}
-
}
}
--
GitLab