[Updae] Community: add sections / style ctaboxes

This commit is contained in:
0xfff 2016-11-02 00:05:30 +01:00
parent 4024a6bf83
commit 24c6353230
5 changed files with 76 additions and 98 deletions

View file

@ -11,8 +11,8 @@ description: pages.community.description
<!-- <!--
CTA sections CTA sections
--> -->
<section> <section class="section section--cta">
<div class="content"> <div class="section__content">
<div> <div>
<h2>{% t pages.community.discussion-heading %}</h2> <h2>{% t pages.community.discussion-heading %}</h2>
@ -26,8 +26,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">DashTalk</h4> <h4 class="ctabox__title">DashTalk</h4>
</div> </div>
@ -38,8 +36,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Reddit</h4> <h4 class="ctabox__title">Reddit</h4>
</div> </div>
@ -50,8 +46,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">BitcoinTalk</h4> <h4 class="ctabox__title">BitcoinTalk</h4>
</div> </div>
@ -62,23 +56,21 @@ description: pages.community.description
</div> </div>
</section> </section>
<section> <section class="section section--cta section--gray-light-bg">
<div class="content"> <div class="section__content">
<div> <div>
<h2>{% t pages.community.social-heading %}</h2> <h2>{% t pages.community.social-heading %}</h2>
{% tmd pages.community.social-text %} {% tmd pages.community.social-text %}
</div> </div>
<div class="ctabox"> <div class="ctabox ctabox--gray-light-bg" data-js-ctabox>
<div class="ctabox__inner"> <div class="ctabox__inner">
<article class="ctabox__cta"> <article class="ctabox__cta">
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link"> <a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Twitter</h4> <h4 class="ctabox__title">Twitter</h4>
</div> </div>
@ -89,8 +81,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Facebook</h4> <h4 class="ctabox__title">Facebook</h4>
</div> </div>
@ -101,8 +91,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">YouTube</h4> <h4 class="ctabox__title">YouTube</h4>
</div> </div>
@ -113,8 +101,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/node40.png" class="ctabox__image"> <img src="/assets/img/home/node40.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://node40.com" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">LinkedIn</h4> <h4 class="ctabox__title">LinkedIn</h4>
</div> </div>
@ -125,8 +111,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/protonmail.png" class="ctabox__image"> <img src="/assets/img/home/protonmail.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://protonmail.com/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Instagram</h4> <h4 class="ctabox__title">Instagram</h4>
</div> </div>
@ -137,8 +121,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/qhoster.png" class="ctabox__image"> <img src="/assets/img/home/qhoster.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.qhoster.com/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Qhoster</h4> <h4 class="ctabox__title">Qhoster</h4>
<p class="ctabox__description">Quality Hosting</p> <p class="ctabox__description">Quality Hosting</p>
@ -150,23 +132,21 @@ description: pages.community.description
</div> </div>
</section> </section>
<section> <section class="section section--cta">
<div class="content"> <div class="section__content">
<div> <div>
<h2>{% t pages.community.news-heading %}</h2> <h2>{% t pages.community.news-heading %}</h2>
{% tmd pages.community.news-text %} {% tmd pages.community.news-text %}
</div> </div>
<div class="ctabox"> <div class="ctabox" data-js-ctabox>
<div class="ctabox__inner"> <div class="ctabox__inner">
<article class="ctabox__cta"> <article class="ctabox__cta">
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link"> <a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Dash Nation</h4> <h4 class="ctabox__title">Dash Nation</h4>
</div> </div>
@ -177,8 +157,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Dash Roundtable</h4> <h4 class="ctabox__title">Dash Roundtable</h4>
</div> </div>
@ -189,8 +167,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">DashPay Magazine</h4> <h4 class="ctabox__title">DashPay Magazine</h4>
</div> </div>
@ -201,8 +177,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/node40.png" class="ctabox__image"> <img src="/assets/img/home/node40.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://node40.com" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">DashDot Alpha</h4> <h4 class="ctabox__title">DashDot Alpha</h4>
</div> </div>
@ -213,8 +187,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/protonmail.png" class="ctabox__image"> <img src="/assets/img/home/protonmail.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://protonmail.com/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">What Is Dash?</h4> <h4 class="ctabox__title">What Is Dash?</h4>
</div> </div>
@ -225,8 +197,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/qhoster.png" class="ctabox__image"> <img src="/assets/img/home/qhoster.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.qhoster.com/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Dash N Drink</h4> <h4 class="ctabox__title">Dash N Drink</h4>
</div> </div>
@ -237,23 +207,21 @@ description: pages.community.description
</div> </div>
</section> </section>
<section> <section class="section section--cta section--gray-light-bg">
<div class="content"> <div class="section__content">
<div> <div>
<h2>{% t pages.community.development-heading %}</h2> <h2>{% t pages.community.development-heading %}</h2>
{% tmd pages.community.development-text %} {% tmd pages.community.development-text %}
</div> </div>
<div class="ctabox"> <div class="ctabox ctabox--gray-light-bg" data-js-ctabox>
<div class="ctabox__inner"> <div class="ctabox__inner">
<article class="ctabox__cta"> <article class="ctabox__cta">
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link"> <a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Github</h4> <h4 class="ctabox__title">Github</h4>
</div> </div>
@ -264,8 +232,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">JIRA</h4> <h4 class="ctabox__title">JIRA</h4>
</div> </div>
@ -276,8 +242,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Dash Wiki</h4> <h4 class="ctabox__title">Dash Wiki</h4>
</div> </div>
@ -288,8 +252,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/node40.png" class="ctabox__image"> <img src="/assets/img/home/node40.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://node40.com" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Dash Slack</h4> <h4 class="ctabox__title">Dash Slack</h4>
</div> </div>
@ -300,23 +262,21 @@ description: pages.community.description
</div> </div>
</section> </section>
<section> <section class="section section--cta">
<div class="content"> <div class="section__content">
<div> <div>
<h2>{% t pages.community.masternode-heading %}</h2> <h2>{% t pages.community.masternode-heading %}</h2>
{% tmd pages.community.masternode-text %} {% tmd pages.community.masternode-text %}
</div> </div>
<div class="ctabox"> <div class="ctabox" data-js-ctabox>
<div class="ctabox__inner"> <div class="ctabox__inner">
<article class="ctabox__cta"> <article class="ctabox__cta">
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link"> <a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Dash Central</h4> <h4 class="ctabox__title">Dash Central</h4>
<p class="ctabox__description">Blockchain Assets</p> <p class="ctabox__description">Blockchain Assets</p>
@ -328,8 +288,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">DashNinja</h4> <h4 class="ctabox__title">DashNinja</h4>
</div> </div>
@ -340,8 +298,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Node40</h4> <h4 class="ctabox__title">Node40</h4>
</div> </div>
@ -352,8 +308,6 @@ description: pages.community.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/node40.png" class="ctabox__image"> <img src="/assets/img/home/node40.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://node40.com" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Masternode.me</h4> <h4 class="ctabox__title">Masternode.me</h4>
</div> </div>

View file

@ -43,8 +43,6 @@ description: pages.home.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Boleh VPN</h4> <h4 class="ctabox__title">Boleh VPN</h4>
<p class="ctabox__description">Blockchain Assets</p> <p class="ctabox__description">Blockchain Assets</p>
@ -56,8 +54,6 @@ description: pages.home.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Boleh VPN</h4> <h4 class="ctabox__title">Boleh VPN</h4>
<p class="ctabox__description">Blockchain Assets</p> <p class="ctabox__description">Blockchain Assets</p>
@ -69,8 +65,6 @@ description: pages.home.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image"> <img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Boleh VPN</h4> <h4 class="ctabox__title">Boleh VPN</h4>
<p class="ctabox__description">Blockchain Assets</p> <p class="ctabox__description">Blockchain Assets</p>
@ -82,8 +76,6 @@ description: pages.home.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/node40.png" class="ctabox__image"> <img src="/assets/img/home/node40.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://node40.com" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Node40</h4> <h4 class="ctabox__title">Node40</h4>
<p class="ctabox__description">Blockchain Assets</p> <p class="ctabox__description">Blockchain Assets</p>
@ -95,8 +87,6 @@ description: pages.home.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/protonmail.png" class="ctabox__image"> <img src="/assets/img/home/protonmail.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://protonmail.com/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">ProtonMail</h4> <h4 class="ctabox__title">ProtonMail</h4>
<p class="ctabox__description">Secure Email</p> <p class="ctabox__description">Secure Email</p>
@ -108,8 +98,6 @@ description: pages.home.description
<div class="ctabox__imagewrapper"> <div class="ctabox__imagewrapper">
<img src="/assets/img/home/qhoster.png" class="ctabox__image"> <img src="/assets/img/home/qhoster.png" class="ctabox__image">
</div> </div>
</a>
<a href="https://www.qhoster.com/" target="_blank" class="ctabox__link">
<div class="ctabox__text"> <div class="ctabox__text">
<h4 class="ctabox__title">Qhoster</h4> <h4 class="ctabox__title">Qhoster</h4>
<p class="ctabox__description">Quality Hosting</p> <p class="ctabox__description">Quality Hosting</p>

View file

@ -1,29 +1,29 @@
(function($) { (function($) {
$(function() { // $(function() {
// jQuery to collapse the navbar on scroll // // jQuery to collapse the navbar on scroll
$(window).scroll(function() { // $(window).scroll(function() {
if ($('.navbar').offset().top > 100) { // if ($('.navbar').offset().top > 100) {
$('.navbar-fixed-top').addClass('top-nav-collapse'); // $('.navbar-fixed-top').addClass('top-nav-collapse');
} else { // } else {
$('.navbar-fixed-top').removeClass('top-nav-collapse'); // $('.navbar-fixed-top').removeClass('top-nav-collapse');
} // }
}); // });
// jQuery for page scrolling feature - requires jQuery Easing plugin // // jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() { // $(function() {
$('a.page-scroll').bind('click', function(event) { // $('a.page-scroll').bind('click', function(event) {
var $anchor = $(this); // var $anchor = $(this);
$('html, body').stop().animate({ // $('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top // scrollTop: $($anchor.attr('href')).offset().top
}, 500, 'easeInOutExpo'); // }, 500, 'easeInOutExpo');
event.preventDefault(); // event.preventDefault();
}); // });
}); // });
}); // });
}(jQuery)); }(jQuery));

View file

@ -9,7 +9,9 @@
display: inline-block; display: inline-block;
box-shadow: rgba(0,0,0,0.2) 0 1px 4px; box-shadow: rgba(0,0,0,0.2) 0 1px 4px;
margin-right: 20px; margin-right: 20px;
color: $color-black-light;
background: #fff; background: #fff;
text-align: center;
} }
&__inner, &__inner,
@ -17,6 +19,11 @@
padding: 20px 0; padding: 20px 0;
} }
&__link {
display: block;
padding-bottom: 16px; // optical
}
&__inner { &__inner {
&::before { &::before {
content: ''; content: '';
@ -26,7 +33,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 10%; width: 10%;
background: linear-gradient(to right, $color-gray-light 10%, transparent 100%); background: linear-gradient(to right, white 10%, transparent 100%);
} }
&::after { &::after {
content: ''; content: '';
@ -36,10 +43,24 @@
bottom: 0; bottom: 0;
right: 0; right: 0;
width: 10%; width: 10%;
background: linear-gradient(to left, $color-gray-light 10%, transparent 100%); background: linear-gradient(to left, white 10%, transparent 100%);
} }
} }
&--gray-light-bg {
.ctabox {
&__inner {
&::before {
background: linear-gradient(to right, $color-gray-light 10%, transparent 100%);
}
&::after {
background: linear-gradient(to left, $color-gray-light 10%, transparent 100%);
}
}
}
}
&__imagewrapper { &__imagewrapper {
background: rgba($color-blue-light, 0.1); background: rgba($color-blue-light, 0.1);
width: 100%; width: 100%;
@ -60,11 +81,16 @@
height: auto; height: auto;
} }
&__text { &__title {
color: $color-black-light;
padding-top: 15px;
@include font-title-medium();
}
&__description {
color: $color-gray-dark;
margin: 0 !important; // TODO: get rid of specificity
} }
&__title {
}
&__description { &__description {
} }

View file

@ -1,7 +1,7 @@
$m: 'section'; $m: 'section';
.#{$m} { .#{$m} {
padding-bottom: 100px; padding-bottom: 50px;
width: 100%; width: 100%;
&__content { &__content {
@ -29,6 +29,16 @@ $m: 'section';
} }
} }
&--gray-light-bg {
padding-top: 50px;
margin-bottom: 50px;
background: $color-gray-light;
}
&--cta {
text-align: center;
}
&--home-cta { &--home-cta {
text-align: center; text-align: center;
padding-bottom: 60px; padding-bottom: 60px;