From 256a77ea6c7855bd2a712d6fd0d8f4fcdc39da8d Mon Sep 17 00:00:00 2001 From: Nistor Cristian Date: Wed, 3 Oct 2018 01:38:41 +0300 Subject: [PATCH] Improved overall styling on home. Created script to fetch latest posts from our.status. Improved Footer. --- themes/navy/layout/index.swig | 47 +- themes/navy/layout/partial/after_footer.swig | 1 + themes/navy/layout/partial/footer.swig | 57 +-- themes/navy/source/css/_partial/main.styl | 492 ++++++++----------- themes/navy/source/img/icon_fb2.svg | 1 + themes/navy/source/img/icon_ri.svg | 1 + themes/navy/source/img/logo-footer.svg | 4 + themes/navy/source/js/fetch_blog_posts.js | 22 + 8 files changed, 283 insertions(+), 342 deletions(-) create mode 100644 themes/navy/source/img/icon_fb2.svg create mode 100644 themes/navy/source/img/icon_ri.svg create mode 100644 themes/navy/source/img/logo-footer.svg create mode 100644 themes/navy/source/js/fetch_blog_posts.js diff --git a/themes/navy/layout/index.swig b/themes/navy/layout/index.swig index ecfa340..51b5443 100644 --- a/themes/navy/layout/index.swig +++ b/themes/navy/layout/index.swig @@ -78,26 +78,26 @@

Future Plans

Nimbus is a research project and a client implementation for Ethereum 2.0 designed to perform well on embedded systems and personal mobile devices, including older smartphones with resource-restricted hardware.

- Learn More on Github + Learn More on Github

Friendly Beginnings

The Nimbus team kicked off research in March 2018 and has steadily been finalizing the blocks needed to deliver a fully stand-alone implementation of the next generation of Ethereum. Excited about new developments? Get in touch!

- See docs + See docs
- +
- +

Friendly Research

We’re translating the latest Ethereum 2.0 research like BN curves, BLS signatures and RANDAO games into practical, performant and reusable libraries to provide fertile exploration ground for further R&D. Want to run advanced simulations and tests? Get in touch!

- See docs + See docs
@@ -107,19 +107,19 @@

We’re building Nimbus as a common good with liberal licensing to allow the widest deployment of Ethereum 2.0 possible. Want to integrate Nimbus in your product? Get in touch!

- See docs + See docs - +
- +

Friendly Networking

We’re translating the latest Ethereum 2.0 research like BN curves, BLS signatures and RANDAO games into practical, performant and reusable libraries to provide fertile exploration ground for further R&D. Want to run advanced simulations and tests? Get in touch!

- See docs + See docs
@@ -129,9 +129,9 @@

The Nim language delivers safe and performant code on any platform with a C compiler available. Developing the latest RISC-V boards or simply have an old Windows machine lying around? Get in touch!

- See docs + See docs - +
@@ -164,7 +164,6 @@
-

Core Contributors

We’re a diverse group of researchers, engineers, and scientists with a passion for web3 technologies. We work primarily in Nim.

@@ -232,25 +231,19 @@
-

Status Partners with the team behind the programming language Nim

-

To bolster research efforts for Nimbus – a sharding client for Ethereum – status.im have partnered with the core team developing the Nim programming language... -

- Read More - +

+

+ Read More
-

Ethereum Client Developers Conference Retrospective

-

A large part of what makes possible "magic internet money" occurs deep down where most people will never see it - in the actual clients. We hosted all the developers in Berlin. Find out what went down... -

- Read More - +

+

+ Read More
-

Introducing Nimbus, An Ethereum 2.0 Sharding Client

-

In order to advance the collective work on scaling Ethereum, we have been building our own client, called Nimbus, which has a particular focus on sharding and resource-restricted devices... -

- Read More - +

+

+ Read More
diff --git a/themes/navy/layout/partial/after_footer.swig b/themes/navy/layout/partial/after_footer.swig index 1effe0a..517f685 100644 --- a/themes/navy/layout/partial/after_footer.swig +++ b/themes/navy/layout/partial/after_footer.swig @@ -6,6 +6,7 @@ {{ js('js/toc') }} {{ js('js/mobile_nav') }} {{ js('js/search') }} +{{ js('js/fetch_blog_posts') }} {% if page.layout === 'plugins' %} diff --git a/themes/navy/layout/partial/footer.swig b/themes/navy/layout/partial/footer.swig index 804556a..828764d 100644 --- a/themes/navy/layout/partial/footer.swig +++ b/themes/navy/layout/partial/footer.swig @@ -1,35 +1,32 @@ -
-
-
-
-

We’re All Open Source

-

Check out the source code on GitHub and contribute

- Github -
-
-

We’re here to help

-

Contact us for support and join in on the conversation in Status itself

- Join Chat + diff --git a/themes/navy/source/css/_partial/main.styl b/themes/navy/source/css/_partial/main.styl index a2ae423..8d941e2 100644 --- a/themes/navy/source/css/_partial/main.styl +++ b/themes/navy/source/css/_partial/main.styl @@ -235,6 +235,7 @@ select[multiple] { height: 56px; top: 0; margin: 24px 0 0 0; + z-index: 9; } .header-left { @@ -748,59 +749,6 @@ select[multiple] { } } -.pre-footer { - width: 100%; - background-color: #262A39; - position: relative; -} - -.pre-footer h3 { - font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; - font-size: 20px; - line-height: 24px; - color: white; - padding: 0 0 8px 0; -} - -.pre-footer p { - color: rgba(255, 255, 255, 0.6); - padding: 0 0 12px 0; -} - -.pre-footer .button { - background-color: rgba(255, 255, 255, 0.1); -} - -.pre-footer .button:hover { - background-color: rgba(255, 255, 255, 0.2); -} - -.pre-footer-inner { - display: flex; - flex-direction: column; - align-items: center; - margin: 0 auto; -} - -.community { - width: 1024px; - display: flex; -} - -.community-item { - width: 50%; - display: flex; - text-align: center; - align-items: center; - flex-direction: column; - justify-content: center; - height: 220px; -} - -.community a.button { - width: 100px; -} - .mail { width: 100%; display: flex; @@ -842,217 +790,6 @@ select[multiple] { } } -.footer { - width: 100%; - display: flex; - justify-content: center; - background-color: #262A39; - position: relative; - z-index: 999; -} - -.footer-inner { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - width: 1024px; -} - -.footer-logo-wrap { - width: 317px; - display: flex; - text-align: center; -} - -.footer-logo-wrap__inner { - width: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 24px 0 75px 0; -} - -a.footer-logo { - display: block; - width: 52px; - height: 52px; - background-size: 52px; - background-image: url(../img/footer-logo.svg); -} - -a.footer-logo:hover { - opacity: .8; -} - -.footer-address { - color: #FFFFFF; - padding: 20px 0 0 0; - opacity: .5; -} - -.footer-table { - width: 317px; - display: flex; - justify-content: space-between; -} - -.footer-table__column { - box-sizing: border-box; - padding: 56px 0; -} - -.footer-header { - color: #FFFFFF; - opacity: .5; - font-size: 17px; - margin: 0 0 40px 0; -} - -.footer-link { - height: 32px; - line-height: 32px; - font-size: 16px; - margin: 0 0 15px 0; -} - -.footer-link a { - text-decoration: none; - display: flex; - align-items: center; -} - -.footer-icon { - display: inline-block; - width: 32px; - height: 32px; - background-color: rgba(255, 255, 255, 0.1); - border-radius: 50%; - margin: 0 15px 0 0; - background-repeat: no-repeat; - background-size: 24px; - background-position: center; -} - -.footer-link--fb .footer-icon { - background-image: url(../img/icon_fb.svg); -} - -.footer-link--tw .footer-icon { - background-image: url(../img/icon_tw2.svg); -} - -.footer-link--sl .footer-icon { - background-image: url(../img/icon_sl2.svg); -} - -.footer-link--gh .footer-icon { - background-image: url(../img/icon_gh2.svg); -} - -.footer-link--rd .footer-icon { - background-image: url(../img/icon_rd2.svg); -} - -.footer-link--yt .footer-icon { - background-image: url(../img/icon_yt.svg); -} - -.footer-link a { - color: #FFFFFF; -} - -.footer-link a:hover { - opacity: .8; -} - -.language-switcher { - font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; - color: #FFFFFF; - -webkit-appearance: none; - font-size: 16px; - line-height: 32px; - padding: 0 24px 0 0; - background-image: url(../img/icon_dropdown-white.svg); - background-size: 24px; - background-repeat: no-repeat; - background-position: right center; -} - -.language-switcher:focus { - outline: none; -} - -@media (max-width: 1140px) { - .footer-inner { - width: 820px; - justify-content: space-around; - } - - .footer-logo-wrap { - width: 200px; - } -} - -@media (max-width: 767px) { - .footer { - border-top: 0px; - } - - .footer.footer--page { - border-top: 0px solid #4A5C69; - } - - .footer-inner { - padding: 0 0 0 0; - flex-direction: column; - } - - .footer-table { - flex-direction: column; - align-items: center; - justify-content: center; - } - - .footer-table__column { - text-align: center; - padding: 10px 16px; - } - - .footer-logo-wrap { - width: auto; - order: 2; - } - - .footer-header { - margin: 0 0 10px 0; - } - - .footer-logo-wrap__inner { - width: 100%; - padding: 0 0 64px 0; - align-items: center; - text-align: center; - } - - .footer-link { - text-align: center; - height: 24px; - line-height: 24px; - margin: 0 0 10px 0; - } - - .footer-link a { - justify-content: center; - text-align: center; - } - - .footer-icon { - display: none; - } -} - body { font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 400; @@ -1108,7 +845,7 @@ body { } .section-header { - margin: -136px auto -60px auto; + margin: -136px auto 0 auto; width: 100%; max-width: 1200px; padding: 60px 0; @@ -1177,8 +914,9 @@ body { margin: 0 auto; display: flex; flex-direction: column; - width: 1000px; - padding: 42px 0 16px 0; + max-width: 912px; + width: 100%; + padding: 40px 0 24px 0; } .inner-header h2 { @@ -1186,18 +924,19 @@ body { font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; padding: 0 0 8px 0; text-align: left; + font-weight: bold; } .inner-header p { + line-height: 25px; font-size: 16px; - color: #777f86; - line-height: 24px; - width: 590px; + color: #939BA1; + max-width: 590px; } .sections { width: 100%; - margin: 60px 0 0 0; + margin: 24px 0 0 0; padding: 0 0 60px 0; display: flex; align-items: center; @@ -1400,18 +1139,24 @@ pre { } .contribute-wrap { - width: 1000px; + max-width: 912px; + display: flex; + width: 100%; + flex-wrap: wrap; + min-height: 300px; } -.contribute { - width: 27%; - height: 280px; - background-color: #ffffff; +.contribute + display: flex; + background-color: #fff; border-radius: 5px; - padding: 40px; - float: left; - margin: 20px; -} + margin-right: 24px; + padding: 30px 24px 24px 24px; + width: calc(33.33% - 16px); + flex-direction: column; + margin-bottom: 24px; + &:nth-child(3n+3) + margin-right: 0 .contribute h3 { font-style: normal; @@ -1421,20 +1166,24 @@ pre { margin-bottom: 8px; } -.contribute p { +.contribute p font-style: normal; font-weight: normal; line-height: 25px; font-size: 16px; color: #939BA1; - margin-bottom: 40px; -} + margin-bottom: 20px; + overflow hidden + &:last-child + margin-bottom: 0; + margin-top: auto; .contribute a { line-height: 24px; font-size: 16px; color: #FF9C00; text-decoration: none; + margin-top: auto; } .contribute span { @@ -1443,8 +1192,181 @@ pre { .contributor { margin-bottom: 24px; + width: 70px; + height: 70px; + display: flex + object-fit: cover } -.blog { - height: 400px; +footer + color: #7D7F88; + background: #262A39; + padding: 60px 0; + position relative; + z-index: 9 + .container + max-width: 1200px; + margin: 0 auto; + display: flex; + a + text-decoration: none + .info + flex: 0 0 33.333333%; + max-width: 33.333333%; + display: flex; + flex-direction: column; + .social-links + flex: 0 0 16.666667%; + max-width: 16.666667%; + margin-left: auto + .more + flex: 0 0 16.666667%; + max-width: 16.666667%; + +footer + .blog-logo + height: auto; + display: flex; + font-family: 'GT Walsheim', sans-serif; + a + display: flex; + align-items: center; + &:hover + color: #4360df; + span + line-height: 1; + font-size: 26px; + text-transform: lowercase; + font-weight: bold; + margin-left: 10px; + +footer a{ + color: #fff; +} + +footer p{ + margin-top: auto; + margin-bottom: 0; + line-height: 26px; + font-size: 16px; +} + +footer h3{ + margin-top: 0; + margin-bottom: 30px; + padding: 0; + font-style: normal; + font-weight: normal; + line-height: 24px; + font-size: 16px; +} + +footer ul{ + list-style-type: none; + margin: 0; + padding: 0; +} + +footer ul li{ + margin-bottom: 24px; +} + +footer ul li a:hover{ + opacity: .6; + color: #fff; +} + +footer ul.community li a{ + position: relative; + padding-left: 48px; +} + +footer ul.community li a:before, +footer ul.community li a:after{ + content: ''; + width: 32px; + height: 32px; + border-radius: 50%; + background: #FFFFFF; + opacity: 0.1; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); +} + +footer ul.community li a:after{ + opacity: 1; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; +} + +footer ul.community li a.footer-facebook:after{ + background-image: url(../img/icon_fb2.svg); +} + +footer ul.community li a.footer-twitter:after{ + background-image: url(../img/icon_tw2.svg); +} + +footer ul.community li a.footer-riot:after{ + background-image: url(../img/icon_ri.svg); +} + +footer ul.community li a.footer-github:after{ + background-image: url(../img/icon_gh2.svg); +} + +footer ul.community li a.footer-reddit:after{ + background-image: url(../img/icon_rd2.svg); +} + +footer ul.community li a.footer-youtube:after{ + background-image: url(../img/icon_yt.svg); +} + +footer .project h4{ + margin: 0 0 10px 0; + padding: 0; + font-family: 'GT Walsheim', sans-serif; +} + +footer .project p{ + margin: 0 0 30px 0; + max-width: 220px; + line-height: 20px; + font-size: 14px; +} + +footer .copyright{ + margin-top: 30px; +} + +footer .copyright p{ + margin: 20px 0; + font-size: 14px; + line-height: 20px; +} + +footer .share{ + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; +} + +footer .share a{ + width: 60px; + height: 60px; + font-size: 22px; + margin: 0 10px; +} + +footer input[type="email"]{ + border: 3px solid #ffffff; + background: #eff0f1; } \ No newline at end of file diff --git a/themes/navy/source/img/icon_fb2.svg b/themes/navy/source/img/icon_fb2.svg new file mode 100644 index 0000000..1741a8e --- /dev/null +++ b/themes/navy/source/img/icon_fb2.svg @@ -0,0 +1 @@ +icon_fb \ No newline at end of file diff --git a/themes/navy/source/img/icon_ri.svg b/themes/navy/source/img/icon_ri.svg new file mode 100644 index 0000000..7a31f8b --- /dev/null +++ b/themes/navy/source/img/icon_ri.svg @@ -0,0 +1 @@ +icon_sl \ No newline at end of file diff --git a/themes/navy/source/img/logo-footer.svg b/themes/navy/source/img/logo-footer.svg new file mode 100644 index 0000000..d5cee42 --- /dev/null +++ b/themes/navy/source/img/logo-footer.svg @@ -0,0 +1,4 @@ + + + + diff --git a/themes/navy/source/js/fetch_blog_posts.js b/themes/navy/source/js/fetch_blog_posts.js new file mode 100644 index 0000000..07e7f61 --- /dev/null +++ b/themes/navy/source/js/fetch_blog_posts.js @@ -0,0 +1,22 @@ +$(document).ready(function () { + let url = 'https://our-status.ghost.io/ghost/api/v0.1/posts/?limit=3&formats=plaintext&client_id=ghost-frontend&client_secret=1c5590b47eb4'; + $.ajax({ + type: "get", + url: url, + success: function (response) { + $.each(response.posts, function (index, val) { + $('.contribute.blog:nth-child('+ (index+1) +') h3').text(val.title); + if(val.custom_excerpt != null) { + $('.contribute.blog:nth-child('+ (index+1) +') p').text(val.custom_excerpt); + }else{ + $('.contribute.blog:nth-child('+ (index+1) +') p').text(getWords(val.plaintext)); + } + }); + } + }); + + function getWords(str) { + return str.split(/\s+/).slice(0,25).join(" "); + } + +});