mirror of https://github.com/zulip/zulip.git
Change top of the /hello/ page to lighter scheme.
This changes the top of the page to a lighter scheme that uses a gradient rather than having a dark blue background.
This commit is contained in:
Brock Whittaker
Tim Abbott
parent
95bde1e096
commit
c27f57ed4b
|
|
@ -188,6 +188,8 @@ nav li a,
|
|||
nav li a:hover {
|
||||
text-decoration: none;
|
||||
color: #fff !important;
|
||||
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
nav ul li.active,
|
||||
|
|
@ -208,7 +210,7 @@ nav ul li.active::after {
|
|||
}
|
||||
|
||||
nav.dark-blue {
|
||||
background: hsl(218, 23%, 16%);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* -- main panel styling -- */
|
||||
|
|
@ -432,13 +434,42 @@ a:not(.no-style):hover:before {
|
|||
|
||||
.portico-landing.hello .hero {
|
||||
position: relative;
|
||||
padding: 100px 50px 320px 50px;
|
||||
padding: 70px 50px 350px 50px;
|
||||
|
||||
background-color: hsl(219, 21%, 19%);
|
||||
color: hsl(220, 15%, 76%);
|
||||
background-color: #fff;
|
||||
color: #fff;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.portico-landing.hello .gradients {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform: translateY(-140px);
|
||||
}
|
||||
|
||||
|
||||
.portico-landing.hello .gradients .gradient {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1200px;
|
||||
}
|
||||
|
||||
.portico-landing.hello .gradients .gradient.dark-blue {
|
||||
background: linear-gradient(10deg, transparent 50%, rgba(15, 46, 57, 0.7));
|
||||
}
|
||||
|
||||
.portico-landing.hello .gradients .gradient.green {
|
||||
background: linear-gradient(-25deg, transparent 40%, #3fb082);
|
||||
}
|
||||
|
||||
.portico-landing.hello .gradients .gradient.blue {
|
||||
background: linear-gradient(25deg, transparent 40%, #5298b1);
|
||||
}
|
||||
|
||||
.portico-landing.hello .gradients .gradient.sunburst {
|
||||
background: linear-gradient(5deg, transparent 20%, #e8d275);
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero .waves {
|
||||
position: absolute;
|
||||
|
|
@ -519,48 +550,63 @@ a:not(.no-style):hover:before {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero .content p {
|
||||
font-weight: 400;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header {
|
||||
width: 700px;
|
||||
width: 850px;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header h1 {
|
||||
font-size: 3em;
|
||||
font-weight: 400;
|
||||
|
||||
text-shadow: 0px 0px 20px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header p {
|
||||
margin: 30px 0px;
|
||||
|
||||
font-size: 1.2em;
|
||||
font-size: 1.5em;
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
text-shadow: 0px 0px 5px rgba(10, 66, 51, 0.3), 0px 0px 20px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header a {
|
||||
display: block;
|
||||
margin: 20px auto 0px auto;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header button {
|
||||
margin-top: 0px;
|
||||
padding: 8px 15px;
|
||||
|
||||
background-color: hsl(170, 47%, 54%);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border: 2px solid #fff;
|
||||
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
|
||||
box-shadow: 0px 1px 2px hsla(0, 0%, 0%, 0.2);
|
||||
box-shadow: 0px 1px 50px rgba(0,0,0,0.1);
|
||||
text-shadow: 0px 1px 2px rgba(0,0,0,0.1);
|
||||
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header button:hover {
|
||||
background-color: hsl(170, 58%, 52%);
|
||||
|
||||
box-shadow: 0px 2px 5px hsla(0, 0%, 0%, 0.18);
|
||||
box-shadow: 0px 0px 0px #fff;
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header button:active {
|
||||
background-color: hsl(170, 42%, 46%);
|
||||
|
||||
box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.18);
|
||||
box-shadow: 0px 1px 20px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.portico-landing.hello .hero header .download-button {
|
||||
|
|
@ -981,7 +1027,7 @@ a:not(.no-style):hover:before {
|
|||
width: 60%;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
border-bottom: 1px solid hsl(0, 0%, 33%);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.portico-landing.hello .testimonials .company-container {
|
||||
|
|
@ -1064,7 +1110,9 @@ a:not(.no-style):hover:before {
|
|||
}
|
||||
|
||||
.portico-landing.hello .apps {
|
||||
padding: 80px;
|
||||
position: relative;
|
||||
padding: 200px 80px 100px 80px;
|
||||
margin-top: -50px;
|
||||
|
||||
background: hsl(177, 52%, 55%);
|
||||
background: -webkit-linear-gradient(145deg, hsl(169, 65%, 42%), hsl(191, 55%, 54%));
|
||||
|
|
@ -1073,6 +1121,17 @@ a:not(.no-style):hover:before {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .triangle {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 100vw 0 0;
|
||||
border-color: #fff transparent transparent transparent;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .arrow {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
|
|
@ -1099,7 +1158,7 @@ a:not(.no-style):hover:before {
|
|||
|
||||
.portico-landing.hello .apps .left-side .content {
|
||||
width: 650px;
|
||||
margin: 0 auto 50px auto;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side .platform-icons {
|
||||
|
|
@ -1567,7 +1626,7 @@ a:not(.no-style):hover:before {
|
|||
padding: 10px 0px 30px 0px;
|
||||
border-radius: 20px;
|
||||
|
||||
-webkit-transform: translateY(-50px);
|
||||
-webkit-transform: translateY(-110px);
|
||||
|
||||
background: linear-gradient(90deg, hsl(0, 0%, 27%) 0%, hsl(0, 0%, 33%) 8%, hsl(0, 0%, 33%) 92%, hsl(0, 0%, 27%) 100%);
|
||||
}
|
||||
|
|
@ -1931,6 +1990,7 @@ a:not(.no-style):hover:before {
|
|||
@media (max-width: 1295px) {
|
||||
.portico-landing.hello .apps .right-side {
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side {
|
||||
|
|
@ -1944,7 +2004,11 @@ a:not(.no-style):hover:before {
|
|||
|
||||
.portico-landing.hello .integrations .integration-icons {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.portico-landing.hello .apps .left-side .content {
|
||||
margin: 0px auto 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1974,6 +2038,29 @@ a:not(.no-style):hover:before {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
nav li a,
|
||||
nav li a:hover {
|
||||
color: #2b3642 !important;
|
||||
}
|
||||
|
||||
nav .logo span {
|
||||
color: #52c2af;
|
||||
}
|
||||
|
||||
nav.dark-blue .content {
|
||||
padding: 0px 40px 50px;
|
||||
}
|
||||
|
||||
svg.brand-logo circle {
|
||||
fill: #52c2af !important;
|
||||
stroke: #52c2af !important;
|
||||
}
|
||||
|
||||
svg.brand-logo path {
|
||||
fill: #fff !important;
|
||||
stroke: #fff !important;
|
||||
}
|
||||
|
||||
.feature-block .flex {
|
||||
height: 150px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,12 +17,18 @@ html {
|
|||
|
||||
{% include 'zerver/landing_nav_blue.html' %}
|
||||
<div class="portico-landing hello show">
|
||||
<div class="gradients">
|
||||
<div class="gradient sunburst"></div>
|
||||
<div class="gradient dark-blue"></div>
|
||||
<div class="gradient green"></div>
|
||||
<div class="gradient blue"></div>
|
||||
</div>
|
||||
<div class="hero">
|
||||
<div class="content">
|
||||
<header>
|
||||
<h1>The world's most productive group chat</h1>
|
||||
<p>
|
||||
Zulip combines the immediacy of Slack with Gmail's
|
||||
Zulip combines the immediacy of Slack with an email
|
||||
threading model. <br />With Zulip, you don't have to
|
||||
choose between missing important conversations and
|
||||
wasting time reading irrelevant ones.
|
||||
|
|
@ -34,7 +40,7 @@ html {
|
|||
name="button">{{ _('Log in now!') }}</button>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url('register') }}">
|
||||
<a class="no-style" href="{{ url('register') }}">
|
||||
<button href="" class="download-button" type="button"
|
||||
name="button">{{ _('Register now!') }}</button>
|
||||
</a>
|
||||
|
|
@ -302,6 +308,7 @@ html {
|
|||
</div>
|
||||
|
||||
<div class="apps">
|
||||
<div class="triangle"></div>
|
||||
<div class="left-side">
|
||||
<div class="content">
|
||||
<header>
|
||||
|
|
|
|||
Loading…
Reference in New Issue