handling of the mobile menu
This commit is contained in:
parent
21b289cbcd
commit
8ec9aa548d
205
css/app.css
205
css/app.css
|
|
@ -616,16 +616,6 @@ video {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-12 {
|
|
||||||
margin-top: 3rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-4 {
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb-8 {
|
.mb-8 {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
@ -634,10 +624,6 @@ video {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-10 {
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb-4 {
|
.mb-4 {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -690,14 +676,6 @@ video {
|
||||||
max-width: 24rem;
|
max-width: 24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-w-screen-lg {
|
|
||||||
max-width: 960px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-none {
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-grow {
|
.flex-grow {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -734,14 +712,6 @@ video {
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-xl {
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border {
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-b {
|
.border-b {
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
@ -751,10 +721,6 @@ video {
|
||||||
border-color: rgb(14 165 233 / var(--tw-border-opacity));
|
border-color: rgb(14 165 233 / var(--tw-border-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-transparent {
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-primary {
|
.bg-primary {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(14 165 233 / var(--tw-bg-opacity));
|
background-color: rgb(14 165 233 / var(--tw-bg-opacity));
|
||||||
|
|
@ -775,16 +741,6 @@ video {
|
||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gray-100 {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gray-900 {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-4 {
|
.p-4 {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -814,20 +770,6 @@ video {
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.py-3 {
|
|
||||||
padding-top: 0.75rem;
|
|
||||||
padding-bottom: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-6 {
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
padding-right: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-12 {
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -852,11 +794,6 @@ video {
|
||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-3xl {
|
|
||||||
font-size: 1.875rem;
|
|
||||||
line-height: 2.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-light {
|
.font-light {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
@ -869,30 +806,14 @@ video {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-medium {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-semibold {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uppercase {
|
.uppercase {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leading-6 {
|
|
||||||
line-height: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leading-tight {
|
.leading-tight {
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tracking-tight {
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-gray-800 {
|
.text-gray-800 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(31 41 55 / var(--tw-text-opacity));
|
color: rgb(31 41 55 / var(--tw-text-opacity));
|
||||||
|
|
@ -918,16 +839,6 @@ video {
|
||||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-secondary {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(20 184 166 / var(--tw-text-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-primary {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(14 165 233 / var(--tw-text-opacity));
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-gray-700 {
|
.text-gray-700 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||||
|
|
@ -948,18 +859,6 @@ video {
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.transition-colors {
|
|
||||||
transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
|
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 150ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.duration-200 {
|
|
||||||
transition-duration: 200ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alignfull {
|
.alignfull {
|
||||||
margin: 2rem calc(50% - 50vw) !important;
|
margin: 2rem calc(50% - 50vw) !important;
|
||||||
max-width: 100vw !important;
|
max-width: 100vw !important;
|
||||||
|
|
@ -1071,36 +970,101 @@ article>*:not(.entry-content),
|
||||||
list-style-type: decimal;
|
list-style-type: decimal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus\:outline-none:focus {
|
/* ########### GENERAL ############ */
|
||||||
outline: 2px solid transparent;
|
|
||||||
outline-offset: 2px;
|
/* ########### COMPONENTS ############ */
|
||||||
|
|
||||||
|
.primary-menu-container {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 1280px;
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus\:ring-2:focus {
|
.close_btn {
|
||||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
display: none;
|
||||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus\:ring-gray-900:focus {
|
.menu-navlink {
|
||||||
--tw-ring-opacity: 1;
|
font-size: 0.875rem;
|
||||||
--tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
|
line-height: 1.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus\:ring-offset-2:focus {
|
@media (max-width: 960px) {
|
||||||
--tw-ring-offset-width: 2px;
|
#primary-menu {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
margin-top: 0px;
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(14 165 233 / var(--tw-bg-opacity));
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
transform: translateY(-110vh);
|
||||||
|
z-index: 800;
|
||||||
|
height: -webkit-fit-content;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus\:ring-offset-white:focus {
|
#primary-menu > ul {
|
||||||
--tw-ring-offset-color: #fff;
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 20rem;
|
||||||
|
min-height: 96vh;
|
||||||
|
padding-top: 5vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 600px) {
|
#primary-menu li.menu-item {
|
||||||
.sm\:w-auto {
|
margin-top: 0px;
|
||||||
width: auto;
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
--tw-text-opacity: 1;
|
||||||
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||||
|
display: block !important;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* BURGER MENU */
|
||||||
|
|
||||||
|
#primary-menu body:has(header.burger_menu_active) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#primary-menu header.burger_menu_active {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: scroll;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.burger_menu_active .close_btn {
|
||||||
|
z-index: 999;
|
||||||
|
width: 20px;
|
||||||
|
right: 20px;
|
||||||
|
top: 20px;
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.burger_menu_active #primary-menu {
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ########### BLOCKS ############ */
|
||||||
|
|
||||||
|
/* Home */
|
||||||
|
|
||||||
@media (min-width: 782px) {
|
@media (min-width: 782px) {
|
||||||
.md\:my-6 {
|
.md\:my-6 {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
|
|
@ -1164,11 +1128,6 @@ article>*:not(.entry-content),
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:text-7xl {
|
|
||||||
font-size: 4.5rem;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:text-5xl {
|
.lg\:text-5xl {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
|
||||||
|
|
@ -63,16 +63,6 @@
|
||||||
margin-right: auto
|
margin-right: auto
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-12 {
|
|
||||||
margin-top: 3rem;
|
|
||||||
margin-bottom: 3rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-4 {
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 1rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb-8 {
|
.mb-8 {
|
||||||
margin-bottom: 2rem
|
margin-bottom: 2rem
|
||||||
}
|
}
|
||||||
|
|
@ -81,10 +71,6 @@
|
||||||
margin-top: 1rem
|
margin-top: 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-10 {
|
|
||||||
margin-bottom: 2.5rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb-4 {
|
.mb-4 {
|
||||||
margin-bottom: 1rem
|
margin-bottom: 1rem
|
||||||
}
|
}
|
||||||
|
|
@ -137,14 +123,6 @@
|
||||||
max-width: 24rem
|
max-width: 24rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.max-w-screen-lg {
|
|
||||||
max-width: 960px
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-none {
|
|
||||||
flex: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-grow {
|
.flex-grow {
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
}
|
}
|
||||||
|
|
@ -181,14 +159,6 @@
|
||||||
border-radius: 0.25rem
|
border-radius: 0.25rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-xl {
|
|
||||||
border-radius: 0.75rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.border {
|
|
||||||
border-width: 1px
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-b {
|
.border-b {
|
||||||
border-bottom-width: 1px
|
border-bottom-width: 1px
|
||||||
}
|
}
|
||||||
|
|
@ -198,10 +168,6 @@
|
||||||
border-color: rgb(14 165 233 / var(--tw-border-opacity))
|
border-color: rgb(14 165 233 / var(--tw-border-opacity))
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-transparent {
|
|
||||||
border-color: transparent
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-primary {
|
.bg-primary {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(14 165 233 / var(--tw-bg-opacity))
|
background-color: rgb(14 165 233 / var(--tw-bg-opacity))
|
||||||
|
|
@ -222,16 +188,6 @@
|
||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-gray-100 {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity))
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-gray-900 {
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity))
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-4 {
|
.p-4 {
|
||||||
padding: 1rem
|
padding: 1rem
|
||||||
}
|
}
|
||||||
|
|
@ -261,20 +217,6 @@
|
||||||
padding-bottom: 1.5rem
|
padding-bottom: 1.5rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.py-3 {
|
|
||||||
padding-top: 0.75rem;
|
|
||||||
padding-bottom: 0.75rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-6 {
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
padding-right: 1.5rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-12 {
|
|
||||||
padding-bottom: 3rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center
|
text-align: center
|
||||||
}
|
}
|
||||||
|
|
@ -299,11 +241,6 @@
|
||||||
line-height: 1.25rem
|
line-height: 1.25rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-3xl {
|
|
||||||
font-size: 1.875rem;
|
|
||||||
line-height: 2.25rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-light {
|
.font-light {
|
||||||
font-weight: 300
|
font-weight: 300
|
||||||
}
|
}
|
||||||
|
|
@ -316,30 +253,14 @@
|
||||||
font-weight: 800
|
font-weight: 800
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-medium {
|
|
||||||
font-weight: 500
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-semibold {
|
|
||||||
font-weight: 600
|
|
||||||
}
|
|
||||||
|
|
||||||
.uppercase {
|
.uppercase {
|
||||||
text-transform: uppercase
|
text-transform: uppercase
|
||||||
}
|
}
|
||||||
|
|
||||||
.leading-6 {
|
|
||||||
line-height: 1.5rem
|
|
||||||
}
|
|
||||||
|
|
||||||
.leading-tight {
|
.leading-tight {
|
||||||
line-height: 1.25
|
line-height: 1.25
|
||||||
}
|
}
|
||||||
|
|
||||||
.tracking-tight {
|
|
||||||
letter-spacing: -0.025em
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-gray-800 {
|
.text-gray-800 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(31 41 55 / var(--tw-text-opacity))
|
color: rgb(31 41 55 / var(--tw-text-opacity))
|
||||||
|
|
@ -365,16 +286,6 @@
|
||||||
color: rgb(75 85 99 / var(--tw-text-opacity))
|
color: rgb(75 85 99 / var(--tw-text-opacity))
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-secondary {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(20 184 166 / var(--tw-text-opacity))
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-primary {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(14 165 233 / var(--tw-text-opacity))
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-gray-700 {
|
.text-gray-700 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(55 65 81 / var(--tw-text-opacity))
|
color: rgb(55 65 81 / var(--tw-text-opacity))
|
||||||
|
|
@ -395,18 +306,6 @@
|
||||||
-moz-osx-font-smoothing: grayscale
|
-moz-osx-font-smoothing: grayscale
|
||||||
}
|
}
|
||||||
|
|
||||||
.transition-colors {
|
|
||||||
transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
|
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 150ms
|
|
||||||
}
|
|
||||||
|
|
||||||
.duration-200 {
|
|
||||||
transition-duration: 200ms
|
|
||||||
}
|
|
||||||
|
|
||||||
.alignfull {
|
.alignfull {
|
||||||
margin: 2rem calc(50% - 50vw) !important;
|
margin: 2rem calc(50% - 50vw) !important;
|
||||||
max-width: 100vw !important;
|
max-width: 100vw !important;
|
||||||
|
|
@ -482,36 +381,6 @@ body {
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus\:outline-none:focus {
|
|
||||||
outline: 2px solid transparent;
|
|
||||||
outline-offset: 2px
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus\:ring-2:focus {
|
|
||||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
||||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
||||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus\:ring-gray-900:focus {
|
|
||||||
--tw-ring-opacity: 1;
|
|
||||||
--tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity))
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus\:ring-offset-2:focus {
|
|
||||||
--tw-ring-offset-width: 2px
|
|
||||||
}
|
|
||||||
|
|
||||||
.focus\:ring-offset-white:focus {
|
|
||||||
--tw-ring-offset-color: #fff
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
.sm\:w-auto {
|
|
||||||
width: auto
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 782px) {
|
@media (min-width: 782px) {
|
||||||
.md\:my-6 {
|
.md\:my-6 {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
|
|
@ -575,11 +444,6 @@ body {
|
||||||
padding: 0px
|
padding: 0px
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:text-7xl {
|
|
||||||
font-size: 4.5rem;
|
|
||||||
line-height: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:text-5xl {
|
.lg\:text-5xl {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
line-height: 1
|
line-height: 1
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,8 @@
|
||||||
/**
|
/**
|
||||||
* Theme setup.
|
* Theme setup.
|
||||||
*/
|
*/
|
||||||
function tailpress_setup() {
|
function tailpress_setup()
|
||||||
|
{
|
||||||
|
|
||||||
// ##### Setup 🡒 Navigation
|
// ##### Setup 🡒 Navigation
|
||||||
|
|
||||||
|
|
@ -43,7 +44,8 @@ add_action( 'after_setup_theme', 'tailpress_setup' );
|
||||||
|
|
||||||
// ##### Enqueue Theme assets 🡒 Front
|
// ##### Enqueue Theme assets 🡒 Front
|
||||||
|
|
||||||
function tailpress_enqueue_scripts() {
|
function tailpress_enqueue_scripts()
|
||||||
|
{
|
||||||
$theme = wp_get_theme();
|
$theme = wp_get_theme();
|
||||||
|
|
||||||
wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version'));
|
wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version'));
|
||||||
|
|
@ -53,7 +55,8 @@ function tailpress_enqueue_scripts() {
|
||||||
|
|
||||||
// ##### Enqueue Theme assets 🡒 Back
|
// ##### Enqueue Theme assets 🡒 Back
|
||||||
|
|
||||||
function enqueue_gutenberg_back_styles() {
|
function enqueue_gutenberg_back_styles()
|
||||||
|
{
|
||||||
// wp_enqueue_style( 'tailpress_back', tailpress_asset( 'css/app.css' ), array() );
|
// wp_enqueue_style( 'tailpress_back', tailpress_asset( 'css/app.css' ), array() );
|
||||||
}
|
}
|
||||||
add_action('enqueue_block_editor_assets', 'enqueue_gutenberg_back_styles');
|
add_action('enqueue_block_editor_assets', 'enqueue_gutenberg_back_styles');
|
||||||
|
|
@ -68,7 +71,8 @@ add_action( 'wp_enqueue_scripts', 'tailpress_enqueue_scripts' );
|
||||||
*
|
*
|
||||||
* @return string
|
* @return string
|
||||||
*/
|
*/
|
||||||
function tailpress_asset( $path ) {
|
function tailpress_asset($path)
|
||||||
|
{
|
||||||
if (wp_get_environment_type() === 'production') {
|
if (wp_get_environment_type() === 'production') {
|
||||||
return get_stylesheet_directory_uri() . '/' . $path;
|
return get_stylesheet_directory_uri() . '/' . $path;
|
||||||
}
|
}
|
||||||
|
|
@ -85,7 +89,8 @@ function tailpress_asset( $path ) {
|
||||||
*
|
*
|
||||||
* @return array
|
* @return array
|
||||||
*/
|
*/
|
||||||
function tailpress_nav_menu_add_li_class( $classes, $item, $args, $depth ) {
|
function tailpress_nav_menu_add_li_class($classes, $item, $args, $depth)
|
||||||
|
{
|
||||||
if (isset($args->li_class)) {
|
if (isset($args->li_class)) {
|
||||||
$classes[] = $args->li_class;
|
$classes[] = $args->li_class;
|
||||||
}
|
}
|
||||||
|
|
@ -108,7 +113,8 @@ add_filter( 'nav_menu_css_class', 'tailpress_nav_menu_add_li_class', 10, 4 );
|
||||||
*
|
*
|
||||||
* @return array
|
* @return array
|
||||||
*/
|
*/
|
||||||
function tailpress_nav_menu_add_submenu_class( $classes, $args, $depth ) {
|
function tailpress_nav_menu_add_submenu_class($classes, $args, $depth)
|
||||||
|
{
|
||||||
if (isset($args->submenu_class)) {
|
if (isset($args->submenu_class)) {
|
||||||
$classes[] = $args->submenu_class;
|
$classes[] = $args->submenu_class;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
16
header.php
16
header.php
|
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html <?php language_attributes(); ?>>
|
<html <?php language_attributes(); ?>>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="<?php bloginfo('charset'); ?>">
|
<meta charset="<?php bloginfo('charset'); ?>">
|
||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width">
|
||||||
|
|
@ -17,9 +18,9 @@
|
||||||
|
|
||||||
<?php do_action('tailpress_header'); ?>
|
<?php do_action('tailpress_header'); ?>
|
||||||
|
|
||||||
<header>
|
<header id="primary-header">
|
||||||
|
|
||||||
<div class="mx-auto container">
|
<div class="primary-menu-container">
|
||||||
<div class="lg:flex lg:justify-between lg:items-center border-b py-6">
|
<div class="lg:flex lg:justify-between lg:items-center border-b py-6">
|
||||||
<div class="flex justify-between items-center">
|
<div class="flex justify-between items-center">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -39,12 +40,10 @@
|
||||||
|
|
||||||
<div class="lg:hidden">
|
<div class="lg:hidden">
|
||||||
<a href="#" aria-label="Toggle navigation" id="primary-menu-toggle">
|
<a href="#" aria-label="Toggle navigation" id="primary-menu-toggle">
|
||||||
<svg viewBox="0 0 20 20" class="inline-block w-6 h-6" version="1.1"
|
<svg viewBox="0 0 20 20" class="inline-block w-6 h-6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
|
<g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
|
||||||
<g id="icon-shape">
|
<g id="icon-shape">
|
||||||
<path d="M0,3 L20,3 L20,5 L0,5 L0,3 Z M0,9 L20,9 L20,11 L0,11 L0,9 Z M0,15 L20,15 L20,17 L0,17 L0,15 Z"
|
<path d="M0,3 L20,3 L20,5 L0,5 L0,3 Z M0,9 L20,9 L20,11 L0,11 L0,9 Z M0,15 L20,15 L20,17 L0,17 L0,15 Z" id="Combined-Shape"></path>
|
||||||
id="Combined-Shape"></path>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -56,14 +55,15 @@
|
||||||
wp_nav_menu(
|
wp_nav_menu(
|
||||||
array(
|
array(
|
||||||
'container_id' => 'primary-menu',
|
'container_id' => 'primary-menu',
|
||||||
'container_class' => 'hidden bg-gray-100 mt-4 p-4 lg:mt-0 lg:p-0 lg:bg-transparent lg:block',
|
'container_class' => 'bg-primary mt-4 p-4 lg:mt-0 lg:p-0 lg:bg-transparent lg:block',
|
||||||
'menu_class' => 'lg:flex lg:-mx-4',
|
'menu_class' => 'lg:flex lg:-mx-4',
|
||||||
'theme_location' => 'primary',
|
'theme_location' => 'primary',
|
||||||
'li_class' => 'lg:mx-4',
|
'li_class' => 'lg:mx-4 menu-navlink',
|
||||||
'fallback_cb' => false,
|
'fallback_cb' => false,
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
?>
|
?>
|
||||||
|
<img class="close_btn" src="<?php echo get_template_directory_uri() . '/resources/img/close_menu_icon.svg' ?>" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
20
js/app.js
20
js/app.js
|
|
@ -1,10 +1,24 @@
|
||||||
(() => {
|
(() => {
|
||||||
// resources/js/app.js
|
// resources/js/header.js
|
||||||
window.addEventListener("load", function() {
|
function menuInit() {
|
||||||
let main_navigation = document.querySelector("#primary-menu");
|
let main_navigation = document.querySelector("#primary-menu");
|
||||||
|
const header = document.querySelector("#primary-header");
|
||||||
|
const close = header.querySelector(".close_btn");
|
||||||
|
console.log(close);
|
||||||
document.querySelector("#primary-menu-toggle").addEventListener("click", function(e) {
|
document.querySelector("#primary-menu-toggle").addEventListener("click", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
main_navigation.classList.toggle("hidden");
|
header.classList.toggle("burger_menu_active");
|
||||||
});
|
});
|
||||||
|
close.addEventListener("click", function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
header.classList.toggle("burger_menu_active");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// resources/js/app.js
|
||||||
|
console.log("menuInit");
|
||||||
|
console.log("menuIniteeeee");
|
||||||
|
window.addEventListener("load", function() {
|
||||||
|
menuInit();
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
.primary-menu-container {
|
||||||
|
@apply mx-auto max-w-screen-xl px-8;
|
||||||
|
}
|
||||||
|
.close_btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.menu-navlink {
|
||||||
|
@apply font-medium
|
||||||
|
text-sm
|
||||||
|
uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
#primary-menu {
|
||||||
|
@apply bg-primary
|
||||||
|
mt-0
|
||||||
|
left-0
|
||||||
|
absolute;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
transform: translateY(-110vh);
|
||||||
|
z-index: 800;
|
||||||
|
height: fit-content;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
@apply max-w-xs
|
||||||
|
mx-auto;
|
||||||
|
min-height: 96vh;
|
||||||
|
padding-top: 5vh;
|
||||||
|
}
|
||||||
|
li.menu-item {
|
||||||
|
@apply mt-0
|
||||||
|
text-center
|
||||||
|
text-white
|
||||||
|
font-medium
|
||||||
|
py-8
|
||||||
|
text-lg;
|
||||||
|
display: block !important;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
/* BURGER MENU */
|
||||||
|
body:has(header.burger_menu_active) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.burger_menu_active {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: scroll;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.burger_menu_active {
|
||||||
|
.close_btn {
|
||||||
|
z-index: 999;
|
||||||
|
width: 20px;
|
||||||
|
right: 20px;
|
||||||
|
top: 20px;
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
#primary-menu {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
6
resources/img/close_menu_icon.svg
Normal file
6
resources/img/close_menu_icon.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="329.871" height="329.87" viewBox="0 0 329.871 329.87">
|
||||||
|
<g id="Groupe_784" data-name="Groupe 784" transform="translate(19045.936 1289.935)">
|
||||||
|
<line id="Ligne_43" data-name="Ligne 43" y1="303" x2="303" transform="translate(-19032.5 -1276.5)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="19"/>
|
||||||
|
<line id="Ligne_44" data-name="Ligne 44" x1="303" y1="303" transform="translate(-19032.5 -1276.5)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="19"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 547 B |
|
|
@ -1,8 +1,6 @@
|
||||||
// Navigation toggle
|
import menuInit from './header';
|
||||||
|
console.log('menuInit');
|
||||||
|
console.log('menuIniteeeee');
|
||||||
window.addEventListener('load', function () {
|
window.addEventListener('load', function () {
|
||||||
let main_navigation = document.querySelector('#primary-menu');
|
menuInit();
|
||||||
document.querySelector('#primary-menu-toggle').addEventListener('click', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
main_navigation.classList.toggle('hidden');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
18
resources/js/header.js
Normal file
18
resources/js/header.js
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
export default function menuInit() {
|
||||||
|
let main_navigation = document.querySelector('#primary-menu');
|
||||||
|
const header = document.querySelector('#primary-header');
|
||||||
|
const close = header.querySelector('.close_btn');
|
||||||
|
console.log(close)
|
||||||
|
|
||||||
|
document.querySelector('#primary-menu-toggle').addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
// main_navigation.classList.toggle('hidden');
|
||||||
|
header.classList.toggle('burger_menu_active');
|
||||||
|
});
|
||||||
|
|
||||||
|
close.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
// main_navigation.classList.toggle('hidden');
|
||||||
|
header.classList.toggle('burger_menu_active');
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user