Improved overall styling on home.

Created script to fetch latest posts from our.status.
Improved Footer.
This commit is contained in:
Nistor Cristian 2018-10-03 01:38:41 +03:00
parent df4fded065
commit 256a77ea6c
8 changed files with 283 additions and 342 deletions

View File

@ -78,26 +78,26 @@
<h2 id="top-header">Future Plans</h2> <h2 id="top-header">Future Plans</h2>
<p>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. <p>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.
</p> </p>
<a href="https://github.com/status-im/nimbus">Learn More on Github <img src="../img/arrow_orange.png" /></a> <a href="https://github.com/status-im/nimbus">Learn More on Github <img src="../img/arrow_orange.svg" /></a>
<div class="work-item"> <div class="work-item">
<div class="work-item-inner"> <div class="work-item-inner">
<h2>Friendly Beginnings</h2> <h2>Friendly Beginnings</h2>
<p>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 <p>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! the next generation of Ethereum. Excited about new developments? Get in touch!
</p> </p>
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.png" /></a> <a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
</div> </div>
<img class="work-item-image work-item-image-right" src="../img/graphic-friendly-beginnings.png" /> <img class="work-item-image work-item-image-right" src="../img/graphic-friendly-beginnings.svg" />
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div class="work-item"> <div class="work-item">
<img class="work-item-image" src="../img/graphic-research.png" /> <img class="work-item-image" src="../img/graphic-research.svg" />
<div class="work-item-inner"> <div class="work-item-inner">
<h2>Friendly Research</h2> <h2>Friendly Research</h2>
<p>Were translating the latest Ethereum 2.0 research like BN curves, BLS signatures and RANDAO games into practical, performant and reusable <p>Were 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! libraries to provide fertile exploration ground for further R&D. Want to run advanced simulations and tests? Get in touch!
</p> </p>
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.png" /></a> <a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
</div> </div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
@ -107,19 +107,19 @@
<p>Were building Nimbus as a common good with liberal licensing to allow the widest deployment of Ethereum 2.0 possible. <p>Were 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! Want to integrate Nimbus in your product? Get in touch!
</p> </p>
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.png" /></a> <a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
</div> </div>
<img class="work-item-image work-item-image-right" src="../img/graphic-research.png" /> <img class="work-item-image work-item-image-right" src="../img/graphic-licensing.svg" />
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div class="work-item"> <div class="work-item">
<img class="work-item-image" src="../img/graphic-network.png" /> <img class="work-item-image" src="../img/graphic-network.svg" />
<div class="work-item-inner"> <div class="work-item-inner">
<h2>Friendly Networking</h2> <h2>Friendly Networking</h2>
<p>Were translating the latest Ethereum 2.0 research like BN curves, BLS signatures and RANDAO games into practical, <p>Were 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! performant and reusable libraries to provide fertile exploration ground for further R&D. Want to run advanced simulations and tests? Get in touch!
</p> </p>
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.png" /></a> <a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
</div> </div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
@ -129,9 +129,9 @@
<p>The Nim language delivers safe and performant code on any platform with a C compiler available. Developing the latest RISC-V <p>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! boards or simply have an old Windows machine lying around? Get in touch!
</p> </p>
<a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.png" /></a> <a href="https://github.com/status-im/nimbus">See docs <img src="../img/arrow_orange.svg" /></a>
</div> </div>
<img class="work-item-image work-item-image-right" src="../img/graphic-platform-support.png" /> <img class="work-item-image work-item-image-right" src="../img/graphic-platform-support.svg" />
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
@ -164,7 +164,6 @@
</div> </div>
</div> </div>
<div class="inner-header"> <div class="inner-header">
<a name="team"></a>
<h2>Core Contributors</h2> <h2>Core Contributors</h2>
<p>Were a diverse group of researchers, engineers, and scientists with a passion for web3 technologies. We work primarily in Nim.</p> <p>Were a diverse group of researchers, engineers, and scientists with a passion for web3 technologies. We work primarily in Nim.</p>
</div> </div>
@ -232,25 +231,19 @@
</div> </div>
<div class="contribute-wrap"> <div class="contribute-wrap">
<div class="contribute blog"> <div class="contribute blog">
<h3>Status Partners with the team behind the programming language Nim</h3> <h3></h3>
<p>To bolster research efforts for Nimbus a sharding client for Ethereum status.im have partnered with the core team developing the Nim programming language... <p></p>
<p> <a href="#">Read More <img src="../img/arrow_ogn.png" /></a>
<a href="https://our.status.im/status-partners-with-the-team-behind-the-programming-language-nim/">Read More</a>
<span><a href="https://our.status.im/status-partners-with-the-team-behind-the-programming-language-nim/"><img src="../img/arrow_ogn.png" /></a></span>
</div> </div>
<div class="contribute blog"> <div class="contribute blog">
<h3>Ethereum Client Developers Conference Retrospective</h3> <h3></h3>
<p>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... <p></p>
<p> <a href="#">Read More <img src="../img/arrow_ogn.png" /></a>
<a href="https://our.status.im/ethereum-client-developers-conference/">Read More</a>
<span><a href="https://our.status.im/ethereum-client-developers-conference/"><img src="../img/arrow_ogn.png" /></a></span>
</div> </div>
<div class="contribute blog"> <div class="contribute blog">
<h3>Introducing Nimbus, An Ethereum 2.0 Sharding Client</h3> <h3></h3>
<p>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... <p></p>
<p> <a href="#">Read More <img src="../img/arrow_ogn.png" /></a>
<a href="https://our.status.im/introducing-nimbus-an/">Read More</a>
<span><a href="https://our.status.im/introducing-nimbus-an/"><img src="../img/arrow_ogn.png" /></a></span>
</div> </div>
</div> </div>
</div> </div>

View File

@ -6,6 +6,7 @@
{{ js('js/toc') }} {{ js('js/toc') }}
{{ js('js/mobile_nav') }} {{ js('js/mobile_nav') }}
{{ js('js/search') }} {{ js('js/search') }}
{{ js('js/fetch_blog_posts') }}
<!-- endbuild --> <!-- endbuild -->
{% if page.layout === 'plugins' %} {% if page.layout === 'plugins' %}
<!-- Plugin search --> <!-- Plugin search -->

View File

@ -1,35 +1,32 @@
<div class="pre-footer"> <footer class="site-footer">
<div class="pre-footer-inner"> <div class="container">
<div class="community"> <div class="info">
<div class="community-item"> <div class="blog-logo">
<h3>Were All Open Source</h3> <a href="https://status.im/" ><img src="../img/logo-footer.svg" alt="Status"><span>status</span></a>
<p>Check out the source code on GitHub and contribute</p>
<a href="https://github.com/status-im" class="button" target="_blank">Github</a>
</div>
<div class="community-item">
<h3>Were here to help</h3>
<p>Contact us for support and join in on the conversation in Status itself</p>
<a href="https://get.status.im/chat/public/developers" class="button">Join Chat</a>
</div> </div>
<p>Status Holdings Pte. Ltd. <br>6 Ubi Road Singapore </p>
</div> </div>
<div class="mail"> <div class="social-links">
<div class="mail-inner"> <h3>Social links</h3>
<h3>Download Status</h3> <ul class="community">
<p>If you have an Android, you can easily get Status <a href="https://play.google.com/store/apps/details?id=im.status.ethereum" target="_blank" class="download">here</a>. You can also download our nightlies and desktop builds <a href="https://status-im.github.io/nightly/" target="_blank" class="download">here</a>.</p> <li><a href="https://www.facebook.com/ethstatus" target="_blank" class="footer-facebook">Facebook</a></li>
<p>If you're on iOS, you'll need to use <a href="https://testflight.apple.com/join/J8EuJmey" target="_blank" class="download">this form</a> to sign up easily and get TestFlight while we're still in Beta.</p> <li><a href="https://twitter.com/ethstatus" target="_blank" class="footer-twitter">Twitter</a></li>
</div> <li><a href="https://chat.status.im/#/register" target="_blank" class="footer-riot">Riot</a></li>
<li><a href="https://github.com/status-im" target="_blank" class="footer-github">GitHub</a></li>
<li><a href="https://www.reddit.com/r/statusim/" target="_blank" class="footer-reddit">Reddit</a></li>
<li><a href="https://www.youtube.com/statusim" target="_blank" class="footer-youtube">YouTube</a></li>
</ul>
</div> </div>
<div class="more">
<h3>More</h3>
<ul>
<li><a href="http://docs.status.im/">Status Docs</a></li>
<li><a href="https://our.status.im/">Our Status</a></li>
<li><a href="https://status.im/open-positions.html">Jobs</a></li>
<li><a href="https://status.im/incubate">Incubate</a></li>
<li><a href="https://status.im/projects">Projects</a></li>
<li><a href="https://status.im/privacy-policy.html">Privacy Policy</a></li>
</ul>
</div> </div>
</div>
<div class="footer">
<div class="footer-inner">
<div class="footer-logo-wrap">
<div class="footer-logo-wrap__inner">
<a class="footer-logo" href="https://status.im" target="_blank"></a>
<div class="footer-address">Status Research & Development GmbH<br/>Baarerstrasse 10<br/>Zug, Switzerland
</div>
</div>
</div>
</div> </div>
</div> </footer>

View File

@ -235,6 +235,7 @@ select[multiple] {
height: 56px; height: 56px;
top: 0; top: 0;
margin: 24px 0 0 0; margin: 24px 0 0 0;
z-index: 9;
} }
.header-left { .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 { .mail {
width: 100%; width: 100%;
display: flex; 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 { body {
font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-weight: 400; font-weight: 400;
@ -1108,7 +845,7 @@ body {
} }
.section-header { .section-header {
margin: -136px auto -60px auto; margin: -136px auto 0 auto;
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
padding: 60px 0; padding: 60px 0;
@ -1177,8 +914,9 @@ body {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 1000px; max-width: 912px;
padding: 42px 0 16px 0; width: 100%;
padding: 40px 0 24px 0;
} }
.inner-header h2 { .inner-header h2 {
@ -1186,18 +924,19 @@ body {
font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
padding: 0 0 8px 0; padding: 0 0 8px 0;
text-align: left; text-align: left;
font-weight: bold;
} }
.inner-header p { .inner-header p {
line-height: 25px;
font-size: 16px; font-size: 16px;
color: #777f86; color: #939BA1;
line-height: 24px; max-width: 590px;
width: 590px;
} }
.sections { .sections {
width: 100%; width: 100%;
margin: 60px 0 0 0; margin: 24px 0 0 0;
padding: 0 0 60px 0; padding: 0 0 60px 0;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1400,18 +1139,24 @@ pre {
} }
.contribute-wrap { .contribute-wrap {
width: 1000px; max-width: 912px;
display: flex;
width: 100%;
flex-wrap: wrap;
min-height: 300px;
} }
.contribute { .contribute
width: 27%; display: flex;
height: 280px; background-color: #fff;
background-color: #ffffff;
border-radius: 5px; border-radius: 5px;
padding: 40px; margin-right: 24px;
float: left; padding: 30px 24px 24px 24px;
margin: 20px; width: calc(33.33% - 16px);
} flex-direction: column;
margin-bottom: 24px;
&:nth-child(3n+3)
margin-right: 0
.contribute h3 { .contribute h3 {
font-style: normal; font-style: normal;
@ -1421,20 +1166,24 @@ pre {
margin-bottom: 8px; margin-bottom: 8px;
} }
.contribute p { .contribute p
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
line-height: 25px; line-height: 25px;
font-size: 16px; font-size: 16px;
color: #939BA1; color: #939BA1;
margin-bottom: 40px; margin-bottom: 20px;
} overflow hidden
&:last-child
margin-bottom: 0;
margin-top: auto;
.contribute a { .contribute a {
line-height: 24px; line-height: 24px;
font-size: 16px; font-size: 16px;
color: #FF9C00; color: #FF9C00;
text-decoration: none; text-decoration: none;
margin-top: auto;
} }
.contribute span { .contribute span {
@ -1443,8 +1192,181 @@ pre {
.contributor { .contributor {
margin-bottom: 24px; margin-bottom: 24px;
width: 70px;
height: 70px;
display: flex
object-fit: cover
} }
.blog { footer
height: 400px; 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;
} }

View File

@ -0,0 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon_fb</title><path d="M13.203 13.07h2.349l.353-2.633h-2.702v-1.69c0-.764.213-1.285 1.349-1.285H16V5.1a20.754 20.754 0 0 0-2.11-.1c-2.09 0-3.52 1.225-3.52 3.486v1.95H8v2.634h2.371v6.787h2.832V13.07z" fill="#FFF" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 330 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>icon_sl</title><g fill="#FFF"><path d="M12.632 3.316H7.893a2.365 2.365 0 0 0-2.368 2.369v11.821a2.365 2.365 0 0 0 2.368 2.369 2.366 2.366 0 0 0 2.369-2.369v-2.369h2.37c3.254 0 5.91-2.656 5.91-5.911 0-3.254-2.656-5.91-5.91-5.91z"/><path d="M7.905 19.277a1.771 1.771 0 0 1-1.771-1.771V5.673a1.77 1.77 0 0 1 1.759-1.772h4.739a5.336 5.336 0 0 1 5.325 5.325 5.334 5.334 0 0 1-5.325 5.324H9.676v2.956c0 .967-.794 1.771-1.771 1.771z"/><path d="M7.905 18.68a1.185 1.185 0 0 1-1.185-1.186V5.673c0-.645.517-1.173 1.161-1.185h4.751a4.734 4.734 0 0 1 4.726 4.727 4.74 4.74 0 0 1-4.726 4.726H9.09v3.541c0 .666-.529 1.198-1.185 1.198z"/><path d="M7.905 18.094a.596.596 0 0 1-.598-.6V5.673c0-.322.252-.587.574-.598h4.751a4.144 4.144 0 0 1 4.14 4.14 4.145 4.145 0 0 1-4.14 4.14h-4.13v4.139c0 .334-.264.6-.597.6z"/><path d="M7.905 12.768h4.727a3.556 3.556 0 0 0 3.554-3.552 3.55 3.55 0 0 0-3.554-3.554H7.905v7.106z"/><path d="M8.502 12.182V6.26h4.14a2.953 2.953 0 0 1 2.955 2.956 2.954 2.954 0 0 1-2.955 2.956h-4.14v.01z"/><path d="M9.09 11.595V6.857h3.542a2.366 2.366 0 0 1 2.369 2.369 2.366 2.366 0 0 1-2.369 2.369H9.09z"/><path d="M9.676 11.01V7.444h2.956a1.783 1.783 0 0 1 0 3.566H9.676z"/><path d="M10.262 10.411v-2.38h2.37c.654 0 1.195.53 1.195 1.195 0 .668-.528 1.196-1.195 1.196h-2.37v-.011z"/><path d="M10.861 9.825V8.617h1.771c.333 0 .599.265.599.599a.595.595 0 0 1-.599.598h-1.771v.011z"/><ellipse cx="7.827" cy="5.678" rx="2.369" ry="2.369"/><path d="M18.036 16.137a2.361 2.361 0 1 1-3.863 2.716l-3.542-5.062a2.362 2.362 0 0 1 3.865-2.713l3.54 5.059z"/></g></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,4 @@
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M28 0C12.536 0 0 12.5362 0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.5362 43.464 0 28 0Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.1026 26.7728C29.5118 26.9192 30.9209 27.0655 32.6536 26.9691C37.3482 26.708 40.1917 24.3042 39.99 20.7111C39.7842 17.0553 36.0013 14.8031 32.2159 15.0136C26.0472 15.3566 21.5108 20.7597 21 26.9353C21.8377 26.7395 22.7195 26.6226 23.5511 26.5764C25.284 26.4801 26.6934 26.6265 28.1026 26.7728ZM16.0096 34.7648C16.2044 38.1161 19.7884 40.1806 23.3746 39.9876C29.2185 39.6731 33.5162 34.7202 34 29.0592C33.2063 29.2388 32.3711 29.346 31.5833 29.3883C29.9419 29.4766 28.6067 29.3424 27.2715 29.2083C25.9363 29.0741 24.6011 28.94 22.9595 29.0283C18.5125 29.2677 15.8182 31.4711 16.0096 34.7648Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 948 B

View File

@ -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(" ");
}
});