hugo-geekblog/src/sass/_mobile.scss

@media screen and (max-width: $sm-breakpoint) {
  .gblog-header__col-2.justify-center,
  .gblog-header__col-2 .justify-center {
    justify-content: flex-start;
  }

  .gblog-brand {
    font-size: $font-size-32;

    &__subtitle {
      font-size: $font-size-20;
    }

    &__img {
      width: 40px;
      height: 40px;
    }
  }

  .gblog-nav {
    .container {
      padding: 0;
    }

    &__list {
      background: lighten($second-color, 10%);
      flex-direction: column;
      justify-content: center;
      max-height: 0;
      visibility: hidden;
      overflow: hidden;
    }

    &__entry {
      padding: $padding-16 0;
      border: 0;
      border-radius: 0;
      display: block;
      margin: 0;
      text-align: center;

      &:hover,
      &:visited:hover,
      &.is-active {
        background: lighten($second-color, 5%);
      }
    }

    &__control {
      display: block;
      text-align: center;
      user-select: none;

      label {
        padding: $padding-16 0;
      }
    }
  }

  .gblog-error {
    padding: $padding-16 * 6 $padding-16;

    .icon {
      font-size: $font-size-96;
    }

    &__message {
      padding-left: $padding-16 * 2;
    }

    &__line {
      padding: $padding-4 0;
    }

    &__title {
      font-size: $font-size-16 * 2;
    }
  }

  .flex-mobile-column {
    flex-direction: column;
  }

  .gblog-footer {
    &__item {
      width: 100%;
    }
  }

  .hidden-mobile {
    display: none;
  }

  #menu-control:checked ~ .gblog-nav__list {
    max-height: 100%;
    visibility: visible;
  }

  #menu-control:checked ~ .gblog-nav__control {
    .icon.gblog_menu {
      display: none;
    }
    .icon.gblog_clear {
      display: inline-block;
    }
  }
}