CenturyLinkCloud / Cyclops

The UX/UI Pattern Guide for the CenturyLink Platform
http://assets.ctl.io/cyclops
MIT License
20 stars 16 forks source link

Suggested responsive improvement to large-type-feature class #129

Closed guyaparker closed 7 years ago

guyaparker commented 7 years ago

The large-type-feature class is suggested for pages such as errors (e.g. http://assets.ctl.io/cyclops/1.8.1/starterPages/404.html) but is not a good responsive design.

Longer h1 strings at lower screen widths start to look ugly pretty quickly especially if you have to deal with languages other than English.

I'd like to suggest something like this as an improvement:

@media (min-width: 0) {
    html.cyclops .large-type-feature h1 {
      font-size: 40px;
    }
}
@media (min-width: 480px) {
    html.cyclops .large-type-feature h1 {
      font-size: 60px;
    }
}
@media (min-width: 768px) {
    html.cyclops .large-type-feature h1 {
      font-size: 80px;
    }
}
@media (min-width: 992px) {
    html.cyclops .large-type-feature h1 {
      font-size: 100px;
    }
}
@media (min-width: 1200px) {
    html.cyclops .large-type-feature h1 {
      font-size: 100px;
    }
}

With standard styles: screen shot 2017-03-16 at 17 37 47 screen shot 2017-03-16 at 17 37 31

With improvement: screen shot 2017-03-16 at 17 39 34