Fix site-title style - Githubissues

egoist / docute

📚 Effortless documentation, done right.

https://docute.egoist.dev

MIT License

3.8k stars 427 forks source link

Fix site-title style #196

Closed smorimoto closed 5 years ago

smorimoto commented 5 years ago

This fixes that the header and title are broken on devices with low resolutions such as the iPhone SE due to word wrapping when I set long title.

Before	After

egoist commented 5 years ago

Deploy preview for docute ready!

Built with commit 365e6fbe8025c9629ddaf29a39a8889c4322ca62

https://deploy-preview-196--docute.netlify.com

egoist commented 5 years ago

something else is broken in the deploy preview.

smorimoto commented 5 years ago

Oops, I'm sorry. I just updated!

egoist commented 5 years ago

Something like this would be enough, site title should be limited to a specific width 🤔

.site-title {
  font-weight: normal;
  margin: 0 25px 0 0;
  font-size: 1.2rem;
  display: flex;
  align-items: center;

  & a {
    color: #000;
    text-decoration: none;
+   max-width: 300px;
+   overflow: hidden;
+   white-space: nowrap;
+   text-overflow: ellipsis;
  }
}

smorimoto commented 5 years ago

This should work.

.site-title {
+ max-width: 300px;
  font-weight: normal;
  margin: 0 25px 0 0;
  font-size: 1.2rem;
  display: flex;
  align-items: center;

  & a {
    color: #000;
    text-decoration: none;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
  }
}

It looks OK on iPhone SE, but it's weird on other devices.

Pixel 2 XL	iPhone 6/7/8 Plus

I tested with This is really cool package 🔥🔥🔥

So I think this is fine as it is.

egoist commented 5 years ago

:tada: This PR is included in version 4.6.21 :tada:

The release is available on:

Your semantic-release bot :package::rocket: