dev/scss/main/logos.scss

@charset "utf-8";
@use "../util";
@use "../base/colors";
@use "../base/mixins";
@use "../base/paths";

/**
 * Rules for logos.
 */
.logo {
  &::after {
    content: "" !important;
  }

//  div.logoaddon {
//    position:absolute;
//    display: block;
//    font-size: 45%;
//    right: 5pt;
//    bottom: 2.5pt;
//    text-align:right;
//    color: $nearly-white;
//    padding: 3pt;
//    text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
//  }
  
  > * {
    background: {
      repeat:   no-repeat;
      size:     90%;
      position: 50% 50%;
    }

    > span {
      @include mixins.blind;
    }

    > div.logoaddon {
      position:absolute;
      display: block;
      font-size: 10pt;
      // right: -1rem;
      // top: 1.7rem;
      // bottom: 4pt;
      right: -2rem;
      top: 2.1rem;
      transform: rotate(-5deg);
      // text-align:right;
      color: colors.$nearly-white;
      // padding: 3pt;
      text-shadow: 1pt 1pt 0 colors.$light-green, -1pt -1pt 0 colors.$light-green, -1pt 1pt 0 colors.$light-green, 1pt -1pt 0 colors.$light-green;

      // Values from new logo:
      // font-size: 45%;
      // right: 5pt;
      // bottom: 2.5pt;
      // text-align: right;
      // padding: 3pt;
    }
  }
}

aside.active + header .logo div.logoaddon {
  text-shadow: 1pt 1pt 0 colors.$dark-green, -1pt -1pt 0 colors.$dark-green, -1pt 1pt 0 colors.$dark-green, 1pt -1pt 0 colors.$dark-green;
}

/**
 * Logo: KorAP
 */
a.logo > h1 {
  position:    absolute;
  margin:      0;
  margin-left: 3rem;
  left:        0;
  top:         50%;
  width:       7.8em;
  height:      2.4em;
  z-index:     105;
  background: {
    size:  78% !important;
    image: url('#{paths.$img-path}/korap-logo.svg');
  }
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

// aside.active ~ header h1 {
//   position: fixed;
// }


#overview {
  text-align: center;
  width:      100%;
}