Rework mobile header to be more tiny

[vaga]

See #61

[QuAzI]

By the same reasons and to improve readability, I made some extra styles. But also moved Profile panel to right side in full mode and made some modifications for print, e-ink. But some Kindle readers still ignore media requests and absolutely remove space around article (page borders/margins/paddings).

My customizations

.app-header {
  left: unset;
  right: 0;
}

.app-container {
  max-width: 1100px;
  margin: 0 auto;
}

.post,
.posts-list-item {
  font-size: 1.6em;
}

.post-meta {
  font-size: 0.4em;
  text-align: end;
}

pre {
  font-size: 1.4rem;

  code {
    font-size: 1em;
  }
}

@media (max-width: 1680px) {
  .app-container {
    margin-right: 22rem;
    margin-left: calc(75% - 65rem);
    max-width: calc(100% - 20rem);
  }
}

@media (max-width: 1366px) {
  html {
    line-height: 1.3;
    font-size: 1em;
  }

  .app-header {
    position: relative;
    right: unset;
    width: 100%;
    min-height: 14rem;
    top: 0px;

    padding: 1.2em;

    .app-header-avatar {
      width: 5rem;
      height: 5rem;
      border: .1rem;
    }
    .app-header-title {
      font-size: 1.2em;
    }
    .app-header-social {
      font-size: 1.4em;
    }
   }

  .app-container {
    max-width: 100%;
    margin: 0 0;
    padding: 0.7rem 1.5rem;
  }
}

@media only screen and (max-width: 600px) {
  pre {
    font-size: 1.2rem;
    code {
      font-size: 1.0em;
    }
  }

  .post,
  .posts-list-item {
    font-size: 1.2em;
  }
}

// styles for Print and e-books (include 4096 colors)
@media print, monochrome, (hover: none) and (any-pointer: none) {
  body { 
    color: #000000;
    background: #ffffff;
  }

  .app-header {
    background-color: inherit;
    line-height: 0.8em;
    padding: 0.5em;
    min-height: 7rem;

    .app-header-avatar {
      display: none;
    }

    .app-header-title {
      color: unset;
    }
  }

  a {
    color: #1c4c31;
  }

  .post-title, h1, h2, h3, h4 {
    color: #000000;
  }

  .app-container {
    padding: 0 1.5rem;

    pre {
      color: #1c4c31 !important;
      background-color: unset !important;
      font-size: 1.2rem;
    }

    code {
      background-color: unset;
      color: #1c4c31 !important;
      white-space: pre-wrap;
      font-size: 1.0em;

      span {
        color: #1c4c31 !important;
      }
    }

    .post,
    .posts-list-item {
      font-size: 1.2em;
    }
  }
}

@media print {
  .app-header {
    display: none;
  }
  .app-container {
    margin-top: 0vh;
  }
}

[xeraa]

I have used a slightly different approach for mobile headers: On the homepage I show the image; on other pages I don't. Feels like a reasonable compromise for me