hippie/source/style/modules/portal/_portal_module.scss

@use "sass:color";

@use "../../hippie-style/hippie";

$portal_highlight: hippie.$color_highlight_basic;
$portal_margin: hippie.$space_double;
$portal_link_size: 128px;
$portal_icon_size: 64px;

.body_portal {
  @extend .h_full_view;
}

.portal {
  display: flex;
  overflow: hidden;
  height: 100vh;
}

.portal__entry {
  display: flex;
  flex: 1;
  align-items: center;
  padding-right: $portal_margin;
  padding-left: $portal_margin;
  overflow-x: hidden;
  overflow-y: auto;
  transition: hippie.$transition_best;

  &:hover {
    flex: 3;
    background-color: #999;

    // h2 {
    //   color: $portal_highlight;
    // }

    .portal__list {
      display: block;
    }
  }

  section {
    width: 100%;
    padding: 32px 0;
  }

  h2 {
    @extend h4;

    position: relative;
    margin-top: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.portal__link {
  display: block;
  position: relative;
  max-width: $portal_link_size;
  height: $portal_link_size;
  margin: 0 auto;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background-repeat: no-repeat;
  background-position: center;

  &:hover {
    background-color: color.adjust($portal_highlight, $alpha: -0.2);
    border-color: $portal_highlight;
  }

  &:focus {
    outline: 0;
  }

  img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: $portal_icon_size;
    height: $portal_icon_size;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: 0 0;
  }
}

.portal__link--bibo {
  background-image: url(../../art/portal/bibo.png);
}

.portal__link--portfolio {
  background-image: url(../../art/portal/portfolio.png);
}

.portal__link--found {
  background-image: url(../../art/portal/gems.png);
}

.portal__link--flux {
  background-image: url(../../art/portal/flux.png);
}

.portal__link--blog {
  background-image: url(../../art/portal/notes.png);
}

.portal__link--tools {
  background-image: url(../../art/portal/tools.png);
}

.portal__link--safe {
  background-image: url(../../art/portal/safe.png);
}

.portal__link--game {
  &:hover {
    background-image: url(../../art/portal/games.png);

    & > img {
      display: none;
    }
  }
}

.portal__list {
  @extend .link;

  display: none;
  position: relative;
  width: 80%;
  margin: 48px auto 0 auto;
  padding-left: 0;

  li {
    list-style: none;

    a {
      overflow: hidden;
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;

      img {
        width: 16px;
        height: auto;
      }
    }
  }
}