www_tf_demo/css/nav.css

/*
CSS-only and **accessible** menu based on... https://codepen.io/jonraedeke/pen/WRwJQX ...but considerably changed since then, especially due to change to Tailwind CSS
*/

.nav__item {
  margin: 0px;
}
/*
  @apply font-sans p-0 m-0;


  & a {
    @apply block py-1 px-4 mb-1 text-white no-underline transition-opacity duration-500 ease-linear;

    &:link,
    &:visited {
      @apply text-blue;
    }

    &:hover,
    &:focus {
      @apply no-underline opacity-75;
    }
  }
}

*/
@media (min-width: 900px) {
  .nav__item {
    @apply font-bold lowercase text-xs inline-block;
    font-variant: small-caps;
    letter-spacing: 0.15rem;
    & a {
      @apply inline-block pt-1 pb-0 no-underline;
    }
  }
}

.nav__icon {
  @apply block absolute cursor-pointer;
  top: 15px;
  right: 13px;
  height: 27px;
  width: 27px;
  text-indent: -9999px;
  /* hide the label */
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  /* Remove blinking cursor */
  @apply border-none text-transparent text-center;
  text-shadow: 0 0 0 gray;
  &:focus {
    @apply outline-none;
  }
}
@media (min-width: 900px) {
  .nav__icon {
    @apply hidden;
  }
}

.nav__icon-line {
  @apply absolute block bg-white rounded left-0 transition-all duration-500 w-6 h-1 ease-linear;

  &:first-child {
    @apply top-0;
  }

  &:nth-child(2) {
    top: 8px;
  }

  &:nth-child(3) {
    top: 16px;
  }
}

/* Checkbox hack for toggling mobile menu */
input[type="checkbox"] {
  @apply hidden invisible;
  &:checked {
    & ~ nav .nav__items {
      height: auto;
      /*@apply bg-black dark:bg-blue-700 transition-all duration-500 ease-linear;*/
      max-height: 30rem;
    }
    & ~ label .nav__icon-line:first-child {
      @apply top-0 -rotate-45 translate-y-2 w-6;
    }
    & ~ label .nav__icon-line:nth-child(2) {
      @apply opacity-0;
    }
    & ~ label .nav__icon-line:nth-child(3) {
      @apply rotate-45 -translate-y-2 w-6;
    }
  }
}

nav {
  @apply absolute text-left left-0 w-full transition duration-500 ease-linear scale-x-100 scale-y-0 origin-top;
  top: 100%;
  & ul {
    @apply pl-0 m-0 text-right list-none transition duration-500 ease-linear;
  }
  & li {
    @apply mb-2 inline;
    margin-right: 5%;
    @media screen and (max-width: 899px) {
      display: inherit;
    }
  }
  & a {
    @apply text-white text-lg opacity-0;
    text-decoration: none !important;
    border: 0 !important;
  } /*
  & a:hover, & a:active {
    @apply border-b-0 text-gray-500;
  }*/
}

.nav-toggle:checked ~ nav {
  transform: scale(1, 1);
  & a {
    opacity: 1;
  }
}

/* === Beginning of primary settings for larger screens === */
@media screen and (min-width: 900px) {
  .nav-toggle-label {
    @apply hidden;
  }

  header {
    @apply fixed grid grid-cols-5;
  }

  .site-logo {
    @apply z-50 text-left col-start-1 col-end-3 text-lg;
    padding-left: 8%;
  }

  nav {
    @apply mt-0 col-start-4 col-end-6;
    top: 15%;
    transform: none;
    & a {
      @apply opacity-100 relative;
    }
    & ul {
      padding-right: 10%;
      @apply text-right;
    }
    & li {
      @apply inline-block p-0 mb-0;
    }
  }
}

.site-logo-holder {
  @apply mt-1 pt-1 w-full;
  & a {
    @apply no-underline border-b-0;
  }
}
/* === End of primary settings for larger screens === */