pocketlang/docs/static/css/docs.css

:root {
  --navigation-width: 300px;

  /* Horizontal padding of the content. */
  --content-h-padding: 30px;

  /* These values used to calculate margin top for smaller screen. */
  --navtop-v-margin: 15px; /* Vertical margin. */
  --navtop-height: 30px; /* Height of it's content. */

  --navbar-height: calc(var(--navtop-v-margin) * 2 + var(--navtop-height));

  --nav-h-padding: 24px; /* Navigation content horizontal padding. */

  
  --color-nav-bg: var(--color-theme);
  --color-nav-font: white;
  --color-title-underline: #d8dee4;
  --color-footer-font: #616161;
  --color-nav-section-hover: #5988bf;
}

html {
  scroll-padding-top: var(--navbar-height);
}

/*****************************************************************************/
/* BASIC LAYOUT STYLES                                                       */
/*****************************************************************************/

#navigation {
  position: fixed;
  width: var(--navigation-width);
  height: 100vh;
  top: 0; bottom: 0;
  z-index: 1;
  overflow-y: auto;
  background-color: var(--color-nav-bg);
  color: var(--color-nav-font);
  user-select: none;
}

#main {
  margin-left: var(--navigation-width);
  display: flex;
  color: var(--color-default-font);
}

#content-body {
  padding: 0px var(--content-h-padding);
  flex: 1;
}

#table-of-content {
  position: sticky;
  top: 0;

  min-width: 300px;
  width: auto;
  max-width: 500px;
  height: 100vh;
}

/*****************************************************************************/
/* NAVIGATION                                                                */
/*****************************************************************************/

#navigation a {
  color: var(--color-nav-font);
}

/* To show an empty space below, after toggiling in smaller screen. */
#navtree {
  padding-bottom: 30px;
}

/* For smaller screen the margin will be overriden. */
#navtop {
  padding: var(--nav-h-padding) 20px;
}

/* Title on the navigation top. */
#navtop h1 {
  font-size: 18px;
}

#toggle-menu {
  display: none;
  cursor: pointer;
}

.nav-section {
  font-size: 14px;
  font-weight: bolder;
  padding: 8px var(--nav-h-padding);
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.nav-section:hover, .nav-topics li:hover {
  background-color: var(--color-nav-section-hover);
}

.nav-section .collapse-arrow {
  transform: rotate(180deg);
}

.nav-section.collapsed .collapse-arrow {
  transform: rotate(0deg);
}

.nav-topics.collapsed {
  display: none;
}

.nav-topics a {
  font-size: 14px;
  font-weight: normal;
  padding: 6px 0px 6px 15px;
  margin-left: var(--nav-h-padding);
  border-left: 2px solid #3b3b3b66;

  display: block;
  text-decoration: none;
}

/*****************************************************************************/
/* MAIN                                                                      */
/*****************************************************************************/

#main a:not(.anchor) {
  color: var(--color-link);
}

#main a:not(.anchor):hover {
  text-decoration: underline;
}

#content-body ol, #content-body ul {
  padding-left: 32px;
  margin-bottom: 16px;
}

#content-body li {
  margin-top: 8px;
}

/*****************************************************************************/
/* TABLE OF CONTENT                                                          */
/*****************************************************************************/

#table-of-content a:hover {
  text-decoration: underline;
}

#table-of-content {
  padding: 30px 30px 0px 10px;
}

#table-of-content h3 {
  margin-bottom: 10px;
  font-size: 17px;
}

#table-of-content li {
  margin-top: 5px;
  font-size: 15px;
  font-weight: 300;
}

#content-footer {
  font-weight: bolder;
  font-size: 13px;

  margin-top: 30px;
  padding-top: 10px;
  margin-bottom: 30px;
  border-top: 1px solid var(--color-title-underline);
  color: var(--color-footer-font);
}

/*****************************************************************************/
/* MARKDOWN CONTENT                                                          */
/*****************************************************************************/

#content-body h1 { /* h1 are page titles. */
  font-size: 32px;
  margin-top: 25px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-title-underline);
}

#content-body h2 { /* h2 are function names as title. */
  font-size: 24px;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-title-underline);
}

#content-body h3 { /* h3 are sub heading inside a topic. */
  font-size: 19px;
  margin: 10px 0px;
}

#content-body p {
  margin-top: 16px;
  margin-bottom: 16px;
  line-height: 26px;
}

/*****************************************************************************/
/* INLINE                                                                    */
/*****************************************************************************/

.flex { display: flex; }
.flac { align-items: center; }
.fljc { justify-content: center; }
.flsb { justify-content: space-between; }

/*****************************************************************************/
/* MEDIA SIZE OVERRIDE                                                       */
/*****************************************************************************/

@media screen and (max-width: 995px) {
  #navigation {
    height: 100vh;
    width: 100%;
    bottom: auto;
  }
  #navigation.collapsed {
    height: auto;
  }

  #navtop {
    padding: var(--navtop-v-margin) 20px;
  }

  #logo-white {
    display: none;
  }

  #navigation.collapsed #navtree {
    display: none;
  }

  #table-of-content {
    padding-left: var(--content-h-padding); /* Match the content body padding. */
    top: var(--navbar-height);
  }

  #main {
    margin-top: var(--navbar-height);
    margin-left: 0;
  }

  #toggle-menu {
    display: block;
  }
}

@media screen and (max-width: 770px) {
  #main {
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
  }
  #table-of-content {
    position: relative;
    top: 0;
    height: auto;
  }
}