Contents

@mixin RotateTitle( $origin : bottom left, $deg : -90deg ) {
  transform-origin: $origin;
  transform: rotate( $deg );
  position: absolute;
}

.title {

  &._overlay {

    &-load {
      animation: load_title 1s steps(1) infinite;
    }

    &-about {
      border-bottom: 2px solid $gun;
    }

    &-browse {
      border-bottom: 2px solid $gun;
    }

    &-search {
      border-bottom: 2px solid $gun;
    }
  }

  &._mobile {
    text-align: center;
    font-size: 4.8rem;
    line-height: 1;
  }

  &._chapter {

    &-title {

      &:not(.--docs) {
        @include RotateTitle();
        bottom: 56px;
        left: 128px;
      }

      &.--docs {
        color: $smoke;
      }
    }
  }

  &._page {

    &-title {

      &:not(.--docs) {
        @include RotateTitle();
        bottom: 56px;
        left: 128px;
      }

      &.--docs {
        align-self: center;
      }
    }

    &-chapter {
      @include RotateTitle( $origin : top right );
      text-transform: capitalize;
      right: 78px;
      top: 56px;
    }

    &-weight {
      @include RotateTitle();
      transform-origin: bottom left;
      left: calc(100% - 58px);
      text-align: right;
      bottom: 56px;
    }
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
futuro-0.3.1	_sass/_title.scss
futuro-0.3.0	_sass/_title.scss