From 2ce2dd52aae5084a75682b8d2ed53a6ddfbadea7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Wed, 7 Sep 2022 15:33:56 +0200
Subject: [PATCH] [FIX] header
---
main/static/main/css/styles.css | 20 +++++++++----------
.../_patterns/organisms/header.mustache | 2 +-
.../source/css/organisms/navbar.pcss | 7 -------
.../main/includes/layout/header.html | 2 +-
4 files changed, 11 insertions(+), 20 deletions(-)
diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index 57b082e7..bd48a445 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -3218,17 +3218,6 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
min-height: 63px;
}
-@media (min-width: 1200px) {
-
-.navbar-background {
- background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%)
-}
- .navbar-background:hover {
- background: black;
- transition: all 400ms ease-out;
- }
- }
-
.main-menu-grid {
max-width: none;
grid-template-areas:
@@ -4525,6 +4514,11 @@ a.icon-link:hover span{
width: 100%;
}
+.hover\:bg-black:hover{
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
.hover\:no-underline:hover{
-webkit-text-decoration-line: none;
text-decoration-line: none;
@@ -5068,6 +5062,10 @@ a.icon-link:hover span{
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
+
+ .xl\:duration-200{
+ transition-duration: 200ms;
+ }
}
@media (min-width: 1366px){
diff --git a/main/styleguide/source/_patterns/organisms/header.mustache b/main/styleguide/source/_patterns/organisms/header.mustache
index e839225f..2989f2a8 100644
--- a/main/styleguide/source/_patterns/organisms/header.mustache
+++ b/main/styleguide/source/_patterns/organisms/header.mustache
@@ -1,6 +1,6 @@
<!-- Navbar -->
<nav
- class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full">
+ class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full xl:duration-200 hover:bg-black">
<!-- Logo -->
<a href="" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-4">
<img src="../../images/logo-full-black.svg" alt="">
diff --git a/main/styleguide/source/css/organisms/navbar.pcss b/main/styleguide/source/css/organisms/navbar.pcss
index c84f0e26..3bdba1c7 100644
--- a/main/styleguide/source/css/organisms/navbar.pcss
+++ b/main/styleguide/source/css/organisms/navbar.pcss
@@ -38,13 +38,6 @@
.navbar-background {
min-height: 63px;
- @screen xl {
- background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
- &:hover {
- background: black;
- transition: all 400ms ease-out;
- }
- }
}
.main-menu-grid {
max-width: none;
diff --git a/main/templates/main/includes/layout/header.html b/main/templates/main/includes/layout/header.html
index 6031998d..8955d2a5 100644
--- a/main/templates/main/includes/layout/header.html
+++ b/main/templates/main/includes/layout/header.html
@@ -1,7 +1,7 @@
{% load static wagtailcore_tags %}
<!-- Navbar -->
-<nav class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full">
+<nav class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full xl:duration-200 hover:bg-black">
<!-- Logo -->
<a href="/" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-4">
<img src="{% static "shared/img/logo-full-black.svg" %}" alt="">
--
GitLab