Media queries for reveal

[pepebe]

Just noticed that lines 3454+ in foundations.css inv.5.2.1 look fishy...

Identical min-width rules in each mediaquery (min vs. min) as well as the same rules for several of them in a row.

I don't have the time right now to do more research and before I forget to do anything, I think its better to at least post this here.

Regards,

pepebe

  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog, .reveal-modal {
      top: 6.25rem; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.tiny, .reveal-modal.tiny {
      margin-left: -15%;
      width: 30%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.small, .reveal-modal.small {
      margin-left: -20%;
      width: 40%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.medium, .reveal-modal.medium {
      margin-left: -30%;
      width: 60%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.large, .reveal-modal.large {
      margin-left: -35%;
      width: 70%; } }
  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.xlarge, .reveal-modal.xlarge {
      margin-left: -47.5%;
      width: 95%; } }

  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
    dialog.full, .reveal-modal.full {
      margin-left: -50vw;
      width: 100vw; } }

[vinayraghu]

@pepebe Thanks for bringing this up.

This is a well known issue with sass. sass/sass#316 and sass/sass#116

Currently using media queries through variables in sass will lead to multiple declarations of the same media query. Ideally you would want all of the media rules to be clustered into a single query.

However, if the files are minified and gzipped, this might be a non-issue as gzipping identifies recurring patterns and compresses them.

If you're still interested, you might want to check out https://github.com/aaronjensen/sass-media_query_combiner

[vinayraghu]

Apologies, I just noticed the multiple min widths...Will take a look into this

[pepebe]

Thanks.

As they are now, the measures are completely broken but I guess nobody will notice for a long time as the basic functionality is not compromised.

Take your time ;)

[thedeerchild]

It appears to be coming from this line, which wraps the classes, since the @reveal-modal-base mixin has media queries inside it as well.

[zurbrandon]

yeah, was this line. Added in haste at one point and has now been removed for 5.3.2

Cheers all!