mirror of
https://github.com/status-im/studio.status.im.git
synced 2025-02-23 01:08:35 +00:00
New footer and some mobile styling
This commit is contained in:
Andy Tudhope
parent
dab87c2f46
commit
fb95608288
@ -26,7 +26,7 @@
|
||||
<div class="problem-wrap">
|
||||
<img class="ethprize-logo" src="../img/logo-ethprize.svg" />
|
||||
<div class="problem">
|
||||
<img class="problem-image" src="../img/logo-ethereum.svg" />
|
||||
<img class="problem-image first-problem-img" src="../img/logo-ethereum.svg" />
|
||||
<p class="problem-quote">I need detailed traces of exactly what happened in every opcode of this transaction.</p>
|
||||
<p class="problem-attribution">- Martin Swende, Ethereum Foundation</p>
|
||||
</div>
|
||||
@ -42,6 +42,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="vision-wrap">
|
||||
<div class="vision-text-mobile">
|
||||
<h2>The Vision</h2>
|
||||
<p>Create a community-owned, one-stop-shop for Ethereum development and education. We would achieve this by combining the tools and educational resources needed to help any web3 developer create and deploy their own DApp.</p>
|
||||
</div>
|
||||
<div class="vision-image">
|
||||
<img src="../img/vision-img.svg" />
|
||||
</div>
|
||||
|
||||
@ -1,32 +1,75 @@
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="info">
|
||||
<div class="blog-logo">
|
||||
<a href="https://status.im/" ><img src="../img/logo-footer.svg" alt="Status"><span>status</span></a>
|
||||
<div class="container-footer">
|
||||
<div class="footer-wrap">
|
||||
<div class="ecosystem-footer-wrap">
|
||||
<div class="footer-head">
|
||||
<h3>Ecosystem</h3>
|
||||
</div>
|
||||
<a href="/about/">
|
||||
<div class="ecosystem-footer">
|
||||
<h4>app</h4>
|
||||
<p>Browse, chat, and make payments on Ethereum</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="ecosystem-footer">
|
||||
<h4>nimbus</h4>
|
||||
<p>An Ethereum 2.0 client for resource-restricted devices</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="ecosystem-footer">
|
||||
<h4>hardwallet</h4>
|
||||
<p>Store your funds and data securely</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="ecosystem-footer">
|
||||
<h4>embark</h4>
|
||||
<p>Build powerful decentralized applications easily</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="ecosystem-footer">
|
||||
<h4>incubate</h4>
|
||||
<p>ÐApps, IoT, base-layer protocols, scaling & more</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="ecosystem-footer">
|
||||
<h4>studio</h4>
|
||||
<p>An integrated development & education platform</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="company">
|
||||
<h3>Company</h3>
|
||||
<ul>
|
||||
<li><a href="/about/">About Us</a></li>
|
||||
<li><a href="https://status.im/open-positions.html">Jobs</a></li>
|
||||
<li><a href="https://our.status.im/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="social-links">
|
||||
<h3>Community</h3>
|
||||
<div class="chat-footer">
|
||||
<a href="https://get.status.im/chat/public/status" target="_blank" class="footer-status">STATUS PUBLIC CHAT</a>
|
||||
</div>
|
||||
<ul class="community">
|
||||
<li><a href="https://twitter.com/ethstatus" target="_blank" class="footer-twitter">Twitter</a></li>
|
||||
<li><a href="https://www.facebook.com/ethstatus" target="_blank" class="footer-facebook">Facebook</a></li>
|
||||
<li><a href="https://github.com/status-im" target="_blank" class="footer-github">GitHub</a></li>
|
||||
<li><a href="https://chat.status.im/#/register" target="_blank" class="footer-riot">Riot</a></li>
|
||||
<li><a href="https://www.youtube.com/statusim" target="_blank" class="footer-youtube">YouTube</a></li>
|
||||
<li><a href="https://www.reddit.com/r/statusim/" target="_blank" class="footer-reddit">Reddit</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-info">
|
||||
<div class="footer-logo">
|
||||
<a href="https://status.im/" ><img src="../img/logo-footer.svg" alt="Status"></a>
|
||||
</div>
|
||||
<p>Status Holdings Pte. Ltd. <br>6 Ubi Road Singapore </p>
|
||||
</div>
|
||||
<p>Status Holdings Pte. Ltd. <br>6 Ubi Road Singapore </p>
|
||||
</div>
|
||||
<div class="social-links">
|
||||
<h3>Social links</h3>
|
||||
<ul class="community">
|
||||
<li><a href="https://www.facebook.com/ethstatus" target="_blank" class="footer-facebook">Facebook</a></li>
|
||||
<li><a href="https://twitter.com/ethstatus" target="_blank" class="footer-twitter">Twitter</a></li>
|
||||
<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 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>
|
||||
</footer>
|
||||
@ -1,41 +1,197 @@
|
||||
#footer
|
||||
clearfix()
|
||||
padding: 40px 0
|
||||
color: rgba(255, 255, 255, 0.6)
|
||||
font-family: font-title
|
||||
position: relative
|
||||
background: color-navy
|
||||
.container-footer
|
||||
max-width: 1400px
|
||||
margin: 0 auto
|
||||
padding: 0 20px
|
||||
display: flex
|
||||
|
||||
.footer-info
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 46%
|
||||
text-align: center
|
||||
@media mq-normal
|
||||
text-align: left
|
||||
@media print
|
||||
display: none
|
||||
a
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
transition: 0.2s
|
||||
&:hover
|
||||
color: #fff
|
||||
p
|
||||
margin-bottom: 60px
|
||||
|
||||
#footer-copyright
|
||||
line-height: 1.4
|
||||
@media mq-normal
|
||||
float: left
|
||||
a
|
||||
.footer-logo
|
||||
margin-bottom: 6px
|
||||
|
||||
.ecosystem-footer-wrap
|
||||
float: left
|
||||
width: 50%
|
||||
padding: 0 0 0 100px;
|
||||
|
||||
.footer-head
|
||||
width: 100%
|
||||
margin-bottom: 10px
|
||||
h3
|
||||
font-size: 16px
|
||||
color: #FFFFFF
|
||||
mix-blend-mode: normal
|
||||
opacity: 0.4
|
||||
|
||||
.ecosystem-footer
|
||||
width: 40%
|
||||
text-align: left
|
||||
float: left
|
||||
padding: 20px 60px 20px 0
|
||||
h4
|
||||
color: #fff
|
||||
font-weight: bold
|
||||
font-size: 20px
|
||||
margin: 10px 0
|
||||
p
|
||||
color: rgba(255,255,255,0.4)
|
||||
|
||||
#footer-links
|
||||
margin-top: 1em
|
||||
@media mq-normal
|
||||
float: right
|
||||
margin-top: 0
|
||||
.company
|
||||
width: 25%
|
||||
float: left
|
||||
min-height: 380px
|
||||
padding-left: 10%
|
||||
h3
|
||||
margin-bottom: 40px
|
||||
ul
|
||||
li
|
||||
padding-bottom: 24px
|
||||
a
|
||||
line-height: 24px
|
||||
font-size: 16px
|
||||
color: #FFFFFF
|
||||
text-decoration: none
|
||||
|
||||
.footer-link
|
||||
font-size: 30px
|
||||
margin-left: 20px
|
||||
&:first-child
|
||||
margin-left: 0
|
||||
.social-links
|
||||
float: left
|
||||
h3
|
||||
margin-bottom: 40px
|
||||
ul
|
||||
li
|
||||
a
|
||||
line-height: 24px
|
||||
font-size: 16px
|
||||
color: #FFFFFF
|
||||
text-decoration: none
|
||||
|
||||
.download
|
||||
.footer-status
|
||||
color: #fff
|
||||
text-decoration: none
|
||||
text-decoration: none
|
||||
background: #3C3F4D
|
||||
box-shadow: 0px 2px 4px rgba(43, 59, 71, 0.124066)
|
||||
border-radius: 20px
|
||||
padding: 12px 24px
|
||||
|
||||
.chat-footer
|
||||
margin-bottom: 28px
|
||||
|
||||
@media (max-width: 1199px)
|
||||
.ecosystem-footer-wrap
|
||||
width: 55%
|
||||
|
||||
@media (max-width: 991px)
|
||||
.ecosystem-footer-wrap
|
||||
width: 50%
|
||||
padding: 0
|
||||
.ecosystem-footer
|
||||
width: 100%
|
||||
padding: 0 20px
|
||||
p
|
||||
display: none
|
||||
.footer-head
|
||||
margin-bottom: 30px
|
||||
|
||||
@media (max-width: 767px)
|
||||
.ecosystem-footer-wrap
|
||||
width: 40%
|
||||
.footer-info
|
||||
left: 36%
|
||||
|
||||
@media (max-width: 459px)
|
||||
.ecosystem-footer-wrap
|
||||
width: 40%
|
||||
.footer-head
|
||||
margin-bottom: 10px
|
||||
.company
|
||||
width: 40%
|
||||
padding: 0 10%
|
||||
min-height: 100px
|
||||
ul
|
||||
li
|
||||
padding: 0
|
||||
.social-links
|
||||
width: 100%
|
||||
margin-top: 20px
|
||||
.footer-info
|
||||
left: 28%
|
||||
.chat-footer
|
||||
margin-left: 26%
|
||||
.community
|
||||
margin-left: 32%
|
||||
|
||||
@media (max-width: 459px)
|
||||
.chat-footer
|
||||
margin-left: 15%
|
||||
.community
|
||||
margin-left: 27%
|
||||
|
||||
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);
|
||||
}
|
||||
@ -215,13 +215,8 @@ body
|
||||
background-repeat: no-repeat
|
||||
transition: all 0.3s ease-in-out
|
||||
@media screen and (max-width: break-xl)
|
||||
width: 44px
|
||||
height: 44px
|
||||
span
|
||||
margin-left: 10px
|
||||
transition: all 0.3s ease-in-out
|
||||
@media screen and (max-width: break-xl)
|
||||
font-size: 22px
|
||||
width: 138px
|
||||
height: 52px
|
||||
nav
|
||||
@media screen and (max-width: break-xl)
|
||||
display: none
|
||||
@ -368,8 +363,8 @@ body
|
||||
transition: all 0.3s ease-in-out
|
||||
&:before
|
||||
content: ''
|
||||
width: 44px
|
||||
height: 44px
|
||||
width: 138px
|
||||
height: 52px
|
||||
display: block
|
||||
background-image: url("../img/logo-status.svg")
|
||||
background-size: cover
|
||||
@ -1165,152 +1160,7 @@ footer
|
||||
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: #5EC12F;
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@media (max-width: 991px)
|
||||
.section-header
|
||||
@ -1424,7 +1274,7 @@ footer input[type="email"]{
|
||||
border: 1px solid rgba(0, 0, 0, 0.1)
|
||||
box-sizing: border-box
|
||||
border-radius: 10px
|
||||
display: flex
|
||||
display: block
|
||||
align-self: center
|
||||
text-align: center
|
||||
|
||||
@ -1432,10 +1282,9 @@ footer input[type="email"]{
|
||||
max-width: 400px
|
||||
width: 33%
|
||||
float: left
|
||||
margin-top: 100px
|
||||
p
|
||||
padding: 20px
|
||||
img
|
||||
padding-top: 100px
|
||||
|
||||
.problem-quote
|
||||
color: #000
|
||||
@ -1461,16 +1310,18 @@ footer input[type="email"]{
|
||||
max-width: 1000px
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
display: flex
|
||||
display: block
|
||||
align-self: center
|
||||
text-align: left
|
||||
margin-top: 145px
|
||||
|
||||
.vision-image
|
||||
width: 50%
|
||||
float: left
|
||||
|
||||
.vision-text
|
||||
width: 50%
|
||||
float: left
|
||||
h2
|
||||
font-size: 25px
|
||||
font-weight: bold
|
||||
@ -1556,6 +1407,38 @@ footer input[type="email"]{
|
||||
background-color: #5EC12F
|
||||
color: #fff
|
||||
|
||||
.vision-text-mobile
|
||||
display: none
|
||||
|
||||
@media (max-width: 459px)
|
||||
.site-specific-menu
|
||||
span
|
||||
padding-right: 10px
|
||||
.problem
|
||||
width: 100%
|
||||
margin-top: 0
|
||||
.first-problem-img
|
||||
margin-top: 100px
|
||||
.vision-wrap
|
||||
margin-top: 50px
|
||||
.vision-image
|
||||
width: 100%
|
||||
.vision-text
|
||||
display: none
|
||||
.vision-text-mobile
|
||||
display: block
|
||||
width: 100%
|
||||
text-align: center
|
||||
margin-bottom: 40px
|
||||
h2
|
||||
color: #000
|
||||
font-size: 25px
|
||||
font-weight: bold
|
||||
margin-bottom: 12px
|
||||
p
|
||||
font-size: 16px
|
||||
color: #939BA1
|
||||
.volunteer-wrap
|
||||
margin: 70px auto 35px auto
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user