Contents

.yoyoyo-header {
  .header-description {
    font-size: 11px;
    line-height: 1.4;
    position: fixed;
    z-index: 2;
    top: 55px;
    left: 33px;
    max-width: 400px;
    height: 100px;
    cursor: default;
    transform: rotate(-90deg) translate(-100%, 0%);
    transform-origin: 0 0;
    text-align: right;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: v(h1-color);
  }

  nav,
  .header-contact {
    // display: flex;
    display: none;
    align-items: center;

    a {
      padding: 0 8px;
      font-size: 16px;
      line-height: 32px;
      color: #3a3a3a;
      opacity: 0.4;
      transition: all ease-in-out 380ms;

      &:hover {
        text-decoration: none;
        opacity: 1;
      }

      &.current {
        opacity: 1;
      }
    }
  }

  a.yoyoyo-header-logo {
    position: absolute;
    z-index: 9999;
    width: 50px;
    height: 50px;
    left: 80px;
    top: 55px;
    padding: 0;
    flex-shrink: 0;
    display: block;
    transition: all ease-in-out 380ms;
    background-image: url(/assets/icon/logo.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

@media (prefers-color-scheme: dark), (max-width: 992px) {
  .yoyoyo-header a.yoyoyo-header-logo {
    background-image: url(/assets/icon/logo-dark.svg);
  }

  .yoyoyo-header .header-description {
    opacity: 0.8;
  }
}

@media (max-width: 768px) {
  a.yoyoyo-header-logo {
    left: 30px !important;
    top: 33px !important;
  }

  .header-description {
    top: 33px !important;
    left: 2px !important;
  }
}

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
yoyoyo-0.0.14	_sass/header.scss
yoyoyo-0.0.13	_sass/header.scss
yoyoyo-0.0.12	_sass/header.scss
yoyoyo-0.0.11	_sass/header.scss