From 063db107bdb1a362d71dd928554d159ef0387c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Mon, 5 Sep 2022 13:44:34 +0200
Subject: [PATCH] [FIX] background image opacity
---
main/static/main/css/styles.css | 21 +++++++++++++++++++
.../source/css/atoms/extra_sizing.pcss | 16 ++++++++++++++
.../source/css/molecules/carousels.pcss | 4 ++++
3 files changed, 41 insertions(+)
diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index de0ac30f..e4e023c0 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -1538,9 +1538,26 @@ video {
.photo-header {
height: 414px;
+ position: relative;
}
+.photo-header:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: black;
+ opacity: 0.4;
+ z-index: 1;
+ }
+
+.photo-header > div {
+ z-index: 10;
+ }
+
@media (min-width: 768px) {
.photo-header {
@@ -2478,6 +2495,10 @@ p{
position: relative;
}
+.header-carousel img {
+ filter: brightness(60%);
+ }
+
.header-carousel .header-carousel--text{
font-family: Bebas Neue, Helvetica, Arial, sans-serif;
}
diff --git a/main/styleguide/source/css/atoms/extra_sizing.pcss b/main/styleguide/source/css/atoms/extra_sizing.pcss
index 070b5e13..9fc72e2a 100644
--- a/main/styleguide/source/css/atoms/extra_sizing.pcss
+++ b/main/styleguide/source/css/atoms/extra_sizing.pcss
@@ -14,7 +14,23 @@
.photo-header {
height: 414px;
+ position: relative;
+
+ &:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: black;
+ opacity: 0.4;
+ z-index: 1;
+ }
+ > div {
+ z-index: 10;
+ }
@screen md {
height: 40vw;
}
diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss
index e43cfd55..5fdb49d9 100644
--- a/main/styleguide/source/css/molecules/carousels.pcss
+++ b/main/styleguide/source/css/molecules/carousels.pcss
@@ -29,6 +29,10 @@
margin: 0 auto;
position: relative;
+ img {
+ filter: brightness(60%);
+ }
+
.header-carousel--text {
@apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl;
max-width: 1200px;
--
GitLab