dev/scss/footer/footer.scss

@charset "utf-8";
@use 'sass:math';
@use "../util";
@use "../base/colors";
@use "../base/lengths";
@use "../base/paths";

/**
 * Rules for the footer section of Kalamar
 */
footer {
  background-color: colors.$dark-grey;
  // position:         absolute;
  // bottom:           0;
  margin-top:       auto;
  padding-bottom:   2px;
  font-size:        70%;
  width:            100%;
  text-align:       right;

  display: flex;
  align-items: center;
  height: lengths.$footer-height;

  &.shifted {
    padding-left: lengths.$logo-left-distance;
  }

  nav {
    margin-left: lengths.$button-width;
    padding: lengths.$item-padding;
    text-align: left;
    flex-grow: 2;
    display: flex;
    flex-direction: row;
    a {
      white-space: nowrap;
    }
  }

  > nav > div {
    display: inline;
    margin: .2em;
    &:after {
      font-size: bold;
      content: " | ";
      white-space: nowrap;
      color:   colors.$dark-orange;
    }
    &:last-child {
      margin-right: 0;
      &:after {
        content: none;
      }
    }
    &:first-child {
      margin-left: 0;
    }
  }
  
  div.logos {
    font-size: 0;
    flex-grow: 1;
  }


  a {
    font-size: 10pt;
    &:link {
      // margin: 0 .5em;
      color:  colors.$light-grey;
    }
    &:visited {
      color:  colors.$light-grey;
    }
    &:hover {
      color:  colors.$nearly-white;
    }
    &[href^="http://"]::after,
    &[href^="https://"]::after {
      content: none
    }
  }
}

/**
 * Logo table of the front page
 */
#logos {
  margin-right: lengths.$standard-margin;
}

/**
 * Logo: Institute for German Language
 */
#ids-logo {
  display:          inline-block;
  width:            math.div(631,30) + em;
  height:           math.div(200,30) + em;
  background-image: url('#{paths.$img-path}/ids-institute-for-the-german-language-white.svg');
}

aside.active:not(.off) ~ footer {
  // padding-left: $logo-left-distance;
  transition:  all .3s ease-in-out;
}