Regular updates

diff --git a/_data/carbon.yml b/_data/carbon.yml
index 6a5668b..536d89c 100644 (file)
--- a/_data/carbon.yml
+++ b/_data/carbon.yml
@@ -1,2 +1,2 @@
-enabled: false
-src: //cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=ricostacruzcom
+enabled: true
+src: https://cdn.carbonads.com/carbon.js?serve=CE7IK5QM&placement=devhintsio

diff --git a/_includes/2017/headline-ad.html b/_includes/2017/headline-ad.html
new file mode 100644 (file)
index 0000000..f0ee2c7
--- /dev/null
+++ b/_includes/2017/headline-ad.html
@@ -0,0 +1,7 @@
+<div class='HeadlineAd' role='complementary'>
+  <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
+  <span class='placeholder -one'></span>
+  <span class='placeholder -two'></span>
+  <span class='placeholder -three'></span>
+  <span class='placeholder -four'></span>
+</div>

diff --git a/_layouts/2017/home.html b/_layouts/2017/home.html
index 36b3dde..c2070e3 100644 (file)
--- a/_layouts/2017/home.html
+++ b/_layouts/2017/home.html
@@ -14,12 +14,6 @@
 
 {% include 2017/top-nav.html page=page is_home=true noedit=true noback=true %}
 
-{% if site.data.carbon.enabled %}
-  <div class='SideAd' role='complementary'>
-    <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
-  </div>
-{% endif %}
-
 <div class='body-area -slim'>
   <div class='site-header' role='banner'>
     <h1>
@@ -31,10 +25,10 @@
 
     {% include 2017/search-form.html live=true %}
 
-    {% if site.data.codefund.enabled %}
-    <div class='adbox' role='complementary'>
-      {% include 2017/codefund.html %}
-    </div>
+    {% if site.data.carbon.enabled %}
+      <div class='adbox'>
+        {% include 2017/headline-ad.html %}
+      </div>
     {% endif %}
   </div>
 

diff --git a/_layouts/2017/sheet.html b/_layouts/2017/sheet.html
index 1690b52..62a2d83 100644 (file)
--- a/_layouts/2017/sheet.html
+++ b/_layouts/2017/sheet.html
@@ -13,16 +13,8 @@
     <h1 class='h1'>{{ page.title }} <em>{{ site.data.content.sheet.suffix }}</em></h1>
 
     <div class='adbox' data-js-no-preview>
-      {% if site.data.codefund.enabled %}
-      <div class='ad -codefund' role='complementary'>
-        {% include 2017/codefund.html %}
-      </div>
-      {% endif %}
-
       {% if site.data.carbon.enabled %}
-        <div class='HeadlineAd ad -carbon' role='complementary'>
-          <script async src='{{ site.data.carbon.src }}' id="_carbonads_js"></script>
-        </div>
+        {% include 2017/headline-ad.html %}
       {% endif %}
     </div>
   </header>

diff --git a/_parcel/critical-home.scss b/_parcel/critical-home.scss
index c97e2bb..549f120 100644 (file)
--- a/_parcel/critical-home.scss
+++ b/_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/codefund-sponsor.scss';
+@import '../_sass/2017/components/headline-ad.scss';
 @import '../_sass/2017/components/page-actions.scss';
 @import '../_sass/2017/components/pages-list.scss';
 @import '../_sass/2017/components/search-box.scss';

diff --git a/_parcel/critical-sheet.scss b/_parcel/critical-sheet.scss
index d8fab14..26e0817 100644 (file)
--- a/_parcel/critical-sheet.scss
+++ b/_parcel/critical-sheet.scss
@@ -13,9 +13,9 @@
 // Components
 @import '../_sass/2017/components/back-button.scss';
 @import '../_sass/2017/components/body-area.scss';
-@import '../_sass/2017/components/codefund-sponsor.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/main-heading.scss';
 @import '../_sass/2017/components/page-actions.scss';
 @import '../_sass/2017/components/top-nav.scss';

diff --git a/_sass/2017/components/headline-ad.scss b/_sass/2017/components/headline-ad.scss
index 94f5886..f3adf36 100644 (file)
--- a/_sass/2017/components/headline-ad.scss
+++ b/_sass/2017/components/headline-ad.scss
@@ -1,33 +1,84 @@
 /*
  * Carbon ads
  *
- *     .headline-ad
- *       #carbonads
+ *     .HeadlineAd
+ *       div#carbonads
  *         span
  *           span.carbon-wrap
  *             a.carbon-img > img
- *           a.carbon-text {description}
+ *             a.carbon-text {description}
  *           a.carbon-poweredby {powered by Carbon}
  */
 
+$placeholder-bg-size: 450px;
+
 .HeadlineAd {
-  @include font-size(-1);
   @include carbon-style;
 
   & {
-    display: inline-block;
+    position: relative;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  &,
-  & > div > span {
-    min-width: 130px + 16px + 64px;
-    max-width: 380px;
-    height: 100px;
+  // Hide placeholders after carbon has loaded
+  #carbonads ~ .placeholder {
+    display: none;
+  }
+
+  & > .placeholder {
+    background-image: linear-gradient(
+      92deg,
+      rgba($gray-text, 0.1),
+      rgba($gray-text, 0.17) 15%,
+      rgba($gray-text, 0.1) 30%
+    );
+    background-size: $placeholder-bg-size 100%;
+    animation: 2.5s ease-in-out infinite placeholder-swish;
+    border-radius: 3px;
+    position: absolute;
+    display: block;
+  }
+
+  & > .placeholder.-one {
+    left: 0;
+    top: 0;
+    width: 83px;
+    height: 64px;
+  }
+
+  & > .placeholder.-two,
+  & > .placeholder.-three,
+  & > .placeholder.-four {
+    left: 99px;
+    top: 6px;
+    height: 8px;
+    width: 280px;
+  }
+
+  & > .placeholder.-three {
+    top: 28px;
+  }
+
+  & > .placeholder.-four {
+    top: 50px;
+    width: 80px;
+  }
+
+  // Make the ad show up above the placeholder
+  #carbonads {
+    position: relative;
+    z-index: 1;
   }
 
+  // Carbon wrapper
+  &,
   & > div > span {
-    display: inline-block;
-    text-align: right;
+    display: block;
+    width: 380px;
+    height: 64px;
+    text-align: left;
   }
 
   // Clearfix
@@ -39,25 +90,22 @@
   }
 
   .carbon-img {
-    float: right;
-    margin-left: 16px;
+    float: left;
+    margin-right: 16px;
   }
+}
 
-  .carbon-text:first-line {
-    @include font-size(1);
-    color: $base-head;
-    font-weight: 300;
-    margin-bottom: -0.02em;
+@keyframes placeholder-swish {
+  0% {
+    background-position: ($placeholder-bg-size * -1 / 3) 0%;
   }
 
-  @media (min-width: 481px) {
-    .carbon-poweredby::before {
-      display: block;
-      content: '';
-      width: 32px;
-      height: 1px;
-      background: $dark-line-color;
-      margin: 8px (130px + 16px) 8px auto;
-    }
+  50% {
+    background-position: ($placeholder-bg-size * 2 / 3) 0%;
+  }
+
+  100% {
+    background-position: ($placeholder-bg-size * 2 / 3) 0%;
   }
 }
+

diff --git a/_sass/2017/components/main-heading.scss b/_sass/2017/components/main-heading.scss
index 222f884..6cf6d15 100644 (file)
--- a/_sass/2017/components/main-heading.scss
+++ b/_sass/2017/components/main-heading.scss
@@ -38,8 +38,11 @@
     display: inline-block;
   }
 
-  & > .adbox > .ad.-carbon {
-    margin-top: 16px;
+  @media (min-width: 769px) {
+    & > .adbox {
+      margin-top: 24px;
+      margin-bottom: 24px;
+    }
   }
 }
 

diff --git a/_sass/2017/components/site-header.scss b/_sass/2017/components/site-header.scss
index 6c54fa3..983b6fd 100644 (file)
--- a/_sass/2017/components/site-header.scss
+++ b/_sass/2017/components/site-header.scss
@@ -35,10 +35,10 @@
     margin: 16px auto;
   }
 
-  @media (max-width: 480px) {
+  @media (min-width: 481px) {
     & > .adbox {
-      margin-left: -16px;
-      margin-right: -16px;
+      margin-top: 32px;
+      margin-bottom: 32px;
     }
   }
 }

diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index c69fcde..39dc890 100644 (file)
--- a/_sass/2017/style.scss
+++ b/_sass/2017/style.scss
@@ -25,7 +25,6 @@
 @import './components/announcements-list';
 @import './components/back-button';
 @import './components/body-area';
-@import './components/codefund-sponsor';
 @import './components/comments-area';
 @import './components/comments-details';
 @import './components/comments-section';
@@ -51,7 +50,6 @@
 @import './components/related-post-item';
 @import './components/search-box';
 @import './components/search-footer';
-@import './components/side-ad';
 @import './components/site-header';
 @import './components/top-nav';
 @import './components/top-sheet';

diff --git a/_sass/2017/utils/carbon-style.scss b/_sass/2017/utils/carbon-style.scss
index 7887e46..fb7ae9b 100644 (file)
--- a/_sass/2017/utils/carbon-style.scss
+++ b/_sass/2017/utils/carbon-style.scss
@@ -7,38 +7,47 @@
   .carbon-text,
   .carbon-poweredby {
     text-decoration: none;
-    display: block;
   }
 
-  .carbon-img {
-    width: 130px;
-    height: 100px;
-    box-shadow: $shadow3;
+  // 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: white;
+    background: rgba($gray-text, 0.2);
+    color: transparent;
   }
 
-  .carbon-img:hover {
+  .carbon-img:hover img {
     transform: translate3d(0, -1px, 0);
     box-shadow: $shadow6;
   }
 
   .carbon-text,
   .carbon-text:visited {
-    color: $gray-text;
+    color: $base-text;
   }
 
-  .carbon-poweredby,
-  .carbon-poweredby:visited {
-    color: lighten($gray-text, 20%);
+  // Allow line breaks
+  .carbon-text::after {
+    content: '  ';
   }
 
   .carbon-text:hover,
   .carbon-poweredby:hover {
-    color: $base-a;
+    color: $base-b;
   }
-}
 
+  .carbon-poweredby,
+  .carbon-poweredby:visited {
+    white-space: nowrap;
+    color: $gray-text;
+  }
+}

diff --git a/bash.md b/bash.md
index 1da454a..b06e44e 100644 (file)
--- a/bash.md
+++ b/bash.md
@@ -404,6 +404,8 @@ if [[ -z "$string" ]]; then
   echo "String is empty"
 elif [[ -n "$string" ]]; then
   echo "String is not empty"
+else
+  echo "This never happens"
 fi
 ```
 

diff --git a/css.md b/css.md
index b13e008..fe12d94 100644 (file)
--- a/css.md
+++ b/css.md
@@ -13,7 +13,6 @@ keywords:
 ---
 
 ## Basics
-
 {: .-three-column}
 
 ### Selectors
@@ -23,7 +22,6 @@ keywords:
   font-weight: bold;
 }
 ```
-
 {: .-setup}
 
 | Selector          | Description  |
@@ -92,11 +90,9 @@ keywords:
 | `:last-child`     |
 | `:nth-child(2)`   |
 | `:only-child`     |
-
 {: .-left-align}
 
 ## Fonts
-
 {: .-left-reference}
 
 ### Properties
@@ -114,18 +110,15 @@ keywords:
 | ---                | ---                                  |
 | `text-align:`      | `left` `right` `center` `justify`    |
 | `text-transform:`  | `capitalize` `uppercase` `lowercase` |
-
 {: .-key-values}
 
 ### Shorthand
-
 {: .-prime}
 
 |         | style    | weight | size (required) |     | line-height | family            |
 | ------- | -------- | ------ | --------------- | --- | ----------- | ----------------- |
 | `font:` | `italic` | `400`  | `14px`          | `/` | `1.5`       | `sans-serif`      |
 |         | style    | weight | size (required) |     | line-height | family (required) |
-
 {: .-css-breakdown}
 
 ### Example
@@ -147,7 +140,6 @@ text-transform: lowercase; /* hello */
 ```
 
 ## Background
-
 {: .-left-reference}
 
 ### Properties
@@ -163,7 +155,6 @@ text-transform: lowercase; /* hello */
 | `background-clip:`       | `border-box` `padding-box` `content-box` |
 | `background-repeat:`     | `no-repeat` `repeat-x` `repeat-y`        |
 | `background-attachment:` | `scroll` `fixed` `local`                 |
-
 {: .-key-values}
 
 ### Shorthand
@@ -173,7 +164,6 @@ text-transform: lowercase; /* hello */
 | `background:` | `#ff0` | `url(bg.jpg)` | `left`    | `top`     | `/` | `100px` `auto` | `no-repeat` | `fixed;`   |
 | `background:` | `#abc` | `url(bg.png)` | `center`  | `center`  | `/` | `cover`        | `repeat-x`  | `local;`   |
 |               | color  | image         | positionX | positionY |     | size           | repeat      | attachment |
-
 {: .-css-breakdown}
 
 ### Multiple backgrounds
@@ -184,7 +174,6 @@ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
 ```
 
 ## Animation
-
 {: .-left-reference}
 
 ### Properties
@@ -200,7 +189,6 @@ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
 | `animation-direction:`       | `normal` `reverse` `alternate` `alternate-reverse`       |
 | `animation-fill-mode:`       | `none` `forwards` `backwards` `both` `initial` `inherit` |
 | `animation-play-state:`      | `normal` `reverse` `alternate` `alternate-reverse`       |
-
 {: .-key-values}
 
 ### Shorthand
@@ -209,7 +197,6 @@ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
 | ------------ | -------- | -------- | --------------- | ------- | ---------- | ------------------- | --------- | ---------- |
 | `animation:` | `bounce` | `300ms`  | `linear`        | `100ms` | `infinite` | `alternate-reverse` | `both`    | `reverse`  |
 |              | name     | duration | timing-function | delay   | count      | direction           | fill-mode | play-state |
-
 {: .-css-breakdown}
 
 ### Example

diff --git a/es6.md b/es6.md
index c74dd5f..3be7e89 100644 (file)
--- a/es6.md
+++ b/es6.md
@@ -489,7 +489,6 @@ Object.values(fatherJS)
 Object.entries(fatherJS)
 // [["age", 57], ["name", "Brendan Eich"]]
 ```
-
 {: data-line="3,5"}
 
 

diff --git a/go.md b/go.md
index e130eee..3a723a3 100644 (file)
--- a/go.md
+++ b/go.md
@@ -461,7 +461,6 @@ func main() {
   fmt.Println("Working...")
 }
 ```
-
 {: data-line="2,3,4"}
 
 Lambdas are better suited for defer blocks.

diff --git a/polyfill.io.md b/polyfill.io.md
index 685bc3e..ed553c8 100644 (file)
--- a/polyfill.io.md
+++ b/polyfill.io.md
@@ -14,7 +14,6 @@ intro: |
 ```html
 <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
 ```
-
 {: .-wrap}
 
 This is the default script for Polyfill.io.

diff --git a/react.md b/react.md
index 2aa7db6..2a4eb52 100644 (file)
--- a/react.md
+++ b/react.md
@@ -155,7 +155,6 @@ class Info extends Component {
 }
 ```
 
-
 {: data-line="5,6,7,8,9,10"}
 
 Nest components to separate concerns.
@@ -220,7 +219,6 @@ class Hello extends Component {
   }
 }
 ```
-
 {: data-line="2"}
 
 See: [Setting the default state](https://reactjs.org/docs/react-without-es6.html#setting-the-initial-state)