From 24c635323070454f88b99fbad441e85f98653d53 Mon Sep 17 00:00:00 2001 From: 0xfff <0xfff@protonmail.com> Date: Wed, 2 Nov 2016 00:05:30 +0100 Subject: [PATCH] [Updae] Community: add sections / style ctaboxes --- community/index.html | 74 ++++++++--------------------------------- index.html | 12 ------- src/js/scrolling-nav.js | 40 +++++++++++----------- src/scss/_ctabox.scss | 36 +++++++++++++++++--- src/scss/_section.scss | 12 ++++++- 5 files changed, 76 insertions(+), 98 deletions(-) diff --git a/community/index.html b/community/index.html index b024f1d..df29773 100644 --- a/community/index.html +++ b/community/index.html @@ -11,8 +11,8 @@ description: pages.community.description -
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+

{% t pages.community.masternode-heading %}

{% tmd pages.community.masternode-text %}
-
+
-
-

Dash Central

Blockchain Assets

@@ -328,8 +288,6 @@ description: pages.community.description
-
-

DashNinja

@@ -340,8 +298,6 @@ description: pages.community.description
-
-

Node40

@@ -352,8 +308,6 @@ description: pages.community.description
-
-

Masternode.me

diff --git a/index.html b/index.html index f51bb09..bb4c8c6 100644 --- a/index.html +++ b/index.html @@ -43,8 +43,6 @@ description: pages.home.description
-
-

Boleh VPN

Blockchain Assets

@@ -56,8 +54,6 @@ description: pages.home.description
-
-

Boleh VPN

Blockchain Assets

@@ -69,8 +65,6 @@ description: pages.home.description
-
-

Boleh VPN

Blockchain Assets

@@ -82,8 +76,6 @@ description: pages.home.description
-
-

Node40

Blockchain Assets

@@ -95,8 +87,6 @@ description: pages.home.description
-
-

ProtonMail

Secure Email

@@ -108,8 +98,6 @@ description: pages.home.description
-
-

Qhoster

Quality Hosting

diff --git a/src/js/scrolling-nav.js b/src/js/scrolling-nav.js index 1cc6d00..07fe59f 100755 --- a/src/js/scrolling-nav.js +++ b/src/js/scrolling-nav.js @@ -1,29 +1,29 @@ (function($) { - $(function() { + // $(function() { - // jQuery to collapse the navbar on scroll - $(window).scroll(function() { - if ($('.navbar').offset().top > 100) { - $('.navbar-fixed-top').addClass('top-nav-collapse'); - } else { - $('.navbar-fixed-top').removeClass('top-nav-collapse'); - } - }); + // // jQuery to collapse the navbar on scroll + // $(window).scroll(function() { + // if ($('.navbar').offset().top > 100) { + // $('.navbar-fixed-top').addClass('top-nav-collapse'); + // } else { + // $('.navbar-fixed-top').removeClass('top-nav-collapse'); + // } + // }); - // jQuery for page scrolling feature - requires jQuery Easing plugin - $(function() { - $('a.page-scroll').bind('click', function(event) { - var $anchor = $(this); + // // jQuery for page scrolling feature - requires jQuery Easing plugin + // $(function() { + // $('a.page-scroll').bind('click', function(event) { + // var $anchor = $(this); - $('html, body').stop().animate({ - scrollTop: $($anchor.attr('href')).offset().top - }, 500, 'easeInOutExpo'); + // $('html, body').stop().animate({ + // scrollTop: $($anchor.attr('href')).offset().top + // }, 500, 'easeInOutExpo'); - event.preventDefault(); - }); - }); + // event.preventDefault(); + // }); + // }); - }); + // }); }(jQuery)); diff --git a/src/scss/_ctabox.scss b/src/scss/_ctabox.scss index 53a987a..ee9c535 100644 --- a/src/scss/_ctabox.scss +++ b/src/scss/_ctabox.scss @@ -9,7 +9,9 @@ display: inline-block; box-shadow: rgba(0,0,0,0.2) 0 1px 4px; margin-right: 20px; + color: $color-black-light; background: #fff; + text-align: center; } &__inner, @@ -17,6 +19,11 @@ padding: 20px 0; } + &__link { + display: block; + padding-bottom: 16px; // optical + } + &__inner { &::before { content: ''; @@ -26,7 +33,7 @@ bottom: 0; left: 0; width: 10%; - background: linear-gradient(to right, $color-gray-light 10%, transparent 100%); + background: linear-gradient(to right, white 10%, transparent 100%); } &::after { content: ''; @@ -36,10 +43,24 @@ bottom: 0; right: 0; 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 { background: rgba($color-blue-light, 0.1); width: 100%; @@ -60,11 +81,16 @@ 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 { } diff --git a/src/scss/_section.scss b/src/scss/_section.scss index c38f92d..2ae7568 100644 --- a/src/scss/_section.scss +++ b/src/scss/_section.scss @@ -1,7 +1,7 @@ $m: 'section'; .#{$m} { - padding-bottom: 100px; + padding-bottom: 50px; width: 100%; &__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 { text-align: center; padding-bottom: 60px;