doc-utils.css

:root {
  --header-index: 2;
  --footer-index: 2;
  --aside-index: 1;
  --toTop-btn-index: 2;
  --code-wrapper: #2d2d2d;
}

.flex-align-center {
  display: flex;
  align-items: center;
}
.flex-col {
  display: center;
  flex-direction: column;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.component-container {
  padding: 1.6rem;
  margin: 3rem 0;
  box-shadow: 0 0 10px -6px var(--primary-text);
  border: 1px solid var(--secondary-text);
  border-radius: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.component-desc {
  margin-top: 3.2rem;
}
.code_wrapper {
  background: var(--secondary-color);
}

/* header */
.cl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-area: header;
  background: var(--light-text);
  color: var(--secondary-color);
  padding: 1.6rem 5.4rem 1.6rem 4rem;
  box-shadow: 0 0 10px -4px var(--secondary-text);
  z-index: var(--header-index);
}
.btn.hamburger {
  margin-right: 2rem;
  display: none;
}
.hamburger i {
  font-size: 1.2em;
}
.artsy-logo {
  height: 5rem;
}
.right-side {
  display: flex;
  align-items:center;
  gap: 2rem;
}
.mode-toggle {
  cursor: pointer;
}

/* footer */
.cl-footer {
  grid-area: footer;
  min-width: 100vw;
  padding: 1rem;
  flex-direction: column;
  gap: 1rem;
  background: var(--light-text);
  z-index: var(--footer-index);
}
.social-logos i,
.heart-logo {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-content: center;
  margin: 0.5rem;
}
.heart-logo {
  color: var(--input-err);
}

/* aside  */
.cl-aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  padding: 3rem 0 0 6rem;
  justify-content: center safe;
  overflow: auto;
  min-width: 30rem;
  z-index: var(--aside-index);
}
.cl-aside a {
  font-size: 1.8rem;
  padding: 0.8rem;
}
.cl-aside a {
  color: var(--secondary-color);
  transition: padding 1s ease-out;
  text-transform: capitalize;
}
.cl-aside > a:hover {
  color: var(--primary-color);
  padding-left: 2rem;
}
.active-tab {
  cursor: pointer;
  text-decoration: underline solid var(--primary-color);
  text-underline-position: under;
}

/* main */
.cl-main {
  grid-area: main;
  overflow-y: auto;
  padding: 5rem;
}

/* scrollbar css */
.cl-aside::-webkit-scrollbar,
.cl-main::-webkit-scrollbar {
  width: 1rem;
}
.cl-aside::-webkit-scrollbar-thumb,
.cl-main::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
  border-radius: 1rem;
}

.cl-body {
  height: 100vh;
  max-width: 100%;
  background: var(--light-bg);
  color: var(--primary-text);
  display: grid;
  grid-template-columns: auto auto repeat(4, 1fr);
  grid-template-rows: auto 1fr 1fr 1fr 1fr auto;
  grid-template-areas:
    "header header header header header header"
    "aside  aside  main   main   main   main"
    "aside  aside  main   main   main   main"
    "aside  aside  main   main   main   main"
    "aside  aside  main   main   main   main"
    "footer  footer footer  footer  footer   footer";
}

.list {
  display: flex;
  flex-direction: column;
  margin: auto;
  gap: 1rem;
}
.highlight-text {
  background: var(--primary-color);
  padding: 0 1rem;
  color: var(--light-text);
  border-radius: 1rem;
}
.to-top-btn {
  position: absolute;
  bottom: 5rem;
  right: 5rem;
  z-index: var(--toTop-btn-index);
}
.to-top-btn .fa-rocket {
  transform: rotateZ(-45deg);
}

/* medeia queries */
@media screen and (max-width: 768px) {
  .cl-body {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "header header header header header header"
      "main  main  main   main   main   main"
      "main  main  main   main   main   main"
      "main  main  main   main   main   main"
      "main  main  main   main   main   main"
      "footer footer footer footer footer footer";
  }
  .cl-aside {
    position: absolute;
    left: 0;
    top: 7rem;
    background: var(--light-bg);
    height: calc(100vh - 16rem);
    transform: translateX(-100%);
    transition: translateX 2s ease-in;
  }
  .cl-aside.show {
    transform: translateX(0);
    transition: transform 1s ease-in;
  }
  .btn.hamburger {
    display: flex;
  }
  .cl-header h3 {
    display: none;
  }
}