diff --git a/resources/css/components/article-revues-toolbar.css b/resources/css/components/article-revues-toolbar.css index f64c80e..d687cc3 100644 --- a/resources/css/components/article-revues-toolbar.css +++ b/resources/css/components/article-revues-toolbar.css @@ -3,14 +3,14 @@ @apply col-span-2 container mx-auto mb-2 lg:mb-0; .tablist { - @apply flex items-center overflow-y-visible gap-8 lg:gap-12 border-b border-primary; + @apply flex items-center overflow-y-visible gap-8 lg:gap-3 xl:gap-12 border-b border-primary; position: relative; - @media screen and (max-width: 1024px) { - span { - @apply sr-only; - } + span { + @apply sr-only lg:not-sr-only; } + /* @media screen and (max-width: 1024px) { + } */ /* @media screen and (max-width: 1024px) { border-bottom: none; padding-bottom: 1em; diff --git a/resources/css/components/index-panel.css b/resources/css/components/index-panel.css index 55c5798..6f708fc 100644 --- a/resources/css/components/index-panel.css +++ b/resources/css/components/index-panel.css @@ -7,7 +7,7 @@ @apply p-4 md:p-6 !pb-0 flex gap-4 border-b border-gray-300; button { - @apply pb-6 text-base md:text-lg text-carhop-gray opacity-60 relative; + @apply pb-6 text-base md:text-lg text-carhop-gray opacity-60 relative hidden; box-sizing: border-box; @apply flex items-center gap-2; .icon { @@ -15,7 +15,7 @@ } } button#mobile-open-toggle { - @apply lg:hidden ml-auto !opacity-100; + @apply ml-auto !opacity-100; .icon { transition: transform 0.3s ease-in-out; @apply h-10 w-10; @@ -58,8 +58,8 @@ text-decoration-thickness: 1px; } - @media (max-width: 960px) { - @apply bg-carhop-green-700 relative z-50; + @media (max-width: 1024px) { + @apply bg-red-700 relative z-50; .index-panel__header { border-bottom: 0.25px solid rgba(255, 255, 255, 0.4); @@ -84,6 +84,9 @@ } @media (max-width: 1024px) { + button#mobile-open-toggle { + display: block !important; + } .index-panel__content { transition: height 0.3s ease-in-out; }