diff --git a/src/assets/img/frog-cwak.png b/src/assets/img/section-collective-active.png similarity index 100% rename from src/assets/img/frog-cwak.png rename to src/assets/img/section-collective-active.png diff --git a/src/lib/section.html b/src/lib/section.html index 122784d..1f587b9 100644 --- a/src/lib/section.html +++ b/src/lib/section.html @@ -3,6 +3,7 @@ id, title_picture, title_picture_hover = None, + title_picture_active = None, title_picture_offset = "0px", title_color = "var(--color-text)") -%} @@ -14,6 +15,7 @@ color: {{ title_color }}; --picture-url:url('{{ title_picture }}'); --picture-hover-url:url('{{ title_picture_hover or title_picture }}'); + --picture-active-url:url('{{ title_picture_active or title_picture }}'); --picture-offset: {{ title_picture_offset }}; " > diff --git a/src/lib/section.scss b/src/lib/section.scss index ceac9a5..48388ca 100644 --- a/src/lib/section.scss +++ b/src/lib/section.scss @@ -18,16 +18,12 @@ } &--title { - z-index: -1; - background: transparent; position: relative; margin-top: 110px; align-self: center; &::before { - z-index: -1; - position: absolute; top: -110px; left: var(--picture-offset); @@ -42,6 +38,10 @@ background-image: var(--picture-hover-url); } + &:active::before { + background-image: var(--picture-active-url); + } + @media ($mobile-breakpoint) { margin-top: 70px; diff --git a/src/pages/index/presentation.html b/src/pages/index/presentation.html index bba5c26..9f1f2c8 100644 --- a/src/pages/index/presentation.html +++ b/src/pages/index/presentation.html @@ -12,6 +12,7 @@ "collective", "/img/section-collective.png", title_picture_hover = "/img/section-collective-hover.png", + title_picture_active = "/img/section-collective-active.png", title_picture_offset = "170px" ) %}