From f7beb90913f68270186d2b0525e4b5320ebdc9dc 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:24:27 +0200
Subject: [PATCH] [FIX] header for mac
---
main/static/main/css/styles.css | 44 +++++++++----------
.../_patterns/organisms/header.mustache | 4 +-
.../source/css/organisms/navbar.pcss | 8 +++-
.../main/includes/layout/header.html | 4 +-
4 files changed, 31 insertions(+), 29 deletions(-)
diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index 3c569cd6..57b082e7 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -3215,10 +3215,20 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
}
.navbar-background {
- background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
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:
@@ -3601,12 +3611,6 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
height: 100%;
}
-.h-fit{
- height: -webkit-fit-content;
- height: -moz-fit-content;
- height: fit-content;
-}
-
.h-32{
height: 8rem;
}
@@ -3627,6 +3631,12 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
height: 3rem;
}
+.h-fit{
+ height: -webkit-fit-content;
+ height: -moz-fit-content;
+ height: fit-content;
+}
+
.max-h-20{
max-height: 5rem;
}
@@ -4515,11 +4525,6 @@ 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;
@@ -4799,14 +4804,9 @@ a.icon-link:hover span{
margin: 0px;
}
- .xl\:my-2{
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- }
-
- .xl\:my-3{
- margin-top: 0.75rem;
- margin-bottom: 0.75rem;
+ .xl\:my-4{
+ margin-top: 1rem;
+ margin-bottom: 1rem;
}
.xl\:mr-2{
@@ -5068,10 +5068,6 @@ 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 883b18c8..e839225f 100644
--- a/main/styleguide/source/_patterns/organisms/header.mustache
+++ b/main/styleguide/source/_patterns/organisms/header.mustache
@@ -1,8 +1,8 @@
<!-- Navbar -->
<nav
- class="navbar-background bg-black xl:duration-200 relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full hover:bg-black">
+ class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full">
<!-- Logo -->
- <a href="" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-2 xl:my-3">
+ <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="">
</a>
<!-- Flex container -->
diff --git a/main/styleguide/source/css/organisms/navbar.pcss b/main/styleguide/source/css/organisms/navbar.pcss
index cf280495..c84f0e26 100644
--- a/main/styleguide/source/css/organisms/navbar.pcss
+++ b/main/styleguide/source/css/organisms/navbar.pcss
@@ -37,8 +37,14 @@
}
.navbar-background {
- background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
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 a1848e7c..6031998d 100644
--- a/main/templates/main/includes/layout/header.html
+++ b/main/templates/main/includes/layout/header.html
@@ -1,9 +1,9 @@
{% load static wagtailcore_tags %}
<!-- Navbar -->
-<nav class="navbar-background bg-black xl:duration-200 relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full hover:bg-black">
+<nav class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full">
<!-- Logo -->
- <a href="/" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-2 xl:my-3">
+ <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="">
</a>
<!-- Flex container -->
--
GitLab