Front/src/theme/css/menu-pc.less
@import (reference) "base.less";

#menu {
  position: fixed;
  .size(@menu-width, @menu-height);
  .position(@r: 0, @b: 0);
  .background(@color: @default-color);
  z-index: 10;

  a, p {
    .text(@color: black, @align: center);
  }

  .name, .home, .tag-ath, .links, .links-p, .end {
    display: block;
  }

  .name {
    .margin(@t: 10px);
    line-height: 35px;
    .text(@size: 24px);
  }

  .icons {
    .margin(@t: 15px);

    .playstation {
      .font-icon(before, playstation);
    }

    .github {
      .font-icon(before, github, @size: 28px);
    }

    .rss {
      .font-icon(before, rss);
    }

    .linkedin {
      .font-icon(before, linkedin);
    }
  }

  .icon {
    .margin(@l: 12px);
    .size(@w: 25px);
    .text(@size: 26px);
  }

  .home {
    .margin(@t: 5px);
    .text(@size: 20px);
  }

  .tag-ath {
    .margin(@t: 5px, @l: 30px);
    .text(@size: 16px);
  }

  .tags {
    .padding(@r: 2px);
  }

  .authors {
    .padding(@l: 2px);
  }

  .links-p {
    .margin(@t: 10px, @b: 5px);
    .text(@size: 20px, @align: center);
  }

  .links {
    .margin(@b: 5px);
    .text(@size: 16px);
  }

  .proj {
    .padding(@l: 20px, @r: 2px);
  }

  .friend {
    .border();
    .padding(@l: 2px);
    .text(@size: 16px, @color: #000, @align: right);
  }

  .end {
    .margin(@t: 10px, @l: 10px);
    .size(@h: 30px);
    .text(@size: 12px);
  }

  .hr(@margin) when (isnumber(@margin)) {
    border: 1px solid;
    .size(@w: @menu-width - @margin * 2);
    .text(@color: black);
    .margin(@t: 10px, @l: @margin);
  }

  .hr1 {
    .hr(10px);
  }

  .hr2 {
    .hr(20px);
  }

  .hr3 {
    .hr(10px);
  }
}

#menu-links {
  position: fixed;
  .position(@r: 0, @t: -400px);
  .padding(@t: 1em, @b: 1em);
  .size(@w: @menu-width);
  .text(@align: center);

  address {
    list-style: none;
    .no-margin;
  }

  a {
    line-height: 1.5em;
    .text(@size: .9em);
  }

}

@media (min-width: 960px) {
  #menu {
    display: block;
  }

  #menu-links {
    display: block;
  }
}

@media (max-width: 960px) {
  #menu {
    display: none;
  }

  #menu-links {
    display: none;
  }
}
