From df09199b0399fce8c76b7a972e4eda926da85618 Mon Sep 17 00:00:00 2001 From: benjacanas Date: Thu, 21 Apr 2022 15:17:35 -0300 Subject: [PATCH 1/2] expandedgrid y freatured blog --- src/components/FeaturedBlogs/FeaturedBlogs.js | 2 +- .../FeaturedBlogs/featuredBlogs.scss | 35 ++++++++++++++++++- src/components/expandGrid/expandGrid.scss | 8 ++--- src/context/themeContext.js | 1 - 4 files changed, 39 insertions(+), 7 deletions(-) diff --git a/src/components/FeaturedBlogs/FeaturedBlogs.js b/src/components/FeaturedBlogs/FeaturedBlogs.js index f5788f07..4232a113 100644 --- a/src/components/FeaturedBlogs/FeaturedBlogs.js +++ b/src/components/FeaturedBlogs/FeaturedBlogs.js @@ -5,7 +5,7 @@ import BlogArticle from "../BlogPage/BlogArticle/BlogArticle" const FeaturedBlogs = ({ data }) => { return ( -
+

{data.title}

{data.subtitle}
diff --git a/src/components/FeaturedBlogs/featuredBlogs.scss b/src/components/FeaturedBlogs/featuredBlogs.scss index 3987ac9f..4494d817 100644 --- a/src/components/FeaturedBlogs/featuredBlogs.scss +++ b/src/components/FeaturedBlogs/featuredBlogs.scss @@ -1,11 +1,13 @@ @import "../../styles/global.scss"; .featured { - color: $primary; + color: $primary; h2 { + margin-top: 2em; flex-grow: 1; text-align: center; font-weight: 700; + text-transform: uppercase; } h6 { text-align: center; @@ -14,12 +16,43 @@ } &-blogs { + img { + object-fit: cover; + } + display: flex; flex-direction: row; justify-content: center; & > * { flex-basis: 33%; } + + .article { + &__container { + padding: 0; + margin: 0.5em; + background-color: #efefef; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 8px; + padding: 1em; + h6 { + text-align: left; + font-weight: 700; + font-size: 18px !important; + + } + } + &__link{ + button{ + background: none; + color: $secondary; + text-decoration: underline; + padding: 0; + margin: 0 0 1em 0; + } + } + } + @media screen and (max-width: $breakpoint-lg) { flex-direction: column; } diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss index 662c1abf..046c4558 100644 --- a/src/components/expandGrid/expandGrid.scss +++ b/src/components/expandGrid/expandGrid.scss @@ -53,7 +53,7 @@ flex: 0 1 calc(calc(100% / 3) - 10px); } - @media screen and (max-width: 890px) { + @media screen and (max-width: $breakpoint-md) { flex: 0 1 100%; } @@ -68,7 +68,7 @@ flex-direction: row; height: 100%; position: relative; - @media screen and (max-width: $breakpoint-xl) { + @media screen and (max-width: $breakpoint-md) { flex-direction: column; align-items: unset; } @@ -93,7 +93,7 @@ margin-right: 0; min-width: 33%; max-width: 33%; - @media screen and (max-width: $breakpoint-xl) { + @media screen and (max-width: $breakpoint-md) { min-width: 100%; max-width: 100%; height: 400px; @@ -135,7 +135,7 @@ transition: opacity 200ms ease; opacity: 1; color: black; - width: 300px; + width: 90%; p { padding: 0; margin: 0; diff --git a/src/context/themeContext.js b/src/context/themeContext.js index 7d1b846f..a8db6678 100644 --- a/src/context/themeContext.js +++ b/src/context/themeContext.js @@ -11,7 +11,6 @@ const themes = { "--primary-container": "#faf8f8", "--title-jobs": "#5682c6", "--jobs-hover": "#f0f0f0", - "--secondary": "#3f6be8", "--secondary-container": "#25cad3", "--border-bottom": "#cdcdcd", From 12f2ed9c05b373e09e205c51bc89c4050fafc725 Mon Sep 17 00:00:00 2001 From: benjacanas Date: Thu, 21 Apr 2022 15:20:41 -0300 Subject: [PATCH 2/2] bug --- src/components/FeaturedBlogs/featuredBlogs.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/FeaturedBlogs/featuredBlogs.scss b/src/components/FeaturedBlogs/featuredBlogs.scss index 4494d817..5d6c03f2 100644 --- a/src/components/FeaturedBlogs/featuredBlogs.scss +++ b/src/components/FeaturedBlogs/featuredBlogs.scss @@ -29,7 +29,6 @@ .article { &__container { - padding: 0; margin: 0.5em; background-color: #efefef; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);