Style updates (#1491)

_includes/2017/headline-pub.html

@@ -1,4 +1,4 @@
-<div class='HeadlineAd' role='complementary'>
+<div class='HeadlinePub' role='complementary'>
   <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
   <span class='placeholder -one'></span>
   <span class='placeholder -two'></span>

_layouts/2017/home.html

@@ -26,8 +26,8 @@
     {% include 2017/search-form.html live=true %}
 
     {% if site.data.carbon.enabled %}
-      <div class='adbox'>
+      <div class='pubbox'>
-        {% include 2017/headline-ad.html %}
+        {% include 2017/headline-pub.html %}
       </div>
     {% endif %}
   </div>

_layouts/2017/sheet.html

@@ -12,9 +12,9 @@
   <header class='main-heading -center' role='banner'>
     <h1 class='h1'>{{ page.title }} <em>{{ site.data.content.sheet.suffix }}</em></h1>
 
-    <div class='adbox' data-js-no-preview>
+    <div class='pubbox' data-js-no-preview>
       {% if site.data.carbon.enabled %}
-        {% include 2017/headline-ad.html %}
+        {% include 2017/headline-pub.html %}
       {% endif %}
     </div>
   </header>

_layouts/default-ad.html

@@ -14,7 +14,7 @@ type: article
     </div>
 
     {% if site.data.carbon.enabled %}
-      <div class='headline-ad'>
+      <div class='headline-pub'>
         <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
       </div>
     {% endif %}

_layouts/default.html

@@ -11,7 +11,10 @@ type: article
     <div class='post-headline -cheatsheet'>
       <p class='prelude'><span></span></p>
       <h1><span>{{ page.title }}</span></h1>
-      {% include social-list.html page=page %}
+
+      <div class='pubbox'>
+        {% include 2017/headline-pub.html %}
+      </div>
     </div>
 
     <div class='post-content -cheatsheet'>

_parcel/_utils.scss

@@ -4,7 +4,6 @@
 @import '../_sass/vendor/ionicons-inline/ionicons.scss';
 
 // Utilities
-@import '../_sass/2017/utils/carbon-style.scss';
 @import '../_sass/2017/utils/_font-size.scss';
 @import '../_sass/2017/utils/gutter.scss';
 @import '../_sass/2017/utils/heading-style.scss';

_parcel/critical-home.scss

@@ -7,7 +7,7 @@
 @import '../_sass/2017/components/announcements-list.scss';
 @import '../_sass/2017/components/back-button.scss';
 @import '../_sass/2017/components/body-area.scss';
-@import '../_sass/2017/components/headline-ad.scss';
+@import '../_sass/2017/components/headline-pub.scss';
 @import '../_sass/2017/components/page-actions.scss';
 @import '../_sass/2017/components/pages-list.scss';
 @import '../_sass/2017/components/search-box.scss';

_parcel/critical-sheet.scss

@@ -15,7 +15,7 @@
 @import '../_sass/2017/components/body-area.scss';
 @import '../_sass/2017/components/h3-section.scss';
 @import '../_sass/2017/components/h3-section-list.scss';
-@import '../_sass/2017/components/headline-ad.scss';
+@import '../_sass/2017/components/headline-pub.scss';
 @import '../_sass/2017/components/main-heading.scss';
 @import '../_sass/2017/components/page-actions.scss';
 @import '../_sass/2017/components/top-nav.scss';

_sass/2015/components/post-headline.sass

@@ -54,3 +54,11 @@
     text-decoration: none
     box-shadow: none
 
+  .pubbox
+    margin-top: 32px
+    font-size: 16px
+    line-height: 1.5
+
+  .carbon-img
+    margin-top: 4px
+

_sass/2015/style.sass

@@ -44,3 +44,14 @@ $page-width:  620px
 @import 'helpers/general'
 @import 'helpers/margins'
 @import 'helpers/blink'
+
+// Shim for headline-pub
+$base-mute: #678
+$base-b: #333
+$base-b3: #678
+$base-text: #333
+$shadow3: 0 6px 8px rgba($base-mute, 0.03), 0 1px 2px rgba($base-mute, 0.30)
+$shadow6: 0 6px 8px rgba($base-mute, 0.03), 0 1px 2px rgba($base-mute, 0.30), 0 8px 12px rgba($base-b3, 0.1)
+$gray-text: $base-mute
+
+@import '../2017/components/headline-pub.scss'

_sass/2017/components/headline-pub.scss

@@ -1,7 +1,63 @@
+$placeholder-bg-size: 450px;
+
+/*
+ * Base carbon ads style
+ */
+
+@mixin carbon-style {
+  .carbon-img,
+  .carbon-text,
+  .carbon-poweredby {
+    text-decoration: none;
+  }
+
+  // Increase hit area
+  .carbon-text,
+  .carbon-poweredby {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+
+  .carbon-img > img {
+    width: 83px; // 13:10 ratio
+    height: 64px;
+    box-shadow: $shadow3;
+    border-radius: 3px;
+    background: rgba($gray-text, 0.2);
+    color: transparent;
+  }
+
+  .carbon-img:hover img {
+    transform: translate3d(0, -1px, 0);
+    box-shadow: $shadow6;
+  }
+
+  .carbon-text,
+  .carbon-text:visited {
+    color: $base-text;
+  }
+
+  // Allow line breaks
+  .carbon-text::after {
+    content: '  ';
+  }
+
+  .carbon-text:hover,
+  .carbon-poweredby:hover {
+    color: $base-b;
+  }
+
+  .carbon-poweredby,
+  .carbon-poweredby:visited {
+    white-space: nowrap;
+    color: $gray-text;
+  }
+}
+
 /*
  * Carbon ads
  *
- *     .HeadlineAd
+ *     .HeadlinePub
  *       div#carbonads
  *         span
  *           span.carbon-wrap
@@ -10,9 +66,7 @@
  *           a.carbon-poweredby {powered by Carbon}
  */
 
-$placeholder-bg-size: 450px;
+.HeadlinePub {
-
-.HeadlineAd {
   @include carbon-style;
 
   & {
@@ -108,4 +162,3 @@ $placeholder-bg-size: 450px;
     background-position: ($placeholder-bg-size * 2 / 3) 0%;
   }
 }
-

_sass/2017/components/main-heading.scss

@@ -29,17 +29,13 @@
     text-align: center;
   }
 
-  & > .adbox {
+  & > .pubbox {
     margin-top: 16px;
     text-align: center;
   }
 
-  & > .adbox > .ad {
-    display: inline-block;
-  }
-
   @media (min-width: 769px) {
-    & > .adbox {
+    & > .pubbox {
       margin-top: 24px;
       margin-bottom: 24px;
     }

_sass/2017/components/site-header.scss

@@ -31,12 +31,12 @@
     margin-top: 32px;
   }
 
-  & > .adbox {
+  & > .pubbox {
     margin: 16px auto;
   }
 
   @media (min-width: 481px) {
-    & > .adbox {
+    & > .pubbox {
       margin-top: 32px;
       margin-bottom: 32px;
     }

_sass/2017/style.scss

@@ -4,7 +4,6 @@
 @import './variables';
 @import '../vendor/modularscale/modularscale';
 @import '../vendor/ionicons-inline/ionicons';
-@import './utils/carbon-style';
 @import './utils/font-size';
 @import './utils/gutter';
 @import './utils/heading-style';
@@ -31,7 +30,7 @@
 @import './components/h2-section';
 @import './components/h3-section';
 @import './components/h3-section-list';
-@import './components/headline-ad';
+@import './components/headline-pub';
 @import './components/hint-mark';
 @import './components/home-button';
 @import './components/intro-content';

_sass/2017/utils/carbon-style.scss

@@ -1,53 +0,0 @@
-/*
- * Base carbon ads style
- */
-
-@mixin carbon-style {
-  .carbon-img,
-  .carbon-text,
-  .carbon-poweredby {
-    text-decoration: none;
-  }
-
-  // Increase hit area
-  .carbon-text,
-  .carbon-poweredby {
-    padding-top: 4px;
-    padding-bottom: 4px;
-  }
-
-  .carbon-img > img {
-    width: 83px; // 13:10 ratio
-    height: 64px;
-    box-shadow: $shadow3;
-    border-radius: 3px;
-    background: rgba($gray-text, 0.2);
-    color: transparent;
-  }
-
-  .carbon-img:hover img {
-    transform: translate3d(0, -1px, 0);
-    box-shadow: $shadow6;
-  }
-
-  .carbon-text,
-  .carbon-text:visited {
-    color: $base-text;
-  }
-
-  // Allow line breaks
-  .carbon-text::after {
-    content: '  ';
-  }
-
-  .carbon-text:hover,
-  .carbon-poweredby:hover {
-    color: $base-b;
-  }
-
-  .carbon-poweredby,
-  .carbon-poweredby:visited {
-    white-space: nowrap;
-    color: $gray-text;
-  }
-}

assets/style.css

@@ -55,11 +55,6 @@
   font-weight: bold;
 }
 
-.post-headline.-cheatsheet .prelude span {
-  border-bottom: solid 3px #111;
-  padding: 1.5em 20px;
-}
-
 .post-headline.-cheatsheet .prelude span:before {
   content: 'Cheatsheet for';
 }
@@ -78,9 +73,8 @@
 .post-headline.-cheatsheet h1 {
   color: #111;
   font-size: 3.5em;
-  text-shadow:
+  text-shadow: 2px 2px 0 white, 3px 3px 0 #ddd;
-    2px 2px 0 white,
+  margin-top: 20px;
-    3px 3px 0 #ddd;
 }
 
 /*
@@ -192,90 +186,6 @@
   margin: 0;
 }
 
-/*
- * Carbon: side
- */
-
-.side-ad {
-  position: absolute;
-  top: 80px;
-  right: 20px;
-  width: 130px;
-  display: block;
-  font-size: .8em;
-}
-
-.side-ad a {
-  text-decoration: none;
-  box-shadow: none;
-  background: rgba(255, 255, 255, .01);
-}
-
-.side-ad a:hover {
-  color: #111;
-}
-
-.side-ad .carbon-text {
-  margin-top: 5px;
-  display: block;
-}
-
-.side-ad .carbon-poweredby {
-  display: block;
-  color: #aaa;
-}
-
-@media (max-width: 768px) {
-  .side-ad {
-    display: none;
-  }
-}
-
-/*
- * Cardbon: headline
- */
-
-.headline-ad {
-  width: 300px;
-  min-height: 100px;
-  font-size: .8em;
-  margin: 0 auto 45px auto;
-  line-height: 1.5;
-}
-
-.headline-ad:after {
-  content: '';
-  display: table;
-  clear: both;
-  zoom: 1;
-}
-
-.headline-ad a {
-  text-decoration: none;
-  box-shadow: none;
-  display: block;
-  background: rgba(255, 255, 255, .01);
-}
-
-.headline-ad a:hover {
-  color: #111;
-}
-
-.headline-ad img {
-  float: left;
-  margin-right: 15px;
-  background: #fafafa;
-}
-
-.headline-ad .carbon-text {
-}
-
-.headline-ad .carbon-poweredby {
-  display: block;
-  color: #aaa;
-  margin-top: 5px;
-}
-
 .social-list.-collapse {
   margin-top: 0;
   position: absolute;
@@ -289,4 +199,3 @@
     display: none;
   }
 }
-