created new navbar partial

css/nav.css

@@ -1,166 +1,7 @@
-/*
-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;
-    }
-  }
+.backdrop-blur {
+  -webkit-backdrop-filter: blur(40px);
 }
 
-*/
-@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;
-    }
-  }
+.bg-semi-white {
+  background-color: rgba(255, 255, 255, 0.75);
 }
-
-.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 === */