diff --git a/_parcel/_utils.scss b/_parcel/_utils.scss index d6a6c7827..620784407 100644 --- a/_parcel/_utils.scss +++ b/_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'; diff --git a/_parcel/critical-home.scss b/_parcel/critical-home.scss index 549f120ce..2442a64b0 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/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'; diff --git a/_parcel/critical-sheet.scss b/_parcel/critical-sheet.scss index 26e081792..f8a55be0a 100644 --- a/_parcel/critical-sheet.scss +++ b/_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'; diff --git a/_sass/2015/components/post-headline.sass b/_sass/2015/components/post-headline.sass index 7a950fafd..7cda2050f 100644 --- a/_sass/2015/components/post-headline.sass +++ b/_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 + diff --git a/_sass/2015/style.sass b/_sass/2015/style.sass index e1a919afe..2e737f078 100644 --- a/_sass/2015/style.sass +++ b/_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' diff --git a/_sass/2017/components/headline-ad.scss b/_sass/2017/components/headline-pub.scss similarity index 67% rename from _sass/2017/components/headline-ad.scss rename to _sass/2017/components/headline-pub.scss index f3adf3600..a93b2798e 100644 --- a/_sass/2017/components/headline-ad.scss +++ b/_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; - -.HeadlineAd { +.HeadlinePub { @include carbon-style; & { @@ -108,4 +162,3 @@ $placeholder-bg-size: 450px; 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 6cf6d155f..b7ece1d16 100644 --- a/_sass/2017/components/main-heading.scss +++ b/_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; } diff --git a/_sass/2017/components/site-header.scss b/_sass/2017/components/site-header.scss index 983b6fd4e..2ee0b47d6 100644 --- a/_sass/2017/components/site-header.scss +++ b/_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; } diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss index 39dc89027..97145ac1d 100644 --- a/_sass/2017/style.scss +++ b/_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'; diff --git a/_sass/2017/utils/carbon-style.scss b/_sass/2017/utils/carbon-style.scss deleted file mode 100644 index fb7ae9b7a..000000000 --- a/_sass/2017/utils/carbon-style.scss +++ /dev/null @@ -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; - } -} diff --git a/assets/style.css b/assets/style.css index 9e7a19219..e552f606f 100644 --- a/assets/style.css +++ b/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: - 2px 2px 0 white, - 3px 3px 0 #ddd; + text-shadow: 2px 2px 0 white, 3px 3px 0 #ddd; + margin-top: 20px; } /* @@ -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; } } -