Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

/apps/: Add max-width constraint to hero content. 

This adds a max-width constraint to the hero content so that the images
inside the hero don’t keep expanding forever and eventually outside of
the hero’s bounds.

Fixes: #6713.
This commit is contained in:
Brock Whittaker 2017-09-27 09:15:12 -07:00 committed by Tim Abbott
parent c1c19eb8c9
commit 7f3b4c5baf
2 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
static/styles/landing-page.css
View File

@ -1633,6 +1633,11 @@ nav ul li.active::after {
overflow: hidden;
}
.portico-landing.apps .hero .inner-content {
max-width: 1600px;
margin: 0 auto;
}
.portico-landing.apps .hero h1 {
font-size: 3em;
margin-bottom: 0px;
@ -1682,8 +1687,10 @@ nav ul li.active::after {
height: 100%;
}
.portico-landing.apps .hero .info .flex {
height: 100%;
.portico-landing.apps .hero .info .flex,
.portico-landing.apps .hero .image .flex {
height: 500px;
min-height: 0px;
}
.portico-landing.apps .hero .info button {
@ -3000,6 +3007,13 @@ nav ul li.active::after {
font-weight: 400;
}
.portico-landing.apps .hero .info .flex,
.portico-landing.apps .hero .image .flex {
height: 300px;
min-height: 0px;
}
.portico-landing.apps .other-apps {
padding: 50px 5px 120px 5px;
}

28
templates/zerver/apps.html
View File

@ -21,21 +21,23 @@
<div class="portico-landing apps">
<div class="hero">
<div id="waves"></div>
<div class="info">
<div class="flex">
<div class="cta">
<h1>Zulip for <span class="platform"></span></h1>
<p class="description"></p>
<p class="download-instructions">For download instructions, go to the <a class="silver bold" href="/help/desktop-app-install-guide" target="_blank">desktop app install guide</a>.</p>
<a class="link no-action" href="">
<button type="button" name="button">Download Zulip for <span class="platform"></span></button>
</a>
<div class="inner-content">
<div class="info">
<div class="flex">
<div class="cta">
<h1>Zulip for <span class="platform"></span></h1>
<p class="description"></p>
<p class="download-instructions">For download instructions, go to the <a class="silver bold" href="/help/desktop-app-install-guide" target="_blank">desktop app install guide</a>.</p>
<a class="link no-action" href="">
<button type="button" name="button">Download Zulip for <span class="platform"></span></button>
</a>
</div>
</div>
</div>
</div>
<div class="image">
<div class="flex">
<img src="" />
<div class="image">
<div class="flex">
<img src="" />
</div>
</div>
</div>
</div>