Skip to content

Commit

Permalink
Merge pull request #1359 from mozilla/bug-904696-homepage-updates
Browse files Browse the repository at this point in the history 
Bug 904696 - updates to home page for further testing
  • Loading branch information
@jpetto
jpetto committed Nov 4, 2013
2 parents 185e766 + 9f8daf3 commit c96623d
Show file tree
Hide file tree
Showing 24 changed files with 410 additions and 240 deletions.
40 changes: 25 additions & 15 deletions bedrock/mozorg/templates/mozorg/home-b1.html
View file
Expand Up @@ -13,8 +13,8 @@
{% block body_class %}sand lang-{{ LANG }} home-b1{% endblock %}

{% block extra_meta %}
<!-- validates bing webmaster tools -->
<meta name="msvalidate.01" content="B7B177115A634927D608514DA17B2574" />
<!-- validates bing webmaster tools -->
<meta name="msvalidate.01" content="B7B177115A634927D608514DA17B2574" />
{% endblock %}

{% block extrahead %}
Expand Down Expand Up @@ -50,8 +50,8 @@
<main id="main-content" role="main">
<header class="mission">
{# L10n: The Mozilla wordmark appears inline as part of this headline, so it reads as "We are Mozilla." #}
<h1>{{ _('We are %(mozilla_wordmark)s') | format(mozilla_wordmark='<img src="'|safe+media('img/home/mozilla-wordmark-red.png')+'" alt="Mozilla" height="70" width="258">'|safe) }}</h1>
<p>{{ _('Doing good is part of our code') }}</p>
<h1>{{ _('We are %(mozilla_wordmark)s') | format(mozilla_wordmark=high_res_img('img/home/mozilla-wordmark-red.png', {'alt': 'Mozilla', 'width': '258', 'height': '70'})|safe) }}</h1>
<p class="tagline">{{ _('Doing good is part of our code') }}</p>
<p class="engage"><a href="{{ url('mozorg.contribute') }}" class="button go">{{ _('Get involved') }}</a></p>
</header>

Expand All @@ -63,7 +63,6 @@ <h2 class="panel-title">{{ _('<i>Explore</i> our mission') }}</h2>
<div class="panel-inner">
<div class="panel-content">
<a href="{{ url('mozorg.mission') }}">
<span class="panel-logo"><img src="{{ media('img/home/panel/mission/logo-mozilla.png') }}" alt="Mozilla"></span>
<h3>{{ _('Our principles guide us') }}</h3>
<p>{{ _('We’re a global community of technologists, thinkers and builders working to keep the Internet alive and accessible.') }}</p>
<p class="go">{{ _('Read more about our mission') }}</p>
Expand All @@ -78,7 +77,6 @@ <h2 class="panel-title">{{ _('<i>Look</i> ahead') }}</h2>
<div class="panel-inner">
<div class="panel-content">
<a href="{{ url('firefox.os.index') }}">
<span class="panel-logo"><img src="{{ media('img/home/panel/firefoxos/logo-firefoxos.png') }}" alt="Firefox OS"></span>
<h3>{{ _('Look ahead') }}</h3>
<p>{{ _('We‘re bringing more people to the Web in more ways and from more places than ever before.') }}</p>
<p class="go">{{ _('Learn more about Firefox OS') }}</p>
Expand Down Expand Up @@ -108,7 +106,6 @@ <h2 class="panel-title">{{ _('<i>Forge</i> the future') }}</h2>
<div class="panel-inner">
<div class="panel-content">
<a href="https://mozillafestival.org">
<span class="panel-logo"><img src="{{ media('img/home/panel/mozfest/logo-mozfest.png') }}" alt="{{ _('Mozilla Festival') }}"></span>
{# L10n: This <br> is strictly for visual formatting; translations can omit or reposition as needed. #}
<h3>{{ _('Forge the future<br> of the Web') }}</h3>
<p>{{ _('Learn from some of the most passionate thinkers and inventors from around the world.') }}</p>
Expand All @@ -120,12 +117,24 @@ <h3>{{ _('Forge the future<br> of the Web') }}</h3>
</ul>
</section>

<section id="firefox-promo" class="billboard">
<div class="container">
<h3>{{_('Different by&nbsp;design')}}</h3>
{# We intentionally don't use php_url() here because all locals
# are seeing this English page and we want them to hit their locale for
# firefox pages #}
<a href="/firefox/" id="firefox-promo-link">
<img src="{{ media('img/home/firefox.png?2013-06')}}" id="promo-logo" alt="Firefox">
</a>

{{ download_firefox(small=True, icon=False) }}
</div>
</section>

<section class="extra">
<div class="container">

<section class="extra-download">
<h2>{{_('Different by&nbsp;design')}}</h2>
{{ download_firefox(icon=True) }}
</section>
{{ mozorg_newsletter_form() }}

{% if request.locale in settings.PRESS_BLOGS %}

Expand Down Expand Up @@ -167,10 +176,8 @@ <h3 class="entry-title">
<section class="extra-contribute fxos">
<h2>{{ _('Get involved') }}</h2>
<p>
{% trans link_mobilizer=mobilizer_link %}
Help launch Firefox OS in your country.
<a href="{{ link_mobilizer }}">Become a Mobilizer today</a>.
{% endtrans %}
{{_('Help launch Firefox OS in your country.')}}
<a href="{{ mobilizer_link }}">{{_('Become a Mobilizer today.')}}</a>
</p>
</section>

Expand All @@ -197,8 +204,11 @@ <h2>{{ _('Get involved') }}</h2>

{% endif %}

</div>
</section>

</main>

{% endblock %}

{% block email_form %}{% endblock %}
20 changes: 8 additions & 12 deletions bedrock/mozorg/templates/mozorg/home-b2.html
View file
Expand Up @@ -50,8 +50,8 @@
<main id="main-content" role="main">
<header class="mission">
{# L10n: The Mozilla wordmark appears inline as part of this headline, so it reads as "We are Mozilla." #}
<h1>{{ _('We are %(mozilla_wordmark)s') | format(mozilla_wordmark='<img src="'|safe+media('img/home/mozilla-wordmark-red.png')+'" alt="Mozilla" height="70" width="258">'|safe) }}</h1>
<p>{{ _('Doing good is part of our code') }}</p>
<h1>{{ _('We are %(mozilla_wordmark)s') | format(mozilla_wordmark=high_res_img('img/home/mozilla-wordmark-red.png', {'alt': 'Mozilla', 'width': '258', 'height': '70'})|safe) }}</h1>
<p class="tagline">{{ _('Doing good is part of our code') }}</p>
<p class="engage"><a href="{{ url('mozorg.contribute') }}" class="button go">{{ _('Get involved') }}</a></p>
</header>

Expand All @@ -63,7 +63,6 @@ <h2 class="panel-title">{{ _('<i>Explore</i> our mission') }}</h2>
<div class="panel-inner">
<div class="panel-content">
<a href="{{ url('mozorg.mission') }}">
<span class="panel-logo"><img src="{{ media('img/home/panel/mission/logo-mozilla.png') }}" alt="Mozilla"></span>
<h3>{{ _('Our principles guide us') }}</h3>
<p>{{ _('We’re a global community of technologists, thinkers and builders working to keep the Internet alive and accessible.') }}</p>
<p class="go">{{ _('Read more about our mission') }}</p>
Expand All @@ -78,7 +77,6 @@ <h2 class="panel-title">{{ _('<i>Look</i> ahead') }}</h2>
<div class="panel-inner">
<div class="panel-content">
<a href="{{ url('firefox.os.index') }}">
<span class="panel-logo"><img src="{{ media('img/home/panel/firefoxos/logo-firefoxos.png') }}" alt="Firefox OS"></span>
<h3>{{ _('Look ahead') }}</h3>
<p>{{ _('We‘re bringing more people to the Web in more ways and from more places than ever before.') }}</p>
<p class="go">{{ _('Learn more about Firefox OS') }}</p>
Expand Down Expand Up @@ -108,7 +106,6 @@ <h2 class="panel-title">{{ _('<i>Forge</i> the future') }}</h2>
<div class="panel-inner">
<div class="panel-content">
<a href="https://mozillafestival.org">
<span class="panel-logo"><img src="{{ media('img/home/panel/mozfest/logo-mozfest.png') }}" alt="{{ _('Mozilla Festival') }}"></span>
{# L10n: This <br> is strictly for visual formatting; translations can omit or reposition as needed. #}
<h3>{{ _('Forge the future<br> of the Web') }}</h3>
<p>{{ _('Learn from some of the most passionate thinkers and inventors from around the world.') }}</p>
Expand All @@ -122,12 +119,11 @@ <h3>{{ _('Forge the future<br> of the Web') }}</h3>

<section id="firefox-promo" class="billboard">
<div class="container">
<h3>{{_('Different by&nbsp;design')}}</h3>
{# We intentionally don't use php_url() here because all locals
# are seeing this English page and we want them to hit their locale for
# firefox pages #}
<a href="/firefox/" id="firefox-promo-link">
<img src="{{ media('img/home/firefox.png?2013-06')}}" id="promo-logo" alt="Firefox">
<h3>
{{ high_res_img('img/home/firefox-sm.png', {'alt': '', 'width': '105', 'height': '108'}) }}
<b>Firefox</b> {{_('Different by&nbsp;design')}}
</h3>
</a>

{{ download_firefox(small=True, icon=False) }}
Expand Down Expand Up @@ -179,8 +175,8 @@ <h3 class="entry-title">
<section class="extra-contribute fxos">
<h2>{{ _('Get involved') }}</h2>
<p>
{{_('Help launch Firefox OS in your country.')}}
<a href="{{ mobilizer_link }}">{{_('Become a Mobilizer today.')}}</a>
{{_('Help launch Firefox OS in your country.')}}
<a href="{{ mobilizer_link }}">{{_('Become a Mobilizer today.')}}</a>
</p>
</section>

Expand Down
22 changes: 12 additions & 10 deletions media/css/mozorg/home-b-ie.less
View file
Expand Up @@ -25,21 +25,21 @@
display: inline;
}


.pillars {
height: auto;
overflow: visible;
position: static;
}

.accordion {
.js .accordion {
height: auto;
width: auto;
overflow: visible;
position: static;
}

.panel {
min-height: 14em;
min-height: 16em;
width: auto;
float: none;
overflow: visible;
Expand All @@ -55,17 +55,14 @@
}
}

.panel-content {
.panel-content,
.js .panel-content {
position: relative;
display: block;
height: auto;
min-height: 10em;
width: auto;
padding: 3em 20px 1em 300px;

.panel-logo {
top: 15px;
}
padding: 20px 20px 20px 300px;

h3 {
color: #fff;
Expand All @@ -80,11 +77,16 @@
right: 0;
bottom: 0;
left: 0;
padding: 60px 20px 20px 300px;
padding: 20px 20px 20px 300px;
}
}

.panel-content a:link,
.panel-content a:visited {
color: #fff;
}

#firefox-promo .download-button {
width: 240px;
}

10 changes: 5 additions & 5 deletions media/css/mozorg/home-b-ie8.less
View file
Expand Up @@ -35,9 +35,9 @@

.panel-content {
display: none;
height: 260px;
height: 300px;
width: 290px;
padding: 80px 40px 40px 300px;
padding: 40px 40px 40px 300px;
position: absolute;
top: 0;
left: 0;
Expand All @@ -52,17 +52,17 @@

#panel-fxos.expanded,
#panel-fxos.compressed {
background-position: -230px -190px
background-position: -100px -100px;
}

#panel-mdn.expanded,
#panel-mdn.compressed {
background-position: -80px 10px
background-position: -80px 10px;
}

#panel-mozfest.expanded,
#panel-mozfest.compressed {
background-position: -110px -15px
background-position: -110px -15px;
}

// IE8 doesn't do gradients or rgba() so it gets solid, opaque colors.
Expand Down
8 changes: 4 additions & 4 deletions media/css/mozorg/home-b-ie9.less
View file
Expand Up @@ -27,17 +27,17 @@

#panel-fxos.expanded,
#panel-fxos.compressed {
background-position: -230px -190px
background-position: -100px -100px;
}

#panel-mdn.expanded,
#panel-mdn.compressed {
background-position: -80px 10px
background-position: -80px 10px;
}

#panel-mozfest.expanded,
#panel-mozfest.compressed {
background-position: -110px -15px
background-position: -110px -15px;
}
}

Expand Down Expand Up @@ -82,7 +82,7 @@
#panel-fxos,
#panel-fxos.expanded,
#panel-fxos.compressed {
background-position: -110px -85px;
background-position: -100px -100px;
}

#panel-mdn,
Expand Down

0 comments on commit c96623d

Please sign in to comment.