Navigation Tabs | Learning Axis

HTML

CSS

@layer base, demo;
@layer demo {
  nav{
    --nav-item-trans-easing: linear(0, 0.009 0.7%, 0.04 1.5%, 0.154 3.1%, 0.801 9%, 1.026 11.5%, 1.171 14%, 1.21 15.2%, 1.233 16.5%, 1.237 18.1%, 1.218 19.8%, 1.004 28.5%, 0.963 31.2%, 0.945 33.9%, 0.948 37.3%, 0.999 46%, 1.013 51.2%, 0.997 68.3%, 1);
    --nav-item-trans-duration: 750ms;
    --nav-item-bg-color: rgb(29, 41, 61);
    --nav-item-bg-color-hover: rgb(69, 85, 108);
    --nav-item-text-color: white;
    --nav-item-text-color-hover: white;
    --nav-item-spacing: 2px;
    --nav-item-border-color: var(--clr-bg);
    --nav-item-bevel-offset: 2em;
    --grid-cols: .5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
    &:has(:nth-child(1):hover,:nth-child(1):focus-visible)
    { --grid-cols: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
    &:has(:nth-child(2):hover,:nth-child(2):focus-visible)
    { --grid-cols: .5fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr; }
    &:has(:nth-child(3):hover,:nth-child(3):focus-visible)
    { --grid-cols: .5fr 1fr 1fr 1fr 1fr 2fr 1fr 1fr 1fr; }
    &:has(:nth-child(4):hover,:nth-child(4):focus-visible)
    { --grid-cols: .5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr; }
    position: relative;
    display: grid;
    grid-template-columns: var(--grid-cols);
    width:min(100%,800px);
    margin-inline: auto;
    transition: grid var(--nav-item-trans-duration) var(--nav-item-trans-easing);
    & > a{
      position: relative;
      border-radius: 0 var(--nav-item-bevel-offset) var(--nav-item-bevel-offset) 0/ 0 50% 50% 0 ;
      corner-shape: bevel;
      transition: all 150ms linear;
      border: var(--nav-item-spacing) solid var(--nav-item-border-color);
      display: grid;
      place-content: center;
      padding-block: 1em;
      background-color: var(--nav-item-bg-color);
      text-decoration: none;
      color: var(--nav-item-text-color);
      font-size: clamp(.65rem, 2.5vw + .04rem, 1.4rem);
      &:not(:first-child){
        padding-left:var(--nav-item-bevel-offset);
      }
      &:target,
      &:hover,
      &:focus-visible{
        color: var(--nav-item-text-color-hover);
        background-color: var(--nav-item-bg-color-hover);
        outline: none;
      }
      grid-row: 1;
      &:nth-child(1){ grid-column: 1 / span 3; z-index:4;}
      &:nth-child(2){ grid-column: 3 / span 3; z-index:3;}
      &:nth-child(3){ grid-column: 5 / span 3; z-index:2;}
      &:nth-child(4){ grid-column: 7 / span 3; z-index:1;}
      
    }
  }
  @layer base {
    * {
      box-sizing: border-box;
    }
    :root {
      color-scheme: light dark;
      --bg-dark: rgb(12 10 9);
      --bg-light: rgb(248 2445 238);
      --txt-light: rgb(10 10 10);
      --txt-dark: rgb(245 245 245););
      --line-light: rgba(0 0 0 / .25);
      --line-dark: rgba(255 255 255 / .25);
      --clr-bg: light-dark(var(--bg-light), var(--bg-dark));
      --clr-txt: light-dark(var(--txt-light), var(--txt-dark));
      --clr-lines: light-dark(var(--line-light), var(--line-dark));
    }
    body {
      background-color: var(--clr-bg);
      color: var(--clr-txt);
      min-height: 100svh;
      margin: 0;
      padding: 2rem;
      font-family: "Jura", sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      display: grid;
      place-items: center;
      gap: 2rem;
      @supports not (corner-shape: notch) {
        &::before {
          content:"Sorry, your browser doesn't support corner-shape. ";
          position: fixed;
          top: 2rem;
          left: 50%;
          translate: -50% -50%;
          font-size: 0.8rem;
          color: white;
          background-color: red;
          padding: .25em 1em;
        }
      }
    }
  }
}