Style updates (#1491)
This commit is contained in:
parent
865ad2cd98
commit
ee072214f7
|
@ -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>
|
|
@ -26,8 +26,8 @@
|
|||
{% include 2017/search-form.html live=true %}
|
||||
|
||||
{% if site.data.carbon.enabled %}
|
||||
<div class='adbox'>
|
||||
{% include 2017/headline-ad.html %}
|
||||
<div class='pubbox'>
|
||||
{% include 2017/headline-pub.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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'>
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -31,12 +31,12 @@
|
|||
margin-top: 32px;
|
||||
}
|
||||
|
||||
& > .adbox {
|
||||
& > .pubbox {
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
@media (min-width: 481px) {
|
||||
& > .adbox {
|
||||
& > .pubbox {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue