title.less

@import "./base.less";

#titleCard {
  display: block;
  .absolute();

  > #titleWriter {
    .absoluteCenter();
    .titleText();
    white-space: pre;
  }

  > #subTitleWriter {
    position: absolute;
    top: 60vh; left: 50%;
    .titleText(@pink);
    font-size: 5vh;
    transform: translate(-50%);
    transition: opacity 1s;
    opacity: 0;
    white-space: pre;
    background: black;
  }
}

#bug {
  position: fixed;
  bottom: 36px; right: 64px;
  color: white;
  background: white;
  // text-shadow: 2px 2px 4px white;
  border: thin solid lightgray;
  padding: 4px;
  padding-left: 7px;
  // transform: rotate(-45deg);
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  z-index: 1000;
  opacity: 0.5;

  > a {
    color: #222;
    text-decoration: none;
    opacity: 0;
    transition: opacity 3s;
    z-index: 0;

    &.visible { opacity: 1; z-index: 100; }
  }

  > #twitterBug > .at {
    top: 3px;
    left: -3px;
  }

  > #wwwBug { .absoluteCenter(); }
}

.titleAshi,
.titleAshiJob,
.titleLfm,
.titleEnd,
.titleColophon {
  > #titleCard > #subTitleWriter {
    opacity: 1;
  }
}

.titleText(@color: @blue) {
  color: @color;
  --typewriter-cursor-color: @color;
  font-size: 10vh;
  text-align: center;
  --typewriter-typing-rate: 14;
  --typewriter-erasing-rate: 32;
}

#citation {
  .fixed(@top: auto, @left: 5vw, @bottom: 5vh, @height: auto, @width: auto);
  .type-writer-title();
  opacity: 0;
  font-size: 36px; 
  font-weight: bold; 
}