Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rework mobile header to be more tiny #64

Open
vaga opened this issue Mar 3, 2021 · 2 comments
Open

Rework mobile header to be more tiny #64

vaga opened this issue Mar 3, 2021 · 2 comments
Assignees
Labels
enhancement New feature or request

Comments

@vaga
Copy link
Owner

vaga commented Mar 3, 2021

See #61

@vaga vaga self-assigned this Mar 29, 2021
@vaga vaga added the enhancement New feature or request label Nov 17, 2021
@QuAzI
Copy link

QuAzI commented Nov 10, 2022

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
Copy link
Contributor

xeraa commented Jan 30, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants