diff --git a/src/components/BlogPage/BlogArticle/BlogArticle.scss b/src/components/BlogPage/BlogArticle/BlogArticle.scss index c89d0f70..b51c107a 100644 --- a/src/components/BlogPage/BlogArticle/BlogArticle.scss +++ b/src/components/BlogPage/BlogArticle/BlogArticle.scss @@ -23,7 +23,7 @@ justify-content: space-between; width: 100%; height: 150px; - padding: 0 15px; + padding: 0 0 0 15px; h1, h2, h3, diff --git a/src/components/FeaturedBlogs/featuredBlogs.scss b/src/components/FeaturedBlogs/featuredBlogs.scss index 5d6c03f2..3816bcd3 100644 --- a/src/components/FeaturedBlogs/featuredBlogs.scss +++ b/src/components/FeaturedBlogs/featuredBlogs.scss @@ -2,6 +2,7 @@ .featured { color: $primary; + margin-bottom: 3rem; h2 { margin-top: 2em; flex-grow: 1; @@ -16,8 +17,10 @@ } &-blogs { + align-items: center; img { object-fit: cover; + max-width: 140px; } display: flex; @@ -29,6 +32,7 @@ .article { &__container { + color: $black; margin: 0.5em; background-color: #efefef; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); @@ -38,16 +42,15 @@ text-align: left; font-weight: 700; font-size: 18px !important; - } } - &__link{ - button{ + &__link { + button { background: none; color: $secondary; text-decoration: underline; padding: 0; - margin: 0 0 1em 0; + margin: 0; } } } @@ -55,5 +58,11 @@ @media screen and (max-width: $breakpoint-lg) { flex-direction: column; } + + @media screen and (min-width: $breakpoint-lg) { + img { + max-width: 100%; + } + } } } diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss index 046c4558..aa126ad0 100644 --- a/src/components/expandGrid/expandGrid.scss +++ b/src/components/expandGrid/expandGrid.scss @@ -1,7 +1,5 @@ @import ".././../styles/global.scss"; - .expandGrid { - color: $primary; display: flex; flex-direction: column; @@ -22,14 +20,12 @@ font-weight: 400; } } - .staggered-list-content { margin-top: 3em; width: 100%; display: flex; justify-content: center; } - .list { list-style-type: none; display: flex; @@ -38,7 +34,6 @@ padding: 0 2em; width: 100%; } - .listItem { border-radius: 8px; margin: 5px; @@ -48,27 +43,23 @@ } background-color: $primary-container; cursor: pointer; - @media screen and (max-width: $breakpoint-xxl) { flex: 0 1 calc(calc(100% / 3) - 10px); } - - @media screen and (max-width: $breakpoint-md) { + @media screen and (max-width: calc($breakpoint-md - 2px)) { flex: 0 1 100%; } - &-expanded { @extend .listItem; flex-basis: 100%; } } - .listItemContent { display: flex; flex-direction: row; height: 100%; position: relative; - @media screen and (max-width: $breakpoint-md) { + @media screen and (max-width: calc($breakpoint-md - 2px)) { flex-direction: column; align-items: unset; } @@ -84,38 +75,33 @@ aspect-ratio: 1/1; margin: 0; border-radius: 8px; - &-expanded { @extend .avatar; box-shadow: 0px 4px 4px 0px #00000040; - flex-grow: 0; margin-right: 0; min-width: 33%; max-width: 33%; - @media screen and (max-width: $breakpoint-md) { + @media screen and (max-width: calc($breakpoint-md - 2px)) { min-width: 100%; max-width: 100%; height: 400px; object-fit: cover; } - @media screen and (max-width: $breakpoint-md) { + @media screen and (max-width: calc($breakpoint-md - 2px)) { height: unset; object-fit: unset; } } } - .expandedListItem .description { display: flex; flex-direction: column; } - .expandedListItem { cursor: pointer; - background-color: #d0d0d0; + background-color: #D0D0D0; } - .additional-content { box-shadow: 0px 4px 4px 0px #00000040; width: 100%; @@ -124,8 +110,6 @@ margin: 0; } } - - .listItem-more { position: absolute; inset: 0 0 20px 20px; @@ -148,7 +132,6 @@ } } } - .additional-content > div { opacity: 0; border-radius: 3px; @@ -168,7 +151,6 @@ text-align: left; } } - /* content fade in animations */ @keyframes fadeIn { 0% { @@ -179,7 +161,6 @@ opacity: 1; } } - .animated-in .additional-content > div { animation: fadeIn 0.4s forwards; -} +} \ No newline at end of file diff --git a/src/components/videoBackground/VideoBackground.js b/src/components/videoBackground/VideoBackground.js index 6e84b0f1..f83e55b8 100644 --- a/src/components/videoBackground/VideoBackground.js +++ b/src/components/videoBackground/VideoBackground.js @@ -35,7 +35,7 @@ const VideoBackground = ({