зеркало из https://github.com/mozilla/spark-eol.git
Set up mobile site templates
This commit is contained in:
Guigui
Родитель
dd58a70bf9
Коммит
ed977210f4
|
|
@ -0,0 +1,58 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="{{ LANG }}" dir="{{ DIR }}">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width; maximum-scale=1; initial-scale=1; user-scalable=no">
|
||||||
|
{# L10n: Page title #}
|
||||||
|
<title>{{ _('Spark powered by Firefox for mobile') }}
|
||||||
|
{% if False %}
|
||||||
|
{{ _('{title} | Spark powered by Firefox for mobile')|f(title=title) }}
|
||||||
|
{% endif %}
|
||||||
|
</title>
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="{{ MEDIA_URL}}img/favicon.png">
|
||||||
|
<link rel="apple-touch-icon" href="{{ MEDIA_URL}}img/apple-touch-icon.png">
|
||||||
|
<meta property="og:title" content="{{ _('Spark powered by Firefox for mobile') }}">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://spark.mozilla.org/">
|
||||||
|
|
||||||
|
<meta property="og:image" content="https://demos.mozilla.org/media/img/facebook_like_500x312.png">
|
||||||
|
<meta property="og:site_name" content="{{ _('Spark powered by Firefox for mobile') }}">
|
||||||
|
<meta property="og:description"
|
||||||
|
content="Want to see what the Web is really capable of? Explore the Web o' Wonder demo gallery and prepare to be amazed!">
|
||||||
|
{% block site_css %}
|
||||||
|
{{ css('mobile') }}
|
||||||
|
{% endblock %}
|
||||||
|
<!--[if lte IE 7]>
|
||||||
|
<link rel="stylesheet" href="{{ MEDIA_URL }}css/ie6-7.css">
|
||||||
|
<![endif]-->
|
||||||
|
<!--[if IE 6]>
|
||||||
|
{{ js('pngfix') }}
|
||||||
|
<script>
|
||||||
|
DD_belatedPNG.fix('.png');
|
||||||
|
</script>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
{% if LANG != 'en-US' %}
|
||||||
|
<style>
|
||||||
|
{# L10n: DO NOT LOCALIZE! You can use this string to put custom CSS rules to fix any design issues. https://developer.mozilla.org/en/css #}
|
||||||
|
{% if _('custom-css') and _('custom-css') != 'custom-css' %}
|
||||||
|
{{ _('custom-css') }}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
{% endif %}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="wrapper">
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if not debug %}
|
||||||
|
{% include "includes/webtrends.html" %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
|
||||||
|
{{ js('mobile') }}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,11 +1,46 @@
|
||||||
|
{% extends 'eol/mobile/base.html' %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<header id="home-header">
|
||||||
|
<h1>
|
||||||
|
<span class="first-line">
|
||||||
|
{# L10n: This is part of the headline: "Spark powered by Firefox for mobile" #}
|
||||||
|
{{ _('Spark') }}
|
||||||
|
</span>
|
||||||
|
<span class="second-line">
|
||||||
|
<img src="{{ MEDIA_URL }}img/line.png" alt="">
|
||||||
|
{# L10n: This is part of the headline: "Spark powered by Firefox for mobile" #}
|
||||||
|
{{ _('powered by') }}
|
||||||
|
<img src="{{ MEDIA_URL }}img/line.png" alt="">
|
||||||
|
</span>
|
||||||
|
<span class="third-line">
|
||||||
|
{# L10n: This is part of the headline: "Spark powered by Firefox for mobile" #}
|
||||||
|
{{ _('Firefox for mobile') }}
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<img id="home-illu" src="{{ MEDIA_URL }}img/mobile/phone.png" alt="">
|
||||||
|
<section id="main-copy">
|
||||||
|
<h1>
|
||||||
|
<span class="big-text">{{ _('Spark is now over') }}</span>
|
||||||
|
<span class="small-text"></span>{{ _('Thanks to all participants!') }}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
{% trans %}
|
||||||
|
Spark was created to celebrate the release of Firefox for Android and encouraged sharing the browser with friends across the globe.
|
||||||
|
Together we helped the flame of the mobile Web glow bright. See how well everyone has performed!
|
||||||
|
{% endtrans %}
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<a href="{{ url('eol.sharing') }}" class="button">{{ _('See the complete <em>Game Results</em>') }}</a>
|
||||||
|
|
||||||
{{ _('<em>Sharing</em> <span>the</span> Spark') }}
|
{{ _('<em>Sharing</em> <span>the</span> Spark') }}
|
||||||
{{ _('<em>Around</em> <span>the</span> Globe') }}
|
{{ _('<em>Around</em> <span>the</span> Globe') }}
|
||||||
{{ _('<em>Hall</em> <span>of</span> Fame') }}
|
{{ _('<em>Hall</em> <span>of</span> Fame') }}
|
||||||
|
|
||||||
{{ _('Spark is now over') }}
|
|
||||||
{{ _('Thanks to all participants!') }}
|
|
||||||
|
|
||||||
{{ _('Share This Page') }}
|
{{ _('Share This Page') }}
|
||||||
|
|
||||||
{# L10n: Navigation link to homepage #}
|
{# L10n: Navigation link to homepage #}
|
||||||
|
|
@ -20,4 +55,6 @@
|
||||||
{# L10n: Navigation link to top of the page #}
|
{# L10n: Navigation link to top of the page #}
|
||||||
{{ _('Back to top') }}
|
{{ _('Back to top') }}
|
||||||
|
|
||||||
{{ _('<em>Get firefox</em> for mobile') }}
|
{{ _('<em>Get firefox</em> for mobile') }}
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<footer>
|
||||||
|
<span>
|
||||||
|
{# L10n: Placed above Twitter and Facebook sharing buttons. #}
|
||||||
|
{{ _('Share This') }}
|
||||||
|
</span>
|
||||||
|
<a class="twitter-icon" href="http://twitter.com/share?url=https//spark.mozilla.org&text=message&via=mozmobile"></a>
|
||||||
|
<a class="facebook-icon" href="http://www.facebook.com/share.php?u=https://spark.mozilla.org/"></a>
|
||||||
|
</footer>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{% extends 'eol/mobile/base.html' %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
{% include "eol/mobile/includes/header.html" %}
|
||||||
|
|
||||||
|
{% include 'eol/mobile/includes/nav.html' %}
|
||||||
|
{% block pagecontent %}{% endblock %}
|
||||||
|
{% include 'eol/mobile/includes/nav.html' %}
|
||||||
|
|
||||||
|
{% include "eol/mobile/includes/footer.html" %}
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{% extends 'eol/mobile/page.html' %}
|
||||||
|
|
||||||
|
{% block pagecontent %}
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -11,6 +11,7 @@ urlpatterns = patterns('',
|
||||||
|
|
||||||
url(r'^m/$', redirect_to, {'url': 'eol.home_mobile'}),
|
url(r'^m/$', redirect_to, {'url': 'eol.home_mobile'}),
|
||||||
url(r'^m/home$', views.home_mobile, name='eol.home_mobile'),
|
url(r'^m/home$', views.home_mobile, name='eol.home_mobile'),
|
||||||
url(r'^m/spark$', views.spark_mobile, name='eol.spark_mobile'),
|
url(r'^m/sharing-the-spark$', views.spark_sharing, name='eol.sharing'),
|
||||||
url(r'^m/firefox$', views.firefox_mobile, name='eol.firefox_mobile'),
|
url(r'^m/around-the-globe$', views.spark_around, name='eol.around'),
|
||||||
|
url(r'^m/hall-of-fame$', views.spark_hall, name='eol.hall'),
|
||||||
)
|
)
|
||||||
|
|
@ -17,9 +17,11 @@ def home_mobile(request):
|
||||||
return jingo.render(request, 'eol/mobile/home.html')
|
return jingo.render(request, 'eol/mobile/home.html')
|
||||||
|
|
||||||
|
|
||||||
def spark_mobile(request):
|
def spark_sharing(request):
|
||||||
return jingo.render(request, 'eol/mobile/spark.html')
|
return jingo.render(request, 'eol/mobile/sharing.html')
|
||||||
|
|
||||||
|
def spark_around(request):
|
||||||
def firefox_mobile(request):
|
return jingo.render(request, 'eol/mobile/around.html')
|
||||||
return jingo.render(request, 'eol/mobile/firefox.html')
|
|
||||||
|
def spark_hall(request):
|
||||||
|
return jingo.render(request, 'eol/mobile/hall.html')
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
html, body {
|
||||||
|
background:#302f2e;
|
||||||
|
color:#ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrapper {
|
||||||
|
max-width:400px;
|
||||||
|
margin:0 auto;
|
||||||
|
padding:0 15px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
#home-header h1 {
|
||||||
|
font-family:'LG', 'Arial Narrow', sans-serif;
|
||||||
|
color:#ddd;
|
||||||
|
text-transform:uppercase;
|
||||||
|
text-align:center;
|
||||||
|
padding:30px 0;
|
||||||
|
position:relative;
|
||||||
|
z-index:10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-header h1 .first-line {
|
||||||
|
font-size:80px;
|
||||||
|
line-height:80%;
|
||||||
|
color:#f7e35f;
|
||||||
|
text-shadow:2px -1px 0px #302f2e, 3px -3px 0px #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-header h1 .second-line {
|
||||||
|
font-family:'Georgia', 'Times New Roman', serif;
|
||||||
|
font-style:italic;
|
||||||
|
text-transform:none;
|
||||||
|
font-size:16px;
|
||||||
|
display:block;
|
||||||
|
line-height:40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-header h1 .second-line img {
|
||||||
|
padding:0 10px;
|
||||||
|
position:relative;
|
||||||
|
top:-4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-header h1 .third-line {
|
||||||
|
font-size:40px;
|
||||||
|
line-height:120%;
|
||||||
|
text-shadow:2px -1px 0px #302f2e, 3px -3px 0px #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-illu {
|
||||||
|
margin:-250px auto 0;
|
||||||
|
display:block;
|
||||||
|
position:relative;
|
||||||
|
z-index:0;
|
||||||
|
width:300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-copy {
|
||||||
|
color:#bbb;
|
||||||
|
font-family:'Museo500', 'Trebuchet MS', sans-serif;
|
||||||
|
font-size:14px;
|
||||||
|
margin-top:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-copy h1 {
|
||||||
|
color:#ddd;
|
||||||
|
margin-bottom:15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-copy h1 .big-text {
|
||||||
|
font-family:'LG', 'Arial Narrow', sans-serif;
|
||||||
|
font-size:30px;
|
||||||
|
display:block;
|
||||||
|
text-transform:uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-copy p {
|
||||||
|
line-height:133%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.button {
|
||||||
|
color:#302f2e;
|
||||||
|
text-decoration:none;
|
||||||
|
padding:10px;
|
||||||
|
border-radius:4px;
|
||||||
|
display:block;
|
||||||
|
max-width:380px;
|
||||||
|
background:-moz-linear-gradient(90deg, #f7e35e, #ffed6e);
|
||||||
|
background:-webkit-gradient(linear, center bottom, center top, from(#f7e35e), to(#ffed6e));
|
||||||
|
box-shadow:0px 4px 0px #ad9d35, 0px 2px 8px rgba(0,0,0,0.6);
|
||||||
|
-webkit-box-shadow:0px 4px 0px #ad9d35, 0px 2px 8px rgba(0,0,0,0.6);
|
||||||
|
-o-box-shadow:0px 4px 0px #ad9d35, 0px 2px 8px rgba(0,0,0,0.6);
|
||||||
|
font-family:'Georgia', 'Times New Roman', serif;
|
||||||
|
font-size:12px;
|
||||||
|
font-style:italic;
|
||||||
|
text-align:center;
|
||||||
|
margin:20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.button em {
|
||||||
|
font-family:'LG', 'Arial Narrow', sans-serif;
|
||||||
|
font-size:30px;
|
||||||
|
font-style:normal;
|
||||||
|
text-transform:uppercase;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 16 KiB |
10
settings.py
10
settings.py
|
|
@ -163,7 +163,13 @@ MINIFY_BUNDLES = {
|
||||||
'css/states.css',
|
'css/states.css',
|
||||||
),
|
),
|
||||||
'mobile': (
|
'mobile': (
|
||||||
'css/mobile.css',
|
'css/reset.css',
|
||||||
|
'css/fonts.css',
|
||||||
|
'css/mobile/base.css',
|
||||||
|
'css/mobile/home.css',
|
||||||
|
'css/mobile/sharing.css',
|
||||||
|
'css/mobile/around.css',
|
||||||
|
'css/mobile/hall.css',
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
'js': {
|
'js': {
|
||||||
|
|
@ -177,6 +183,8 @@ MINIFY_BUNDLES = {
|
||||||
'js/desktop/popups.js',
|
'js/desktop/popups.js',
|
||||||
'js/desktop/main.js',
|
'js/desktop/main.js',
|
||||||
),
|
),
|
||||||
|
'mobile': (
|
||||||
|
),
|
||||||
'pngfix': (
|
'pngfix': (
|
||||||
'js/libs/DD_belatedPNG_0.0.8a.min.js',
|
'js/libs/DD_belatedPNG_0.0.8a.min.js',
|
||||||
),
|
),
|
||||||
|
|
|
||||||
Загрузка…
Ссылка в новой задаче