From 27095dbc8bde71bb8d620bf39f5185491ccd5aeb Mon Sep 17 00:00:00 2001 From: Erik Date: Thu, 2 Jul 2020 23:55:05 +0900 Subject: [PATCH] Regular updates --- _data/carbon.yml | 4 +- _includes/2017/headline-ad.html | 7 +++ _layouts/2017/home.html | 14 ++--- _layouts/2017/sheet.html | 10 +-- _parcel/critical-home.scss | 2 +- _parcel/critical-sheet.scss | 2 +- _sass/2017/components/headline-ad.scss | 104 +++++++++++++++++++++++--------- _sass/2017/components/main-heading.scss | 7 ++- _sass/2017/components/site-header.scss | 6 +- _sass/2017/style.scss | 2 - _sass/2017/utils/carbon-style.scss | 35 +++++++---- bash.md | 2 + css.md | 13 ---- es6.md | 1 - go.md | 1 - polyfill.io.md | 1 - react.md | 2 - 17 files changed, 124 insertions(+), 89 deletions(-) create mode 100644 _includes/2017/headline-ad.html diff --git a/_data/carbon.yml b/_data/carbon.yml index 6a5668b..536d89c 100644 --- 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 index 0000000..f0ee2c7 --- /dev/null +++ b/_includes/2017/headline-ad.html @@ -0,0 +1,7 @@ + diff --git a/_layouts/2017/home.html b/_layouts/2017/home.html index 36b3dde..c2070e3 100644 --- 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 %} - -{% endif %} -
diff --git a/_layouts/2017/sheet.html b/_layouts/2017/sheet.html index 1690b52..62a2d83 100644 --- a/_layouts/2017/sheet.html +++ b/_layouts/2017/sheet.html @@ -13,16 +13,8 @@

{{ page.title }} {{ site.data.content.sheet.suffix }}

- {% if site.data.codefund.enabled %} - - {% endif %} - {% if site.data.carbon.enabled %} - + {% include 2017/headline-ad.html %} {% endif %}
diff --git a/_parcel/critical-home.scss b/_parcel/critical-home.scss index c97e2bb..549f120 100644 --- 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 --- 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 --- 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 --- 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 --- 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 --- 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 --- 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 --- 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 --- 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 --- 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 --- 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 --- a/polyfill.io.md +++ b/polyfill.io.md @@ -14,7 +14,6 @@ intro: | ```html ``` - {: .-wrap} This is the default script for Polyfill.io. diff --git a/react.md b/react.md index 2aa7db6..2a4eb52 100644 --- 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) -- 2.11.0