foundation / inky

Convert a simple HTML syntax into tables compatible with Foundation for Emails.
http://foundation.zurb.com/emails
674 stars 108 forks source link

Panini templating skipping font declarations on in-page variables on iOS devices #63

Closed probablyabear closed 8 years ago

probablyabear commented 8 years ago

Note: I'm using the most recent Zurb Stack for this project.

I've got a master template for an email which utilizes in-page variables that are initialized within the page's front matter in accordance with the Panini docs.

The issue is occurring in the "Class Topics" section of this email template.

All the variable data is being inserted from the front matter correctly; however, I've noticed that one of them consistently doesn't get its font correctly defined according to my scss. This seems to only occur on iOS devices. Other clients are not affected.

Litmus results (Note the device names at the top of each image.)

The results on the iOS devices display one of the items in the $body-font-family font instead of the family I have declared in app.scss.

Similar results occur when I was using Panini's <#each item> method to insert the variables.

Below are is my Inky markup and scss. I've individually declared the font's for classes to make sure this wasn't a scss compilation issue.

// index.html

---
classdate: September 13-15, 2016
classtitle: removed
classlocation: Seattle, WA
classtimes: 8am - 5pm
classurl: removed
instructors: removed
instructorcompany: removed
classjustification: If you crave an intense dose of insider LDAR knowledge from various industry perspectives, this session is for you. LDAR for Experts is for the seasoned LDAR coordinator seeking advanced LDAR training. Other professionals who might attend include environmental advisors, maintenance supervisors with continuing LDAR responsibilities, contractor site supervisors, and program managers.
benefit1: Firsthand insight on LDAR regulations, enforcement initiatives, and sticky issues from various industry perspectives
benefit2: Cutting edge best management practices for your LDAR program and audits
benefit3: Techniques for implementing robust leak detection programs
benefit4: An understanding of the newest LDAR developments, including AWP, GHG impacts on LDAR, and the high-flow sampler
benefit5: The know-how to optimize and manage a sustainable LDAR compliance program
instructorinfo: has more than 23 years experience in the environmental field focused on air quality compliance in the refining, petrochemical, and natural gas processing industries. His core experience in the implementation and operation of fugitive emission source Leak Detection and Repair (LDAR) programs. In  22 years as an LDAR contractor he has held the following positions relating to LDAR; Monitoring Technician, Lead Technician, Inventory Technician, Environmental Monitoring Site Supervisor, Local Project Manager, Regional Project Manager, Regulatory Compliance and Quality Control Manager and the executive title Director of Quality Control and Training. 

---
<wrapper class="headlineRow">
  <center>
    <container>
      <row class="headlineRow">
        <columns small="12" large="12">
          <spacer size="30"></spacer>
          <h6 class="dateLocationText text-center">
            {{ classdate }}
          </h6>
          <h1 class="classTitle text-center"> 
            <a href="{{ classurl }}">
              {{ classtitle }}
            </a>
          </h1>
          <h6 class="dateLocationText text-center">
            {{ classlocation }} / <font color="#000000">{{ classtimes }}</font>
          </h6>
        </columns>
      </row>
      <row class="headlineRow">
        <columns small="12" large="12">
          <h6 class="headlineInstructorText text-center">
            Instructors: {{ instructors }}
            <br>
            {{ instructorcompany }}
          </h6>
        </columns>
      </row>
      <row class="headlineRow">
        <columns small="12" large="12">
          {{>cta}}
        </columns>
      </row>
    </container>
  </center>
</wrapper>

<container>
  <row class="bodyRow">
    <columns small="12" large="12">
      <spacer size="30"></spacer>
      <h5 class="bodyJustification text-center">
        {{ classjustification }}
      </h5>
      <spacer size="10"></spacer>
    </columns>
  </row>
  <row class="bodyRow">
    <columns small="12" large="12">
      <h6 class="benefitsHeadingText">
        Class Topics:
      </h6>
    </columns>
  </row>
  <row class="bodyRow">
    <columns small="12" large="12">
      <center>
          <h6 class="benefits text-center">
            {{ benefit1 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit2 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit3 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit4 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit5 }}
          </h6>
      </center>
    </columns>
  </row>
  <row class="bodyRow">
    <columns small="12" large="12">
        <spacer size="10"></spacer>
        <h4 class="instructorHeading text-center">
          Learn from the BEST
        </h4>
        <h6 class="instructorBio text-center">
          {{ instructorinfo }}
        </h6>
    </columns>
  </row>
  <row class="bodyRow">
    <columns small="12" large="12">
      {{>cta}}
    </columns>
  </row>
</container>
// app.scss

@import 'settings';
@import 'foundation-emails';

$hse-yellow: #FFE72D;
$hse-orange: #F26350;
$hse-footer-text: #bfad22;

// Header
.headerRow {
    background-color: $black;

    .headerInner {
        background-color: $black;
    }

    .brandTextLink {
        color: $hse-yellow;
        font-weight: 100;
        text-decoration: underline;
    }
}

// Headline Section
.headlineRow {
    background-color: $hse-yellow;  

    .dateLocationText {
        font-family: Georgia, Times, "Times New Roman", serif;
        color: $black;
        font-weight: bold;
        font-style: italic;
    }
    .classTitle {
        color: $hse-orange;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        text-transform: uppercase;

        a {
            color: $hse-orange;
            text-decoration: underline;
        }
    }
    .headlineInstructorText {
        color: $hse-orange;
        font-family: Georgia, Times, "Times New Roman", serif;
        font-style: italic;
    }

}

// Body
.bodyRow {
    background-color: $white;

    .bodyJustification {
        color: $hse-orange;
        font-family: Georgia, Times, "Times New Roman", serif;
    }

    .benefitsHeadingText {
        color: $black;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
    }

    .benefits {
        color: $dark-gray;
        font-family: Georgia, Times, "Times New Roman", serif;
        text-align: center;
    }
    .instructorHeading {
        color: $hse-orange;
        font-family: Georgia, Times, "Times New Roman", serif;
        font-style: italic;
        margin-bottom: 0;
    }
    .instructorBio {
        color: $dark-gray;
        font-weight: 100;
        font-family: Georgia, Times, "Times New Roman", serif;
    }
}

// Footer
.footerRow {
    background-color: $hse-yellow;

    .footerText {
        color: $hse-footer-text;
        font-size: .7em;

        a {
            color: $hse-footer-text;
            text-decoration: underline;
        }
    }
}

Apologies for the non-abbreviated code, but I want to make sure this issue isn't being caused by something else in the markup.

probablyabear commented 8 years ago

Mistakenly posted this in the Inky repo, meant to post in Foundation for Emails repo. Mods, feel free to delete.