Merge pull request #834 from github/damaneice/update-primer

Update primer to 7.0

Author: Damon Maneice

_includes/footer.html

@@ -6,7 +6,7 @@
       <div class="col-12 col-sm-6 mb-4 col-border">
         <div class="height-full p-5">
           <img src="{{ "/assets/images/illos/squirrel.svg" | relative_url }}" class="little-illo mb-3" alt="squirrel illustration">
-          <h3 class="alt-h3 mb-3">{{ t.footer.contribute.heading }}</h3>
+          <h3 class="h3-mktg mb-3">{{ t.footer.contribute.heading }}</h3>
           <p class="mb-3 p-large">{{ t.footer.contribute.description }}</p>
           <p>
             <a data-proofer-ignore href="https://github.com/{{ site.github.repository_nwo }}/edit/master/{{ page.path }}" class="btn btn-outline">
@@ -21,7 +21,7 @@ <h3 class="alt-h3 mb-3">{{ t.footer.contribute.heading }}</h3>
           <form action="//github.us11.list-manage.com/subscribe/post?u=9d7ced8c4bbd6c2f238673f0f&amp;id=b514344ba3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
               <div id="mc_embed_signup_scroll">
               <img src="{{ "/assets/images/illos/bird.svg" | relative_url }}" class="little-illo mb-3" alt="bird illustration">
-              <h3 class="alt-h3 mb-3">{{ t.footer.subscribe.heading }}</h3>
+              <h3 class="h3-mktg mb-3">{{ t.footer.subscribe.heading }}</h3>
               <p class="mb-3 p-large">{{ t.footer.subscribe.description }}</p>
 
               <div class="mc-field-group col-12">

_layouts/article-alt.html

@@ -6,7 +6,7 @@
 
 <header class="article-alt-header bg-gray-light">
   <div class="container-lg p-responsive mx-auto">
-    <h1 class="alt-h1 lh-condensed text-center my-6 py-md-6">{{ page.title }}</h1>
+    <h1 class="h1-mktg lh-condensed text-center my-6 py-md-6">{{ page.title }}</h1>
     <p class="lead text-center text-gray col-md-8 mx-auto mb-4 position-relative">{{ page.description }}</p>
   </div>
 </header>

_layouts/article.html

@@ -7,11 +7,11 @@
 <header class="article-header {{ page.class }} bg-gray-light">
   <div class="container-lg p-responsive clearfix mx-auto">
 
-    <h1 class="alt-h1 lh-condensed text-center mb-3">{{ page.title }}</h1>
+    <h1 class="h0-mktg lh-condensed text-center mb-3">{{ page.title }}</h1>
     <p class="lead text-center text-gray col-md-8 mx-auto mb-4 position-relative">{{ page.description }}</p>
     {% if page.lang == "en" %}
     <nav class="toc mb-4 mb-md-6">
-      <div class="card col-sm-8 col-md-4 col-lg-3 mx-auto">
+      <div class="Box col-sm-8 col-md-4 col-lg-3 mx-auto">
         <a class="toc-trigger d-block text-center p-3">
           <span class="text-black">{{ t.article.table_of_contents }}</span><svg height="18" class="octicon octicon-triangle-down ml-2 fill-blue v-align-middle icon-flip" viewBox="0 0 12 16" version="1.1" width="13" role="img"><path fill-rule="evenodd" d="M0 5l6 6 6-6z"></path></svg>
         </a>
@@ -36,27 +36,27 @@ <h1 class="alt-h1 lh-condensed text-center mb-3">{{ page.title }}</h1>
     {{ content }}
   </div>
   <div class="text-center pb-4">
-    <a class="alt-h3" href="/{% if page.lang and page.lang != 'en' %}{{ page.lang | append: '/' }}{% endif %}">
+    <a class="h3-mktg" href="/{% if page.lang and page.lang != 'en' %}{{ page.lang | append: '/' }}{% endif %}">
       {{ t.article.back_to_all_guides }}
     </a>
   </div>
 </article>
 
 {% if page.related %}
 <div class="container-lg p-responsive mx-auto border-top text-center pt-5">
-  <h2 class="alt-h2">{{ t.article.related_guides }}</h2>
+  <h2 class="h2-mktg">{{ t.article.related_guides }}</h2>
   <div class="gutter-sm d-flex flex-wrap flex-items-stretch pb-md-6">
   {% for related in page.related %}
     {% assign article = site.articles | where: 'lang', page.lang | where: 'class', related | first %}
     <div class="col-12 col-sm-9 mx-auto col-md-6 mt-4 mt-lg-5">
-      <a href="{{ article.url | relative_url }}" class="guide-cover {{ article.class }} card height-full d-block">
+      <a href="{{ article.url | relative_url }}" class="guide-cover {{ article.class }} Box height-full d-block">
 
         <div class="lh-none guide-cover-img text-center pt-4">
           <img src="{{ site.baseurl }}/assets/images/illos/{{ article.class }}.svg" class="" alt="{{ article.title }} illustration">
         </div>
 
         <div class="flex-self-end p-4 text-center p-lg-5">
-          <h3 class="alt-h3 text-bold lh-condensed mb-2 text-black">
+          <h3 class="h3-mktg text-bold lh-condensed mb-2 text-black">
             {{ article.title }}
           </h3>
           <div class="mb-0 text-gray">

_layouts/index.html

@@ -8,11 +8,11 @@
 
   <header class="py-4 py-md-6">
     <div class="container-lg p-responsive mx-auto text-center pt-6">
-      <h1 class="alt-h1">{{ site.title }}</h1>
-      <p class="alt-lead text-gray mb-md-5 col-md-8 mx-auto">
+      <h1 class="h00-mktg">{{ site.title }}</h1>
+      <p class="lead-mktg text-gray mb-md-5 col-md-8 mx-auto">
         {{ t.index.lead }}
       </p>
-      <p class="alt-lead" id="opensourcefriday" style="display:none">
+      <p class="lead-mktg " id="opensourcefriday" style="display:none">
         {{ t.index.opensourcefriday }}:
         <a href='https://opensourcefriday.com'>opensourcefriday.com</a>
       </p>
@@ -25,14 +25,14 @@ <h1 class="alt-h1">{{ site.title }}</h1>
       {% for article in articles %}
       {% if article.layout != 'index' %}
       <div class="col-12 col-sm-9 mx-auto col-md-6 mt-4 mt-lg-5">
-        <a href="{{ article.url | relative_url }}" class="guide-cover {{ article.class }} card height-full d-block">
+        <a href="{{ article.url | relative_url }}" class="guide-cover {{ article.class }} Box height-full d-block">
 
           <div class="lh-none guide-cover-img text-center pt-4">
             <img src="{{ site.baseurl }}/assets/images/illos/{{ article.class }}.svg" class="" alt="{{ article.title }} illustration">
           </div>
 
           <div class="flex-self-end p-4 text-center p-lg-5">
-            <h3 class="alt-h3 text-bold lh-condensed mb-2 text-black">
+            <h3 class="h3-mktg text-bold lh-condensed mb-2 text-black">
               {{ article.title }}
             </h3>
             <div class="mb-0 text-gray">

assets/css/custom.scss

@@ -103,13 +103,13 @@ blockquote {
   h5,
   h6 {
     -webkit-font-smoothing: antialiased;
-    font-family: $alt-body-font;
+    font-family: $font-mktg
   }
 
-  h1 { @include alt-h1 }
+  h1 { @include h0-mktg }
 
   h3 {
-    @include alt-h3;
+    @include h2-mktg;
     margin-top: $spacer-4;
     margin-bottom: $spacer-3;
     @include breakpoint(md) {
@@ -132,7 +132,7 @@ blockquote {
   }
 
   h2 {
-    @include alt-h2;
+    @include h1-mktg;
     text-align: center;
     margin-bottom: $spacer-3;
     line-height: 1.25;
@@ -237,7 +237,7 @@ blockquote {
 
 *:lang(ko) {
   .lead,
-  .alt-lead,
+  .lead-mktg ,
   h2 + p {
     word-break: keep-all;
   }