Vertical text

Vertical text (links) left or right – for social media, bylines etc. The small designby.red text to the right is created with the code below.

/* VERTICAL, FIXED TEXT
- - - - - - - - - - - - - - */

// VERTICAL RIGHT
.vertical-right {
  right: 3%;
  top: 15%;
  bottom: 85%;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: rotate(90deg) translate(50%,50%);
  -moz-transform: rotate(90deg) translate(50%,50%);
  -ms-transform: rotate(90deg) translate(50%,50%);
  -o-transform: rotate(90deg) translate(50%,50%);
  transform: rotate(90deg) translate(50%,50%);
}

// VERTICAL LEFT
.vertical-left {
  top: 50%;
  bottom: 50%;
  left: 2%;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: rotate(-90deg) translate(-50%,50%);
  -moz-transform: rotate(-90deg) translate(-50%,50%);
  -ms-transform: rotate(-90deg) translate(-50%,50%);
  -o-transform: rotate(-90deg) translate(-50%,50%);
  transform: rotate(-90deg) translate(-50%,50%);
}

// VERTICALshared properties
.vertical-left, .vertical-right {
  position: fixed;
  height: 1.5em;
  margin: auto;

  a {
    .anti;
    font-family: @meta !important;
    font-size: 12px !important;
    font-weight: 200 !important;
    color: @logo !important;
    border-bottom: 0px solid red !important;
    letter-spacing: 0.1em;      
    }
}

Place the HTML in the footer if you want the text to appear on all pages.

<p class="vertical-right">
   <a href="https://designby.red/">designby.red</a>
</p>