Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added print styles, misc code tidying

  • Loading branch information...
commit 6baca2751e570a222261700e241bc10287e614db 1 parent 334bd91
@craigcook craigcook authored
View
5 apps/foundation/templates/foundation/annualreport/2011.html
@@ -8,6 +8,7 @@
{% block extrahead %}
{{ css('annual_2011') }}
+ <link rel="stylesheet" media="print" href="{{ MEDIA_URL }}css/foundation/annual2011print.css">
{% endblock %}
{% block js %}
@@ -897,8 +898,8 @@ <h2 class="section-title">{{ _('Sustainability and Partnerships') }}</h2>
<section class="sus-links">
<ul>
<li><a class="sus-faq" href="{{ url('foundation.annualreport.2011faq') }}">{{ _('FAQ') }}</a></li>
- <li><a class="sus-fin" href="#">{{ _('2011 Audited Financial Statement') }} <small>{{ _('Download PDF') }}</small></a></li>
- <li><a class="sus-990" href="#">{{ _('2011 Form 990') }} <small>{{ _('Download PDF') }}</small></a></li>
+ <li><a class="sus-fin" href="#" hreflang="en-US">{{ _('2011 Audited Financial Statement') }} <small>{{ _('Download PDF') }}</small></a></li>
+ <li><a class="sus-990" href="#" hreflang="en-US">{{ _('2011 Form 990') }} <small>{{ _('Download PDF') }}</small></a></li>
</ul>
</section>
View
91 media/css/foundation/annual2011.less
@@ -153,7 +153,7 @@ body.noscroll {
text-shadow: 0 1px 1px rgba(0,0,0,.95);
video {
width: 640px;
- max-width: 90%;
+ max-width: 96%;
height: auto;
display: block;
margin: 90px auto 20px;
@@ -662,7 +662,7 @@ body.noscroll {
margin-top: .15em;
}
}
- h4,
+ h4,
h5 {
font-style: normal;
text-shadow: none;
@@ -798,16 +798,16 @@ body.noscroll {
#page-nav.fixed {
width: 740px;
}
-
+
#main-content {
width: 700px;
}
-
+
.left,
.right {
width: 340px;
}
-
+
.mob-fxandroid {
h4 {
font-size: 32px;
@@ -823,40 +823,40 @@ body.noscroll {
margin: 0;
width: auto;
}
-
+
.mob-standards .pull {
font-size: 26px;
min-height: 160px;
}
-
+
.act-donottrack img {
padding: 130px 37.5px 96px;
}
-
+
.act-flicks img {
padding: 40px 70px 19px;
}
-
+
.com-intro .pull {
height: 340px;
h3 {
font-size: 38px;
}
}
-
+
.com-mozcamps {
.left img {
width: 233px;
- }
+ }
.left .video-play img {
width: 340px;
}
}
-
+
.jcarousel-clip {
width: 660px;
}
-
+
#story-slider,
#story-slider-clone {
.vcard {
@@ -874,23 +874,23 @@ body.noscroll {
#wrapper {
width: 320px;
}
-
+
#main-content {
width: 280px;
}
-
+
#masthead h1 {
font-size: 32px;
letter-spacing: -1px;
}
-
+
#page-nav {
padding: 20px 12px 25px 0;
li {
float: none;
}
}
-
+
#page-nav.fixed {
width: 308px;
top: -13em;
@@ -899,36 +899,36 @@ body.noscroll {
float: none;
}
}
-
+
#page-nav.fixed ul:after {
position: absolute;
top: 100%;
left: 50%;
- border: solid transparent;
- content: " ";
- height: 0;
+ border: solid transparent;
+ content: " ";
+ height: 0;
width: 0;
- border-top-color: @mozred;
+ border-top-color: @mozred;
border-width: 10px;
margin-left: -10px;
}
-
+
#page-nav.fixed.welcome ul:after { border-top-color: @mozred; }
#page-nav.fixed.mobilized ul:after { border-top-color: @blue; }
#page-nav.fixed.action ul:after { border-top-color: #000; }
#page-nav.fixed.community ul:after { border-top-color: @orange; }
#page-nav.fixed.sustainability ul:after { border-top-color: @red; }
-
+
.left,
.right {
float: none;
width: 280px;
}
-
+
.overlay-wrap .read {
display: none;
}
-
+
.js .overlay {
position: static;
left: auto;
@@ -946,7 +946,7 @@ body.noscroll {
color: @linkBlueHover;
}
}
-
+
#welcome .video {
margin-left: 0;
}
@@ -961,20 +961,20 @@ body.noscroll {
#topic-firefox img {
margin-top: -86px;
}
-
+
#topic-firefoxos img {
margin-top: -100px;
}
-
+
#topic-webmaker img {
margin-top: -90px;
}
}
-
+
.mob-fxandroid h4 {
display: none;
}
-
+
.mob-firefoxos .pull,
.mob-fxdesktop .pull,
.mob-webmaker .pull,
@@ -997,15 +997,15 @@ body.noscroll {
background: transparent none;
}
}
-
+
#action .act-sopa .overlay h4 {
color: inherit;
}
-
+
.act-flicks img {
padding: 20px 40px;
}
-
+
.com-intro .pull {
height: auto;
width: auto;
@@ -1022,11 +1022,11 @@ body.noscroll {
display: none;
}
}
-
+
.js .com-reps .overlay {
margin-top: 20px;
}
-
+
.com-reps .rep {
float: none;
margin: 20px 0;
@@ -1057,12 +1057,12 @@ body.noscroll {
}
a.sus-fin:before,
a.sus-990:before {
- display: none;
+ display: none;
}
}
-
+
#story-slider {
- margin-top: 20px;
+ margin-top: 20px;
.vcard {
width: 280px;
min-height: 158px;
@@ -1080,11 +1080,11 @@ body.noscroll {
#wrapper {
width: 420px;
}
-
+
#main-content {
width: 380px;
}
-
+
.left,
.right {
float: none;
@@ -1099,7 +1099,7 @@ body.noscroll {
.mob-topics {
font-size: 18px;
}
-
+
.mob-firefoxos .pull,
.mob-fxdesktop .pull,
.mob-webmaker .pull,
@@ -1112,9 +1112,9 @@ body.noscroll {
.act-flicks img {
padding: 20px 90px;
}
-
+
#story-slider {
- margin-top: 20px;
+ margin-top: 20px;
.vcard {
width: 170px;
float: left;
@@ -1124,4 +1124,5 @@ body.noscroll {
}
}
-}
+}
+
View
218 media/css/foundation/annual2011print.css
@@ -0,0 +1,218 @@
+/* Print styles for the 2011 State of Mozilla annual report */
+
+/* Fonts */
+@font-face {
+ font-family: 'Open Sans Light';
+ src: url('/media/fonts/OpenSans-Light-webfont.eot');
+ src: url('/media/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
+ url('/media/fonts/OpenSans-Light-webfont.woff') format('woff'),
+ url('/media/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
+ url('/media/fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Open Sans Light';
+ src: url('/media/fonts/OpenSans-LightItalic-webfont.eot');
+ src: url('/media/fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
+ url('/media/fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
+ url('/media/fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
+ url('/media/fonts/OpenSans-LightItalic-webfont.svg#OpenSansRegular') format('svg');
+ font-weight: normal;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: 'Open Sans';
+ src: url('/media/fonts/OpenSans-Regular-webfont.eot');
+ src: url('/media/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+ url('/media/fonts/OpenSans-Regular-webfont.woff') format('woff'),
+ url('/media/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
+ url('/media/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Open Sans';
+ src: url('/media/fonts/OpenSans-Semibold-webfont.eot');
+ src: url('/media/fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
+ url('/media/fonts/OpenSans-Semibold-webfont.woff') format('woff'),
+ url('/media/fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
+ url('/media/fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
+ font-weight: bold;
+ font-style: normal;
+}
+
+
+/* Hidden elements */
+#page-nav,
+#tabzilla,
+.read,
+#done,
+.btn-prev,
+.btn-next,
+.mob-fxandroid h4,
+.mob-webmakervideo,
+.act-kovacsted,
+#video-stage,
+.video-play,
+.com-reps .rep,
+.com-mozcamps .overlay-wrap img,
+.com-emerging .meet,
+.sus-links,
+#colophon .footer-nav,
+#colophon .footer-license p+p {
+ display: none;
+}
+
+
+/* General styles */
+body {
+ font: 10pt/1.4 'Open Sans', sans-serif;
+}
+
+figure, aside, blockquote {
+ margin: 0 0 1.5em;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+}
+
+a:link, a:visited {
+ color: inherit;
+ text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-style: italic;
+ font-family: 'Open Sans Light', sans-serif;
+ margin: 0 0 .25em;
+ text-shadow: none;
+}
+
+.section-title {
+ font-size: 20pt;
+ padding: .5em 0 0;
+ border-top: 2px solid;
+}
+
+.section,
+.row {
+ clear: both;
+}
+
+.section:after,
+.row:after {
+ content: "";
+ display: block;
+ clear: both;
+ height: 0;
+ visibility: hidden;
+}
+
+.pull {
+ width: 22%;
+ float: right;
+ clear: right;
+ margin: 0 0 20px 20px;
+ padding: 20px;
+ border: 3px double #ccc;
+ color: #666;
+ background: #eee;
+ font-size: 13pt;
+ font-style: italic;
+ font-family: 'Open Sans Light', sans-serif;
+ text-align: center;
+}
+
+/* Masthead */
+#masthead {
+ padding-bottom: 20px;
+ border-bottom: 1px solid;
+ margin: 0 !important;
+}
+
+#masthead h1 {
+ font-size: 24pt;
+ font-style: normal;
+}
+
+/* Mobilized topics */
+.mob-topics {
+ width: 30%;
+ float: right;
+ margin: 0 0 20px 20px;
+ padding: 20px 10px;
+ border: 3px double #ccc;
+ background: #eee;
+}
+
+.mob-topics li {
+ font-size: 1em;
+ display: inline-block;
+ width: 28%;
+ margin: 0 1%;
+ text-align: center;
+}
+
+.mob-topics li img {
+ display: block;
+ margin: 0 auto 10px;
+}
+
+.mob-fxandroid .overlay {
+ float: left;
+ width: 65%;
+}
+
+.mob-fxandroid img.left {
+ float: right;
+ width: 30%;
+ margin: 0 0 20px 0;
+}
+
+.act-donottrack img,
+.act-sopa img,
+.act-collusion img,
+.act-flicks img,
+.com-reps img,
+.com-mozcamps .video img,
+.com-emerging img {
+ max-width: 25%;
+ float: right;
+ clear: right;
+ margin: 0 0 20px 20px;
+}
+
+.jcarousel-list {
+ margin-top: 1em;
+ width: 100% !important;
+ overflow: visible !important;
+}
+
+#story-slider .vcard,
+#story-slider-clone .vcard {
+ width: 280px !important;
+ float: left;
+ display: block;
+ margin: 0 20px 20px;
+}
+
+#story-slider .vcard:nth-child(odd),
+#story-slider-clone .vcard:nth-child(odd) {
+ clear: left;
+}
+
+#colophon {
+ border-top: 1px solid;
+ padding-top: 30px;
+}
+
+#colophon .footer-logo {
+ float: left;
+ margin: 0 20px 10px 0;
+}
View
BIN  media/img/foundation/annualreport/2011/contributors/haitham-poster.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
17 media/js/annual2011.js
@@ -3,6 +3,10 @@
var $window = $(window);
var $sliderPrime = $("#story-slider");
var wideMode = false;
+ var $nav = $('#page-nav');
+ var $head = $('#masthead');
+ var navTop = $nav.offset();
+ var navHeight = $nav.height() + 30;
setupThumbnails();
@@ -21,6 +25,7 @@
});
function doneResizing() {
+ navHeight = $nav.height() + 30;
if ($window.width() >= 768) {
wideMode = true;
if ( $("#story-slider-clone").length === 0 ) {
@@ -80,10 +85,6 @@
// Sticky navigation
- var $nav = $('#page-nav');
- var $head = $('#masthead');
- var navTop = $nav.offset();
- var navHeight = $nav.height() + 30;
var fixed = false;
var didScroll = false;
@@ -223,6 +224,7 @@
scrollTop: $(elem).offset().top - 35
}, 1000, function() {
$(elem).attr('tabindex','100').focus().removeAttr('tabindex');
+ if (!wideMode) { $nav.removeAttr("style"); }
});
});
@@ -358,15 +360,16 @@
}, 200, function() {
$("#story-vid").focus();
});
- } else {
+ } else if (!wideMode) {
+ e.preventDefault();
if ($("#fill").length > 0) {
$("#video")[0].pause();
$("#fill").remove();
}
- $('body').addClass("noscroll").append('<div id="fill"><div id="inner"><video id="video" poster="'+poster+'" controls autoplay></video></div></div>');
+ $('body').addClass("noscroll").append('<div id="fill"><div id="inner"><video id="video" poster="'+poster+'" controls></video></div></div>');
$("#video").append(
'<source src="'+video+'" type="video/webm">'
- ).focus();
+ ).focus()[0].play();
$("#inner").append('<p class="desc">'+desc+'</p>');
closeModal();
}
Please sign in to comment.
Something went wrong with that request. Please try again.