popover implementation

Jacky Zhao

2022-01-03 4a3c4fdef550547aa80947ebaff1bda44b943d4d

 assets/base.scss

@@ -179,8 +179,7 @@
    font-family: Source Sans Pro;
    font-weight: 600;

    // internal link
    &[href^="./"], &[href^="/"] {
    &.internal-link {
      text-decoration: none;
      background-color: transparentize(#8f9fa9, 0.85);
      padding: 0 0.1em;
@@ -464,3 +463,33 @@
    }
  }
}

.popover {
  z-index: 999;
  position: absolute;
  width: 15em;
  display: inline;
  background-color: var(--light);
  padding: 1em;
  border: 1px solid var(--outlinegray);
  border-radius: 5px;
  transform: translate(-50%, 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition-delay: 0.3s;

  &.visible {
    opacity: 1;
    transform: translate(-50%, 20%);
  }

  & > h3 {
    margin: 0.5em 0;
  }

  & > p {
    margin: 0;
    font-weight: 400;
  }
}