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

#menu-phone-header {
  display: none;
  position: relative;
  .margin(@t: 0);
  .size(@h: @menu-header-height-phone);
  .background(@color: @default-color);

  a {
    display: inline-block;
    .size(@w: 33%);
    .text(@align: center);
  }

  .top {
    position: relative;
    .padding(@t: 1.5em, @b: 1.5em);
    .position(@l: 15%);
    .size(70%, 20px);

    .icon {
      .size(@w: 20%);
      .text(@size: 26px);
    }

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

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

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

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

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

  .bottom {
    .text(@size: 1.3em);
  }

  .hr {
    .size(@w: 80%);
    .border(@all: 1px solid);
    .margin(@all: 10px auto);
  }
}

#menu-phone-footer {
  position: relative;
  .margin(@t: 1.5em);
  .padding(@t: 1em);
  .text(@size: 1em, @align: center);
  .background(@color: @default-color);

  .links-p {
    .text(@size: 1.3em);
    .padding(@b: .5em);
  }

  .links {
    .margin(@all: auto);
    .size(60%);

    a, p {
      display: inline-block;
    }

    a {
      .size(@w: 32%);
      .text(@size: .9em);
    }
  }

  .hr {
    .size(@w: 60%);
    .margin(@all: 10px auto);
    .border(@all: 1px solid);
  }

  .end {
    .margin(@t: 1em, @l: 1em);
    .size(@h: 2em);
    .text(@size: 1em);
  }
}

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

  #menu-phone-footer {
    display: none;
  }
}

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

  #menu-phone-footer {
    display: block;
  }
}
