Taggest logo (CSS)

<link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>

.logo

  .row

    .ltr.t T

    .ltr.a a

    .ltr.g g

    .ltr.d -

  .row

    .ltr.g g

    .ltr.e e

    .ltr.s s

    .ltr.t t

$c-fn-1: rgb(248, 247, 230);

$c-fn-2: rgb(96, 185, 154);

$c-fn-3: rgb(247, 120, 37);

$c-fn-4: rgb(208, 203, 89);

body, html {

  position: absolute;

  width: 100%;

  height: 100%;

  text-align: center;

}

.logo {

  top: 25%;

  cursor: pointer;

  position: relative;

  background: #000;

  display: inline-flex;

  font-size: 100px;

  line-height: 1em;

  font-weight: 400;

  width: 2em;

  height: 2em;

  flex-flow: column nowrap;

  justify-content: space-around;

  align-items: center;

  box-sizing: border-box;

  padding: 0.25em 0.125em;

  .row {

    margin-top: -0.125em;

    flex: 1;

    display: flex;

    width: 100%;

    height: 1px;

    flex-flow: row nowrap;

    justify-content: space-between;

    align-items: center;

    transform: scaleY(1.1);

  }

  .ltr {

    font-family: "Londrina Solid";

    display: inline-block;

    flex: 1;

    color: #FFF;

    box-sizing: border-box;

    &:hover {

      &.t { color: $c-fn-1; }

      &.a { color: $c-fn-2; }

      &.g { color: $c-fn-3; }

      &.d { color: $c-fn-4; }

      &.e { color: $c-fn-1; }

      &.s { color: $c-fn-2; }

    }

    &.a {

      margin-left: -0.125em;

    }

    &.g {

      margin-top: -0.1em;

      transform: scaleY(0.75);

    }

    &.d {

      font-size: 0.85em;

    }

  }

}