diff --git a/assets/images/twitter.png b/assets/images/twitter.png new file mode 100644 index 000000000..9db5ed5e2 Binary files /dev/null and b/assets/images/twitter.png differ diff --git a/src/client/includes/_twitter_follow.jade b/src/client/includes/_twitter_follow.jade new file mode 100644 index 000000000..4a5180440 --- /dev/null +++ b/src/client/includes/_twitter_follow.jade @@ -0,0 +1,11 @@ +script. + ! function(d, s, id) { + var js, fjs = d.getElementsByTagName(s)[0], + p = /^http:/.test(d.location) ? 'http' : 'https'; + if (!d.getElementById(id)) { + js = d.createElement(s); + js.id = id; + js.src = p + '://platform.twitter.com/widgets.js'; + fjs.parentNode.insertBefore(js, fjs); + } + }(document, 'script', 'twitter-wjs'); diff --git a/src/client/site/common/twitter/twitter.jade b/src/client/site/common/twitter/twitter.jade new file mode 100644 index 000000000..ad0517e28 --- /dev/null +++ b/src/client/site/common/twitter/twitter.jade @@ -0,0 +1,18 @@ +//- +//- Crafting Guide - twitter.jade +//- +//- Copyright © 2014-2016 by Redwood Labs +//- All rights reserved. +//- + +.view__twitter + .left + img(src="/images/twitter.png") + .right + .instructions Follow us for updates! + a( + href="https://twitter.com/Crafting_Guide" + class="twitter-follow-button" + data-show-count="false" + data-size="large" + ) Follow @Crafting_Guide diff --git a/src/client/site/common/twitter/twitter.scss b/src/client/site/common/twitter/twitter.scss new file mode 100644 index 000000000..30f348bdd --- /dev/null +++ b/src/client/site/common/twitter/twitter.scss @@ -0,0 +1,61 @@ +// +// Crafting Guide - news_page.scss +// +// Copyright © 2014-2016 by Redwood Labs +// All rights reserved. +// + +.view__twitter { + display: flex; + + & > .left { + flex: 1 1 50%; + + display: flex; + align-items: center; + justify-content: center; + + img { + height: $size-minecraft-block * 4; + width: $size-minecraft-block * 4; + } + } + + & > .right { + flex: 1 1 50%; + + display: flex; + flex-direction: column; + + .instructions { + flex: 1 1 50%; + margin-bottom: $size-margin-medium; + margin-top: $size-margin-medium; + + font-family: $font-family-header; + font-size: $font-size-xlarge; + text-align: center; + } + + iframe { + flex: 1 1 50%; + } + } +} + +@include screen-size(mobile) { + .view__twitter { + & > .left { + img { + height: $size-minecraft-block * 3; + width: $size-minecraft-block * 3; + } + } + + & > .right { + .instructions { + font-size: $font-size-xlarge; + } + } + } +} diff --git a/src/client/site/index.jade b/src/client/site/index.jade index 078db6860..e94ff60a3 100644 --- a/src/client/site/index.jade +++ b/src/client/site/index.jade @@ -33,4 +33,5 @@ html include ../includes/_google_adsense.jade include ../includes/_google_analytics.jade include ../includes/_google_sitelinks.jade + include ../includes/_twitter_follow.jade diff --git a/src/client/site/news_page/news_page.jade b/src/client/site/news_page/news_page.jade index 705c1ac6f..6797f71c1 100644 --- a/src/client/site/news_page/news_page.jade +++ b/src/client/site/news_page/news_page.jade @@ -9,6 +9,8 @@ .left .right + include ../common/twitter/twitter.jade + section h3 2016-04-30 .panel diff --git a/src/client/site/news_page/news_page.scss b/src/client/site/news_page/news_page.scss index dd31869ce..b359c5038 100644 --- a/src/client/site/news_page/news_page.scss +++ b/src/client/site/news_page/news_page.scss @@ -8,22 +8,32 @@ .view__news_page { @include layout-body-with-sidebar; - section { - &:not(:first-child) { - margin-top : $size-margin-large; - } + .right { + display: flex; + flex-direction: column; + align-items: center; - h3 { - margin-bottom : $size-margin-small; - } +// .view__twitter { +// max-width: $size-minecraft-block * 10; +// } - p { - font-family : $font-family-text; - font-size : $font-size-medium; - line-height : $font-size-medium * 1.5; + section { + &:not(:first-child) { + margin-top : $size-margin-large; + } - &:not(:last-child) { - margin-bottom : $size-margin-medium; + h3 { + margin-bottom : $size-margin-small; + } + + p { + font-family : $font-family-text; + font-size : $font-size-medium; + line-height : $font-size-medium * 1.5; + + &:not(:last-child) { + margin-bottom : $size-margin-medium; + } } } }