Style updates (#1491)

This commit is contained in:
Rico Sta. Cruz 2020-07-03 23:21:02 +10:00 committed by GitHub
parent 865ad2cd98
commit ee072214f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 96 additions and 171 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 %}

View File

@ -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'>

View File

@ -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';

View File

@ -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';

View File

@ -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';

View File

@ -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

View File

@ -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'

View File

@ -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%;
}
}

View File

@ -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;
}

View File

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

View File

@ -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';

View File

@ -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;
}
}

View File

@ -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;
}
}